`

Extjs的代码规范

阅读更多
一个组件一个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(){
    //.........
});
//
*/
分享到:
评论

相关推荐

    extjs 代码提示插件

    标题中的"extjs 代码提示插件"指的是专门为ExtJS开发的Eclipse插件,它能为开发者在编写ExtJS代码时提供自动补全和智能提示功能。这种插件能够极大地减少手动查找API文档的时间,提高开发速度,减少错误,并且加深对...

    ExtJs代码自动生成

    在开发过程中,有时需要根据数据库结构或者业务需求自动生成相应的ExtJS代码,以提高开发效率和代码一致性。下面将详细解释如何使用ExtJS进行代码自动生成,以及各组件类型的中文解释。 1. **数据库字段的映射** ...

    Extjs代码编辑工具

    本资源是一个专门针对ExtJS开发的代码编辑工具,该工具旨在提升开发效率,提供代码提示功能,帮助开发者更方便地编写和调试ExtJS代码。 该代码编辑工具可能包含以下关键特点: 1. **代码提示和自动完成**:工具...

    extJs代码提示文档

    "ExtJs代码提示文档"是开发者在编写ExtJS代码时的重要参考资料,它可以提供实时的代码补全和功能提示,极大地提高开发效率。 该文档通常包含以下几个方面的内容: 1. **组件API**:ExtJS的核心在于其组件模型,...

    EXTJS4.2 自学手册+编码规范+MVC架构 打包下载

    EXTJS 是一个强大的JavaScript 应用程序框架,主要用于构建富客户端Web应用。...通过阅读这些文档,开发者将能够熟练掌握EXTJS的组件使用、数据绑定、事件处理、MVC架构的实现以及编写高质量的EXTJS代码。

    EXTJS4之类系统和编码规范

    本节将介绍如何按照 ExtJS4 的编码规范编写代码。 ##### 1. 声明 - **旧的方式**:早期版本的 ExtJS 可能使用了不同的命名约定或编码方式。为了保证代码的一致性和兼容性,应当更新到最新的编码标准。 - **新的...

    EXTJS Javascript HTML 代码格式化 工具

    在编写EXTJS代码的过程中,保持代码的整洁和规范是至关重要的,这有助于提高代码可读性,减少错误,并便于团队协作。因此,有一个良好的代码格式化工具对于EXTJS开发者来说是必不可少的。 在JavaScript和HTML开发中...

    spring mvc+hibernate+extjs代码示例

    这是一个基于Spring MVC、Hibernate和ExtJS的Web应用示例,主要展示了如何整合这三个技术来构建一个功能完善的后台管理系统。...同时,它也提醒我们在实际开发中要关注数据库的适配性,以及前后端数据交互的规范性。

    VS Code 搭配 Sencha Plugin 插件简直不要太好用.用于开发 ExtJS/ExtAngular

    同时,它还提供代码格式化功能,确保你的代码风格统一,符合编码规范。 4. **错误检查和调试**:Sencha Plugin能实时检测代码中的错误,帮助开发者快速定位问题。对于复杂的组件结构和依赖关系,这种即时反馈至关...

    Spket - ExtJS提示工具,附规范文件

    这款工具极大地提升了开发效率,通过自动补全、错误检测和代码导航等功能,使得编写ExtJS代码变得更为简便。 1. **Spket的功能** - **智能代码补全**:Spket能够识别ExtJS框架中的类、方法、属性,提供实时的代码...

    EXTJS页面编辑器

    4. **代码编辑与优化**:除了图形化编辑,编辑器还提供了代码编辑器,允许你直接编辑生成的EXTJS代码,进行更深入的定制。同时,它可能还具备代码提示和自动补全功能,帮助你编写更规范的代码。 5. **版本控制与...

    Extjs规范(自己的)

    以下是我根据标题和描述整理出的一些ExtJS开发规范和最佳实践: 一、使用环境和对象 在开始ExtJS开发之前,确保安装了合适的开发环境,如Node.js用于管理依赖,IDE或代码编辑器支持ExtJS语法高亮和自动补全。确定...

    ExtJS 物流管理系统源代码

    在物流管理系统中,这可能包括货物接收、发货、配送、异常处理、报表生成等业务流程的具体规范,以及系统的可用性、安全性、可扩展性等非功能需求。 6. "项目安装说明.txt":这个文件很可能是系统部署和配置的指南...

    ExtJs3.1目前所有例子源代码

    在这个压缩包中,包含了ExtJs 3.1的所有示例源代码,这对于初学者和有经验的开发者来说都是宝贵的资源。 1. **基本组件与布局** - **组件(Components)**:ExtJs中的组件包括按钮、面板、表单、树、网格等,它们...

    ExtJs的图形化

    此外,它通常还包含代码自动生成功能,帮助开发者快速生成符合规范的ExtJS代码。 "汉化包+变正式版.rar"文件可能包含的是该Eclipse插件的中文语言包以及将试用版插件转化为正式版的许可证或破解文件。对于非英语...

    EXTJS

    例如,EXTJS 提供的Sencha CMD是一个命令行工具,用于自动化构建流程,包括编译、压缩、合并代码等,这对于大型项目尤其重要。 在文件名称“studnetSQL”中,虽然没有明确指出与EXTJS的直接关系,但我们可以推测这...

    extjs4.2官方文档

    Extjs官方文档 帮助你更好的学习Extjs,同事这里面的代码是最完整,最规范的。

    extjs4-教程

    - **创建helloword.js**:这个JavaScript文件将包含ExtJS应用的初始化代码,定义了一个名为HelloExt的应用,并在应用启动时创建了一个Viewport组件,里面包含了一个Panel。 - **创建helloword.html**:这是应用的...

    ExtJS中文手册.doc

    8. **最佳实践**:提供编码规范和优化技巧,帮助开发者写出高效、可维护的代码。 9. **API参考**:列出ExtJS的所有类、方法、属性和配置项,是查阅具体功能的快速指南。 通过学习《ExtJS中文手册》,开发者可以深入...

    ExtJS介绍以及GridPanel

    同时,ExtJS还采用了模块化设计,通过AMD(Asynchronous Module Definition)规范加载和管理依赖,有助于提高代码的组织性和性能。 最后,作为工具,ExtJS提供了丰富的文档、示例和API参考,方便开发者快速上手和...

Global site tag (gtag.js) - Google Analytics