让你有做黑客感觉的网站,网上注册公司审核需要多久,高校二级网站建设意义,一级域名的免费网站第五章:高质量的Javascript 这章的内容我看的最久,这是跟我js基础没打好有着莫大的关系#xff0c;但是还是耐着性子看完了#xff0c; 不懂的东西都是百度上搜索#xff0c;理解后再继续。下面是记录下来的笔记。 1#xff09;如何避免JS冲突 A:匿名函数 在多人合作一个网…第五章:高质量的Javascript 这章的内容我看的最久,这是跟我js基础没打好有着莫大的关系但是还是耐着性子看完了 不懂的东西都是百度上搜索理解后再继续。下面是记录下来的笔记。 1如何避免JS冲突 A:匿名函数 在多人合作一个网站时每个人都会写自己的JS代码定义变量的时候有可能会引起命名冲突如何避免这种冲突隐患呢 一种最简单有效的办法是“匿名函数”将脚本包起来让变量的作用域控制在匿名函数之内。 匿名函数(function (){})() 前面的括号内是函数体后面的()表示执行。 如(function(){ var name,usertest; //包含在这个匿名函数中的变量作用域不再是window,而是局限在函数内部。 因为各自包在不同的匿名函数内也就不再互相冲突了。 })(); 用匿名函数将脚本包起来可以有效的控制全局变量避免冲突隐患。 B:解决匿名函数之间的通信问题 上面的匿名函数确实解决了冲突,但是如果两个代码段之间需要访问彼此的变量,那就被分隔开了,没法访问对方作用域中的变量. 一个比较好的解决办法是在window的作用域下定义一个全局变量,但是从上面的冲突来看,全局变量是引起冲突的杀手,如果又这样定义,就违背了我们使用匿名函数的初衷,所以应该严格控制全局变量的数量! 为了控制全局变量的数量,用Hash对象作为全局变量。 var GLOBAl{}; //一个对象类型的变量作为全局变量扩展性好 定义好对象类型变量后,在匿名函数A中定义GLOBAL的属性GLOBAL.str1aaa; 在匿名函数B中可以直接访问var b BLOBAl.str1; 这样又出现了一个问题当在匿名函数B中它也定义一个属性BLOBAl.str1bbb; 这个时候就会把A块中的属性str1给覆盖掉.如何避免这种冲突呢不可能每个开发者在使用GLOBAL对象之前都要查找一下绑定了哪些属性。 这时命名空间就出现了它是一种特殊的前缀在js中它其实是通过一个{}对象来实现的。我们可以给每个匿名函数声明不同的命名空间然后每个匿名函数中GLOBAL对象的属性都不要直接挂在GLOBAl对象上而是挂在此匿名函数的命名空间下既window全局的GLOBAL.命名空间.属性变量 ,这样申明属性名称的时候即使同名空间不一样也不会引起冲突。如 GLOBAL.A{};// 定义命名空间 GLOBAL.A.str1aaa;//定义属性变量 复杂的匿名函数中你还可以生产二级命名空间如GLOBAL.A{};//一级命名空间GLOBAL.A.CAT{};GLOBAL.A.DOG{};//二级命名空间 生成命名空间是一个很常用的功能可以将其封装为一个函数。 var GLOBAL{}; GLOBAL.namespacefunction(str){ var arrstr.split(.),oGLOBAL; for(i(arr[0]GLOBAL)?1:0; iarr.length; i){ o[arr[i]]o[arr[i]] || {}; oo[arr[i]]; } } 调用 GLOBAL.namespace(A.DOG); GLOBAL.namespace(GLOBAL.B); 总结:解决js冲突-------命名空间全局变量匿名函数 很好的结合使用才能更好的解决冲突。 C:注释 添加必要的代码注释可大大提高可维护性对团队合作来说是很重要的。 注释添加的信息包括功能说明工程师姓名工程师联系方式代码最后修改时间 让JS不产生冲突需要避免全局变量的泛滥合理使用命名空间以及给代码添加注释。 2JS代码程序统一入口---------window.onload和DOMready JS从功能上分为两部分1 框架部分提供的是对JS代码的组织作用包括定义全局变量命名空间等和具体的应用无关该部分被每个页面都包括的---base层common层 2 应用部分页面功能逻辑的代码段不同页面有不同的功能不同页面应用部分的代码也不同---page层 而应用部分的代码最好包在一个约定好的入口函数里程序统一入口是针对js应用部分来说的一般初始化的部分会放在一个统一的函数function init(){}中,然后在页面完全加载完毕后触发 window.onload需要在页面完全加载完成时才会触发包括图片flash等富媒体 DOMReady:只需要判断页面内所有的DOM节点是否已经完成加载至于节点的内容加载是否完成他并不关心。 所以DOMReady触发的速度比window.onload快它比window.onload更适合用来调用初始化函数。【我一般使用jquery,所以页面加载完毕会用$(fuction(){...});或$(document).ready(function(){...});】 另外一种模拟Ready的效果是将初始化的js代码块 放在body结束标签的前面js .../body这样会按照顺序来载入。 3)CSS放在页头JS放在页尾 浏览器加载网页加载到JS时由于脚本比较多而html代码还没有加载这是页面会显示空白脚本阻塞了html的加载等到毫不容易加载完成了有时候会发现这些网页元素没有样式所以一个好的习惯是CSS放在页头JS放在页尾先加载css,再加载html,再加载js. 这样就能适时的将界面呈现给用户减少页面空白的时间。 4引入编译的概念---------文件压缩 JS压缩通常的做法是去掉空格和换行去掉注释将复杂变量名替换为简单的变量名压缩后的js文件的确变小了但是压缩后的文件无法反压缩恢复成原来的模样。 压缩命名规则原名.js 压缩后的名为原名-min.js 5)js 如何分层----------为了使代码更清晰减少冗余提高代码重用率 和css分层一样base层最低端两个职责1不同浏览器之间js的差异提供统一接口2扩展js语言底层提供的接口比如tostring... base层是给common层和page层提供接口的。 common层:提供可复用的组件和页面内具体功能无关。common层的功能是给page层用的 page层最顶端该层主要是完成各个页面内的功能需求。 A:base层 琐碎知识点 1IE和FF下获取childNodes会不一样因为FF会将包括空白、换行等文本信息业当做childNodes中的一员而IE会忽略它只将DOM节点作为childNodes的一员。 2document.all是IE支持的属性FF 不支持通常也可以用来判断浏览器的种类。 3nextSibling:获取某个节点的下一个同级节点。 获得某个父节点下面的子节点然而浏览器不一样为了兼容会根据浏览器做出一些处理将处理封装成函数像这类函数将放到base层。如getnextnode(node) 4透明度IE通过滤镜实现FF通过css的opacity属性实现。node.style.filteralpha(opacity3); nodel.style.opacity0.3; 5event: IE中event对象是window的属性作用于全局作用域在FF中event是作为事件的参数存在。 一般 function(e){ewindow.event||e;}//这样e在IE和FF下都指向event对象。 event对象的部分属性名在IE和FF下也是不同的比如触发事件的对象标签在IE下通过srcElement属性访问在FF下通过target访问 var element e.srcElement ||e.target; 6 冒泡两个重叠的标签点击其中一个时另外一个也会被触发点击事件JS 将这种先触发子容器监听事件再触发父容器监听事件的现象称为冒泡。 为了业务需要我们需要阻止事件冒泡在IE中通过设置event对象的cancelBubble属性为true实现在FF下通过调用Event对象的stopPropagation方法实现的。 if(document.all){ e.cancelBubbletrue;//IE }else{ e.stopPropagation();//FF } 7on、attachEvent和addEventListener 我们在定义事件时往往on**只能定义一次如果再次定义就会覆盖前面定义好的方法。最常见的为onclick事件。 on***的监听方式没有叠加效果最后定义的on***会将前面的事件覆盖掉。 attachEvent(IE支持的方法)、addEventListener(FF支持的方法)他们支持监听处理函数的叠加。 例btn.attachEvent(onclick,function(){...}); btn.addEventListener(click,function(){...}); 总结以上1-7点中为了兼容不同浏览器而封装的一些兼容处理函数像这类函数将放到base层。如getnextnode(node) 8扩展Js语言底层的接口 例trim() isNumber() isString() get() $() extend()等等 base层的JS和页面里的具体应用逻辑无关属于框架级的。 B:common层 common层本身依赖于base层提供的接口需要先加载base层代码。它与base层的区别是common层不是简单的接口而是相对庞大的组件。(如设置和获取cookie就可以封装cookie组件). 它和具体功能相关如果页面里不需要相关功能就没必要加载而一个易用性和可扩展性都好的组件代码量会偏高所以一般common层的js要按功能分成一个个单独的文件如common_cookie.js,common_drag.js,common_tab.js. common层的JS和页面里的具体应用逻辑无关属于框架级的。 C:page层 base层和common层都是属于框架级的page层是属于应用级的它可以调用base层的接口和common层的组件 6 js类库 常见的有prototype. Dojo, Mootools,Extjs,jquery,yui等。这么多我用的比较多的是jquery ,好像extjs也不错以后有空学习学习。 转载请注明出处 原文地址:http://www.cnblogs.com/Joans/archive/2012/09/12/2681550.html 转载于:https://www.cnblogs.com/lxzltg/p/5104037.html
