编写高质量 Javascript -- 知识点小记



一：
    团队合作避免JS冲突

脚本中的变量随时存在冲突的风险，
1.   解决办法---用匿名函数将脚本包起来，让变量的作用域控制在匿名函数之内
如：

 .....
 

此番改善之后，匿名function里面的变量作用域不再是window，而是局限在函数内。

2.  有时各个函数之间变量又要进行通讯，故又要改善（利用全局作用域）
如：

 
       
 .....
 

3.  但如此一来，工程变大，全局变量未免过多难以管理，（利用hash对象作为全局变量）
如：

 
 .....
 

4.   不过就算如此，如果工程变大，不同工程师完成不同的函数，变量难免也会冲突，
 故又继续改善（GLOBAL 属性不是直接挂在GLOBAL属性对象上，而是挂在此命名函数的命名空间下）
 如：

    
 .....
 

如此种种，函数内属性越复杂，又可以进一步扩展GLOBAL挂载方式.....
如 GLOBAL.A={};
GLOBAL.A.CAT={};
GLOBAL.A.DOG={};
GLOBAL.A.DOG.name="aa";
GLOBAL.A.CAT.name="bb";

5.  进一步，又可以给此命名空间定义方式封装成函数，方便以后调用：
如：

二：
   方便JS程序执行：
  
   1. 给程序一个统一的入口===== window.onload 或DOMReady
  （先把所有函数定义部分放入 init函数中，最后再加载 init()即可使用
 
  如：在DOM节点加载进来之前就调用会出错

      

	 
hello ! 

改善方式： 
  调换位置，在DOM节点加载进来之后再调用即可

    

hello ! 
     

或者，使用window.onload事件，window对象会在网页内元素全部加载完毕之后才触发onload时间

   

	 
hello ! 

但此种方式，仍有不足。
  window.onload要等到网页元素全部加载才进行
  而DOMReady则只要页面内所有DOM节点皆全部生成即可进行。
  DOMReady 方式原生JS并不支持，要使用第三方类库（JS框架）
如jQuery的方式：
    $(document).ready(init);    // init() 是一个函数...
 $(function(){ ...});  /// 等等等等..
 
 当然了，我们也可以用原生JS模拟DOMReady ，事实上很简单，就是：

  

	 
hello ! 
	 
    
	

如此一来 body标签加载完成之前才调用函数，这种方式也不错！
 
 
 2.   CSS 文件与 JS 文件的位置
   因为JS是阻塞型的，所以一般” CSS放在页头，Javascript放在页尾“
   （这样一来，网页先呈现给用户，再慢慢加载页面里面的脚本，减少页面空白的时间）
  
  
 
 三.  Javascript 分层概念
    一般来说，我们要把Javascript分层三层： base层 --> common层 --> page 层

 1. page层
  page 层提供统一的接口，可以在这里实现封装不同浏览器下Javascript的差异，依靠它来完成跨浏览器兼容的工作！
  还可以扩展Javascript语言底层提供的接口，以便提供出更多有用的接口（主要是为common page 层提供）
 
各种问题类举：

   <1> 在IE中，它只视DOM节点为childNodes中的一员，但在FireFox中，它会将包括空白.换行等文本信息在内的信息也当做childNodes的一员。
   未解决此问题，可用 document.all 方式处理，它是IE支持的属性，FireFox不支持
   代码如：

哦对，好像有点冗余，那就把这个功能封装成函数吧！
 如：

<2> 透明度的问题：
     IE下透明度是通过滤镜实现的，但在FireFox下透明度是通过CSS 的opacity属性实现的
   我们把它封装起来
   代码如：

<3> event 对象的问题：
    IE下 event对象是作为window的属性作用于全局作用域的，但在FireFox中 event对象是作为事件的参数存在的
    所以，为了兼容性，一般考虑用一个变量指向event对象，继而通过这个变量访问event对象
    不理解？ 代码如下：

另一方面，派生事件的对象在IE下是通过event对象的srcElement属性访问的
                              在FireFox下是通过event对象的target属性访问的
    如代码： 

<4> 冒泡问题的处理
   首先理解概念---> 对于事件流，浏览器中的事件模型分为两种：捕获型和冒泡型事件
   事件的冒泡： Javascript对这种先触发子容器监听事件，后触发父容器监听事件的现象。
   事件的捕获： 即相反于冒泡（先父后子）
      比如代码中

                        
                       

   我们为id=wrapper绑定事件1，为id=btn绑定事件2，
   如此一来，我们的结果却是： 无论点哪里，触发的都是事件1 （因为事件2触发得很快就会迅速转变为事件1）
   
   为了解决，要阻止（对子容器）事件的冒泡机制：IE下通过设置event对象的cancelBubble 为true 实现
                                                  FireFox 通过调用event对象的stopPropagation方法实现
 
       封装成函数即是：

<5>事件监听的处理：
           可以简单地使用 onXXX 的方式，
              如 btn.onclick = function(){ .......};
           但onXXX方法没有叠加作用，后面定义的onXXX会把前面的覆盖掉，为解决此类问题：
               IE下引入 attachEvent方法，FireFox 下引入addEventListener方法。
      IE下引入 detachEvent方法，FireFox 下引入removeEventListener方法。
      如：oSpan.detachEvent("onclick",fnClick);
          oSpan.removeEventListener("click",fnClick);
      好，我们就把这个功能封装一下：
               代码如： 

<6> 其他小功能：
     函数封装实现：
   

2.  common 层:
       common层本身依赖于base层提供的接口，common层提供的应该是相对更大的组件，供Javascript调用
  
 3.  page 层 
        就是具体的页面特设定啦... 
 
四： 编程的其他一些实用技巧：
  
     1.在遍历数组时对DOM监听事件，索引值将始终等于遍历结束后的值。
     如某个监听代码：

              这样做之后，所有content将会隐藏且 有报错--->  tabcontent[i] is undefined !
   要怎么改正呢？ ----------------------------->

        

2.  另一方面，我们还需要注意控制好 关键字this 的指向问题：
       <1> Javascript伪协议和内联事件对this的指向不同
     如  

<2> setTimeout 和 setInterval 也会改变this指向
       他们都是直接调用函数里的this 指向window
   如 

<3> DomNode.on XXX  方式也会改变this 指向
        它将直接调用函数里面的this 指向DomNode
   比如：

<4>  对此，另外我们还可以用 call 和 apply 函数来改变处理函数的this指向
        比如：

=============================分割线=====================待续=====================================

顺便吐槽一下--------写着写着内容多了以后，编辑起来就很非常不方便了！ 内容一多，“选择”这个功能基本就无法使用了

内容再多点，就形成了无法输入的状态，得从外部复制进来了......

这是不是很大的BUG啊。。。。。。。。。。。。。

搞得界面都不是很友好的说（设置不了哎..)