zoukankan      html  css  js  c++  java
  • Javascript 正确用法 二

    好的,废话不多说,接着上篇来.

    变量(variables)

    始终使用 var keyword来定义变量,假设不这样将会导致 变量全局化,造成污染.

    //bad

    superPower = new SuperPower();

    //good

    var superPower = new SuperPower();

    使用 一个 varkeyword来定义多个变量...而且每一个变量一行..

        // bad
        var items = getItems();
        var goSportsTeam = true;
        var dragonball = 'z';

        // good
        var items = getItems(),
            goSportsTeam = true,
            dragonball = 'z';

    //我个人更喜欢以下这样的定义方法.

        var items = getItems()
            ,   goSportsTeam = true
            ,   dragonball = 'z';


    将未赋值的变量放在后面...

        // bad
        var i, len, dragonball,
            items = getItems(),
            goSportsTeam = true;

        // bad
        var i, items = getItems(),
            dragonball,
            goSportsTeam = true,
            len;

        // good
        var items = getItems(),
            goSportsTeam = true,
            dragonball,
            length,
            i;

    将变量的定义和赋值放在 作用域的顶部,这样能避免 变量提升相关的问题..

        // bad
        function() {
          test();
          console.log('doing stuff..');

          //..other stuff..

          var name = getName();

          if (name === 'test') {
            return false;
          }

          return name;
        }

        // good
        function() {
          var name = getName();

          test();
          console.log('doing stuff..');

          //..other stuff..

          if (name === 'test') {
            return false;
          }

          return name;
        }


        // bad
        function() {
          var name = getName();

          if (!arguments.length) {
            return false;
          }

          return true;
        }

        // good
        function() {
          if (!arguments.length) {
            return false;
          }

          var name = getName();

          return true;
        }

    //上面这个样例我感觉这么奇葩呢...这个name根本没有起到不论什么作用啊...


    Hoisting (国内书籍翻译为 提升)

    变量的定义会得到提升,也就是移动到作用域的顶部 ,可是 赋值并没有得到提升..

    举个简单的样例..对于简单的 var a = 10;

    事实上经历的是两个过程,

    ① var a;

    ② a = 10;

    恩,,变量提升仅仅是提升的第一部分,而第二部分并没有得到提升...

        function example() {
          console.log(declaredButNotAssigned); // => undefined
          var declaredButNotAssigned = true;
        }


        function example() {
          var declaredButNotAssigned;
          console.log(declaredButNotAssigned); // => undefined
          declaredButNotAssigned = true;
        }


    匿名函数表达式提升的仅仅是变量的名称,而不是函数的定义..

        function example() {
          console.log(anonymous); // => undefined

          anonymous(); // => TypeError anonymous is not a function

          var anonymous = function() {
            console.log('anonymous function expression');
          };
        }


    命名函数提升的相同是变量的名称,而不是函数的名称.或者是函数体..

        function example() {
          console.log(named); // => undefined //变量名得到提升..

          named(); // => TypeError named is not a function //函数体没有得到提升..

          superPower(); // => ReferenceError superPower is not defined //函数名没有得到提升..

          var named = function superPower() {
            console.log('Flying');
          };
        }


    函数定义同一时候提升他们的名称和函数体..

        function example() {
          superPower(); // => Flying

          function superPower() {
            console.log('Flying');
          }
        }

    //这也就是为什么我们在我们代码的底部通过这样的方式可以訪问,可是依照之前的方式定义函数无法訪问的原因了..

    //如今大家明确了吧..


    Contional Expressions & Equality  条件表达式和 等式..

    条件表达式会通过 类型转换 来对括号内的内容进行评估来返回 Boolean值..

    转换会遵循下面规则:

    1,对象返回 true

    2,underfined 返回false

    3, Null 返回false

    4, Booleans类型就返回自己.

    5, +0,0,-0,NaN 返回false ,其它返回true

    6, 空字符返回false..//注意注意,假设你的字符串里面有 空格,则相同会返回true


    if([0]) {

      //true

      //这个array 是我们之前提过的,是通过字面量来进行数组的创建.... 当然返回true,不要被 0 迷惑了..

    }

        // bad
        if (name !== '') {
          // ...stuff...
        }

        // good
        if (name) {
          // ...stuff...
        }

        // bad
        if (collection.length > 0) {
          // ...stuff...
        }

        // good
        if (collection.length) {
          // ...stuff...
        }


    代码块..

        // bad
        if (test)
          return false;

        // good
        if (test) return false;

        // good
        if (test) {
          return false;
        }

        // bad
        function() { return false; }

        // good
        function() {
          return false;
        }

        // bad
        var x=y+5;

        // good
        var x = y + 5;


  • 相关阅读:
    mysql主从复制读写分离的配置方法详解
    JS如何给ul下的所有li绑定点击事件,点击使其弹出下标和内容
    C#中的参数和调用方式(可选参数、具名参数、可空参数)
    关于HTML5的data-*自定义属性的总结
    在Java代码中解析html,获取其中的值方法
    Java面向对象之成员隐藏与属性封装操作示例
    《设计原本》读书笔记03
    java双重检查锁定的实现代码
    微信公众号开发之设置自定义菜单实例代码【java版】
    深入学习Redis(3):主从复制
  • 原文地址:https://www.cnblogs.com/lcchuguo/p/5156982.html
Copyright © 2011-2022 走看看