14-框架封装

一、 框架结构 ==> 难点

• 1 jQuery对象的本质
• 2 框架核心结构
• 3 入口函数(构造函数)

1、jQuery的本质

jquery对外暴露了两个方法：jQuery和$,
这两方法实际上是同一个方法，
通过调用这两个方法，可以得到一个jQuery实例对象。

• jQuery 实例对象是一个伪数组对象
• jQuery和$实际上是一个工厂函数
• 工厂函数直接调用，就可以得到一个实例

2、jQuery的基本结构

2.2.0版本

(function(w,factory){
    console.log('对模块做了支持');
    factory();
 }(window,function(){
    return jQuery;
 }));

1.7版本

(function(w){
   // 对外暴露的工厂函数
   function jQuery(){
       return new jQuery.fn.init();
   }
   //给原型提供一个简写的方法
   jQuery.fn = jQuery.prototype ={
   };
   // init是jQuery中真正的构造函数
   var init = jQuery.fn.init = function(){
   };
   // 替换构造函数的原型为jQuery工厂的原型
   init.prototype = jQuery.fn;
   // 把工厂通过两个变量暴露出来
   w.jQuery = w.$ = jQuery;
}(window));

3、jQuery插件实现机制

jQuery.fn.alert = function(msg){
   alert(msg);
};

在fn上添加

4、入口函数init

通过$工厂，最终到达了init构造函数这里，所有的初始化实例过程都在这里实现，所以把这里称之为入口函数

5、入口函数实现思路

==jq入口对不同参数处理的规律：==

• 传入null、undefined、0、NaN、''返回空对象( 即空实例 )
• 传入字符串，那么需要判断是html片段 还是 其它，
• 如果是片段，则创建对应的DOM，然后添加到实例身上；
• 否则按照选择器获取页面中的DOM，然后把获取到的DOM添加到实例身上。
• 如果是数组或许伪数组，那么把每一项分别添加到实例身上。
• 除了上面的数据类型，剩余的，统一添加到实例身上。

==入口函数实现逻辑：==

funciton init(selector){
    //传入的null、undefined、0、NaN、'' 返回空对象（即空实例）
    if(!selector){
        return this;
    }
    //传入的字符串，那么需要判断是html片段还是其他
    else if(typeof selector == 'string'){
        //如果是片段，则创建对应的DOM，然后添加到实例身上。如果字符串的第一个字母是<,最后一个字母是>,并且length>=3,就可以认为是html片段
        if(是html片段){
            /*
            1、先创建一个临时的div容器
            2、设置这个div的innerHTML为html片段
            3、然后遍历div的子元素分别添加到this身上，记住给实例补充length属性值
            4、可以使用数组的push来给实例添加，同时可以使用apply简化遍历过程
            */
        }
        // 否则按照选择器获取页面中的DOM，然后把获取到的DOM添加到实例身上
        else {

                /*
                * 实现的思路：
                * 1、使用querySelectorAll获取页面中的元素
                * 2、然后遍历获取到所有元素分别添加this身上，记住给实例补充length属性值，
                * 可以使用数组的push来给实例添加，同时可以使用apply简化遍历过程。
                * */
            }
    }
    /*
    * 判断是不是真假数组的思路：
    * 1、先把函数和window排除掉，
    * 2、然后通过toString来判断是不是真数组
    * 3、否则再判断是不是伪数组
    * 备注：下面的判断只用来判断是不是伪数组，不要用下面的判断条件判断真数组，
    *       例如：[ 0:1, , , ] 使用下面的判断，就会得到false，造成真数组的误判。
    * 3.1、 先看看这个对象有没有length属性，
    * 3.2、 如果有，看看length的值是不是为0，如果为0，OK是伪数组，
    * 3.3、 如果length的值不为0，看看这个数据有没有 length - 1这个属性，如果有，OK是伪数组。
    * 建议把这个是否是真假数组的判断封装为一个函数，在这里调用。
    * */
    else if (  ) {

                /*
                * 实现的思路：
                * 把真或伪数组中的每一项分别添加到实例身上，记住给实例补充length属性值，
                * 可以使用数组的push来给实例添加，同时可以使用apply简化遍历过程。
                * */
            }else {
                /*
                * 实现的思路：
                * 把这个参数直接添加到实例身子，length为1即可。
                * */
            }
}

6、代码块

代码块：一对大括号
如果把一对大括号赋值给其他变量，或者参与运算，那么大括号就变
成了字面量
例如：
    ({}).toString()  正确
    {}.toString();   错误

7、window的length属性代表页面中iframe的数量

window有一个window属性，指向自己

8、封装数组的trim方法

function trim(str){
    if(typeof str!== 'string'){
        return str;
    }
    if(str.trim){
        return str.trim();
    }
    return str.replace(/^\s+|\s+$/g,'');
}

第二天 核心方法 ==> 中等

• 1 入口函数对函数的处理
• 2 原型上的核心方法
• 3 map与each

1、静态和实例方法的区别

• 静态方法

jQuery.extend({
       isFunction: function( fn ) {
           return typeof fn === 'function';
       }
    });

