• 高质量JavaScript代码书写基本要点学习


    高质量JavaScript代码书写基本要点学习
    可维护的代码意味着:
    •可读的
    •一致的
    •可预测的
    •看上去就像是同一个人写的
    •已记录
     
    最小全局变量(Minimizing Globals)
     
    JavaScript通过函数管理作用域。在函数内部声明的变量只在这个函数内部,函数外面不可用。另一方面,全局变量就是在任何函数外面声明的或是未声明直接简单使用的。
     
    每个JavaScript环境有一个全局对象,当你在任意的函数外面使用this的时候可以访问到。你创建的每一个全部变量都成了这个全局对象的属性。在浏览器中,方便起见,该全局对象有个附加属性叫做window,此window(通常)指向该全局对象本身。
     
    隐式全局变量和明确定义的全局变量间有些小的差异,就是通过delete操作符让变量未定义的能力。
    •通过var创建的全局变量(任何函数之外的程序中创建)是不能被删除的。
    •无var创建的隐式全局变量(无视是否在函数中创建)是能被删除的。
     
    这表明,在技术上,隐式全局变量并不是真正的全局变量,但它们是全局对象的属性。属性是可以通过delete操作符删除的,而变量是不能的:
     
    // 定义三个全局变量
    var global_var = 1;
    global_novar = 2; // 反面教材
    (function () {
       global_fromfunc = 3; // 反面教材
    }());
     
    // 试图删除
    delete global_var; // false
    delete global_novar; // true
    delete global_fromfunc; // true
     
    // 测试该删除
    typeof global_var; // "number"
    typeof global_novar; // "undefined"
    typeof global_fromfunc; // "undefined"
     
    在ES5严格模式下,未声明的变量(如在前面的代码片段中的两个反面教材)工作时会抛出一个错误。
     
    function func() {
       var a = 1,
           b = 2,
           sum = a + b,
           myobject = {},
           i,
           j;
       // function body...
    }
     
    您可以使用一个var语句声明多个变量,并以逗号分隔。像这种初始化变量同时初始化值的做法是很好的。这样子可以防止逻辑错误(所有未初始化但声明的变量的初始值是undefined)和增加代码的可读性。在你看到代码后,你可以根据初始化的值知道这些变量大致的用途,例如是要当作对象呢还是当作整数来使。
     
    这就是为什么当你循环获取值时,缓存数组(或集合)的长度是比较好的形式,正如下面代码显示的:
     
    for (var i = 0, max = myarray.length; i < max; i++) {
       // 使用myarray[i]做点什么
    }
     
    这样,在这个循环过程中,你只检索了一次长度值。
     
    还有两种变化的形式,其又有了些微改进,因为:
    •少了一个变量(无max)
    •向下数到0,通常更快,因为和0做比较要比和数组长度或是其他不是0的东西作比较更有效率
     
    第一种变化的形式:
     
    var i, myarray = [];
    for (i = myarray.length; i–-;) {
       // 使用myarray[i]做点什么
    }
     
    第二种使用while循环:
     
    var myarray = [],
        i = myarray.length;
    while (i–-) {
       // 使用myarray[i]做点什么
    }
     
    这些小的改进只体现在性能上,此外JSLint会对使用i–-加以抱怨。
     
    (不)扩展内置原型((Not) Augmenting Built-in Prototypes)
     
    扩增构造函数的prototype属性是个很强大的增加功能的方法,但有时候它太强大了。
     
    增加内置的构造函数原型(如Object(), Array(), 或Function())挺诱人的,但是这严重降低了可维护性,因为它让你的代码变得难以预测。使用你代码的其他开发人员很可能更期望使用内置的JavaScript方法来持续不断地工作,而不是你另加的方法。
     
    另外,属性添加到原型中,可能会导致不使用hasOwnProperty属性时在循环中显示出来,这会造成混乱。
     
    因此,不增加内置原型是最好的。你可以指定一个规则,仅当下面的条件均满足时例外:
    •可以预期将来的ECMAScript版本或是JavaScript实现将一直将此功能当作内置方法来实现。例如,你可以添加ECMAScript 5中描述的方法,一直到各个浏览器都迎头赶上。这种情况下,你只是提前定义了有用的方法。
    •如果您检查您的自定义属性或方法已不存在——也许已经在代码的其他地方实现或已经是你支持的浏览器JavaScript引擎部分。
    •你清楚地文档记录并和团队交流了变化。
     
    避免隐式类型转换(Avoiding Implied Typecasting )
     
    JavaScript的变量在比较的时候会隐式类型转换。这就是为什么一些诸如:false == 0 或 “” == 0 返回的结果是true。为避免引起混乱的隐含类型转换,在你比较值和表达式类型的时候始终使用===和!==操作符。
     
    避免(Avoiding) eval()
     
    如果你现在的代码中使用了eval(),记住该咒语“eval()是魔鬼”。此方法接受任意的字符串,并当作JavaScript代码来处理。当有问题的代码是事先知道的(不是运行时确定的),没有理由使用eval()。如果代码是在运行时动态生成,有一个更好的方式不使用eval而达到同样的目标。例如,用方括号表示法来访问动态属性会更好更简单:
     
    // 反面示例
    var property = "name";
    alert(eval("obj." + property));
     
    // 更好的
    var property = "name";
    alert(obj[property]);
     
    使用eval()也带来了安全隐患,因为被执行的代码(例如从网络来)可能已被篡改。这是个很常见的反面教材,当处理Ajax请求得到的JSON 相应的时候。在这些情况下,最好使用JavaScript内置方法来解析JSON相应,以确保安全和有效。若浏览器不支持JSON.parse(),你可以使用来自JSON.org的库。
     
    同样重要的是要记住,给setInterval(), setTimeout()和Function()构造函数传递字符串,大部分情况下,与使用eval()是类似的,因此要避免。在幕后,JavaScript仍需要评估和执行你给程序传递的字符串:
     
    // 反面示例
    setTimeout("myFunc()", 1000);
    setTimeout("myFunc(1, 2, 3)", 1000);
     
    // 更好的
    setTimeout(myFunc, 1000);
    setTimeout(function () {
       myFunc(1, 2, 3);
    }, 1000);
     
    如果你绝对必须使用eval(),你可以考虑使用new Function()代替。有一个小的潜在好处,因为在新Function()中作代码评估是在局部函数作用域中运行,所以代码中任何被评估的通过var定义的变量都不会自动变成全局变量。另一种方法来阻止自动全局变量是封装eval()调用到一个即时函数中。
     
    考虑下面这个例子,这里仅un作为全局变量污染了命名空间。
     
    console.log(typeof un);    // "undefined"
    console.log(typeof deux); // "undefined"
    console.log(typeof trois); // "undefined"
     
    var jsstring = "var un = 1; console.log(un);";
    eval(jsstring); // logs "1"
     
    jsstring = "var deux = 2; console.log(deux);";
    new Function(jsstring)(); // logs "2"
     
    jsstring = "var trois = 3; console.log(trois);";
    (function () {
       eval(jsstring);
    }()); // logs "3"
     
    console.log(typeof un); // number
    console.log(typeof deux); // "undefined"
    console.log(typeof trois); // "undefined"
     
    另一间eval()和Function构造不同的是eval()可以干扰作用域链,而Function()更安分守己些。不管你在哪里执行Function(),它只看到全局作用域。所以其能很好的避免本地变量污染。在下面这个例子中,eval()可以访问和修改它外部作用域中的变量,这是Function做不来的(注意到使用Function和new Function是相同的)。
     
    (function () {
       var local = 1;
       eval("local = 3; console.log(local)"); // logs "3"
       console.log(local); // logs "3"
    }());
     
    (function () {
       var local = 1;
       Function("console.log(typeof local);")(); // logs undefined
    }());
     
    使用parseInt()你可以从字符串中获取数值,该方法接受另一个基数参数,这经常省略,但不应该。当字符串以”0″开头的时候就有可能会出问题,例如,部分时间进入表单域,在ECMAScript 3中,开头为”0″的字符串被当做8进制处理了,但这已在ECMAScript 5中改变了。为了避免矛盾和意外的结果,总是指定基数参数。
     
    var month = "06",
        year = "09";
    month = parseInt(month, 10);
    year = parseInt(year, 10);
    此例中,如果你忽略了基数参数,如parseInt(year),返回的值将是0,因为“09”被当做8进制(好比执行 parseInt( year, 8 )),而09在8进制中不是个有效数字。
     
    替换方法是将字符串转换成数字,包括:
     
    +"08" // 结果是 8
    Number("08") // 8
     
    这些通常快于parseInt(),因为parseInt()方法,顾名思意,不是简单地解析与转换。但是,如果你想输入例如“08 hello”,parseInt()将返回数字,而其它以NaN告终。
     
    要记住,建立和坚定不移地遵循规范要比纠结于规范的细节重要的多。
    总之,总是使用花括号,并始终把在与之前的语句放在同一行:
     
    function func() {
       return {
          name : "Batman"
       };
    }
    关于分号注:就像使用花括号,你应该总是使用分号,即使他们可由JavaScript解析器隐式创建。这不仅促进更科学和更严格的代码,而且有助于解决存有疑惑的地方,就如前面的例子显示。
    空格的使用同样有助于改善代码的可读性和一致性。在写英文句子的时候,在逗号和句号后面会使用间隔。在JavaScript中,你可以按照同样的逻辑在列表模样表达式(相当于逗号)和结束语句(相对于完成了“想法”)后面添加间隔。
    适合使用空格的地方包括:
    •for循环分号分开后的的部分:如for (var i = 0; i < 10; i += 1) {...}
    •for循环中初始化的多变量(i和max):for (var i = 0, max = 10; i < max; i += 1) {...}
    •分隔数组项的逗号的后面:var a = [1, 2, 3];
    •对象属性逗号的后面以及分隔属性名和属性值的冒号的后面:var o = {a: 1, b: 2};
    •限定函数参数:myFunc(a, b, c)
    •函数声明的花括号的前面:function myFunc() {}
    •匿名函数表达式function的后面:var myFunc = function () {};
     
    使用空格分开所有的操作符和操作对象是另一个不错的使用,这意味着在+, -, *, =, <, >, <=, >=, ===, !==, &&, ||, +=等前后都需要空格。
    最后需要注意的一个空格——花括号间距。最好使用空格:
    •函数、if-else语句、循环、对象字面量的左花括号的前面({)
    •else或while之间的右花括号(})
    最重要的习惯,然而也是最难遵守的,就是保持注释的及时更新,因为过时的注释比没有注释更加的误导人。
  • 相关阅读:
    sql-select for update
    java-JDK动态代理
    idea-热部署jreble的使用
    vue-【el-table】转成【pl-table】
    mybatis-字段值为null或为''无法存储到数据库
    vue-本地开发热部署编译缓慢
    chrome-截长图
    el-cascader 级联选择器中选中任意一级去掉圆形按钮
    idea-绿色注释颜色16进制
    markdown 语法
  • 原文地址:https://www.cnblogs.com/doit8791/p/3209497.html
Copyright © 2020-2023  润新知