戲說(shuō)js之名字空間薦
先从简单的js代码开始:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> //请养成var的好习惯 var a=123; alert(window.a); var b="hello"; alert(window.b); window.c=true; alert(window.c);</script> </head> <body> </body> </html>
这个简单的代码我想大家都明白，这里全局范围内声明的2个变量，等于为全局对象window附加2个属性.关于为什么强调要使用var，后面我们会看到理由。
这里都是简单的变量，我们可以稍微复杂些，来个函数对象和其他对象。
//请养成var的好习惯 function func1() { alert("func1"); } window.func2=function(){alert("func2");}; var func3=func1; var func4=new Function("alert(\"func4\");");//晦涩难读，不常见。 window.func1();我们看到这几个基本相同的代码(关于function与Function方式的差别不在这里讨论),typeof（window.func****)我们知道他们是function对象。
也属于全局范围。
//请养成var的好习惯 var i=123; var s="hello"; var f=4.5555; var b=false; var udef;//=undefined var nul=null; var o={};但你想过没有，随之脚本量的增加全局变量增多，冲突的可能性就加大，随时都有被覆盖的风险。
好比是往根目录拷贝文件，同名的可能性在所难免的。我们想到的办法是使用层级目录的方式，软件开发领域解决这种情况借用的名字空间的方式(Namespace或者包Package).
js没有在语言层次给予名字空间支持，但是聪明的程序人员们还是想到了解决的办法。
我们知道alert(typeof window);你看到的是个object既然全局window是个对象，能承载其他的变量，那么好办了，我们的一般对象也可以有这种能力:
window.AAA.a这样不就可以实现层级管理名字了吗。
var MyUtils={};//声明一个"名字空间" MyUtils.a=123; MyUtils.b=true; alert(MyUtils.a); var MyTools={ Test:function() { alert("Test"); }, F:function(){ alert("F function"); } }; MyTools.F(); MyTools.a="此a非比a."; 当然我们还可以继续嵌套，类似多层目录，读者可以自己实验。现在OOP大行其道，我们看看js里的“类”，用引号称它是个类，因为js目前没有给我们提供Class关键字之类的东西，只是在js实现上采用了个小技巧。我们来看下，有必要对Function来个简介，因为他对js里的类实现有的不可轻视的重要低位。看下这个就知道对象与Function的千丝万缕的关系了：、var o=new Object; alert(typeof o.constructor);
输出function,也就是说js的对象有个contructor属性指向当成实例化它的那个构造函数。再实验下：
var MyUtils={};//声明一个"名字空间" //声明构造函数 MyUtils.Student=function(name,age) { this.name=name; this.age=age; }; var o=new MyUtils.Student('张三',23); alert(o.constructor);我们验证了这一点。
var MyUtils={};//声明一个"名字空间" //声明构造函数 MyUtils.Student=function(n,a) { this.name=n; this.age=a; //可以实现私有方法 function echo() { alert(this.name+"的年龄是:"+this.age); } this.Echo=echo;//公开一个接口对外使用 }; var o=new MyUtils.Student('张三',23); o.Echo();实例化的问题解决了。当然了有个问题，对于实例方法来说，每个实例对象保持一个副本不太合理。还有如何实现OOP里的继承思想呢？不得不提到prototype这个属性，上面实例化过程var o1=new MyUtils.Student('张三',23);new时，会生成一个对象，构造方法里的this指向这个对象， this.name=name; this.age=age;这些将为对象的属性赋值。有了这个prototype属性，js还会这这个原型对象里“继承一些属性”;var MyUtils={};//声明一个"名字空间" //声明构造函数 MyUtils.Student=function(name,age) { this.name=name; this.age=age; //可以实现私有方法 function echo() { alert(this.name+"的年龄是:"+this.age); } this.Echo=echo;//公开一个接口对外使用 }; MyUtils.Student.prototype.Func=function(){alert("共有的.");}; var o1=new MyUtils.Student('张三',23); var o2=new MyUtils.Student('李四',20); alert(o1.Func==o2.Func);我们给这个Student的prototype属性设置属性Func,然后实例化2个对象，我们发现神奇的事情出现了，我们并没有给Student类设置Func属性，但是实例对象却具有了，这就是原型的神奇之处。
var MyUtils={};//声明一个"名字空间"
//声明构造函数
//普通学生类
MyUtils.Student=function(name,age)
{
this.name=name;
this.age=age;
//可以实现私有方法
function echo()
{
return this.name+"的年龄是:"+this.age;
}
this.Echo=echo;//公开一个接口对外使用
};
//大学生
MyUtils.CollegeStudent=function(name,age,major)
{
MyUtils.Student.call(this,name,age);//有点像base(name,age)或super之类的
this.major=major;
};
/*MyUtils.CollegeStudent.prototype=new MyUtils.Student();
MyUtils.CollegeStudent.prototype.CEcho=function(){
return this.Echo()+","+"专业为"+this.major;
};*/
var protoObj=new MyUtils.Student();
protoObj.CEcho=function(){
return this.Echo()+","+"专业为"+this.major;
};
MyUtils.CollegeStudent.prototype=protoObj;
var o1=new MyUtils.CollegeStudent('张三',23,"化工");
var o2=new MyUtils.CollegeStudent('李四',20,"机械");
alert(o2.CEcho());
所以关键就是那个prototype,我们把这个模子构造好了。 注意:来几个实际中的例子 比如jquery.tinyscrollbar.js这个插件源码里的： 1.$.tiny = $.tiny || { }; 名字空间(其实就是一个装东西的口袋对象，一个object而已，跟你平时使用没什么差别。 这里作者写了好几个不错的插件tiny.*****,不妨去看看，所以他都放在了这个空间里 $.tiny||{}如果$.tiny==undefined则，$.tiny={}相当于。比如页面引入了坐着多个插件。 2. $.tiny.scrollbar = { ............................. }; $.tiny.空间里加个scrollbar属性，比如存储了选项配置$.tiny.scrollbar.options 3.关键jquery插件扩展： $.fn.tinyscrollbar = function(options) {....} $.fn就相当于$.prototype 我们给原型添加属性那么实例对象（jquery对象的啦)就都具有了tinyscrollbar方法， 比如$("#myscrollbar")这个是jQuery对象，你扩展了jquery之后，就有了$("#myscrollbar").tinyscrollbar(); 有必要说一下闭包： 我把它理解为一个封闭的函数执行体。 比如 全局内var o=123; 人人可以访问， 但是 function t1() { var o=123; } function t2() { var o=“hello”; }function t3() { var o=true; } 现在只有t内可以访问到，有点隔离保护的作用。不管怎样我想我不要误导你，但希望能给你一个形象的理解。对您的学习不要帮倒忙。 上图（离散数学里的闭包不知道跟这个有什么关系么？） R1相当于全局空间,1,2,3代表3个闭包，这里代表t1,t2,t3的3个执行体。
...
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
