Jquery学习笔记 - 设计理念&核心模块

Write Less,Do More 简洁的API,优雅的链式操作,强大的查询,便捷的操作

 

设计理念:

  背后解决了浏览器兼容,各种属性的获取,逻辑流程,性能等问题

  

 

  1.立即调用表达式:解决命名空间与变量污染问题

    (function(){})(window);传入window是为了减少搜索损耗,将window变为局部变量

  2.处理类数组对象结构:工厂方法,无new结构的结合,具体还在看~

  3.ready和load事件:检测readyState或监听DOMContentLoaded或针对旧版本IE特殊方法

  4.多库共存:noConflict(),交换$使用权

 

 

核心模块:

  面向对象的语言,通常有类的概念,但是js并没有类,这与java等有所区别,Javascript中函数为一等公民,拥有与像数字等相同的功能和用法~,还可以用new方法充当类的构造器

  EMCA-262把对象定义为“无序属性的集合,其属性可以包括基本值,对象或者函数”,可以想象为散列表,无非是一组名值对,值可以使数据或函数

  

  最基本创建对象:

    var person = new Object();

    person.name = XXX;

    person.sayName = function() {}

 

 

  上面的模式很快被对象字面量模式取代,更加直观,有封装的感觉

    var person = {

      name: "kevin",

      age: 29,

      sayName: function() {}

    }

 

    这里引出了ECMAScript的两种属性:数据属性和访问器属性

      1.数据属性的value保存值,比如var person = { name: "kevin" },另有三个属性控制可否修改,遍历,重新定义属性,修改这些属性需要在对象内使用Object.defineProperty(object, key, value),多数情况下不会用到~

      2.必须使用Object.defineProperty()设置,可拥有get,set属性,还可设置可否重定义,删除和可否for-in遍历

      3.定义多个属性可使用Object.defineProperties(object, values)

      4.读取属性可以使用Object.getOwnPropertyDescriptor()

 

 

  虽然上面的字面量创建对象法不错,但是不具有可复用性,于是出现了工厂模式

    function createObjext(.....) {

      var o = new Object();

      o.xxx = xxx;

      o.xxx = xxx;

      return o;

    }

  

 

  但是工厂模式无法解决对象识别问题,于是出现了构造函数模式

    function Person(.....) {

      this.xxx = xxx;

      this.xxx = xxx;

    }

    var person1 = new Person(.....);

 

    原生new方法构建对象,产生一个带指向Person的constructor属性的新对象,用于识别对象!可用instanceof操作符检测~

    不仅仅是创建了对象,更可以将对象确定为某个构造函数的实例,实例,实例!

      1.创建一个新对象

      2.将构造函数的this指向新对象

      3.执行构造函数的代码

      4.返回新对象

      就如同再每个新对象上执行了一遍构造函数,用this来控制

 

 

  上面方法虽然解决了模式识别,但是new可能导致误操作污染全局变量,更重要的是,每一个方法都要再新实例上创建一遍,要是能共享方法就好了,于是出现了构造函数模式pro

    function Person(......) {

      this.xxx = xxx;

    }

    function xxx() {......}   //将方法定义在构造函数外,函数内只保留引用~

 

 

  但是这与就毫无封装性可言,污染全局变量,各种不好,于是郑重推出了原型模式,利用prototype属性实现方法共享

  有一点,就是不能通过对象实例重写原型中的值,只会产生覆盖,但是利用构造函数修改原型,能即刻反映在所有实例中~

  关于确定属性位置,可以结合in和hasOwnProperty()方法~

  最后有一点注意,就是再创建实例后重写构造函数的prototype会导致切断实例与原型的联系,因为实例依旧指向旧原型,而此时旧原型为空!

    function Person() {}

    Person.prototype.name = xxx;

    Person.prototype.sayName = function() {}

 

    var person1 = new Person();

 

  

  但上面的模式共享一切,导致数据在一处的修改会即刻反映到所有实例上,为了最终实现属性私有,方法共享,出现了组合使用构造函数和原型模式

    function Person(.....) {

      this.name = xxx;

      this.age = xxx;

    }

    Person.prototypr = function {

      constructor :Person,

      sayName = function() {}

    }

 

    var person1 = new Person(); 

 

 

  还有一些比如动态原型模式、寄生构造模式和稳妥对象,前者是对组合模式的修缮,中间是工厂模式的同类模式,后者利用取消this和new产生私有变量,但是也有更好的方法~如下

    var constructor = function() {

      var that = {};                          //可以用任何方法构造一个对象,字面量,new,构造器,Object.create等均可

      that.xxx = xxx;       //在这里利用闭包访问私有变量

      that.xxx = xxx;

      return that;        //返回这个带有特权方法的新对象

    }

    

 

  Jquery方法:还真没看懂,等再打磨几个月再看吧~

 

参考:https://www.imooc.com/code/3254

posted @ 2018-01-10 19:20  Kevin__LEE  阅读(124)  评论(0编辑  收藏  举报