AD

Js framework of their own

Imitation jquery, write their own framework, but is the css selector jquery selector is not functioning, this feels a bit difficult, after all, regular expressions, in writing your own framework, but also to understand what's jquery works better for development

/*
* thd-simple.js
* begin : 2010-11-12
* author : ThirdteenDevil
* e-mail : [email protected]**
* qq : 181907667
*/

(function(){
        var _T = function(obj){

                //  Native  DOM element
                this.el = null;

                //ThirdteenDevil  Object tag  
                this.constructor = "ThirdteenDevil";

                //  If the object is returned in the form parameters ThirdteenDevil  
                if(obj.constructor == "ThirdteenDevil"){
                        return obj;
                }
                
                
                if(typeof(obj) == "string"){
                        if(document.getElementById(obj)){
                                this.el = document.getElementById(obj);
                        }
                }else{
                        this.el = obj;
                }
        }

        window.t = window.ThirdteenDevil = function(obj){return new _T(obj)}

        _T.prototype = {
                
                /*
                *  Callback method for handling all  function  Types of parameters  
                *@param obj   Any type  
                *@return   If  @param obj Is a function of type of object, it returns the return value of this function  ,  If other types are returned directly  @param obj
                */
                _preFormCallBack : function(obj){
                        var _this = this;
                        var ret = obj;
                        if(typeof(obj) == "function"){
                                ret = obj.call(_this.el,_this.el);
                        }
                        return ret;
                },
                
                /*
                *  If it is invoked with no arguments   .html()
                *@return   InnerHTML property of the object  
                *---------------------------------------
                *  If it is  .html(str)
                *@param str   InnerHTML to set the value of the object  
                *@return this   Call for the chain  
                */              
                html : function(v){
                        if(v == undefined){
                                return this.el.innerHTML;
                        }else{
                                var v = this._preFormCallBack(v);
                                this.el.innerHTML = v;
                                return this;
                        }
                },              
                
                /*
                *  If it is a parameter called   .attr(str)
                *@param str DOM element  Property name  
                *@return Dom element  Named  @param str  Value of the property  
                *----------------------------------------
                *  If the two parameters   .attr(str,v)
                *@param str DOM element  Property name  
                *@param v Dom element @param str   Value of the property  
                *@return this   Call for the chain  
                */
                attr : function(){
                        if(arguments.length == 1){
                                return this.el.getAttribute(arguments[0]);
                        }
                        if(arguments.length == 2){
                                this.el.setAttribute(arguments[0],arguments[1]);
                                return this;
                        }
                },
                
                /*
                *  Remove the DOM element properties  
                *@param str DOM element  Attribute name  
                *@return this   Call for the chain  
                */
                removeAttr : function(str){
                        this.el.removeAttribute(str);
                        return this;
                },

                /*
                *  If it is invoked with no arguments   .css()
                *@return DOM element   All css properties  
                *-----------------------------------------
                *  If it is  .css(str)
                *@param str css  Property name can  .css()  Methods to query  
                *@return   Css properties for the corresponding parameters  
                *----------------------------------------
                *  If it is  .css(str,value)
                *@param str css  Property name can  .css()  Methods to query  
                *@value   Set  @param str  Value  @value
                *@return this   Call for the chain  
                */
                css : function(){
                        var CurrentStyle = function(element){return element.currentStyle || document.defaultView.getComputedStyle(element, null);}
                        if( (arguments.length < 1) || (arguments.length > 2) ){
                                if(arguments.length == 0){
                                        var cssAttrMap = [];
                                        for(var pro in CurrentStyle(this.el)){
                                                cssAttrMap.push([pro,CurrentStyle(this.el)[pro]]);
                                        }
                                        return cssAttrMap;
                                }else{
                                        throw new Error("css function arguments must be between 1 and 2 ! ");
                                }
                        }else{
                                if(arguments.length == 1){
                                        return CurrentStyle(this.el)[arguments[0]];
                                }else{
                                        this.el.style[arguments[0]] = this._preFormCallBack(arguments[1]);
                                        return this;
                                }
                        }
                },
                                
                /*
                *  If it is invoked with no arguments   .hasClass()
                *@return className  Property values   
                *-----------------------------------
                *  If it is  .hasClass(v)
                *@param v className,
                *@return   Determine whether the DOM element containing the name  @param v  The className attribute  
                */              
                hasClass : function(v){
                        if(v == undefined){
                                return this.el.className;
                        }else{
                                if(this.el.className != undefined){
                                        var classStr = " " + this.el.className + " ";
                                        var rep = new RegExp(" " +v+ " ","gi");
                                        return rep.test(classStr);
                                }else{
                                        return false;
                                }
                        }
                },
                
                /*
                *  For the DOM element to add  className  Property values  
                *@param v   ClassName attribute value to be added  
                *@return this  Call for the chain  
                */
                addClass : function(str){
                        var v = this._preFormCallBack(str);
                        if(this.hasClass(v)){
                                return this;
                        }else{
                                if(this.el.className){
                                        this.el.className += (" "+v);
                                        return ;
                                }else{
                                        this.el.className = v;
                                }
                        }
                },
                
                /*
                *  To Dom element removed  className  Property values  
                *@param v   ClassName attribute value to be deleted  
                *@return this  Call for the chain  
                */
                removeClass : function(v){
                        if(this.hasClass(v)){
                                var classStr = " " + this.el.className + " ";                           
                                var rep = new RegExp(" " + v + " ","gi");
                                this.el.className = classStr.replace(rep," ");
                        }else{
                                return this;
                        }
                },

                /*
                *  For the DOM element to add  /  Remove a className attribute value  ,  There are deleted, without the added  
                *@param str className  The property value can also be a callback function that returns  className  Property values  
                *@return this   Call for the chain  
                */
                toggleClass : function(str){
                        var v = this._preFormCallBack(str);
                        if(this.hasClass(v)){
                                this.removeClass(v);
                        }else{
                                this.addClass(v);
                        }
                        return this;
                },
                
                /*
                *  If there is no argument call   .scrollTop()
                *@return DOM element scrollTop  Property values  
                *----------------------------------------------
                *  One argument   .scrollTop(x)
                *@param x DOM element scrollTop  Property values  
                *@return this   Call for the chain  
                */
                scrollTop : function(){
                        if(arguments.length == 1){
                                this.el.scrollTop = arguments[0];
                        }else{
                                return this.el.scrollTop;
                        }
                },

                /*
                *  If there is no argument call   .scrollLeft()
                *@return DOM element  The scrollLeft property values  
                *----------------------------------------------
                *  One argument   .scrollLeft(x)
                *@param x DOM element scrollLeft  Property values  
                *@return this   When the call for the filing  
                */
                scrollLeft : function(){
                        if(arguments.length == 1){
                                this.el.scrollLeft = arguments[0];
                        }else{
                                return this.el.scrollLeft;
                        }
                },
                
                /*
                *  Add an event for the DOM element  
                *@param act :   Event Name   click,mouseover,mouseout ....
                *@param cb : Function  Type of callback function  
                *@param pObj : json  Format parameters, the callback function to call  
                */
                on : function(act,cb,pObj){
                        var _this = this;
                        if(window.addEventListener){//FF ...
                                this.el.addEventListener(act,function(e){
                                        var e = e ? e : event;                                  
                                        //e.stopPropagation();//  Clear bubble  
                                        cb.call(_this.el,e,_this.el,pObj)},false);
                        }else if(window.attachEvent){//IE
                                this.el.attachEvent("on"+act,function(e){
                                var e = e ? e : event;
                                //window.event.cancelBubble = true;//  Clear bubble  
                                cb.call(_this.el,e,_this.el,pObj)});
                        }
                        return this;
                },
                
                /*
                *  Add to the DOM element  this.el  Object  
                *@param obj   Objects can be ThirdteenDevil     Id string can also be     Or the DOM element itself  
                *@return this   Call for the chain  
                */
                append : function(obj){
                        //  Convert the obj  ThirdteenDevil  Object operation  
                        this.el.appendChild(new _T(obj).el);
                },              

                /*
                *  Object is added to the this.el  DOM element  In 
                *@param obj   Objects can be ThirdteenDevil     Id string can also be     Or the DOM element itself  
                *@return this   Call for the chain  
                */
                appendTo : function(obj){
                        //  Convert the obj  ThirdteenDevil  Object operation  
                        new _T(obj).el.appendChild(this.el);
                },
                
                /*
                *getElementsByTagName  To achieve  
                *@param tag   Element tag name  
                *@return   Get child element tag is  @param tag  All child elements  (  Have been transferred into the array type  )
                */
                getElementsByTagName : function(tag){
                        var childs = this.el.getElementsByTagName(tag);
                        var childArray = []
                        for(var i = 0 , j = childs.length ; i < j ; i++){
                                childArray.push(childs[i]);
                        }
                        return childArray;
                },
                
                /*
                *  Get ThirdteenDevil in  el  Object sub-object has name attribute to the parameter collection of objects  
                *@param nameStr name  Value of the property  
                *@return ThirdteenDevil  El object in the sub-object has  name  Property is a collection of parameter objects  (  Has been transformed into an array  )
                */
                getElementsByName : function(nameStr){
                        var els = []
                        this.getElementsByTagName("*").each(function(o,i){
                                if(nameStr == new _T(o).attr("name")){
                                        els.push(o);
                                }
                        })
                        return els;
                },

                /*
                *  If it is invoked with no arguments   .data()
                *@return Dom Element  The data attribute  
                *----------------------------------
                *  If it is a parameter of type string   .data(str)
                *@param str data  Property name  
                *@return data  In @param str  Property values  
                *----------------------------------
                *  If the parameter is an object of type   .data(obj)
                *@param obj   Copy all the attributes knife obj  data  In 
                *@return this   Call for the chain  
                *----------------------------------
                *  If the two parameters   .data(str,obj)
                *@param str   Set the properties of data in the  
                *@param obj data  Named  @param str  Value  
                *@return this   Call for the chain  
                */
                data : function(){                      
                        if(this.el.getAttribute("data") == undefined){
                                this.el.setAttribute("data",{});
                        }
                        if(arguments.length == 1){
                                if(typeof(arguments[0]) == "string"){
                                        return this.el.getAttribute("data")[arguments[0]];
                                }else if(typeof(arguments[0]) == "object"){
                                        for(var pro in arguments[0]){
                                                this.el.getAttribute("data")[pro] = arguments[0][pro];
                                        }
                                        return this;
                                }
                        }
                        if(arguments.length == 2){
                                this.el.getAttribute("data")[arguments[0]] = arguments[1];
                                return this;
                        }
                        if(arguments.length == 0){
                                return this.el.getAttribute("data");
                        }
                }
        }//_T.prototype end

        
        /*
        *  Extended _T method  
        *
        *  If it is a parameter   .extend(obj)
        *@param obj   Good package will be extended set of attributes or methods  
        *------------------------------------------
        *  If the two parameters   .extend(str,v)
        *@param str   Extended attribute name  
        *@param v   Extended attribute name  @param str  Value or method  
        *
        *  If the custom properties and properties in the same name _T     Does not overwrite the original property  
        */
        ThirdteenDevil.extend = function(){
                if(arguments.length == 1){
                        for(var pro in arguments[0]){
                                _T.prototype[pro] = arguments[0][pro];
                        }
                }
                if(arguments.length == 2){
                        _T.prototype[arguments[0]] = arguments[1];
                }
        }


        //  Plugins  
        ThirdteenDevil.plugs = {};

        
})()

