Tutorial:Application Layout for Beginners(对于初学者的应用程序布局)

最新推荐文章于 2024-07-24 17:16:26 发布

kinglino520

最新推荐文章于 2024-07-24 17:16:26 发布

阅读量368

点赞数

分类专栏： javascript 文章标签： application layout function extjs button html

javascript 专栏收录该内容

116 篇文章 0 订阅

订阅专栏

1 事前准备
2 需要些什么？
3 applayout.html
4 applayout.js
5 公开Public、私有Private、特权的Privileged？
6 重写公共变量
7 重写（Overriding）公共函数
7.1 参见

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

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

applayout.html
applayout.js

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

applayout.html

view plain copy to clipboard print ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv="Content-Type" content= "text/html; charset=utf-8" >
<link rel="stylesheet" type= "text/css" href= "../extjs/resources/css/ext-all.css" >
<script type="text/javascript" src= "../extjs/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src= "../extjs/ext-all-debug.js" ></script>
<script type="text/javascript" src= "applayout.js" ></script>
<script type="text/javascript" >
Ext.onReady(myNameSpace.app.init, myNameSpace.app);
</script>
<title>Application Layout Tutorial</title>
</head>
<body>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="applayout.js"></script>
    <!-- 本地化的脚本引用在这里 -->
    <script type="text/javascript">
        Ext.onReady(myNameSpace.app.init, myNameSpace.app);
    </script>
    <title>Application Layout Tutorial</title>
</head>
<body>
</body>
</html>

开头的两行声明了文档的类型。程序可以不用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

view plain copy to clipboard print ?

/**
* Application Layout
* by Jozef Sakalos, aka Saki
* <a href="http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners_" target="_blank">http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners_</a>(Chinese)
*/
/**
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
中文用户请注意：applayout.js 这个文件应该在编辑生成文件的同时强行定义为UTF-8编码才可以通过.
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
*/
// 填充图片的本地引用
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif' ;
// 创建命名空间
Ext.namespace('myNameSpace' );
// 创建应用程序
myNameSpace.app = function () {
// 元素还没创建,未能访问
// 私有变量
// 私有函数
// 公共空间
return {
// 公共的属性,如,要转换的字符串
// 公共方法
init: function () {
alert('应用程序初始化成功。' );
}
};
}(); // 程序底部
// 文件底部

/**
  * Application Layout
  * by Jozef Sakalos, aka Saki
  * http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners_
(Chinese)
  */
/**
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
中文用户请注意：applayout.js 这个文件应该在编辑生成文件的同时强行定义为UTF-8编码才可以通过. 
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
*/
// 填充图片的本地引用
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，其值是一个函数立刻运行之后的返回值。

如果运行我们的代码：

view plain copy to clipboard print ?

var o = function () {
return {p1:11, p2:22};
}();

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标签中加入：

<div id="btn1-ct"></div>

空白的div会当作按钮的容器来使用。然后在applayout.js 加入下来代码：

view plain copy to clipboard print ?

/**
* Application Layout
* by Jozef Sakalos, aka Saki
* <a href="http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners_" target="_blank">http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners_</a>(Chinese)
*/
// 填充图片的本地引用
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif' ;
// 允许这个指南同时在Ext2.0 和1.1 上同时工作
Ext.Ext2 = (Ext.version && (Ext.version.indexOf("2" ) == 0));
// 创建命名空间
Ext.namespace('myNameSpace' );
// 创建应用程序
myNameSpace.app = function () {
// 元素还没创建,未能访问
// 私有变量
var btn1;
var privVar1 = 11;
// 私有函数
var btn1Handler = function (button, event) {
alert('privVar1=' + privVar1);
alert('this.btn1Text=' + this .btn1Text);
};
// 公共空间
return {
// 公共的属性,如,要转译的字符串
btn1Text: 'Button 1' ,
// 公共方法
init: function () {
if (Ext.Ext2) {
btn1 = new Ext.Button({
renderTo: 'btn1-ct' ,
text: this .btn1Text,
handler: btn1Handler
});
} else {
btn1 = new Ext.Button( 'btn1-ct' , {
text: this .btn1Text,
handler: btn1Handler
});
}
}
};
}(); //程序底部
// 文件底部

