Extjs 代码规范

（转自：http://shubangjun.iteye.com/blog/1009041 ）

一个组件一个JS文件,多个组件拼接成一个模块,这些组件都放在一个文件夹下,命名方法其实很简单,类似java如: 

在App文件夹下的Scene文件夹内 
App.Scene.ScreenManager.js 
    Ext.namespace("App.Scene.ScreenManager.XX","App.Scene.ScreenManager.YY"); 
App.Scene.ScreenControl.js 
    Ext.namespace("App.Scene. ScreenControl.XX","App.Scene. ScreenControl.YY"); 
App.Scene.Main.js 
    Ext.namespace("App.Scene. Main.XX","App.Scene.Main.YY"); 
在App文件夹下的Business文件夹内 
App.Business.CheckUser.js 
    //同上 
App.Business.Logout.js 
    //同上 
并且,切记,要把Extjs当做java来写,因此,你的程序只能有一个入口即只能允许整个程序中只出现一个 
Ext.onReady(function(){ 
}); 
很多人不信Extjs可以这样写,说只能应用在小型的项目中,但是我可以告诉你,这样的写法完全适用与大项目,而且是项目越大越能展现出他的好处 
我经历过刻骨铭心的失败总结出以下几点经验: 
1.绝不使用全局变量(如有必要,可以用静态方法来做) 
2.不能设置组件的(包括该组件下的小组件的)ID这个属性,(此组件的派生类你可以随意). 
3.稀奇古怪的代码少写,因为你不能保证你的EXTJS版本永远停留在当前版本上(如果公司有钱买授权的话) 
4.能在后台完成的业务逻辑坚决不在前台做,即使在前台做看起来比较简单(如果前台坐起来非常简单就算了,例如验证)
5.统一管理你的JSON生成. 
6.规范你的代码 

Ext.ns("App.Users.CURD"); 
/** 
* 必要的注释一个不能少,Javascript代码维护起来没有java好维护....  
* */ 
App.Users.CURD = Ext.extend(Ext.Panel,{ 
    //属性代码全部写在这里 
    title:"CURD", 
    //初始化组件(如果你的组件需要改变样式或者需要动它的dom,你可以重写父类的onReander,并把部分视图代码放在onReander函数中) 
    initComponent:function(){ 
        App.Users.CURD.superclass.initComponent.call(this,arguments); 
        //先定义自定义事件(如果必要的话) 
        //接着视图代码全部写在这里 
    }, 
    //方法函数全部写在这里 
    //先将与后台数据交互的函数写出来 
    addUser : function() { 
        //对应后台同名的Action方法函数 
    }, 
    delUser : function() { 
        //对应后台同名的Action方法函数 
    }, 
    updateUser : function() { 
        //对应后台同名的Action方法函数 
    }, 
    //供自己内部使用的函数跟在后面 
    formClear : function() { 
    }, 
    //提供给外部调用的函数紧跟数据操作 
    getSelectUsers : function(){ 
        return ...... 
    } 
    setXXXX : function() { 
    }, 
    //最后就是事件处理函数,因为函数比较多,事件处理往往伴随着页面逻辑,放在后面比较好找....混在中间不太好找 
    onSubmit : function() { 
    }, 
    onDelet : function() { 
    } 
}); 
    //*因为是基于UI的组件,因此一般都可以独立测试,测试通过后注释掉即可(注意我的注释写法) 

Ext.onReady(function(){ 
    //......... 
}); 
// 
*/

（转自： http://www.aspxhome.com/javascript/skills/20094/888528.htm ）

不知不觉2008已经走到了尽头，在这近一年中，一直不断的尝试用ExtJS做项目，从1.1到现在的2.2，吃了不少苦头，也有不少收获，总结一下，一起分享！

1. ExtJS的定位是RIA，和Prototype、jQuery等类库的定位不同。使用ExtJS做开发，就是意味着以客户端开发为主，不然就不叫RIA框架了，而Prototype、jQuery等只是辅助性的客户端框架，和ExtJS不在同一条起跑先上。如果一定要和其它的框架做比较的话，应该和Isomorphic SmartClient、Backbase Enterprise Ajax之类的框架做比较，当然，和他们相比，ExtJS还是有很大的优势的。

