JavaScript Patterns 2.2 Minimizing Globals
2014-05-15 23:14 小郝(Kaibo Hao) 阅读(333) 评论(0) 编辑 收藏 举报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"
-
The problem with Globals
-
Naming collisions
-
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
-
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.
-
-
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"
-
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; }());
-
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... }
-
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();
出处:http://www.cnblogs.com/haokaibo/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。