关于 extjs 的 namespace

最新推荐文章于 2014-10-27 17:28:13 发布

原创最新推荐文章于 2014-10-27 17:28:13 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #function

本文介绍了ExtJS中命名空间的概念及其实现原理。通过实例展示了如何使用Ext.namespace创建层次化的命名空间，避免变量冲突，实现代码模块化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

命名空间(namespace)是Extjs组织代码的一个非常精巧的方式。通过这一方式，可以将数量庞大的js代码分类到不同的命名空间下，可以有效地解决js容易产生变量冲突的问题，让不同命名空间下的变量和对象的取名更自由而不受同名的约束。下面看看命名空间应用的例子：

Ext.namespace("App.common.util"); App.common.util.MyFormValidater = function(){ //your code here. } App.common.util.DataGetter = function(){ //your code here. } .............

从上面例子可以看出，一个字符串("App.common.util")，经过Ext.namespace处理之后，便能像正常的js代码对象一样可以任意的添加属性（MyFormValidater 、DataGetter ）。到底是什么动作可以产生这样的效果呢。看源代码（以下代码出自3.2版本）：

namespace : function(){ var o, d; Ext.each(arguments, function(v) { d = v.split(".");//以点分开字符串，得到字符串数组 o = window[d[0]] = window[d[0]] || {};//将第一个字符串数组第一个字符串作为window对象的一个属性 /××依次地将字符串数组中的下一个字符串作为上一个字符串对应的对象（已经处理过）的属性*/ Ext.each(d.slice(1), function(v2){ o = o[v2] = o[v2] || {}; }); }); return o; }

经过上面的处理之后，我们上面的例子代码实际上等效于：

window['App'] = {};

window['App'] ['common'] = {};

window['App'] ['common'] ['util']= {};

由于window是一个全局对象，所以：

App = {};

App.common = {};

App.common.util = {}

由上面的分析，命名空间其实就是window全局对象下面的各个对象树(还可以定义App.common.form等等)