1. 说一个原型的实际应用 2. 原型如何体现它的扩展性 ### 原型的实际应用 1. jquery和zepto的简单使用 2. zepto如何使用原型 3. jquery如何使用原型 简单使用 ~~~ <p>jquery test1</p> <p>jquery test2</p> <p>jquery test3</p> <div id ="div1"> <p>jquery test in div </p> </div> var $p =$('p') //实例 对象 $p.css('color','red'); console.log($p.html()) var $div1 = $("#div1");//实例 对象 $div1.css('color','blue'); console.log($p.html($div1)) ~~~ .css('color','red'):**css是原型方法** .html($div1)：**html是原型方法** attend remove等都是 平常用jQuery的基本api都是包含了原型的支持，都是从构造函数中的原型继承过来的（实例化的时候带过来的） 多个实例公用一套方法，说明这个方法来自同一构造函数的原型中 ### zepto如何使用原型 ~~~ var zepto = {}; zepto.init = function(selector){ // 做了简化 // 数组化，将selector变成数组 var slice = Array.prototype.slice; var dom =slice.call(document.querySelectorAll(selector)); return zepto.Z(dom,selector); } //$ 为zepto的选择器 var $ = function(selector){ return zepto.init(selector); } function Z(dom,selector){ var i, leng = dom?dom.length:0; for(i=0;i<len;i++){ this[i] = dom[i]; this.length = len; this.selector = selector||"" } } zepto.Z = function(dom,selector){ //注意，出现了new关键字(构造函数) return new Z(dom, selector); } ~~~ ~~~ $.fn = { constructor:zepto.Z, css:function(key,value){ }, html:funcition(){} } zepto.Z.prototype = Z.prototype = $.fn; ~~~ **zepto.Z.prototype = Z.prototype = $.fn;** ### jquery如何使用原型 ~~~ //jQuery和$一样 var jQuery = function(selector){ //注意new关键字，第一步找到构造函数 return new jQuery.fn.init(selector); } //定义构造函数 var init = jQuery.fn.init = function(selector){ var slice = Array.prototype.slice; var dom = slice.call(document.querySelectorAll(selector)) var i,len = dom?dom.length:0; for(i=0;i<len;i++){ this[i] = dom[i]; this.length = len; this.selector = selector||"" } } jQuery.fn = jQuery.prototype = { constructor:jQuery, css:function(key,value){ }, html:funcition(){} } init.prototype = jQuery.fn; ~~~ ### 问题解答（原型的实际应用） 1. 描述jquery如何使用原型 2. 描述zepto如何使用原型 3. 结合自己的项目经验，说一下自己开发的例子（没有，开源的东西，做一个简单的demo，论坛，社区等） ### 如何体现原型的扩展性 1. 总结zepto和jquery原型的使用 2. **插件机制**（原型扩展性） ### 为何把原型方法放在$.fn？？ 因为要扩展插件 ~~~ $.fn.getNodeName = function(){ return this[0].nodeName; } ~~~ 1. 好处 * 只有 **$会暴露在window全局变量**（只能通过$.fn去扩展，构造方法拿不到）（基本上一个库，工具暴露给全局一个变量，否则很容易造成环境变量污染）(init.prototype拿不到 init拿不到) * 将 **插件扩展统一到$.fn.xxx**这一个接口，方便使用 ~~~ $p.getNodeName(); $div1.getNodeName(); ~~~ ### 问题解答 1. 说一下jquery和zepto的插件机制 2. 结合开发经验，做过的基于原型的插件 ### 总结 1. 说一个原型的实际应用 * 描述jquery如何使用原型（入口函数，构造函数，构造函数的原型） * 描述zepto如何使用原型 * 结合自己的项目经验，说一下自己开发的例子（没有，开源的东西，做一个简单的demo，论坛，社区等） 2. 原型如何体现它的扩展性 * 说一下jquery和zepto的插件机制（代码怎么写，插件扩展到什么地方去了）（原因：构造函数没有开放，只开发了$）（好处：将 **插件扩展统一到$.fn.xxx**这一个接口，方便使用） * 结合自己的开发经验，做过的原型的插件