EXT使用DEMO及JavaScript使用约定规范.doc

EXT使用DEMO及JavaScript使用约定规范（V1.0）版本：第1次修订编制：王帅2010年8月20日发布2010年8月21日实施紫光软件系统有限公司广电行业事业部2010-8文档初始化文档名称EXT使用DEMO及JavaScript使用约定规范创建人王帅文档文件名称EXT使用DEMO及JavaScript使用约定规范.doc创建时间2010-8-10版本号V 1.0提交时间文档修订备注：修改类型表示为：A - 增加 M - 修改 D - 删除编号版本变更描述（包括：变更的图、表、段落号，标题或简单描述）提交时间修改者修改类型A，M，D11.0初始化文档2010/8/10王帅A目录2JavaSctipt和Ext介绍42.1JavaScript简介42.2Ext简介42.2.1使用Ext的要求42.2.2Ext简单入门43JavaScript使用约定及规范63.1约定之前需要知道63.2常见的JavaScript使用约定63.3系统中使用的JavaSctipt使用约定63.4系统中使用JavaScript的规范63.4.1文件63.4.2变量、常量、方法名73.4.3方法73.4.4标点符号的使用73.4.5排版、注释73.4.6顺序83.5代码范例84ExtDemo简介及部署94.1Demo简介94.2Demo文件结构94.3Demo部署环境、部署方法及源代码查看105JavaScript IDE的使用106JavaScript调试116.1常用调试方法116.2使用FireBug,IE8开发者工具等调试121 JavaSctipt和Ext介绍1.1 JavaScript简介JavaScript(以下简称js)是完全符合ECMA标准的一种编程语言。Js是一种解释型的，基于对象的脚本语言，js不能编写独立的应用程序，她只能在某个宿主(容器)上运行，如IE浏览器，FireFox浏览器等。Js是一种宽松类型的语言，但是不代表她没有类型，她的类型比较自动，转换也是自动完成。1.2 Ext简介Ext是基于js的一套框架，其丰富的组件和充实的功能获取了大批web程序员的喜爱。其使用简单，将本身非面向对象的js语言封装成面向对象形式的框架，使得程序简单易懂，学习掌握更加快速和容易。Ext作为一种富客户端的框架，使得程序员摆脱web设计的苦恼，不用掌握太多设计技巧就可以制作出绚丽多彩的页面应用。Ext作为成熟的Js框架，具有十分丰富的中英文文档，查询和检索起来十分方便。 Ext的使用并不是很复杂，大致分为容器组件(Panel, window, toolbar等,即可以显示在页面上的元素)和工具/数据类(store,reader 等，即供程序使用，在页面上没有具体呈现的) 。在使用Ext框架的时候，应该及时查看API文档，里面很详尽，并且有很多实用的例子。遇到不会的问题请先查看API文档，基本上，80%的问题可以通过API文档进行解决。1.2.1 使用Ext的要求对JavaScript、html、dom、css有个基本了解和运用1.2.2 Ext简单入门首先去/download下载ext的发布包，当前最新版本是3.2包里所含目录：Adaptoer目录下放置的是EXT的核心代码和底层库，包括Jquery、Prototype和Yui的适配器。Build目录下放置的是EXT压缩后的代码，体积更小，加载更快。Docs下是EXT的文档，俗称API。Examples目录下是官方发布的演示示例。Resources目录下是EXT用到的所有图片文件和样式文件。Source目录下是EXT源码文件，未经压缩过的。ext-all.js是ext核心库，必须引进。基本应用需要导入的css： resourcescssext-all.css需要导入的js: adapterext ext-base.js ext-all.js其中文件名包含 debug.js 的文件为未经混淆的js文件，体积比常规文件要大，在项目正式开发完成之后，有必要把 debug.js文件使用常规文件替换来提升页面的加载速度。2 JavaScript使用约定及规范2.1 约定之前需要知道l Js区分大小l Js脚本必须嵌在Html当中l Js独立于Html之外，所以脚本中不能包含Html标签(字符操作除外)l Js可以独立保存为一个外部文件，但是不能存在html标签()2.2 常见的JavaScript使用约定为了便于代码查看和解决js本身不严谨的问题，有必要遵守以下约定进行开发。l 首字母应该为大小写字母，_或$符，不能以数字，其他特殊字符开头，例如：n var $ = 美元; var _abc = 美元; var Abc = 美元;正确n var 1 = 美元; var . = 美元; var 中文 = 美元;错误l 变量名称不可以为保留关键字l 变量长度可以是任意的l 将变量集中置顶2.3 系统中使用的JavaSctipt使用约定为了便于开发和维护，理解，系统中的js除了要用到常见的约定，还需要有以下：l 声明变量时要加 var。l 每句代码占一行l 每行代码以“;”号结尾2.4 系统中使用JavaScript的规范在实际开发过程中，需要遵守以下编码规范2.4.1 文件当写的js代码通用性较强，或者代码很长的时候，有必要建立单独的js文件，js文件的文件名以.js结尾，文件编码为UTF-8。在把js文件引入HTML页面时，除非有特殊需要，请一律放在html的标签内。有对servlet中session变量做结合处理必须写到页面中的长断代码，建议可以单独抽取jsp文件，然后在需要的页面 import/include。2.4.2 变量、常量、方法名l 声明全局变量，首字母请大写，并遵循驼峰规则。l 声明局部变量，首字母小写，并遵循驼峰规则。l 声明常量，请全部大小，单词以“_”分割。l 自定高级对象内的变量，使用“_”开始或结尾，l 不要轻易使用“$”作变量首字母。l 普通方法名遵循变量规定，但是以动词开头。2.4.3 方法不要在一个方法内写过长的方法体，请将一个方法分解为多个子方法，每个子方法之间可以使用$进行连接，例如：function getString()var src = getString$Src();function getString$Src()2.4.4 标点符号的使用l 操作字符型数据时，尽量使用“”引号，避免使用双引号。l 在 if, while, try catche 时请在正确的地方插入 “”。l 条件语句，运算等必要的地方写入“()”2.4.5 排版、注释排版使用 IDE 提供的公共排版模式。当js代码在jsp页面中时，建议使用“”的隐藏注释。在js文件中，使用/ 注释，/*注释*/ 2.4.6 顺序编写代码时，应该尽量遵循以下排列顺序：l 全局常量l 全局变量l 自定高级对象l 方法2.5 代码范例var INFO = 空閒, 正在打開, 正在緩衝, 正在播放, 已經暫停, 已經停止, 已經結束, 發生錯誤;var Player.VLCPlayer = function(conf) this.width = 640;Ext.apply(this, conf);this.updateConf = function(cfg)Ext.apply(this, conf);updateConf(this);/*-START 針對元素操作的方法-*/this.render = function(elId) elId = elId | conf_.renderId;if (elId = null) alert(debug: 选择要写入到的容器元素ID！);return;conf_.renderId = elId;$(elId).innerHTML = getHtml().replace(/id/ig, conf_.objectId);/ 初始化播放器this.init = function()/ 設置寬高$el().height = conf_.height;if(conf_.autoplay)replay(conf_.url);/$el().video.aspectRatio = :aspect-ratio=+conf_.ratio;/*-END 針對元素操作的方法-*/this.play = function(url) this.url = url;play(url);/ 自定义方法function replay(url)var url = url | ;3 ExtDemo简介及部署3.1 Demo简介本Demo为系统中经常使用的Ext组件的一个示例。3.2 Demo文件结构 ajax.jspdemo文件,_d.jsp文件为对应的数据文件。 js ajax.js对应的 demo 引入的 js 文件 extEXT 包 ext-all.js基础包 ExtLib.jsp统一引入库 adapter基础适配器 ext ext-base.js I18N中文化 ext-lang-zh_CN.js plugins扩展插件 RowExpander.jsgrid 展开插件 TreeCheckNodeUI.js树 checkbox 插件 resources css ext-all.css全部样式 xtheme-gray.css扩展的样式1 xtheme-slate.css扩展的样式2 images3.3 Demo部署环境、部署方法及源代码查看环境：jsp容器将ext.war部署到容器下即可。将 ext 文件夹使用 eclipse导入功能导入到项目中即可查看源代码。目前svn上已经上传好ExtDemo项目，直接更新即可使用。4 JavaScript IDE的使用为了便于开发，使用一个顺手的IDE很重要。当前对Ext支持较好的IDE是SpketIde，她有Eclipse插件。以下是对Spket的设置：装好以后，按照如图所示，1.，输入ExtJs2. ，输入 ExtJs23.，找到【/js/ext/source/ext.jsb】文件，添加4. 选择这两个就行了。5. ，点这个设置为默认，重启eclipse以后，在编辑js文件时就可以使用提示了。5 JavaScript调试目前js的调试方式不是很成熟，IDE对代码的检查也不是十分的严谨，所以大多数时候需要手动进行调试。5.1 常用调试