SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    my javascript library

    Hi

    I want create my own javascript library for my projects
    whith some things like this :
    Ajax
    Validator
    Tree view
    tooltip
    drag/drop

    I can wrote them each one in a function
    but how can I create a dom for it that can extended or added some plugins or changing thems ?

    I dont know any things about objects and creating dom in javascript
    pelase help me

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS Libraries

    If you wrap your code in a self-calling anonymous function, you can then add only the objects you want to the global namespace.

    Obviously, to follow all that jargon you'll need an example:

    Code:
    (function(){
      // your code goes here
      // e.g.
      function alertUpper(msg) {
        alert(msg.toUpperCase());
      }
    
      // then add what you want to be public to your library
    
      // first check it exists
      if (!window['aLibrary']) {
        window['aLibrary'] = {}; // creates a blank object
      }
      // then add your property or method
      window['aLibrary']['alertUpper'] = alertUpper;
    })();
    The extra brackets at the end call the anonymous function which runs your code and adds your method to the aLibrary namespace.

    You can call your function:
    Code:
    aLibrary.alertUpper("Shouting!"); // alerts SHOUTING!
    from anywhere in later scripts.

  3. #3
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you

    where defined aLibrary class ?

    what is the meaning of first line ?
    Code:
    (function(){

    should I create my class like this :
    Code:
    myClassName.Validator(parameters);
    myClassName.StartDrag(parameters);
    myClassName.Drop(parameters);
    myClassName.tooltip(parameters);
    or should I create an object for eeach one ?

  4. #4
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want create somethings like YUI

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first line is the start of a function which has no name. Such functions are called anonymous functions.
    Normally you would give a function a name...
    Code:
    function myFunction() {}
    However, unless the function is inside another object, that adds the name 'myFunction' to the global namespace. If there is already a variable called 'myFunction' it will be overwritten.

    JavaScript has 'function scope'. That means variables declared inside a function are not added to the global scope but live only inside the function.

    Using an anonymous function to wrap your library functions prevents variables from being added to the global namespace where they could clash with previous variables of the same name.

    Code:
    (function(){
      // function details
    })();
    The above code defines and runs an anonymous function.

    Within the anonymous function it is possible to add variables to the global namespace if you want to. In a browser, the global namespace is actually the window object. Global variables you define are just added as properties of window.

    Code:
    (function(){
      window['myVar'] = "A global variable";
    })();
    The above code runs the anonymous function which adds a variable to the global namespace. myVar can be used as a variable in your code.

    To create a library
    Code:
    (function(){
      function fn1(arg1) {/*function code*/}
      function privateFn(arg2) {/*function code*/}
      function fn2(arg3,arg4) {/*function code*/}
    
      // add the public functions to a namespace
      window['aLibrary'] = {} // create the namespace (you called it a class)
      // add the functions
      window['aLibrary']['fn1'] = fn1;
      window['aLibrary']['fn2'] = fn2;
    })();

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    I create liraries like this, which you might prefer.

    Code javascript:
    var MyLibrary = {};
     
    MyLibrary.fn1 = function() {
    };
     
    MyLibrary.fn2 = function(parameter1, parameter2) {
    };

  7. #7
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Hi,

    I create liraries like this, which you might prefer.

    Code javascript:
    var MyLibrary = {};
     
    MyLibrary.fn1 = function() {
    };
     
    MyLibrary.fn2 = function(parameter1, parameter2) {
    };

    What do you think about this structure ?
    is it good ?

    now how should I split my functions ?
    All of my functions should be in one object ?

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    It makes sense logically to group functions within appropriate objects to keep them all contained.

    now how should I split my functions ?
    All of my functions should be in one object ?
    Keep an Ajax object doing Ajax type things,
    Keep and Effect object doing effect type things etc..


    encapsulation

  9. #9
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    It makes sense logically to group functions within appropriate objects to keep them all contained.
    You mean I use which one ?
    your style or r51`s style ?

  10. #10
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Either way, you can create sections for your library by 'chaining' objects.
    Code:
    (function(){
      function fn1() {}
      function fn2() {}
    
      window['aLibrary'] = {};
      window['aLibrary']['Ajax'] = {};
      window['aLibrary']['Ajax']['fn1'] = fn1;
      window['aLibrary']['Ajax']['fn2'] = fn2;
    })();
    You can now use aLibrary.Ajax.fn1() and aLibrary.Ajax.fn2().

  11. #11
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you so much

    and another question
    should I write all functions in one file ?
    or some files ?
    which one is better ?
    I need some category structure for templates and CSS files.

    What is th standard way ? (creating thems , file and category struct , number of files)

  12. #12
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It depends on how you're going to use your Library. If you're going to use most of your library's functionality on each project then one script file will be ok. However, if you are going to use different functions for different projects then you may want to split them up.
    You could have a file structure that mirrors your Library structure.
    aLibrary/Core.js
    aLibrary/Ajax/Ajax.js
    aLibrary/Effects/Effects.js

    But be careful. If a later imported script creates its own aLibrary object, it will overwrite any previous ones.
    In post #2 I gave an example of checking if the Library exists before adding to it.
    Code:
      // first check it exists
      if (!window['aLibrary']) {
        window['aLibrary'] = {}; // creates a blank object
      }
      // then add your property or method
      window['aLibrary']['alertUpper'] = alertUpper;
    That way, the library is only created if it hasn't been created by a previous script.

    To import your scripts you add script tags in the head section of the document.
    Code:
    <script src="aLibrary/Core.js" type="text/javascript"></script>
    <script src="aLibrary/Ajax/Ajax.js" type="text/javascript"></script>

  13. #13
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What can be content of core.js ?

  14. #14
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    core.js could contain your DOM helper functions like your own version of document.getElementById, maybe a getElementsByClassName, your cross-browser event listener functions and any other well-used utility functions.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •