码迷,mamicode.com
首页 > Web开发 > 详细

分析一个类似于jquery的小框架 (2)

时间:2016-08-23 01:13:39      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:

核心构造函数

(function ( window, undefined ) {
    

// 定义Itcast构造函数    
function Itcast ( selector ) {
    return new Itcast.fn.init( selector );
}
Itcast.fn = Itcast.prototype = {
    constructor: Itcast,
    
    type: ‘Itcast‘,
    
    length: 0,
    
    // 核心模块内容
    init: function ( selector ) {
        // 假设 这里 的 init 就是 jq 的init, 因此可以考虑各种参数
        
        // ‘‘, null, undefined
        if ( !selector ) {
            return this;
        }
        
        
        // str
        if ( typeof selector == ‘string‘ ) {
            // 这里可能是 html 的字符串, 也可能是 选择器
            if ( selector.charAt( 0 ) === ‘<‘ ) {
                // 是 html 字符串
                // 将字符串转换成 DOM 对象, 并加到 this 中
                [].push.apply( this, Itcast.parseHTML( selector ) );
            } else {
                // 是选择器
                // 获取元素, 并加到 this 中
                // 使用 Itcast.Select
                [].push.apply( this, Itcast.Select( selector ));
            }
            return this;
        }
        
        
        // fn
        if ( typeof selector == ‘function‘ ) {
            
        }
        //,目的是将selector对应的dom元素包装成Itcast对象
        // dom,如果selector是DOM对象
        //这里是构造函数,this指新建的对象(伪数组),返回this,会直接return
        if ( selector.nodeType ) {
            //当selector直接就是dom的时候,Itcast是伪数组,
            // 直接将dom对象加入到this中即可
            this[0] = selector;
            this.length = 1;
            return this;
        }
        
        // itcast,本来就是Itcast对象,可以直接返回,也可以便利出来,包装依次再返回
        if ( selector.type == ‘Itcast‘ ) {
            return selector;
        }
        
        // 不知道的 return this
        //如果是数组,或对象,认为selector.length>=0就是数组、伪数组,遍历
        if( selector.length >= 0){
            [].push.apply( this ,selector );
        }else{
            this[0] = selector;
            this.length = 1;
        }
        return this;
        // 。否则是对象,与dom一样
    },

    //toArray方法,将Itcast对象(伪数组)转换成数组返回
    toArray:function(){
        return [].slice.apply(this, 0);
    },
    // 。slice方法能截取,并返回一个数组

    //get方法: 参数:index索引: 返回值:索引对应的DOM对象
    //功能: 将index对应的Itcast伪数组中的DOM对象返回
    //如果index不存在,、index》0 index《0
    get:function( index ){
        if( index === undefined){
            return this.toArray();
        }
        if( index >= 0 ){
            return this[ index ];
        }else{
             return this[ this.length + index];
        }
    },

    //eq方法 参数:index, 返回值:Itcast对象
    //功能:将索引对应的Itcast中的DOM包装成Itcast对象返回
    eq: function( index ){
        return this.constructor(this.get( index ));
    },

    //first: 返回第一个
    first: function(){
        return this.eq( 0 );
    },
    // last: 返回最后一个
    last: function (){
        return this.eq( -1 );
    },
    //each方法:实例方法,由Itcast对象调用
    // ,参数: callback 函数 , 返回值:this。链式编程用
    //功能: 遍历Itcast对象中的dom对象,并带入callback函数中操作
    each:function(callback){
        this.each(this,callback);
        return this;
    },
    //map方法: 映射,将dom对象的操作结果返回,
    map: function(callback){
        this.map( this, callback);
        return this;
    }




};
Itcast.fn.init.prototype = Itcast.fn;

// 添加 extend 方法
Itcast.extend = Itcast.fn.extend = function ( obj ) {
    for ( var k in obj ) {
        this[ k ] = obj[ k ];
    }
};

    //添加核心模块的工具方法(静态成员)
    Itcast.extend({
        // each方法, 参数:array数组伪数组,对象,callback 操纵函数
        //功能: 将array中的成员遍历操作,当callback返回false时停止循环
        // 返回值: array原数组
        each: function( array , callback){
            if( array.length >= 0 ){
                for( var i =0 ; i<array.length ; i++ ){
                    var res = callback.call( array[ i ] , i , array[ i ]);
                    if( res === false){
                        break;
                    }
                }
            }else{
                for( var k in array){
                    var res = callback.call( array[ k ], k ,array[ k ]);
                    if( res === false){
                        break;
                    }
                }
            }
            return array;
        },



        //map方法 返回值:经过操作之后 的新数组
        // .参数:array(数组,伪数组,对象)callback(回调函数)
        // 功能: 将array遍历,然后带入callback函数中,函数的返回值组成新数组,返回该数组
        map: function(array , callback){
            var res = [];
            if( array.length >= 0 ){
                for( var i = 0 ; i<array.length ; i++){
                    var result = callback.apply(array[ i ], array[ i ] , i);
                    if( result !== undefined ){
                        res.push(result);
                    }
                }
            }else{
                for(var k in array){
                    var result = callback.apply( array[ i ], array[i] , i);
                    if( result !== undefined){
                        res.push(result);
                    }
                }
            }
            return res;
        }

    })


Itcast.parseHTML = (function () {
    
var node = document.createElement( ‘div‘ );

function parseHTML ( str ) {
    node.innerHTML = str;
    var arr = [];
    arr.push.apply( arr, node.childNodes );
    return arr;
};

return parseHTML;

})();

 

分析一个类似于jquery的小框架 (2)

标签:

原文地址:http://www.cnblogs.com/bridge7839/p/5797767.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!