/**
  * 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';
 
// 允许这个指南同时在Ext2.0 和1.1 上同时工作
Ext.Ext2 = (Ext.version && (Ext.version.indexOf("2") == 0));
 
// 创建命名空间
Ext.namespace('myNameSpace');
 
// 创建应用程序
myNameSpace.app = function() {
    // 元素还没创建,未能访问
 
    // 私有变量
    var btn1;
    var privVar1 = 11;
 
    // 私有函数
    var btn1Handler = function(button, event) {
        alert('privVar1=' + privVar1);
        alert('this.btn1Text=' + this.btn1Text);
    };
 
    // 公共空间
    return {
        // 公共的属性,如,要转译的字符串
        btn1Text: 'Button 1',
 
        // 公共方法
        init: function() {
            if (Ext.Ext2) {
                btn1 = new Ext.Button({
                    renderTo: 'btn1-ct',
                    text: this.btn1Text,
                    handler: btn1Handler
                });
            } else {
                btn1 = new Ext.Button('btn1-ct', {
                    text: this.btn1Text,
                    handler: btn1Handler
                });
            }
        }
    };
}(); //程序底部
 
// 文件底部

变量btn1 和privVar1 是私有的。那意味着在程序外部他们是不能够被访问的，而且也不可见。私有函数btn1Handler也是同样道理。

另外一个方面，btn1Text是公共变量所以可以被程序外部访问或者是修改（我们稍后将会演示）。

函数init是特权的，即是私有变量和公共变量两者都可以被它访问到。在本例中，公共变量this.btn1Text和私有函数btn1Handler都能够被特权函数init所访问。同时，相对外界来说，它也属于公共成员的一种。

Ok,运行看看。能看到左上角的按钮吗？很好，点击它。得到一个privVar1=11的警告。这说明私有函数能访问私有变量。

但是，在第二个alert中，this.btn1Text却是undefined，表示是未定义的，这不是我们期望的结果。原因是在handler 内的this变量指向的是button而不是我们的myNameSpace.app .增加scope属性来指明this为myNameSpace.app：

view plain copy to clipboard print ?

if (Ext.Ext2) {
btn1 = new Ext.Button({
renderTo: 'btn1-ct' ,
text: this .btn1Text,
handler: btn1Handler,
scope:this
});
} else {
btn1 = new Ext.Button( 'btn1-ct' , {
text: this .btn1Text,
handler: btn1Handler,
scope:this
});
}

if (Ext.Ext2) {
    btn1 = new Ext.Button({
        renderTo: 'btn1-ct',
        text: this.btn1Text,
        handler: btn1Handler,
        scope:this
    });
} else {
    btn1 = new Ext.Button('btn1-ct', {
        text: this.btn1Text,
        handler: btn1Handler,
        scope:this
    });
}

刷新一下，可以了吧？

重写公共变量
在applayout.js 底部加入下列代码：

view plain copy to clipboard print ?

Ext.apply(myNameSpace.app, {
btn1Text:'Taste 1'
});

Ext.apply(myNameSpace.app, {
    btn1Text:'Taste 1'
});

// 文件底部这代码是用来干什么的呢？首先它创建了我们的程序对象然后改变（重写）公共变量btn1Text的值。运行后将看到按钮上文字的变化。

把文本都放到公共变量，以便于以后的国际化翻译工作，而不需要修改程序的内部代码。

当然你也可以将其它的值例如尺寸、样式、等等的总之是可自定义的选项都放到公共变量中。免于在数千行代码之中为查找某个颜色而费劲。

重写（Overriding）公共函数
接着更改一下代码，让它读起来是这样的：

view plain copy to clipboard print ?

Ext.apply(myNameSpace.app, {
btn1Text:'Taste 1'
, init: function () {
try {
btn1 = new Ext.Button( 'btn1-ct' , {
text: this .btn1Text
, handler: btn1Handler
, scope: this
});
}
catch (e) {
alert('错误: "' + e.message + '" 发生在行： ' + e.lineNumber);
}
}
});
// end of file

Ext.apply(myNameSpace.app, {
      btn1Text:'Taste 1'
    , init: function() {
        try {
            btn1 = new Ext.Button('btn1-ct', {
                  text: this.btn1Text
                , handler: btn1Handler
                , scope: this
            });
        }
        catch(e) {
            alert('错误: "' + e.message + '" 发生在行： ' + e.lineNumber);
        }
    }
});
 
// end of file

我们这里将init重写了一篇，主要是在原来代码的基础上加入异常控制，以便能够捕获异常。试运行一下看还有没有其它的变化？

嗯是的，出现了btn1Handler 未定义的错误。这是因为新的函数虽然尝试访问私有变量但它实际是不允许的。正如所见，原init是特权函数可访问私有空间，但新的init却不能。之所以不能访问私有空间，是因为：禁止外部代码No code from outside，哪怕是尝试重写特权方法。

参见
教程:作用域到底是什么?
Manual:Basic Application Design

Summary: 在本教程将助你合理地规划一个应用程序。
Author: Jozef Sakalos(译者：Frank Cheung)
Published: August 27, 2007
Ext Version: 1.1+ / 2.0+

文章来自：http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners_%28Chinese%29

kinglino520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Tutorial:Application Layout for Beginners(对于初学者的应用程序布局)

1 事前准备 2 需要些什么？ 3 applayout.html 4 applayout.js 5 公开Public、私有Private、特权的Privileged？ 6 重写公共变量 7 重写（Overriding）公共函数 7.1 参见事前准备本教程假设你已经安装好ExtJS库。安装的目录是extjs 并位于你程序的上一级目录。如果安装在其它地
复制链接

扫一扫

专栏目录