2. 使用ExtJS时需要解决如何服务端通信的问题。由于ExtJS只是一个客户端的框架，和服务端技术没有关系，也就没有相应的服务端的适配层，因此客户端如果要用ExtJS，则必须提供它需要的数据结构。ExtJS主要通过这几种方式和服务端进行通信：

• Ext.Ajax.request 做普通的异步请求，服务端可以根据实际情况返回JSON形式数据或者HTML片段；
• Ext.tree.TreeLoader 加载树形结构，服务端必须返回JSON形式数据，而且要符合Ext.tree.TreeNode的配置要求，否则自己做转换；
• Ext.data.Store及其派生类 加载表格形式的数据，服务端可以根据实际情况返回JSON形式数据或者XML形式数据，如果没有特殊要求，推荐返回JSON格式的数据；
• Ext.Element.update 局部更新，这个方法最总还是要调用Ext.Ajax.request方法，之所以把它单独列出来，是因为这种方式比较容易被忽视，但是在某些情况下还是挺有用的，比如调用Ext.Panel.body.update()对某个Ext.Panel的内容进行局部更新，如果使用这种方式，那么服务端只能相应的返回HTML片段了；

3. 使用ExtJS时的注意事项。ExtJS和其它的辅助性类库(Prototype、jQuery等)相比显得非常庞大，让很多很多初学者望而却步。经过近一年的学和用，对于ExtJS的使用，我总结了一下几个注意事项：

• 尽量使用ExtJS的方言。 ExtJS提供了很多有用的方法，解决客户端JavaScript常见的开发任务，常见的有查询HTMLDom，创建HTML元素，为HTML元素注册事件响应函数等，这些大可以全部使用ExtJS提供的方法，使自己代码构建与ExtJS之上，举几个例子：
  • 查询ID为container的DIV下所有的checkbox，可以使用：Ext.fly(‘container’).select(‘input[type=checkbox]’);
  • 在ID为container的DIV内创建一个按钮，可以使用：Ext.fly(‘container’).createChild({ tag: ‘input’, type: ‘button’});
  • 为ID为container的DIV的click事件注册处理函数，使用：Ext.fly(‘container’).on(‘click’, handlerFn, scope);
• ExtJS的自定义事件很好用，可以实现一对多的通知，而且任何自定义事件都可以中途停止，只要有一个处理函数返回false。
• Store合并成一个文件 用ExtJS显示数据，自然就需要用到Ext.data.Store及其派生出来的类，可以考虑所有的Store合并到一个文件，这样对重用有很大的帮助。
• 脚本文件管理 尽可能的每个模块做成一个类，一个类一个文件，类似与Java或C# 的文件处理方法，每个文件注明其作用，依赖的文件等，如果太多的话可以考虑写一个配置文件，通过读配置文件来输出脚本到客户端。
• 调试和部署分别加载Debug和Release版本的脚本 ExtJS附带的例子中没有使用完整Debug版本的例子，所以很多人找不到完整的Debug版本的引用顺序，通过对Source文件夹下的ext.jsb文件进行分析，就可以得到正确的加载顺序，如下：
  • Debug
    1. /ext-path/source/core/ext.js
    2. /ext-path/source/adapter/ext-base.js
    3. /ext-path/ext-all-debug.js
  • Release
    1. /ext-path/adapter/ext/ext-base.js
    2. /ext-path/ext-all.js
• 对Script进行压缩 对项目中有大量的JavaScript的话，对其进行压缩是很有必要的，这里我推荐的是ExtJS的论坛提供的JS Builder，可以通过配置文件来对Script和CSS进行压缩，据说ExtJS就是用这个工具进行压缩的，不过有一个缺点，就是不支持UTF-8编码。

5. 使用ExtJS做应用的一些建议。多数人认为ExtJS的脚本体积很大，不适合放到互联网上，对于这一点，有如下建议：

1. 部署到互联网上的Web应用一定要加载Release版本的ExtJS
2. 可以考虑只加载必须的组件，build目录下脚本文件都是压缩过的，如果项目中用到的ExtJS的组件不是很多，可以只加载用到的
3. 考虑使用IIS的文件压缩功能
4. 使用Google的Gears，把所有的静态文件做客户端缓存
5. 使用ADOBE的AIR，把脚本打包到客户端运行