zoukankan      html  css  js  c++  java
  • <<编写可维护的JavaScript>>之避免使用全局变量

    一、避免全局变量的理由

        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;
    	//其他变量
    	//其他相关代码
    });
    

      

  • 相关阅读:
    bash:加减乘除(bc、let)
    shell配置文件
    HDU4624 Endless Spin 【最大最小反演】【期望DP】
    SPOJ10707 COT2
    HDU5977 Garden of Eden 【FMT】【树形DP】
    Codeforces1023E Down or Right 【贪心】
    Codeforces1023F Mobile Phone Network 【并查集】【最小生成树】
    UOJ272 [清华集训2016] 石家庄的工人阶级队伍比较坚强 【分治乘法】
    LOJ2721 [NOI2018] 屠龙勇士 【扩展中国剩余定理】
    UOJ268 [清华集训2016] 数据交互 【动态DP】【堆】【树链剖分】【线段树】
  • 原文地址:https://www.cnblogs.com/yy95/p/5788483.html
Copyright © 2011-2022 走看看