• 实例方法

jQuery.prototype.extend({
            alert: function( msg ) {
                alert( msg );
            }
        });

• 静态方法的使用

jQuery.isFunction([])

• 实例方法的使用

var $$ = new jQuery();
$$.alert( '实例调用' );

==构造函数不能使用自己原型中方法( Function例外 )==

==实例不能直接使用构造函数身上的静态方法==

2、IE8中apply有问题

apply方法可以该改变this指向，同时可以把数组或伪数组平铺传入给函数，
但是IE8，apply只能平铺真数组或者内置的伪数组，我们自定义的伪数组会报错。

IE8中需要先把自定义伪数组转换为真数组，才能借用apply。
借用数组的slice方法，通过一个伪数组得到一个真数组

//先把伪数组截取为真数组
[].splce.call(伪数组) 
//实现需求
[].push.apply(空对象，[].splice.call(伪数组));

3、入口函数

为了防止获取不到页面的元素，所以要把函数传入到jQuery，
然后在这个回调函数中编写代码。这个回调函数会在页面DOM解析完毕之后执行。

$(function(){
    //逻辑代码
})

• html5新增了一个DOMContentLoaded事件，兼容IE9，
• 这个事件会在DOM解析完毕后触发，
• 通常这个事件要比onload快很多，
• 但是也有很少的例外。
• ==备注==：如果发生了例外，DOMContentLoaded事件和onload事件触发的间隔时间相差不会很大，
• 所以可以认为DOMContentLoaded 比 onload要快，只监听DOMContentLoaded即可。

==IE9+==

document.addEventListener( 'DOMContentLoaded', function() {
    var spans = document.querySelectorAll( 'span' );
    console.log( spans, 'DOMContentLoaded');
} );

==IE8兼容==

document.attachEvent( 'onreadystatechange', function() {
    if ( document.readyState === 'complete' ) {
        /*var spans = document.querySelectorAll( 'span' );
        console.log( spans, 'DOMContentLoaded');*/
        /*逻辑代码*/
    }

4、jQ原型核心方法

• 1、jquery 获取版本号
• 2、selector 代表所有实例默认的选择器，也代表实例是一个jQuery类型的对象
• 3、length 代表所有实例默认的长度
• 4、toArray 把实例转换为数组返回
• 5、get 获取指定下标的元素，获取的是原生DOM
• 6、each 遍历实例，把遍历到的数据分别传给回调使用
• 7、map 遍历实例，把遍历到的数据分别传给回调使用，然后把回调的返回值收集起来组成一个数组返回
• 8、slice 截取实例的部分元素，构成一个新的jQuery实例返回。
• 9、first 获取实例中的第一个元素，是jQuery类型的实例对象。
• 10、last 获取实例中的最后一个元素，是jQuery类型的实例对象。
• 11、eq 获取指定下标的元素，获取的是jQuery类型的实例对象。
• 12、push 给实例添加新元素
• 13、sort 对实例中的元素进行排序
• 14、splice 按照指定下标指定数量删除元素，也可以替换删除的元素。

5.each方法

function each(obj,fn){
    var i,len,key;
    if('length' in obj){
        for(i = 0,len=obj.length;i<len;i++){
        //修改this指向为value，并添加中断
            if(fn.call(obj[i],i,obj[i]==false)){
                break;
            }
        }
    }else{
        for(key in obj){
            if(fn.call(obj[key],key,obj[key])==false){
                break;
            }
        }
    }
}

each( obj, function( key, val ) {
     // 当得到val为222这个的属性时，就不用再遍历之后的属性了
     if ( val == 333 ) {
        return false;
     }
     console.log( key, val );
} );

6、map实现

function map( obj, fn ) {
    /*
     * 1、先判断obj是不是数组或者伪数组，
     * 2、如果是，则通过i的方式遍历这个对象
     * 3、如果不是，则通过for in的方式遍历这个对象
     * 4、在遍历的过程中，把每一次遍历到key和val分别传给回调。
     * 5、在给回调传参的时候，需要收集回调的返回值，最后把所有的返回值构成新数组返回。
     * */
    var i, len, key, result = [];

    if( 'length' in obj ) {
        for ( i = 0, len = obj.length; i < len; i++ ) {
            result.push( fn.call( obj[ i ], obj[ i ], i ) );
        }
    }else {
        for ( key in obj ) {
            result.push( fn.call( obj[ key ], obj[ key ], key ) );
        }
    }

    return result;
}
console.log(map(obj, function (val, key) {
    console.log(val, key, this);
}));

第三天 DOM操作 ==> 中等

• 1 创建DOM
• 2 删除DOM
• 3 追加DOM

第四天 属性样式操作 ==> 简单

• 1 class属性操作
• 2 公共属性操作
• 3 样式操作

第五天 事件 ==> 难点

• 1 事件绑定
• 2 事件解除

第六天 ajax和插件 ==> 难点

• 1 ajax
• 2 插件实现原理
• 3 折线图饼图做成框架插件
• 4 刮刮乐插件