入门应用布局限性(pplication Layout for Beginners )

简介: Tutorial:Application Layout for Beginners (Chinese) From Learn About the Ext JavaScript Library Jump to: navigation, search Summary: 在本教程将助你合理地规划一个应用程序。

Tutorial:Application Layout for Beginners (Chinese)

From Learn About the Ext JavaScript Library

Jump to: navigation, search
Summary: 在本教程将助你合理地规划一个应用程序。
Author: Jozef Sakalos(译者:Frank Cheung)
Published: August 27, 2007
Ext Version: 1.1+ / 2.0+
Languages: en.pngEnglishcn.pngChinesebr.pngPortuguese

kr.pngKorean

Contents

[hide]

img_eda42ec0ff1711562683dd5494682118.png 事前准备

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

img_eda42ec0ff1711562683dd5494682118.png 需要些什么?

除ExtJS库本身外,我们还需要两个文件:

  • applayout.html
  • applayout.js


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

img_eda42ec0ff1711562683dd5494682118.png applayout.html



<html>
<head>
    <meta>
    <link>
    <script></script>
    <script></script>
    <script></script>
    
    <script>
        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.myNameSpace.., myNameSpace.;

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

然后是标题,头部的结尾,body(当前空)和结束标签。

img_eda42ec0ff1711562683dd5494682118.png applayout.js




Ext. = ;
 
 

Ext.;
 

myNameSpace. =  
    
 
    
 
    
 
    
     
        
        
        init:  
            ;
        
    ;
; 
 

文件最开始的几行是注释,说明该文件的主要内容、作者、作者相关的资讯。没有任何注释的程序也可以正常的运行,————但请记住:每次写的程序要容易给人看得懂的 Always write your application as if you would write it for another.当你回头看你几个月前写的代码,发现你根本不记得自己写过什么的时候,就会明白这个道理,并养成编码的好习惯。接着是要指向你服务器的填充图片,如不指定则默认extjs.com。每次运行程序的时候都访问extjs.com,不推荐这样,应该先修改这个常量值指向到本地。


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


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

如果运行我们的代码:

 o =  
     p1:, p2:;
;

实际上我们创建了一个匿名函数(没有名字的函数),经过解释之后让它立刻运行(注意函数后面的())。最后将函数返回的对象(注意此时是一个object变量)分配到变量o。我们的程序便是这种思路去写的。

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

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

一切都还好吧~如果能正确运行 http://yourserver.com/applayout/applayout.html ,不出现什么错误的话将弹出一个对话框。

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

img_eda42ec0ff1711562683dd5494682118.png 公开Public、私有Private、特权的Privileged?

让我们程序变得更有意思。在页面applayout.html的body标签中加入:

<div></div>

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


 

Ext. = ;
 

Ext. = Ext. && Ext.. == ;
 

Ext.;
 

myNameSpace. =  
    
 
    
     btn1;
     privVar1 = ;
 
    
     btn1Handler = button, event 
         + privVar1;
         + .;
    ;
 
    
     
        
        btn1Text: ,
 
        
        init:  
             Ext. 
                btn1 =  Ext.
                    renderTo: ,
                    text: .,
                    handler: btn1Handler
                ;
              
                btn1 =  Ext., 
                    text: .,
                    handler: btn1Handler
                ;
            
        
    ;
; 
 

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

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

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

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

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

 Ext. 
    btn1 =  Ext.
        renderTo: ,
        text: .,
        handler: btn1Handler,
        scope:
    ;
  
    btn1 =  Ext., 
        text: .,
        handler: btn1Handler,
        scope:
    ;

刷新一下,可以了吧?

img_eda42ec0ff1711562683dd5494682118.png 重写公共变量

applayout.js底部加入下列代码:

Ext.myNameSpace., 
    btn1Text:
;
 

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


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

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

img_eda42ec0ff1711562683dd5494682118.png 重写(Overriding)公共函数

接着更改一下代码,让它读起来是这样的:

Ext.myNameSpace., 
      btn1Text:
    , init:  
         
            btn1 =  Ext., 
                  text: .
                , handler: btn1Handler
                , scope: 
            ;
        
        e 
             + e. +  + e.;
        
    
;
 

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

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


img_eda42ec0ff1711562683dd5494682118.png 参见

目录
相关文章
|
2月前
|
XML 前端开发 测试技术
Android基础知识:解释Android的MVC和MVP模式。
Android基础知识:解释Android的MVC和MVP模式。
23 0
|
5月前
|
存储 Android开发 数据库管理
Android安卓项目猜纸牌游戏之二 实体类
Android安卓项目猜纸牌游戏之二 实体类
26 0
|
前端开发 Java Linux
从零开始系统化学Android,实战篇
从零开始系统化学Android,实战篇
从零开始系统化学Android,实战篇

相关产品

  • 云迁移中心