javascript 命名空间与运用（前端基础系列）
所谓代码，当你随便命名一个变量：var name = "ukerxi"; 就是一句代码；但当你的代码写出来后，对于后续维护及阅读的人，就可以看出代码是否，易读，易理解；优雅的代码总是遵守一定的规范，这篇文章就说说几种命名空间的运用，运用好了，可以有利于多人开发，模块化代码，代码解耦有一定的作用！
先来看看一个错误的示范：
// 定义一些数据 var name = "ukerxi"; var version = "1.0.0"; var hobby = "riding"; sessionStorage.data = 'test'; sessionStorage.text = 'test'; sessionStorage.name = 'test';
利用命名空间进行重构：
var men = { name: 'ukerxi', version: '1.0.0', hobby: 'riding' } // 由于 sessionStorage 只支持字符型的数据，所以必须将数据进行JSON化处理 sessionStorage.message = JSON.stringify({ data: 'test', text: 'test', name: 'test', });
重构后只产生了两个全局变量，减少了命名冲突的概率，对于全局变量的使用，必须尽量减少，特别是单页面开始时；而sessionStorage等本地存储的使用更加注意，由于它们在多页面之间可以互相访问，很容易造成命名冲突；一下更具体的介绍几种命名空间的使用：
一、使用单例对象进行包裹（单例模式）
var myObj = { name: "ukerxi" }; myObj.fn = function{ // do something };
多人开发时，可以根据自己的名字进行命名一个对象，然后自己写的变量及函数都放进这个命名空间中，这样就避免与他人冲突；在实际开发时，还会遇到多个文件之间共享一个命名空间，可以使用命名空间检测，避免重复或覆盖；例如：
// 方法一 if (typeof myObj === "undefined") { var myObj = {}; } // 方法二（推荐） var myObj = myObj || {};
当你只是想对一个命名空间进行扩展，形如，对插件进行扩展，在JQuery.extend() 方法的扩展；
var myObj=(function(o){ o.addFn = ""; // 实现扩展属性功能 return o; })(window.myObj || {}); // 必须或上空对象，以便在没有事先声明而使用引起的错误
二、闭包实现变量的包裹，减少全局变量
var myObj = (function () { // 私有变量 var name = "ukerxi"; // 返回get方法 return { getName: function () { return name; } }; }()); // 可以变通成更加通用的命名空间 var commonObject = (function(){ var _data = { name: "ukerxi", version: "1.0" } //返回get/set方法 return { get: function(key){ return _data[key]; }, set: function(key, value){ // 检测是否存在要设置的值在不在原本的数据中，这样做是不添加新数据 //如果要添加新数据，这句可以不加 if(typeof _data[key] != "undefined"){ _data[key] = value; }else{ return false; } } } }());
通过返回的getter、setter方法进行读取及设置值，这样就不用担心变量命名冲突；
三、使用构造函数&原型方法，可以构造出更加强大的命名空间
function CommonObj(name) { // 私有变量 // 此处可以不用定义内部的_name变量，因为参数也是私有变量 var _name = name; // 公用方法 this.getName = function () { return _name; }; } CommonObj.prototype = (function () { //静态私有变量，所有实例方法共享这个数据 var _static = "static"; // return { getStatic: function () { return _static; } }; }()); var newObj1 = new CommonObj("obj1"); var newObj2 = new CommonObj("obj2"); // 测试输出 console.log(newObj1.getName()); // -- "obj1" console.log(newObj2.getName()); // -- "obj2" console.log(newObj1.getStatic); // -- "static" console.log(newObj2.getStatic); // -- "static"
最终每次实例化 CommonObj 构造函数时可以进行赋值，然而原型上的属性是共享的；上面代码看起来还是分散的，可以进一步进行改进；
var CommonObj = (function () { // 静态私有变量 var _static = ""; function _fn(name) { // 公用方法 this.getName = function () { return name; }; } // 定义原型方法 _fn.prototype ={ getStatic: function () { return _static; } } // 返回真正的构造函数 return _fn; }()); var newObj1 = new CommonObj(); var newObj2 = new CommonObj(); // 测试输出 console.log(newObj1.getName()); // -- "obj1" console.log(newObj2.getName()); // -- "obj2" console.log(newObj1.getStatic); // -- "static" console.log(newObj2.getStatic); // -- "static"
四、函数的静态调用与非静态调用
主要特性是，通过类自身定义的属性是不会被实例化函数拥有及继承的，故也可以看做是一种命名空间，后续结合设计模式的“建造者”模式，可以创造出强大的一种运用形式；
// 构造函数 var MyObj = function (name) { this.name = name; }; // 静态方法 MyObj.getName = function () { console.log("test"); }; // 原型方法 MyObj.prototype.getName = function () { console.log(this.name); }; // 静态调用 MyObj.getName(); // "test" // 实例化调用 var fn = new MyObj("ukerxi"); fn.getName(); // ukerxi 一种特别的自执行方式形成的命名
五、最后再介绍一种特别的自执行方式形成的命名空间
var CommonObj = ({ fn: function() {console.log("test");}, name: "ukerxi", init: function(){ console.log(this.name); return this; } }).init();
上面例子相当于新建一个对象，然后执行 init方法，最后返回 this 指向这个对象，最后CommonObj 就包含了新建对象的引用；当然实际运用中不建议这样用，只是用来装大神的；
【结束语】
系列文章，包括了原创，翻译，转载等各类型的文章；一方面是为了自己总结，另一方面页希望可以共享知识；在技术方面有输入，也要有所输出，才能更进一步！文章基于自己的实践、阅读及理解，如有不合理及错误的地方，烦请各大佬评论指出，以便改正，感谢！
