强大的EXT最新使用手册（中文）(4)

理解作用域

接下的内容开始有点复杂了。切换到Firebug Console标签页然后输入： var o1 = {testvar:22, fun:function() { alert('o1: ' + this.testvar); }}; var o2 = {testvar:33, fun:function() { alert('o2: ' + this.testvar); }}; 结果是什么？你声明了o1 和 o2两个对象，分别都有一些属性和方法，但值不同。 接着试试： fun(); window.fun(); this.fun(); 出错了，是吧？因为window对象（等价于this）并没有fun的方法。试一试下面的： o1.fun(); o2.fun(); 22和33出来了？非常好！

接下来这部分的内容最复杂啦。基于这个原始的函数，如果对象的数量多的话，你必须为每个对象加上这个函数－明显是重复劳动了。这样说吧，o1.fun写得非常清晰的而且为了搞掂它已经占用了我一个星期的开发时间。想象一下代码到处散布着this变量，怎么能不头疼？如果要将调用（执行）的o1.fun方法但this会执行o2,应该怎么实现呢？试一试下面的： o1.fun.call(o2); 明白了吗？当执行o1的fun方法时你强行将变量this指向到o2这个对象，换句话说，更加严谨地说:o1.fun的方法在对象o2的作用域下运行。

当运行一个函数，一个对象的方法时，你可将作用域当作this值的变量。

变量的可见度

变量的可见度和作用域的关系非常密切。我们已经了解到，可在任何对象的外部，声明变量，或在全局的函数（函数也是变量的一种）也可以，更严格说，它们是全局对象window的属性。 全局变量在任何地方都可见；无论函数的内部还是外部。如果你在某一个函数内修改了一个全局变量，其它函数也会得知这个值是修改过的。

对象可以有它自己的属性（像上面的testvar）,这些属性允许从内部或是外部均是可见的。试： alert(o1.testvar); // 从外部访问o1的属性testvar 从内部访问的演示可在两个测试对象的fun方法找到。

用关键字var在内部声明，相当于声明局部变量（局部声明也是在一条链上，即Scope Chain 作用域

链上,Frank注）： i = 44; function fn2() { var i = 55; alert(i); } fn2(); 将得到什么？对了，55。声明在函数fn2的变量i是一个本地变量（局部变量），和等于44的全局变量i 44没什么关系。 But: alert(i); 这会访问全局变量i，显示44。

希望本文能帮助读者彻底理解作用域变量可见性的含义。

EXT程序规划入门

事前准备

本教程假设你已经安装好ExtJS库。安装的目录是extjs 并位于你程序的上一级目录。如果安装在其它地方你必须更改路径，更改示例文件中script标签的src的属性。

需要些什么？

除ExtJS库本身外，我们还需要两个文件：

? applayout.html ? applayout.js

先看看一份html文档，比较精简。并附有详细说明：

applayout.html

Application Layout Tutorial 开头的两行声明了文档的类型。程序可以不用doctype,但是这样的话浏览器可能默认其为Quirks怪僻类型，会导致处理跨浏览器这一问题上出现差异。

我们采用HTML 4.01 Transitional的文档类型，该类型在主流浏览器上支持得不错。当然，你也可以根据你的需求采用其它类型的doctype，但是记住别忘了要加上doctype。

接着指定HTML头部的Content-Type。做这些事情其实很琐碎，但总是有益处。 然后引入EXT的样式，适配器和EXTJS本身。有两种版本的ExtJS：

? ext-all.js - 不能直接阅读，加载时更快，用于产品发布 ? ext-all-debug.js - 便于阅读，开发阶段使用,

开发阶段的时候便需要引入debug的版本。

applayout.js这个文件就是我们的程序，紧跟着的是本地化的脚本，这里可以换成Extjs翻译好的版本

跟着我们开始分配事件句柄(event handler)，使得在文档全部加载完毕后，程序就可以初始化（运行）。 下面的这一行：

Ext.onReady(myNameSpace.app.init, myNameSpace.app); 可这样说：当文档全部加载完毕,就运行myNameSpace.app的init方法,规定的作用域是myNameSpace.app。

然后是标题，头部的结尾，body（当前空）和结束标签。 文档的解说就说到这儿了。

applayout.js

/** * Application Layout * by Jozef Sakalos, aka Saki * http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners_(Chinese) */ // 填充图片的本地引用 Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif'; // 创建命名空间 Ext.namespace('myNameSpace'); // 创建应用程序 myNameSpace.app = function() { // 元素还没创建,未能访问 // 私有变量 // 私有函数 // 公共空间 return { // 公共的属性,如,要转换的字符串 // 公共方法 init: function() { alert('应用程序初始化成功。'); } }; }(); // 程序底部 // 文件底部 文件最开始的几行是注释，说明该文件的主要内容，作者，作者相关的资讯。没有任何注释的程序也可以正常的运行，－但请记住：每次写的程序要容易给人看得懂的 Always write your application as if you would write it for another.当你回头看你几个月前写的代码，发现你根本不记得自己写过什么的时候，就会明白这个道理，并养成编码的好习惯。接着是要指向你服务器的填充图片，如不指定则默认extjs.com。每次运行程序的时候都访问extjs.com，不推荐这样，应该先修改这个常量值指向到本地。

现在自定义命名空间。将所有变量和方法都划分到一个全局对象下管理，这样的好处是避免了变量名冲突和由不同函数干扰了全局变量的值。名字（namespace）可按自己的方案选择。

整段代码的重点是，我们创建了 myNameSpace对象的属性app，其值是一个函数立刻运行之后的返回值。

如果运行我们的代码： var o = function() { return {p1:11, p2:22}; }(); 实际上我们创建了一个匿名函数（没有名字的函数），经过解释（预编译？）之后让它立刻运行（注意函数后面的()）。最后将函数返回的对象（注意此时是一个object变量）分配到变量o。我们的程序便是这种思路去写的。

你可以把私有变量和私有函数直接定义在function和return这两个声明之间，但是请切记：此时不能访问任何html页面中的元素，那会导致错误，因为这段代码在加载时页面的head中就运行了，而这时候html页面中的其它元素还没有被加载进来。

另外一方面，函数init,是由匿名函数返回的对象的一个方法而已。它会在文档全部加载后才运行。换言之整个DOM树已经是可用的了。

一切都还好吧～如果能正确运行http://yourserver.com/applayout/applayout.html，不出现什么错误的话将出现一个警告。

接下来是利用这个空白的模板，讨论本文的重点。

公开Public、私有Private、特权的Privileged？

让我们加入一些有趣内容到程序中去吧。在页面applayout.html的body标签中加入：