zoukankan      html  css  js  c++  java
  • 速读《Javascript模式》(二)(js书写规范、命名规范)

    |emmmm....今天翻了翻书,发现书是12年写的,版本可能比较旧,很多es6已经实现的东西这本书还是用比较旧的版本,但是没有关系,还是展示出来吧。


    |其实按我的理解,这本书应该是一套通用的大家都来遵循的模板,让代码更加的美观和规范。


    |碎碎念,让我们入正题吧,今天是第二章的内容,是一些代码编写的基本规范,比如变量名的命名规范等等。




    一、尽量少用全局变量

    这个上次有写到,虽然上次写的有点乱。。
    全局变量的问题在于他们在整个Javascript应用或web页面内共享。他们生存在同一个全局命名空间内,总有可能发生命名冲突。譬如当一个应用程序中的两个独立的部分定义了同名的全局变量,但却有不同的目的时。

    最小化全局变量数量的方法有 命名空间模式 或 立即执行函数。但最重要的还是var单一化。

    其中最需要提防的是js的隐式创建全局变量。

    详细看(一),我就不再赘述啦。


    二、每个函数仅使用一个var声明

    	function func(){
                var a = 1,
                    b = 2,
                    sum = a + b,
                    myObject = {},
                    i,
                    j;
    
                    //函数体 
            }


    形如上面这种模式,是最猴的!


    三、for循环

    	myArray = [];
            for (var i = 0; i < myArray.length; i++) {
                //myArray[i]进行处理
            }

    转化成

    	myArray = [];
            var i,
                max = myArray.length;
            for (var i = 0; i < max; i++) {
                //myArray[i]进行处理
            }

    遵循单一var原则,并且在这种方式下,对长度的值只提取一次,但应用到整个循环中。


    四、for-in循环

    *推荐使用正常的for循环来处理数组,并使用for-in循环来处理对象


            // 对象
            var man = {
                hands:2,
                leg:2
            }
            if(typeof Object.prototype.clone === "undefined"){
                Object.prototype.clone = function(){};
            }

    该原型链是活动的,这也就意味着所有对象都会自动获取针对新方法的访问。为了避免在枚举man的方法时枚举出clone()方法,需要调用hasOwnProperty()函数来过滤掉该原型属性。

            var i,
                hasOwn = Object.prototype.hasOwnProperty;
                for(i in man){
                    if(hasOwn.call(man, i)){
                        console.log(i, ":", man[i]);
                    }
                }

    因此,最好在for-in循环时加上一句hasOwnProperty()的判断


    五、不要增加内置的原型

    影响可维护性,不推荐


    六、避免使用隐式类型转换

    为了避免隐式类型转换导致的混淆不清,请在比较语句的时候使用===和!===


    七、避免使用eval()

    使用eval()可能包含一些安全隐患 不推荐使用

    另外 setInterval()、setTimeout()、function()等构造函数来传递参数时,大部分情况下也会导致eval()的隐患

            //反模式
            setTimeout("myFunc()",100);
            setTimeout("myFunc(1, 2, 3)",1000);
            //推荐的模式
            setTimeout("myFunc",1000);
            setTimeout(function(){
                myFunc(1, 2, 3);
            },1000);



    八、使用parseInt()的数值约定

    使用parseInt()可以从一个字符串中获取数值,该函数的第二个参数是一个进制参数,最好不要忽略该参数

    在es3中 以0开始的字符串会被认为是八进制数 但在es5中有变 为避免误会 最好传一个10

            var month = "06";
            month = parseInt(month, 10);

    当然还有其他强制转换的方法

            +"08";
            Number("08");

    但是不负责字符串哦


    九、编码约定


    (1)大括号

    for、if循环时,一条语句的时候,也最好使用上大括号,避免以后要往里加东西,麻烦

    (2)开放大括号的位置

    由于js的分号插入性质

            function func(){
                return
                {
                    name:"Bat"
                };
            }

    会变成

            function func(){
               return undefined;
                {
                    name:"Bat"
                };
            }

    所以写成这样子吧

            function func(){
               return{
                    name:"Bat"
                };
            }

    (3)空格

    • 在分开for循环的各个部分的分号之后:
              for (var i = 0; i < 10; i += 1){}
    • 在for循环中初始多个变量
              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(){}
    • 在匿名表达式之后
              var myFunc =function () {};
    • 在函数中使用大括号开始之前,
    • 在大括号结束符和else或while之间
    (4)命名约定


    (5)编写API文档
            /**翻转一个字符串
            *@param{string}输入需要翻转的字符串
            *@return{string}翻转后的字符串
            */
            var reverse = function(input){
                //...
                return ouput;
            }




    还有打包工具 Closure Compiler 以及检查工具 JSLint
    还有打注释工具JSDoc ToolKit 和YUIDoc

    ok 这就是所有第二章的内容啦 有什么不懂的小伙伴欢迎在评论区提出,这个笔记提炼出书的重要内容,有些东西面试常考到,本章主要讲了代码编写的一些需要遵循的规范,特别的变量命名那部分一定要用啊,我看过小伙伴写的不遵循小驼峰式的代码,太丑啦!所以一定要根据这个规范写代码,才专业嘛~


  • 相关阅读:
    IE浏览器和谷歌浏览器相互跳转
    centos7安装docker
    centos7安装groovy
    centos7安装NodeJs
    mongodb数据库的备份还原
    centos7最小版配置
    centos7中python2.7升级到python3.7
    typedef struct用法详解与小结
    MinGW的gdb调试
    MinGW-w64安装教程——著名C/C++编译器GCC的Windows版本
  • 原文地址:https://www.cnblogs.com/suedar/p/8506326.html
Copyright © 2011-2022 走看看