zoukankan      html  css  js  c++  java
  • javascript规范

    1、文件命名

    1、引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.9.0.min.js

    2、引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js

    3、js文件的命名参考js完成的功能。比如自定义弹出框的javascript文件名为dialog.js

    2、文件引入

    1、js代码应避免内嵌在HTML文件中,因将其另置为*.js的文件,然后用<script src="*.js"></script>载入,原因在于这样做可以利用浏览器的Cache避免页面刷新而重新加载.

    2、js文件放置在页面的位置如下:

    <html>

       <head>...</head>

       <script src="*.js">这里引入jquery库文件和全站通用的js文件</script>

       <body>

       <!--content–>

       <script src="*.js">这里引入针对当前页面的js文件</script>

       </body>

    </html>

    3、语言规范

    1、声明变量时必须加var关键字。

    虽然JavaScript允许不加var关键字。 当你没有写 var, 变量就会暴露在全局上下中,这样很可能会和现有变量冲突

    2、尽量减少全局变量的使用.

    3、总是使用分号.

    如果仅依靠语句间的隐式分隔, 有时会很 麻烦. 你自己更能清楚哪里是语句的起止. 而且有些情况下, 漏掉分号会很危险:

    var ck={ name:'gang.li', sex:'male' }//此除无分号

    ([fn1,fn2][0])(); 程序运行之后报错

    原因在于这里相当于执行了ck([fn1,fn2][0])();这条语句。

    4、块内函数声明

    不要在块内声明一个函数。 不要写成:

    if(x){ function foo(){} }

    虽然很多 JS 引擎都支持块内声明 函数,但它不属于ECMAScript规范。

    5、异常

    我们在写一个比较复杂的应用时, 不可能完全避免不会发生任何异常, 所以加上异常判断是很有必要的。

    6、使用Array直接量

    使用Array语法,而不使用Array构造器。

    使用 Array 构造器很容易因为传参 不恰当导致错误:

    var a1=new Array(4,5,6);

    var a2=new Array(5);

    console.log(a1.length); //length=3

    console.log(a2.length); //length=5

    为了避免这些歧义,我们应该使用更易读的 直接量来声明.

    var a1=[4,5,6]; var a2=[5];

    7、不要修改内置对象的原型

    千万不要修改内置对象, 如 Object.prototype 和 Array.prototype 的原型,以免造成不必要的麻烦。

    4、编码风格

    1、命名规范

    A、原则: * 尽量避免潜在冲突; * 精简短小, 见名知意;

    B、使用驼峰命名法:

         variableNamesLikeThis,//变量名

         functionNamesLikeThis, //方法名

         ClassNamesLikeThis,//类名

         SYMBOLIC_CONSTANTS_LIKE_THIS//常量名

    C、特殊命名规范:

    • 前面加 “is” 的变量名应该为布尔值,亦可使用 “can” “has” “should” 
    • 前面加 “str” 的变量名应该为字符串 
    • 前面加 “arr” 的变量名应该为数组
    • 前面加 “num” 或 “count” 的变量名应该为数字
    • 处理错误的变量,必须在后面跟着“Error”
    • 临时的重复变量建议以i,j,k...,命名
    • 通过js获取的dom对象,命名方式参照domObjectLikeThis. 比如: var wrap=document.getElementById('wrap');

    • 通过Jquery获取的jquery对象,命名方式参照$jqueryObjectLikeThis.比如: var $wrap=$('#wrap');

    • 可选参数, 名字以 opt_ 开头。 function add(opt_x,opt_y){ /*...*/ }

    2、使用命名空间

    JavaScript 不支持包和命名空间.不容易发现和调试全局命名的冲突, 多个系统集成时还可能因为命名冲突导致很严重的问题。

    我们遵循下面的约定以避免冲突。 在全局作用域上, 使用一个唯一的, 与工程/库相关的名字作为前缀标识.

    比如, 你的工程是 "Project Meiliwan", 那么命名空间前缀可取为 Meiliwan.*

    var Meiliwan = {};

    Meiliwan.fn1=function(){ /*...*/ }

    当选择了一个子命名空间, 请确保父命 名空间的负责人知道你在用哪个子命名 空间,

    比如说, 你为工程 'Meiliwan' 创建 一个 'user' 子命名空间, 那确保团队人 员知道你在使用 Meiliwan.user={}

    3、函数的声明

    函数应在调用前进行声明,内部函数应在 var 声明内部变量的语句之后声明,这样可以清晰地表明内部变量和内部函数的作用域。

    4、重命名那些名字很长的变量

    主要是为了提高可读性. 局部空间中的变量别名只需要取原名字的最后部分.

    some.long.namespace.MyClass.Helper = function(a) { };

    myapp.main = function() {

                     var MyClass = some.long.namespace.MyClass;

                     var Helper = some.long.namespace.MyClass.staticHelper;

                     Helper(new MyClass());

    };

    5、 注释

    不要吝啬注释。给以后需要理解你的代码的人们(或许就是你自己)留下信息是非常有用的。

    注释应该和它们所注释的代码一样是书写良好且清晰明了。

    偶尔的小幽默就更不错了。 记得要避免冗长或者情绪化。

    及时地更新注释也很重要。错误的注释会让程序更加难以阅读和理解。

    6、使用===与!==来替代==和!=

    JavaScript 与其他熟知的编程语言不同的是,除了可以使用两个等号'=='来作判断以为,还可以使用三个等号'==='来进行逻辑等判断。

    两者的不同是'=='作逻辑等判断时,会先进行类型转换后再进行比较。'==='则不会。因而,'=='进行的判断结果可能产生偏差。'!='与'!=='的区别亦是如此。

    本人提倡尽量使用'==='来进行逻辑等的判断,用'!=='进行逻辑不等的判断。

    var a=1;//num alert(a=='1');//true

    alert(a==='1');//false

    7、字符串

    使用单引号代替双引号。 使用单引号来代替双引号会更好,特别是当创建一个HTML字符串时。

    var msg = '<div class="wrap">...</div>';

    使用双引号: var msg="<div class="wrap">...</div>";

    "需要转义,显得繁琐。

    8、使用 join() 来创建字符串

    出于性能方面考虑,建议在创建字符串时,使用join()来连接。

    function listHtml(items) {

          var html = [];

          for (var i = 0; i < items.length; ++i) {

              html[i] = itemHtml(items[i]);

          }

         return '<div class="foo">' + html.join(', ') + '</div>';

    }

    9、before coding

    当你在编辑代码之前, 先花一些时间查看一下现有代码的风格. 如果他们给算术运算符添加了空格, 你也应该添加.

    如果他们的注释使用一个个星号盒子, 那么也请你使用这种方式。

    我们在这提出了一些全局上的风格规则, 但也要考虑自身情况形成自己的代码风格.

    但如果你添加的代码和现有的代码有很大的区别, 这就让阅读者感到很不和谐.

    所以, 避免这种情况的发生.

  • 相关阅读:
    jquery easy ui 简单字段选择搜索实现
    (转)EasyUI 分页总结
    EasyUI 搜索框
    微信公众号开发简单介绍
    【POJ3740】Easy Finding DLX(Dancing Links)精确覆盖问题
    推断View是否显示在界面上
    菜鸟调错(八)—— Maven编译错误:不兼容的类型的解决方式
    js对table操作(添加删除交换上下TR)
    NBUT 1222 English Game(trie树+DP)
    Android 返回键的处理
  • 原文地址:https://www.cnblogs.com/blogszixin/p/3287078.html
Copyright © 2011-2022 走看看