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

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 刮刮乐插件

你可能感兴趣的:(14-框架封装)