5-jQuery基本结构分析 工厂函数的实现 伪数组 入口函数参数分析/总结 工具方法的抽取 插件机制

jQuery基本结构分析

• 结构: 闭包(即时函数)-函数持有了本不属于自己的变量
  • 普通函数也是闭包理解
    • 函数的访问规则-内层可以访问外层的作用域
• jQuery为什么使用闭包结构
  • 闭包是一个封闭空间, 外层不能访问内层数据, 可以保护框架的代码
  • 把所有的代码封装起来, 只提供了两个全局变量
  • 避免和其他框架产生冲突
• 参数window
  • 提高性能(缩短代码的查找链)
  • 为什么形参也是window-方便代码压缩(形参替换a,b,c之类的)和混淆
• 形参undefined-解决兼容性的问题
  • 方便代码压缩
  • undefined在IE浏览器中有不同的表现形式
    • 正常情况下, console.log(undefined = 5555;) //undefined
    • IE9-之前, undefined可以被修改
      • window.undefined = window.undefined //访问window的属性undefined的值(未定义)赋值给window的属性

工厂函数的实现

• 思考: 框架外部应该如何使用这个框架, 应该如何获取这个框架的功能
• 外部访问闭包中的数据:
  • 在闭包中返回函数,在这个返回的函数中间接访问闭包中的数据
  • 把闭包中的私有数据(提供给外部的接口)绑定给全局对象window
  • 提供对外的接口

伪数组

• 伪数组的特点
  1. 本身是对象并非数组
  2. key从0开始, 依次递增-可以允许存在另类的key(但是在处理时会被忽略)
  3. 拥有length属性, 记录key的值
  4. 必需拥有length-1属性(length-1对键值对)
  5. 该对象不是window(window.length记录的iframe标签的个数)
     • 判断某个对象是否是window: obj==window.window
• 伪数组种类-处理入口函数为伪数组的方法
  1. 系统自带的伪数组
     • 使用[].push.apply(obj,系统自带的伪数组)
  2. 自定义的伪数组
     • 自定义的伪数组在IE9以下(IE9-)会报错, 不能直接用[].push.apply(obj, 自定义伪数组)来转换
     • 伪数组-->先转换成数组-->[].push,apply(obj,数组);
       • 遍历obj-arr.push(obj[i])
       • var arr2 = [].slice.apply(obj); 在把arr2-push进去

入口函数参数分析

1. 参数判断为假的情况

   • 返回空的jQuery实例对象

2. 参数是字符串(选择器)

   • 根据选择器获取页面中所有指定的标签,并且保存到实例对象中返回

3. 参数是字符串(标签)

   • 把参数中所有的一级标签保存到实例对象中返回,key从0开始一次递增,这些标签作为key对应的value值保存的

4. 参数是数组

   • 把数组中所有元素依次取出, 保存为jQ实例对象的键值对返回(key从0开始递增, 数组中的元素作为对应的value值)

5. 参数是伪数组(结构类似于数组)

   • 把伪数组中所有的value值依次取出, 保存jQ实例对象的键值对返回(key从0开始递增, value作为对应key的value值)

6. 参数是对象

   • 会把参数(对象)作为整体保存为key为0对应的value值, 返回jQ实例对象

7. 参数是DOM标签(对象)

   • 会把参数(DOM对象)作为整体保存为key为0对应的value值, 返回jQ实例对象

8. 参数是非零数字

   • 会把参数(数字)作为整体保存在key为0对应的value值, 返回jQ实例对象

9. 布尔类型的值: 同8.

10. 函数==监听页面的加载DOM

    • document.addEventListener(要监听的事件, 事件发生后的回调函数)
      • 不兼容IE9-, 会报错
      • 参数一: DOMContentLoaded 表示DOM加载完毕
    • 使用document.attachEvent()兼容IE9以下浏览器
      • 参数
        1. 要监听的状态(固定: onreadystatechange)
        2. 事件发生后的回调函数

入口函数参数分析-总结

1. 条件判断为假: 返回空的jQ实例对象
2. 字符串(选择器 | 标签)
3. 数组或者伪数组:
4. 对象 | DOM节点 | true | 数字(非0): 会把传入的参数保存为key为0对应的value值, 返回
5. 函数(待处理)
6. 思考init方法内部的实现逻辑
   1. 对参数进行类型判断, 根据判断类型的结果分别处理

工具方法的抽取

• 方法

  1. 工具对象: 多个方法放在一个对象中

  2. 给构造函数添加静态方法(拷贝工具对象的方法-遍历工具对象进行属性拷贝)

      var obj = {name : 'zs',age : 20,friends:['小明','小红']};
      var  obj1 = {};
      // 需求:obj1获取obj的属性
     
      for(var key in obj){
          obj1[key] = obj[key];
      }
     

  3. 给构造函数的原型对象添加原型方法

• jQuery实现

  • jQ.each(); 添加在构造函数自己身上的静态方法

  • jQ().each(); 添加在构造函数对应的原型对象上面的原型方法

      XDYQuery.prototype.extend  = XDYQuery.extend = function (obj) {
          for(var i in obj)
          {
              this[i] = obj[i];
          }
      }
      //静态方法调用-把工具对象直接作为参数传进去
      XDYQuery.extend(  {  //...  }  );
    

get(): 获取指定索引对应的标签返回

• 参数:
  • 如果没有传递参数:获取页面中所有指定的标签存储在数组中返回 == toArray方法
  • 传递参数
    • 参数是正数
    • 参数是负数 如果是-1,表示获取倒数第一个(获取所有指定标签.length+负值索引)

eq(): 获取指定索引对应的标签并且包装成jQ对象返回

• 参数:
  • 没有参数(判断arguments.length == 0):返回一个空的jQ对象(不是this)
  • 传递参数
    • 参数是正数 ==>$(get)
    • 参数是负数

each()实现思路

• each方法的使用

  1. jQ.each(obj | arr,fn(key,value){.....})
  2. jQ().each(fn(key,value){.....})
     • 作用: 遍历对象 | 数组 | 伪数组, 每循环一次就把当前的键值对(索引/元素)作为参数传递给后面的回调函数, 并且执行回调函数中的代码

• jQuery中each()的实现思路

  1. 遍历对象 | 数组 | 伪数组
     • [1] 遍历对象 ==> for..in
     • [2] 遍历数组 ==> for | for..in (不推荐:包括原型成员) ? |forEach
     • 遍历伪数组 ==> for..in | for
  2. 调用回调函数
     • 中断循环(遍历中判回调函数的返回值是否为假, 条件为真就结束循环)
     • 回调函数中的this指向的是当前循环的value值(回调函数借用call方法设置this指向value值)

jQuery中map()实现思路

• jQ.map(arr,fn(index,value))
  • 作用:变量数组,在回调函数中对数组进行处理(放大|过滤),把回调函数中的返回值收集组成一个新的数组
• 实现思路
  • 初始化一个空的数组
  • 遍历传进来的数组, 调用回调函数拿到遍历数组的索引/value值, push到空数组中
  • return空数组

jQuery中remove()实现思路

• 遍历jQ实例对象
• 每循环一次,就把当前的标签删掉

插件机制

• 在jQuery框架的基础上, 再提供一个新的js文件, 这个js中新增一些功能
• js文件命名: jQuery-名称.js