Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts

    Help With Javascript Library

    Hi im in the middle of creating my own javascript library but got stuck I can do everything for this library I just got stuck on how to make it flow through a list of strings like jQuery does.

    For example jQuery allows you to write a string like this:
    $('li').add('p').css('background-color', 'red');

    Which they can select all li tags add a p tag inside then change the background color of that tag, What im asking is how can I go about doing this where I can create a similar system which allows me to flow through my class functions.

    Right now its a very small code because I started again to allow better overview of where things are but this is it so far.

    This allows the use of both SDK and $ at the start of the function for example.
    $.Display({'file':'index.php','id':'divid'});
    And
    SDK.Display({'file':'index.php','id':'divid'});

    Code:
    (function(window)
    {
    var $ = {
      Display: function(info)
      {
        this.call(info.file,info.id,'file='+info.file);
      },
      call: function(file,id,parameters)
      {
        if (window.XMLHttpRequest)
        {
          xmlhttp=new XMLHttpRequest();
        }
        else
        {
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
            document.getElementById(id).innerHTML=xmlhttp.responseText;
          }
        }
        xmlhttp.open("POST",file,true)
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        xmlhttp.send(parameters)
      },
      Flash: function(params)
      {
        if(params.file){alert(params.file);}
        if(params.id){alert(params.id);}    
      }
    };
    
    // Expose SDK to the global object
    window.SDK = window.$ = $;
    
    })(window);
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,437
    Thanks
    13
    Thanked 360 Times in 356 Posts
    wouldn’t it be easier to use jQuery and only write some additional plugins?
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #3
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    No as my library is specific to my site I have contacted John Resig the founder of jQuery as well as posting on here I just want to know how I can create a library which flows where you can call more than one function in the same string like with jQuery you can have this in a string fadeOut('slow').load('file.html').fadeIn('fast'); which consists of more than one library function as in flowing through.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #4
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,437
    Thanks
    13
    Thanked 360 Times in 356 Posts
    Quote Originally Posted by DJCMBear View Post
    I just want to know how I can create a library which flows where you can call more than one function in the same string like with jQuery you can have this in a string fadeOut('slow').load('file.html').fadeIn('fast'); which consists of more than one library function as in flowing through.
    that’s pretty easy. it’s called "chaining" and all you need to do is returning the current instance, i.e. return this; (you could also return the Object by name, if it is already defined)
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #5
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    so like jQuery I need a function inside the current function which states return new SDK()?
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #6
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,437
    Thanks
    13
    Thanked 360 Times in 356 Posts
    Code:
    return $;
    // or
    return this;
    there is no need to create a new instance (which would contradict your initialization)
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #7
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    isn't that what this does?
    Code:
    // Expose SDK to the global object
    window.SDK = window.$ = $;
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #8
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,437
    Thanks
    13
    Thanked 360 Times in 356 Posts
    we must be talking of something different.

    if you want to do chaining, every function that is capable of chaining must return the current object’s instance.

    little example:
    PHP Code:
    var = {
        
    a: function() { alert(1); return this; },
        
    b: function() { alert(2); return this; },
        
    c: function() { alert(3); return this; }
    };

    x.a().c().b(); 
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #9
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    So a little like this?
    Code:
    (function(window)
    {
      var SDK = {
        Display: function(info)
        {
          this.call(info.file,info.id,'file='+info.file);
          return this;
        },
        call: function(file,id,parameters)
        {
          if (window.XMLHttpRequest)
          {
            xmlhttp=new XMLHttpRequest();
          }
          else
          {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange=function()
          {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
              document.getElementById(id).innerHTML=xmlhttp.responseText;
            }
          }
          xmlhttp.open("POST",file,true)
          xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
          xmlhttp.send(parameters)
          return this;
        },
        Flash: function(params)
        {
          if(params.file){alert(params.file);}
          if(params.id){alert(params.id);}   
          return this; 
        }
      };
    
      // Expose SDK to the global object
      window.SDK = window.$ = SDK;
    })(window);
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #10
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,437
    Thanks
    13
    Thanked 360 Times in 356 Posts
    looks promising.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • Users who have thanked Dormilich for this post:

    DJCMBear (07-20-2010)

  • #11
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Yes it's working now Thank you =)
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P


  •  

    Posting Permissions

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