zoukankan      html  css  js  c++  java
  • 写自己的JS框架

    自从ajax技术兴起之后,开源界就出现了很多著名的JS框架。包括Google的Gmap等一系列,雅虎的YUI,还有就Jquery, Prototype等。使用这些框架就可以用简单的代码来实现丰富多彩的功能,有很多甚至是采用了类似面向对象的编程风格。

    其实只要了解了Javascript的相关基础知识,我们完全可以自己写一个JS框架出来。本文介绍了搭建JS框架的基本原则。(ITcast上的教程-构建自己的JS库的学习笔记)

    Jquery,Prototype等框架流行的原因


    总结原因有三:

    1. 跨浏览器

       屏蔽了浏览器的不同(类型,版本),毕竟,为市面上的每一款浏览器编写针对性的代码是极其不合算的

    2. 经过了严密的测试

       代码的品质可以保证(这也是大多数流行的开源框架的优点)

    3. 设计合理

       调用这些框架的代码也会非常的清晰,易懂

    因此我们自己要写JS框架的话,也应该以上面的内容为目标。

    构建注意事项


    1. 不要使用浏览器检测,要使用能力检测 
    “版本检测”,“浏览器嗅探“是javascript最佳实践中的错误用法。
    我们不可能为了市面上每一款前途未卜的浏览器进行验证。

    浏览器检测的最佳实践:能力检测(对象检测) 
    即在代码执行之前,检测某个脚本对象或方法是否存在(使用if(xxx.xxxx)的方式)。


    2. 使用命名空间 
    真正的命名空间在JavaScript2才支持,现在所谓的命名空间只是在脚本内部构造了一个小空间。

    原因:避免调用多个JS库时,出现同名函数的冲突

    JavaScript支持同名函数,但只使用最后一个函数(不支持重载,不会考虑参数,只看方法名字),

    哪一个最后被加载,哪一个就会被调用到。

    所以不使用命名空间的话,就很容易遇到同名函数冲突的问题。

    现行Javascript的命名空间的原理

    我们调用的Javascript其实默认都是注册在window对象上的,我们利用javascript中的对象,构建一连串的对象,并且每一个低级的对象作为上一级对象的属性。

    比如说,我们要使用"a.b.c"来构建一个命名空间,其实就是先构建一个名字为a的对象,然后构建一个名字为b的对象,并且把这个对象作为a的属性,同样把c作为b的一个属性。即:

    var a = new Object();// or var a = {};

    a.b = new Object();

    a.b.c = new Object();

    使用命名空间的两点原则:唯一性,不共享



    唯一性

    挑选一个独一无二的命名空间的名字(如Google Maps的G),注意js是大小写敏感的

    不共享

    为了不与著名的一些库或者其他已有的一些函数冲突,使用匿名函数。
    (function () {
    // your code
    }) ();
    匿名函数实现了代码的不共享,该块中的function和function内部定义的函数都不会被其他地方直接调用到。

    一个基本的示例:

    (function() {
      window['test'] = {}
      
      function $() {

        alert("function $ called!");
      }
      window['test']['$'] = $;
    }) ();

    function内部的代码,第一行把test这个命名空间注册到了window上,中间定义了一个名字为$的内部函数,最后一句把$这个方法注册到了test这个对象上。
    调用时,使用 test.$("xxx") 就可以。

  • 相关阅读:
    java设计模式演示样例
    一步一步写算法(之排序二叉树)
    收集经常使用的.net开源项目
    jdbc连接数据库
    Android开发系列(二十二):AdapterViewFlipper的功能和使用方法
    ProgressDialog使用总结
    HDU 4916 树分治
    [Unity3D]自制UnityForAndroid二维码扫描插件
    IOS ARC和非ARC文件混用
    让子弹飞Demo版
  • 原文地址:https://www.cnblogs.com/liuxinjin/p/3664259.html
Copyright © 2011-2022 走看看