一、避免全局变量的理由
js中避免创建全局变量一是避免命名冲突,二是避免因为创建全局变量让代码变得脆弱,三是创建全局变量会让代码难以测试。
二、避免创建全局变量的几种方法
//避免全局变量 避免命名冲突
//1.单全局变量之命名空间
var YourGlobal = {
namespace: function(ns) {
var parts = ns.split("."),
object = this,
i, len;
for (i=0,len=parts.length;i < len; i++) {
if(!object[parts[i]]) {
object[parts[i]] = {};
}
object = object[parts[i]];
}
return object;
}
}; YourGlobal.namespace("Books.MaintainableJavaScript");
YourGlobal.Books.MaintainableJavaScript.author = "youyi";
YourGlobal.namespace("Books.HighPerformanceJavaScript");
//保持上面的YourGlobal.Books.MaintainableJavaScript原封不动
YourGlobal.Books.HighPerformanceJavaScript.name = "王宝强";
console.log(YourGlobal.Books.MaintainableJavaScript.author);//youyi
console.log(YourGlobal.Books.HighPerformanceJavaScript.name);//王宝强
//在方法调用之后立即给它添加属性
YourGlobal.namespace("Books").ANewBook = {}; //2.单全局变量之模块
//YUI模块 是将模块和命名空间概念合并在一起
YUI.add("my-module",function(Y) {
//添加命令空间
Y.namespace("Person.MaintainableJavascript");
Y.Person.MaintainableJavascript.author = "xiaoma";
},"1.0.0",{requires:["dependency1","dependency2"]}); //YUI().use()传入想加载的模块名称来使用模块
YUI().use("my-module","another-module",function(Y) {
console.log(Y.Person.MaintainableJavascript.author);
}); //异步模块 AMD
define("my-module2",["dependency1","dependency2"],function(dependency1,dependency2) {
var Books = {};
Books.MaintainableJavaScript = {
author: "张歆艺"
};
return Books;
}); //AMD模块可以是匿名的,模块加载器可以将JavaScript文件名当作模块名称,所以如果有一个叫my-module2.js的文件,模块可以只通过模块加载器来加载 define(["dependency1","dependency2"],function(dependency1,dependency2) {
var Books = {};
Books.MaintainableJavaScript = {
author: "张歆艺"
};
return Books;
}); //模块加载器
//1.使用AMD模块,需要一个与之兼容的模块加载器(Dojo),用Dojo可以向下面这样来加载
//Dojo同样自己也封装了AMD模块
var books = dojo.require("my-module2");
console.log(books.MaintainableJavaScript.author); //2.RequireJs指定依赖和回调函数
//Jquery和Dojo都可以使用RequireJs来加载AMD模块
require(["my-module2"],function(books) {
console.log(books.MaintainableJavaScript.author);
}); //零全局变量
//特殊情况下才会使用,脚本很短且不需要和其他代码产生交互的情况下使用
(function(win) {
//"use strict"严格模式,避免创建全局变量
var doc = win.document;
//其他变量
//其他相关代码
});