博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js写码良好习惯
阅读量:6844 次
发布时间:2019-06-26

本文共 2131 字,大约阅读时间需要 7 分钟。

hot3.png

【JS方面】

  1. 大多数语言缩进标准都默认遵守4空格,但是对于js来说,函数嵌套较多,所以为了阅读的方便,缩进可采用2空格。

  2. 变量不要批量定义或赋值。如:

    var a,b,c = 10;    //不建议

  3. 变量、函数名采用小驼峰命名,对象/类采用大驼峰命名。如:

    var youName = “hehe”;

    var myFunction = function(){

    return "hehe";};

    function myFunction() {return "hehe";}

    function MyFunction(){this.name = "hehe";}

  4. 建议普通地方的引号用单引号,因为json和XML等都规定用双引号,这样就可以无需转义。

  5. 较为严格的判断使用===而不是==。

  6. 对象的属性千万不要作为原型定义,因为假如属性是一个对象的话,不同实例中的属性会指向同一个地址(那个对象定义时成员属性所对应的地址),并且用原型定义的成员属性是多个实例共享的(有点类似于static)。而成员函数避免定义在构造函数内,否则会有运行时的闭包开销。如:

    function MyTest(name){    //这是正确的例子

        this.name = name;

        this.id = 1;

    }

    MyTest.prototype.getName() = function(){return this.name;};

  7. 避免使用多重继承、继承树以及其他复杂的继承,因为js毕竟只是基于对象而非面向对象的语言,复杂的继承会让程序的逻辑变得复杂,代码可读性降低。

  8. 函数内的局部变量在函数开始时就声明好,免得忘记或者造成其他错误解析。如:

    var a = "hehe";

    function test(){

       console.log(a); 

        var a = "xixi";

    }

    test();     //输出undefined

    function f1(){console.log(a);}

    f1();     //输出hehe

    function f2(){

        var a = "yy";

        f1();

    }

    f2();     //输出hehe

    要点一:之所以没有输出hehe或者xixi,是因为在需要访问变量a时,js会首先在函数作用于内搜索是否有变量a(假如没有,依次往上,直到全局),在函数作用域内找到了变量a,但是在执行到console.log(a);时,变量a还没有被声明,所以结果会是undefined。

    要点二:为什么调用f2();也是输出hehe呢?这是因为,js的作用域是静态作用域,作用域的确定是在定义时决定而不是在运行时,所以在定义时,在f2()执行到f1()时,跳到f1(),而f1()里确定了打印的是hehe,再返回f2()时继续往下执行而不是去搜索变量a了。

  9. 对象内的私有属性命名已下划线开头(业内普遍承认的写法)。但是,这样还是不能避免对象的使用者非要修改这些属性。。。。。。有两种解决方案:一是使用闭包,二是使用类的封装。如:

    //使用闭包的方式

    var test =function(){

        var count = 0;

        var get = function(){

            count++;

            return count;

       };

        return get;

    };

    var testDom = test();

    console.log(testDom());    //只能通过get访问count,而不能直接访问到count属性了

    //使用类封装的方式,请参照另一篇博客:javascript模拟面向对象的类(http://my.oschina.net/u/1580821/blog/365342)

  10. 慎用this,因为this是指向的是运行时的上下文对象(和上面第8点有点相反)。如:

    var test1 = {

       name:"name1",

        getName:function(){console.log(this.name);}

    };

    test1.getName();    //输出name1

    var test2 = {

       hehe:test1.getName,

        name:"xixi"

    };

    test2.hehe();    //输出xixi      this不属于某个函数,而是函数调用时所属的对象。

    当然,也可以手动修改上下文范围。。。

    var test3 = {name:"yy"};

    test2.hehe.call(test3);    //则输出yy,此时传入的test3改变this的上下文范围。。。

    当然,也可以绑定永久的上下文范围,这样无论被谁调用,不用传上下文范围都固定是绑定那个了。

    test2.hehe.bind(test3);   //绑定的上下文范围是test3,以后调用就不用传test3了,并且无论在哪调用上下文范围都固定是test3。

    警告:尽量避免二次bind绑定上下文范围或参数表,二次绑定上下文范围bind会失败,因为其实现原来是调用call来实现,然而在其中间实现的时候没有了this,所以二次绑定会失败。

转载于:https://my.oschina.net/u/1580821/blog/370824

你可能感兴趣的文章
Microsoft System Center 2012(七)-SCOM 2012监控redhat linux 6.0
查看>>
适合IT人士的一种做饭方法--炕饼
查看>>
三层交换VLAN配置
查看>>
监控运维系统实施方案--监控对象信息收集阶段
查看>>
WINDOWS和LINUX下带时间的PING包监控脚本
查看>>
RHEL6入门系列之九,常用命令2
查看>>
Exchange数据保护最佳实践
查看>>
突破360防黑加固添加用户
查看>>
数据仓库建模方法初步
查看>>
Active Directory 回收站配置篇
查看>>
ubuntu 11.10 体验
查看>>
MS UC 2013-0-虚拟机-标准化-部署-2-模板机-制作-5
查看>>
隐藏nginx、apache与php版本号
查看>>
【STM32 .Net MF开发板学习-08】远程PLC读写控制
查看>>
Lync 小技巧-12-同台服务器删除Lync Server 2010安装Lync Server 2013
查看>>
【STM32 .Net MF开发板学习-17】Wifi遥控智能小车
查看>>
做程序,要“专注”和“客观”
查看>>
万兆以太网规范和物理层结构
查看>>
windows平台上的lamp软件安装(080214更新版)
查看>>
运维常用表格
查看>>