自己建前台框架

随着web2.0技术的流行，JavaScript、Ajax等技术也逐渐普遍，开源界出现了许多优秀的js框架，比如jQuery、prototype等，使用这些js框架只需要写一些简单的代码就能实现我们需要的复杂的功能，当然我们也可以脱离这些js框架，去尝试编写自己的js框架，封装一些自己常用的js功能，方便自己的使用，下面让我们一起来探讨如何编写自己的js框架。     

      构建js框架的注意事项：

      1. 不要使用浏览器检测，要使用能力检测

      由于浏览器的类型和版本太多，以及不断的新的浏览器出现，我们不可能去投入大量的时间和成本去实践检测各种版本的浏览器。“浏览器检测”也叫“版本检测”通常被认为是一种错误的做法，浏览器检测的最佳实践是能力检测，通常也被称为对象检测，指的是在代码执行之前检测某个脚本对象或方法是否存在，而不是依赖于你对某个浏览器具有哪些特定的了解，如果必须的对象或方法存在，则说明该浏览器能使用它，而且代码也能够预期正常执行。能力检测（使用if(xxx.xxxx)的方式）如：

view plaincopy to clipboardprint?

1. if(document.body && document.body.getElementsByTagName)  
2. {  
3.    //使用document.body.getElementsByTagName的代码  
4. }  

    

      2. 使用命名空间

      当使用多个js库文件时，为了避免在调用时不同js库文件的同名函数的冲突，一般会使用命名空间来解决。JavaScript支持同名函数，但只使用最后一个加载的函数（不支持重载，不会考虑参数，只看函数名字）， 哪一个最后被加载，哪一个就会被调用到。所以不使用命名空间的话，就很容易遇到同名函数冲突的问题。

      使用命名空间的两点原则：唯一性，不共享。

      唯一性：挑选一个独一无二的命名空间的名字（如Google Maps的G），注意js是大小写敏感的

      不共享：为了不与著名的一些库（jQuery、prototype）或者其他已有的一些函数冲突，使用匿名函数来实现代码的不共享。如：

view plaincopy to clipboardprint?

1. (function(){  
2.   //code  
3. })()  

 

     如何编写自己的js库呢？我们可以按照下面的模板来写：

view plaincopy to clipboardprint?

1. (function() {  
2.   
3.     //注册命名空间gyb到window对象上  
4.      window['gyb'] = {}  
5.   
6.     //定义一个$函数  
7.      function $() {  
8.        alert("hello $");  
9.     }  
10.   
11.     //把$函数注册到gyb命名空间中  
12.      window['gyb']['$'] = $;  
13. })();