//  Array loop  
Array.prototype.each = function(cb){
        for(var i = 0 , j = this.length ; i < j ; i++){
                cb.call(this[i],this[i],i);
        }
}


//  Remove a value array  
Array.prototype.remove = function(obj){
        var r = null;
        for(var i = 0 , j = this.length ; i < j ; i++){
                if(obj == this[i]){
                        r = this.splice(i,1);
                        break;
                };
        }
        return r;
}

//  Be an element in the array index value in the array  
Array.prototype.index = function(obj){
        for(var i = 0 , j = this.length ; i < j ; i++){
                if(obj == this[i]){
                        return i;
                };
        }
}

//  String remove spaces before and after  
String.prototype.trim= function(){
    return this.replace(/(^\s*)|(\s*$)/g, "");  
}


An Extension:

t.extend("tt",function(){
        alert(this.el.value)
})

t("a").on("keyup",function(e,o){
        t(this).tt();
})




t.extend({
        t1: 1,
        t2: 2,
        id : "a",
        el : "1",//  Property will not be covered by the same  
        m1 : function(){
                alert(this.el)
                alert(this.el.id);
                alert(this.t1);
        }
})


t("b").on("click",function(e,o){
        t(this).m1();
        alert("t1 :" + t(this).t1)
})


Write plug-ins:

