迷你JQuery-01

迷你JQuery的封装

框架的封装的模块

jquery
1, 选择模块
2, 框架的核心结构( * )
3, DOM 操作模块
4, 事件操作模块
5, 样式属性操作模块
6, 插件机制
7, 构建工具( gulp )

目前实现的功能为 each、map、isArrayLike

获取元素

function select( selector ) {          //为了避免书写过多的JS的DOM操作代码，使用一个变量来操作。也利于以后代码压缩
        var obj = document.querySelectorAll( selector ); // 伪数组

        obj.each = function ( callback ) {
            // 要求遍历 obj, 怎么遍历??? 使用 callback 处理伪数组 obj 中的每一个元素
            each( this, callback );
            // this 是什么, 看谁调用的方法
        };

        return obj;
    }

isArrayLike 的功能代码原理

1>如何判断对象是一个数组或伪数组
    // 只需要判断 length 属性即可
    // arr
    1> 是不是一个数组
        toString.call() -> '[object Object]' 形式给出
        instanceof 方法也可以实现, 但是在 html 嵌套的页面中会有问题

        Object.prototype.toString.call( arr ) == '[object Array]'

2> 是不是伪数组?
        1) 必须含有 length 属性
            'length' in arr
        2) 判断他是不是数字
            typeof length == 'number'
        3) 因此长度需要 非负
            length >= 0

                    
        var length = 'length' in arr && arr.length;     有没有length的属性 并且 length的长度 ，短路运算有length属性才往后继续，没有的话就返回false
        return typeof length === 'number' && length >= 0;  判断length的类型是不是number(我可以给length="hehe",这样报错) 如果是在判断它是否大于0

    function isArrayLike( obj ) {
        if ( Object.prototype.toString.call( obj ) == '[object Array]' ) {
            return true;
        }
        var length = 'length' in arr && arr.length;
        return typeof length === 'number' && length >= 0;
    } ```

###  each、map方法的功能实现

function each(arr,callback){
//防止变量提升造成代码错误，将函数内要用到的变量提前定义
var i,k;
//首先判断传进来是数组的话 用for循环
if(isArrayLike(arr)){
for( i = 0;i //利用call改变this的指向
if(callback.call(arr[i],i,arr[i]) === false) break;
}
}
//判断传进来的是对象的话用for in
else{
for( k in arr){
//利用call改变this的指向
if(callback.call(arr[k],k,arr[k]) === false) break;
}
}
return arr;
}

//功能与 each 几乎一样, 但是没有考虑跳出循环, 没有考虑 this,
function map(arr,callback){
//防止变量提升造成代码错误，将函数内要用到的变量提前定义
var newArr=[],tmp;
//首先判断传进来是数组的话 用for循环
if(isArrayLike(arr)){
for( i = 0;i //tmp接收 callback的返回值作为返回新数组的元素.
tmp=callback(arr[i],i)
if(tmp != null){
newArr.push(tmp)
}
}
}
//判断传进来的是对象的话用for in
else{
for( k in arr){
//tmp接收 callback的返回值作为返回新数组的元素.
tmp=callback(arr[k],k)
if(tmp != null){
newArr.push(tmp)
}

    }
}
return newArr;

}