zoukankan      html  css  js  c++  java
  • JavaScript Patterns 2.2 Minimizing Globals

    Access a global variable in a browser environment:

    myglobal = "hello"; // antipattern
    
    console.log(myglobal); // "hello"
    
    console.log(window.myglobal); // "hello"
    
    console.log(window["myglobal"]); // "hello"
    
    console.log(this.myglobal); // "hello"  
    1. The problem with Globals
      • Naming collisions
        1. Code not written by developers

          • A third-party JavaScript library

          • Scripts from an advertising partner

          • Code from a third-party user tracking and analytics script

          • Different kinds of widgets, badges, and buttons

        2. Implied globals

          meaning that any variable you don't declare becomes a property of the global object.

          Solution - Use var to declare variable inside the function.

          function sum(x, y) {
          
             var result = x + y;
          
             return result;
          
          }
             
          
          // antipattern, do not use
          
          function foo() {
          
              var a = b = 0; // a is local but b becomes global
          
              // ...
          
          }
             
          
          // The right way
          
          function foo() {
          
             var a, b;
          
             // ...
          
             a = b = 0; // both local
          
          } 
      • portability

        Code to run in different environments (hosts), it's dangerous to use globals because you can accidentally overwrite a host object that doesn't exist in your original environment (so you thought the name was safe to use) but which does in some of the others.

    2. Side Effects when Forgetting var

      Difference between implied globals and explicitly defined ones—the difference is in the ability to undefine these variables using the delete operator

      • Globals created with var(those created in the program outside of any function) cannot be deleted.

      • Implied globals created without var(regardless if created inside functions) can be deleted.

      // define three globals
      
      var global_var = 1;
      
      global_novar = 2; // antipattern
      
      (function () {
      
          global_fromfunc = 3; // antipattern
      
      }());
      
      // attempt to delete
      
      delete global_var; // false
      
      delete global_novar; // true
      
      delete global_fromfunc; // true
      
      // test the deletion
      
      typeof global_var; // "number"
      
      typeof global_novar; // "undefined"
      
      typeof global_fromfunc; // "undefined"  
        
    3. Access to the Global Object

      Access the global object without hard-coding the identifier window, you can do the following from any level of nested function scope:

      var global = (function () {
      
         return this;
      
      }());    
    4. Single var Pattern

      • Provides a single place to look for all the local variables needed by the function

      • Prevents logical errors when a variable is used before it's defined (see "Hoisting: A Problem with Scattered vars" )

      • Helps you remember to declare variables and therefore minimize globals

      • Is less code (to type and to transfer over the wire)

      function func() {
         var a = 1,
         b = 2,
         sum = a + b,
         myobject = {},
         i,
         j;
         // function body...
      } 

      Note: all uninitialized and declared variables are initialized with the value undefined

      function updateElement() {
          var el = document.getElementById("result"),
      
          style = el.style;
      
          // do something with el and style...
      }    
    5. Hoisting: A problem with Scattered vars

      JavaScript enables you to have multiple var statements anywhere in a function, and they all act as if the variables were declared at the top of the function.  

      // antipattern
      
      myname = "global"; // global variable
      
      function func() {
      
          // same as -> var myname = undefined;
      
          alert(myname); // "undefined"
      
          var myname = "local";
      
          alert(myname); // "local"
      
      }
      
      func(); 
  • 相关阅读:
    hdu 2544 Dijstra模板题
    hdu 1002 prime 模板
    POJ_2653_Pick-up sticks_判断线段相交
    POJ_1556_The Doors_判断线段相交+最短路
    POJ_1269_Intersecting Lines_求直线交点
    POJ_3304_Segments_线段判断是否相交
    POJ_2318_TOYS&&POJ_2398_Toy Storage_二分+判断直线和点的位置关系
    ZOJ_2314_Reactor Cooling_有上下界可行流模板
    LuoguP4234_最小差值生成树_LCT
    BZOJ_3996_[TJOI2015]线性代数_最大权闭合子图
  • 原文地址:https://www.cnblogs.com/haokaibo/p/minimizing-globals.html
Copyright © 2011-2022 走看看