javascript框架设计种子模块读书笔记.docx

javascript框架设计种子模块读书笔记

javascript框架设计种子模块读书笔记1.命名空间：js里面的命名空间就是使用对象的属性来扩展的。比如，用户定义一个A对象，A对象下面有B属性和C属性，同时B属性和C属性又是对象。因此A={B:{},C:{}}，这时用户就可以在B对象和C对象中定义一样的方法，属性了。因此B和C就属于不同的命名空间。我们调用B，C对象里面的方法，就可以通过A.B.like()，A.C.like()调用了。当然A属于window对象中的属性。但是有一种情况，比如:boke.jsp页面引入了jquery.js以及prototype.js（他们都会在window对象中添加$属性），这时就出现了冲突的情况。因此jquery.js里面就有了noConflict()处理冲突。执行流程：页面首先引入prototype，这时prototype会占有window的$属性，然后再引入jquery时，jquery会把之前window的$属性存放在_$中，然后自己使用$属性。这时，你可以通过$调用jquery的方法。当你现在不需要使用jquery而想使用prototype时，就可以调用$.noConflict(),这时$就会恢复成prototype对象。这时你就可以通过$使用prototype方法了。复制代码代码如下:var_$=window.$，_jQuery=window.jQuery；noConflict:function(deep){window.$=_$;if(deep)window.jQuery=_jQuery;returnjQuery;//返回值，你可以赋值给其他变量名，比如，chaojidan,这样你就可以通过chaojidan调用jQuery中的方法了。}2.对象扩展：命名空间对象有了，那我们需要扩展功能。比如：我需要把A对象的属性和方法全部复制到B对象中。我不用一个一个在B对象中去写代码。复制代码代码如下:functionmix(target,source){varargs=[].slice.call(arguments),i=1,isCover=typeofargs[args.length-1]=="boolean"?args.pop():true;//不写，默认为true,默认是覆盖。if(args.length==1){target=!this.window?this:{};//如果只有一个对象参数时，就扩展this对象。比如：我在A对象的context中调用mix(B)，那么这时的this就是A，因此会把B的属性和方法添加到A对象中。但是如果是在window中调用mix(B)，就会把B对象中的`属性和方法添加到一个空的对象中，并返回这个空的对象，以防覆盖window对象中同名的属性和方法。（只有window对象拥有window属性）i=0;}while((source=args[i++])){for(keyinsource){if(isCover||!(keyintarget))//如果覆盖，就直接赋值，如果不覆盖，先判断key是否存在目标对象中，如果存在，就不赋值{target[key]=source[key];}}}returntarget;}大公司面试官很喜欢问数组的查重，大家可以去看看，数组中的每项可以是对象，而对象A和对象B即便一样的属性和方法，但是也是不相等的。字符串和数字，比如123和"123"等，网上一搜，就能找到很全的方法。3.数组化：浏览器下有很多类数组对象，arguments,document.forms,document.links，form.elements,document.getElementsByTagName，childNodes等（HTMLCollection,NodeList）。还有一种特殊写法的自定义对象复制代码代码如下:vararrayLike={0:"a",1:"b",length:2}此对象写法，就是jQuery对象的写法。我们需要把上述的类数组对象转换成数组对象。[].slice.call方法可以解决。但是旧版本IE下的HTMLCollection,NodeList不是Object的子类，不能使用[].slice.call方法。因此我们可以重写一个slice方法。复制代码代码如下:A.slice=window.dispatchEvent?function(nodes,start,end){return[].slice.call(nodes，start,end);}//如果window有dispatchEvent属性就证明支持[].slice.call方法，能力检