(function(t){

        t.plugs.ScrollDoor = function(obj){
                this.menus = obj.menus;
                this.contents = obj.contents;
                this.hoverClass = obj.hover;
                this.blurClass = obj.blur;
                this.focusClass = obj.focus;
                this.evt = "click" || obj.evt;
        }

        t.plugs.ScrollDoor.prototype = {
                _clear : function(){
                        var _this = this;
                        this.menus.each(function(m,i){
                                t(m).removeClass(_this.hoverClass);
                                t(m).removeClass(_this.focusClass);
                        })
                        if((this.contents != undefined) && (this.contents.length != 0)){
                                this.contents.each(function(m,i){
                                        t(m).css("display","none");
                                })
                        }
                },

                _hasContents : function(){
                        if((this.contents != undefined) && (this.contents.length != 0)){
                                return true;
                        }else{
                                return false;
                        }
                },
                
                focus : function(index){
                        this._clear();
                        t(this.menus[index]).addClass(this.focusClass);
                        if((this.contents[index] != undefined) && (this.contents.length != 0)){
                                t(this.contents[index]).css("display","block");
                        }
                },

                run : function(){
                        var _this = this;
                        this.menus.each(function(m,i){
                                t(m).on(_this.evt,function(e,o){
                                        _this.focus(i);
                                })
                        })
                },

                add : function(){
                        this.menus.push(arguments[0]);
                        if(this._hasContents()){
                                this.contents.push(arguments[1]);
                        }
                        this.run();
                        this.focus(this.menus.length - 1);
                }

                
        }
        
})(ThirdteenDevil)


var sd = new t.plugs.ScrollDoor({
        menus : ["m01","m02","m03"],
        contents : ["c01","c02","c03"],
        hover : "hover",
        focus : "focus",
        blur : "blur",
        evt : "click"
})

sd.run();
sd.add("m04","c04");


All documents are in the Annex, detailed examples see Annex
标签: 163, prototype, regular expressions, e mail, element, getelementbyid, jquery, css selector
分类: Web
时间: 2010-11-17

相关文章

  1. Js framework introduction and comparison

    Currently, JS framework, as well as a number of development kits and libraries have the following categories, ...
  2. Subject: JS framework under predicted the trend of

    MooTools will in the next few years, became popular as quickly as jQuery JQuery will gradually disappear and Y ...
  3. JS framework comparison of eight

    The present situation, JS framework, and a number of development packages and libraries for a number of classe ...
  4. Introduction and eight JS framework comparison

    Introduction and eight JS framework comparison Dojo Dojo is the most powerful JS framework on its own Wiki gav ...
  5. Js Eclipse, plug-ins, and other mainstream support EXT.JQuery js framework.

    A relatively easy to use the Eclipse plug-in js, it prompts to support JQuery, Ext js and other mainstream fra ...
  6. JS framework out of iframe

    Tips TabPanel belonging in layoutOnTabChange: true, this is sure to add the layout of each tab with the fit. O ...
  7. JS framework to examine the

    Tankedaizhan had done a little game, thank you for warm response, but also found from the level of developer m ...
  8. js framework, Picture Viewer

    Read these online image viewer, such as the integration of two kinds: lightbox, chearbox Of course, there are ...
  9. JS framework of highly adaptive control iframe

    body"margin:0; padding:0; height:100%" scroll=no> <iframe name="infrm" marginwidth=& ...
  10. Introduce the framework of paragraph eight and comparison JS (transfer)

    Introduce the framework of paragraph eight and comparison JS (transfer) March 26, 2009 Thursday 05:41 PMDojo D ...
  11. Notes ----- JaveScript study the performance of the framework of a variety of Js

    A variety of js framework of the implementation of the speed of ie7. Ha ha, or the fastest prototype. Know why ...
  12. Why am I opposed to actual projects using similar technology framework ext of js

    To intensify the implementation of a recent project, the project team included myself, are new, the business i ...
  13. JS code management mechanism

    Issue With the AJAX pop, JS in web applications, increasing over time. Attendant on the JS code maintenance an ...
  14. JavaScript is an object-oriented MVC-based framework for the implementation of non-absolute [original] [add precision application]

    Author: Topcss QQ: 419074376 E-mail: andpai1.0 @ gmail.com Time :2009-03-08 Just look at JavaEye News Monthly ...
  15. Javascript array with the framework of the static class to basically achieve

    Javascript array with the framework of the static class to basically achieve This article is I always want to ...
  16. Description JQuery, Extjs, YUI, Prototype, Dojo and other JS frameworks and application of the difference between scenarios

    With the sturdy web2.0 development, and the browser by increasing the work load (in the not very compromising ...
  17. jQuery + Ajax + Struts2. js javascript

    (1) jQuery's basic usage: WEB2.0 and ideas with ajax the rapid development of Internet communication, one afte ...
  18. Lesktop open source control library JS

    A powerful WebOS I believe you told me a few days ago released WebOS should be very deep impression, in and us ...
  19. JQuery, Extjs, YUI, Prototype, Dojo, etc. JS frame difference and the scenarios outlined

    Source: http://www.173it.cn/Html/?4709.html 173IT Technology Network javascript has become the web development ...