编写更加稳定 可读性强的JavaScript代码
编写更加稳定可读性强的JavaScript 代码
每个人都有自己的编程风格，也无可避免的要去感受别人的编程风格——修改别人的代码。”修改别人的代码”对于我们来说的一件很痛苦的事情。因为有些代码并不是那么容易阅读、可维护的，让另一个人来修改别人的代码，或许最终只会修改一个变量，调整一个函数的调用时机，却需要花上1个小时甚至更多的时间来阅读、缕清别人的代码。本文一步步带你重构一段获取位置的”组件”——提升你的javascript代码的可读性和稳定性。
本文内容如下：
?分离你的javascript代码
?函数不应该过分依赖外部环境
?语义化和复用
?组件应该关注逻辑，行为只是封装
?形成自己的风格的代码
分离你的javascript代码
下面一段代码演示了难以阅读/修改的代码：
1.(function (window, namespace) {
2.var $ = window.jQuery;
3. window[namespace] = function (targetId, textId)
{ //一个尝试复用的获取位置的"组件
" var $target = $('#' + targetId),//按
钮 $text = $('#' + textId);//显示文
本 $target.on('click', function () { $text.html('获取中'); var data = '北京市';//balabala很多逻辑，伪代码，获取得到位置中
4.if (data) {
5. $text.html(data);
6. } else
7. $text.html('获取失败');
8. });
9. }
10.})(window, 'linkFly');
这一段代码，我们暂且认可它已经构成一个”组件”。
上面的代码就是典型的一个方法搞定所有事情，一旦填充上内部的逻辑就会变得生活不能自理，而一旦增加需求，例如获取位置返回的数据格式需要加工，那么就要去里面寻找处理数据的代码然后修改。
我们分离一下逻辑，得到代码如下：
1.(function (window, namespace) {
2.var $ = window.jQuery,
3. $target,
4. $text,
5. states= ['获取中', '获取失败'];
6.function done(address) {//获取位置成功
7. $text.html(address);
8. }
9.function fail() {
10. $text.html(states[1]);
11. }
12.function checkData(data) {
13.//检查位置信息是否正确
14.return !!data;
15. }
16.function loadPosition() {
17.var data = '北京市';//获取位置中
18.if (checkData(data)) {
19. done(data);
20. } else
21. fail();
22. }
23.var init = function () {
24. $target.on('click', function () {
25. $text.html(states[0]);
26. loadPosition();
27. });
28. };
29. window[namespace] = function (targetId, textId)
{
30. $target = $('#' + targetId);
31. $text = $('#' + textId);
32. initData();
33. setData();
34. }
35.})(window, 'linkFly');
函数不应该过分依赖外部环境
上面的代码中，我们已经把整个组件，切割成了各种函数（注意这里我说的是函数，不是方法），这里常出现一个新的问题：函数过分依赖不可控的变量。
变量$target和$text身为环境中的全局变量，从组件初始化便赋值，而我们切割后的代码大多数的操作方法都依赖$text，尤其是$text和done()、fail()之间暧昧的关系，一旦$text相关的结构、逻辑改变，那么我们的代码将会进行不小的改动。
和页面/DOM相关的都是不可信赖的（例如$target和$text），一旦页面结构发生改变，它的行为很大程度上也会随之改变。而函数也不应该依赖外部的环境。在不可控的变量上，我们应该解开函数和依赖变量上的关系，让函数变得更加专注自己区域的逻辑，更加的纯粹。简单的说：函数所依赖的外部变量，都应该通过参数传递到函数内部。
新的代码如下：
1.(function (window, namespace) {
2. var $ = window.jQuery;
3.//检查位置信息是否正确
4. function checkData(data) {
5.return !!data;
6. }
7.//获取位置中
8. function loadPosition(done, fail) {
9. var data = '北京市';//获取位置中
10.if (checkData(data)) {
11. done(data);
12. } else
13. fail();
14. }
15. window[namespace] = function (targetId, textId)
{
16. var $target = $('#' + targetId),
17. $text = $('#' + textId);
18. var states = ['获取中', '获取失败'];
19. $target.on('click', function () {
20. $text.html(states[0]);
21. loadPosition(function (address) {//获取
位置成功
22. $text.html(address);
23. }, function () {//获取位置失败
24. $text.html(states[1]);
25. });
26. });
27. }
28.})(window, 'linkFly');
语义化和复用
变量states是一个数组，它描述的行为难以阅读，每次看到states[0]都有一种分分钟想捏死原作者的冲动，因为我们总是要记住变量states的值，在代码上，我们应该尽可能让它可以很好的被阅读。
另外，上面的代码中$text.html就是典型的代码重复，我们再一次的修改代码，请注意这一次修改的代码中，我们所抽离的changeStateText()的代码位置，它并没有被提升到上一层环境中（也就是整个大闭包的环境）。
1.(function (window, namespace) {
2.var $ = window.jQuery;
3.function checkData(data) {
4.return !!data;
5. }
6.function loadPosition(done, fail) {
7.var data = '北京市';//获取位置中
8.if (checkData(data)) {
9. done(data);
10. } else
11. fail();
12. }
13. window[namespace] = function (targetId, textId)
{
14.var $target = $('#' + targetId),
15. $text = $('#' + textId),
16. changeEnum = { LOADING: '获取中
', FAIL: '获取失败' },
17. changeStateText = function (text) {
18. $text.html(text);
19. };
20. $target.on('click', function () {
21. changeStateText(changeEnum.LOADING);
22. loadPosition(function (address) {
23. changeStateText(address);
24. }, function () {
25. changeStateText(changeEnum.FAIL);
26. });
27. });
28. }
29.})(window, 'linkFly');
提及语义化，我们必须要知道当前整个代码的逻辑和语义：
在这整个组件中，所有的函数模块可以分为：工具和工具提供者。
上一层环境（整个大闭包）在我们的业务中扮演着工具的身份，它的任务是缔造一套和获取位置逻辑相关的工具，而在window[namespace])函数中，则是工具提供者的身份，它是唯一的入口，负责提供组件完整的业务给工具的使用者。这里的$text.html()在逻辑上并不属于工具，而是属于工具提供者使用工具后所得到的反馈，所以changeStateText()函数置于工具提供者window[namespace]()中。
组件应该关注逻辑，行为只是封装
到此为止，我们分离了函数，并让这个组件拥有了良好的语义。但这时候来了新的需求：当没有获取到位置的时候，需要进行一些其他的操作。这时候会发现，我们需要window[namespace]()上加上新的参数。
当我们加上新的参数之后，又被告知新的需求：当获取位置失败了之后，需要修改一些信息，然后再次尝试获取位置信息。
不过幸好，我们的代码已经把大部分的逻辑抽离到了工具提供者中了，对整个工具的逻辑影响并不大。
同时我们再看看代码就会发现我们的组件除了工具提供者之外，没有方法（依赖在对象上的函数）。也就是说，我们的组件并没有对象。
我见过很多人的代码总是喜欢打造工具提供者，而忽略了工具的本质。迎合上面的增加的需求，那么我们的工具提供者将会变得越来越重，这时候我们应该思考到：是不是应该把工具提供出去？
让我们回到最初的需求——仅仅只是一个获取位置的组件，没错，它的核心业务就是获取位置——它不应该被组件化。它的本质应该是个工具对象，而不应该和页面相关，我们从一开始就不应该关注页面上的变化，让我们重构代码如下：
1.(function (window, namespace) {
2. var Gps = {
3. load: function (fone, fail) {
4. var data = '北京市';//获取位置伪代码
5.this.check(data) ?
6. done(data, Gps.state.OK) :
7. fail(Gps.state.FAIL);
8. },
9. check: function (data) {
10.return !!data;
11. },
12. state: { OK: 1, FAIL: 0 }
13. };
14. window[namespace] = Gps;
15.})(window, 'Gps');
在这里，我们直接捏死了工具提供者，我们直接将工具提供给外面的工具使用者，让工具使用者直接使用我们的工具，这里的代码无关状态、无关页面。
至此，重构完成。
形成自己风格的代码
之所以讲这个是因为大家都有自己的编程风格。有些人的编程风格就是开篇那种代码的…
我觉得形成自己的编程风格，是建立在良好代码的和结构/语义上的。否则只会让你的代码变得越来越难读，越来越难写。
****
单var和多var
我个人是喜欢单var风格的，不过我觉得代码还是尽可能在使用某一方法/函数使用前进行var，有时候甚至于为了单var而变得丧心病狂：由于我又过分的喜爱函数表达式声明，函数表达式声明并不会在var语句中执行，于是偶尔会出现这种边声明边执行的代码，为了不教坏小朋友就不贴代码了(我不会告诉你们其实是我找不到了)。
对象属性的屏蔽
下面的代码演示了两种对象的构建，后一种通过闭包把内部属性隐藏，同样，两种方法都实现了无new化，我个人…是不喜欢看见很多this的..但还是推荐前者。
1.(function () {
2.//第一种，曝露了_name属性
3.var Demo = function () {
4.if (!(this instanceof Demo))
5.return new Demo();
6.this._name = 'linkFly';
7. };
8. Demo.prototype.getName = function () {
9.return this._name;
10. }
11.
12.//第二种，多一层闭包意味内存消耗更大，但是屏蔽了_name属
性
13.var Demo = function () {
14.var name = 'linkFly';
15.return {
16. getName: function () {
17.return name;
18. }
19. }
20. }
21.});
巧用变量置顶[hoisting]
巧用函数声明的变量置顶特性意味着处女座心态的你放弃单var，但却可以让你的函数在代码结构上十分清晰，例如下面的代码：
1.(function () {
2. var names = [];
3.return function (name) {
4. addName(name);
5. }
6. function addName(name) {
7.if (!~names.indexOf(name))//如果存在则不添加
8. names.push(name);
9. console.log(names);// ["linkFly"]
10. }
11.}())('linkFly');
12.
13.if和&&
这种代码，在几个群里都见过讨论：
1.(function () {
2. var key = 'linkFly',
3. cache = { 'linkFly': 'https://www.wendangku.net/doc/607836101.html,
/silin6/' },
4. value;
5.//&&到底
6. key && cache && cache[key] && (value = cache[key
]);
7.//来个if
8.if (key && cache && cache[key])
9. value = cache[key];
10.})()；
大概就想到这么些了，我突然发现我不太推荐的代码，都是我写的代码，囧。如果各位也还有更多有趣的代码，希望各位看官能掏出来让小弟见识见识。
【编辑推荐】
1.前端代码异常日志收集与监控
2.编写高质量的代码，从命名入手
3.分享让人折服的优秀代码基因
4.「程序员」还是「代码生成器」？
5.7个去伪存真的JavaScript面试题
6.推荐一些优秀的JavaScript开发框架
前端开发设计规范
前端开发设计规范 目录 前端开发设计规范 (1) 一、HTML使用规范 (1) 1.1、页面文件命名规范 (1) 1.2、页面head部分书写规范 (1) 1.3、HTML元素开发规范 (2) 1.3.1、HTML元素书写规范 (2) 1.3.2、HTML元素命名规范 (3) 二、WEB页面开发规范 (4) 2.1、错误跳转页面的处理 (4) 2.2、提示信息的处理 (4) 2.3、页面的返回 (4) 2.4、提交前数据的判断验证 (4) 2.5、删除操作 (5)
2.6、页面中java代码的使用 (5) 2.7、网站页面布局规范 (5) 2.7.1、前台页面尺寸 (5) 2.7.2、标准网页广告图标规格（参考） (6) 2.7.3、页面字体 (6) 2.7.4、字体颜色 (7) 三、javaScript开发规范 (7) 3.1、javaScript文件命名规范： (7) 3.2、javaScript开发规范 (7) 3.2.1、javaScript书写规范 (7) 3.2.2、javaScript命名规范 (8) 四、css样式规范 (10) 4.1、css样式文件命名规范 (10) 4.1.1、通用样式文件命名规范： (10) 4.1.2、业务类样式文件命名规范 (10) 4.1.3、css样式文件命名须知 (11)
4.2、css样式文件存放目录规范 (11) 4.3、css样式定义规范 (11) 4.3.1、css样式内容顶部注释规范 (11) 4.3.2、css样式内容注释规范 (12) 4.3.3、css样式定义规范 (12) 4.3.4、css样式常用id的命名 (13) 4.3.5、css样式常用class的命名 (16) 4.4、css样式书写规范 (16) 4.4.1、css样式排版规范 (16) 4.4.2、css样式书写风格规范 (16) 4.4.3、css样式属性定义顺序规范 (17) 4.4.4、css样式其他规范 (18) 4.4.5、css样式 Hack的使用 (19) 4.4.6、字体定义规范 (19) 4.4.7、css样式检测 (20) 4.4.8、注意事项 (20)
最新WEB游戏源码服务端(完整修改版).
2011WEB网页游戏服务端源码全集 webgame源码，本人已测试，供大家下载 一、抢车位源码 [停车大战]ASP+ACCESS[带MSSQL] 版权声明：（停车大战V1.0 FOR DVBBS AC ) 停车大战V1.0 FOR DVBBS版本，是由NDS.西域数码(https://www.wendangku.net/doc/607836101.html,)于2008年11月开发，作者:SING_CEE 游戏演示地址 https://www.wendangku.net/doc/607836101.html,/BBS 本游戏插件于2008年12月圣诞节前免费开放游戏源码，供开发爱好者体验和改进，无论你是使用还是改进本游戏都请保留这些文字声明，如果你有重大的改进或开发方面有什么难题请发信息给我。 安装步骤： 1.将DVBBS8 2.MDB中的4个数据表导入你的DVBBS数据库中。 2.拷贝所有文件和文件夹到DVBBS根目录。 3.在DVBBS后台插件管理论坛菜单管理新建菜单 标题：停车大战 注释版权：停车大战V1.0 https://www.wendangku.net/doc/607836101.html,西域数码 链接：parking.asp 插件ID:parking 能使用插件的用户组： 1,2,3,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26 4.提交 二次开发说明： 停车大战游戏使用ASP和FLASH AS 相结合 这是一种最新的WEB应用发展方向，这个游戏源码希望对WEB游戏初学者有所帮助。欢迎有兴趣的开发者改进停车大战游戏插件，并请在新的版本中保留本文中的版权声明！目前停车大战游戏还有部分功能没有完善，比如游戏中赚取的金钱和论坛中的金币互相兑换功能，以及金钱奖励方式的更加合理化，增加后台管理（增加新车、增加新车位背景、奖励控制、汇率等管理）还有很多功能都需要大家一起来完善。 停车大战文件说明： parking.asp 停车大厅游戏主文件 pkbuy.asp 购车 pkbuywnd.asp 购车窗体 pkchangewnd.asp 换车窗体
Javascript弹窗代码大全(收集)
弹窗代码大全(收集) 以下包括强制弹窗 24小时IP弹窗延时弹窗退弹等 我们使用cookie来控制一下就可以了。 首先，将如下代码加入主页面html的
区： 然后，用（注意不是openwin而是loadpop啊！）替换主页面中原有的这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的pop-only-once！ 写到这里弹出窗口的制作和应用技巧基本上算是完成了，俺也累坏了，一口气说了这么多，希望对正在制作网页的朋友有所帮助俺就非常欣慰了。 需要注意的是，js脚本中的的大小写最好前后保持一致。 3.一个强制弹窗代码 一个强制弹窗代码 /**JavaScript编码规范
快读参考 核心 API 请使用下面的风格： 下面的虽然不是必要的，但建议使用： 命名规范 1.变量名称必须为小写字母。 2.类的命名使用骆驼命名规则，例如： Account, EventHandler 3.常量必须在对象（类）或者枚举变量的前部声明。枚举变量的命名必须要有实际 的意义，并且其成员必须使用骆驼命名规则或使用大写： var NodeTypes = { Element : 1, DOCUMENT: 2 } 4.简写单词不能使用大写名称作为变量名： getInnerHtml(), getXml(), XmlDocument
5.方法的命令必须为动词或者是动词短语：
obj.getSomeValue() 6.公有类的命名必须使用混合名称（mixedCase）命名。 7.CSS 变量的命名必须使用其对应的相同的公共类变量。 8.私有类的变量属性成员必须使用混合名称（mixedCase）命名，并前面下下划线（_）。 例如： var MyClass = function(){ var _buffer; this.doSomething = function(){ }; } 9.变量如果设置为私有，则前面必须添加下划线。 this._somePrivateVariable = statement; 10.通用的变量必须使用与其名字一致的类型名称： setTopic(topic) // 变量 topic 为 Topic 类型的变量 11.所有的变量名必须使用英文名称。 12.变量如有较广的作用域（large scope），必须使用全局变量；此时可以设计成一个 类的成员。相对的如作用域较小或为私有变量则使用简洁的单词命名。 13.如果变量有其隐含的返回值，则避免使用其相似的方法： getHandler(); // 避免使用 getEventHandler() 14.公有变量必须清楚的表达其自身的属性，避免字义含糊不清，例如： MouseEventHandler，而非 MseEvtHdlr。 请再次注意这条规定，这样做得的好处是非常明显的。它能明确的表达表达 式所定义的含义。例如： dojo.events.mouse.Handler // 而非 dojo.events.mouse.MouseEventHandler 15.类/构造函数可以使用扩展其基类的名称命名，这样可以正确、迅速的找到其基类 的名称： EventHandler UIEventHandler MouseEventHandler 基类可以在明确描述其属性的前提下，缩减其命名： MouseEventHandler as opposed to MouseUIEventHandler. 特殊命名规范
使用JavaScript和Canvas开发游戏(一)
使用JavaScript和Canvas开发游戏（一）地址：https://www.wendangku.net/doc/607836101.html,/forum.php?mod=viewthread&tid=2063
目录 1、认识一下Canvas 2、在Canvas上绘图 3、通过Canvas元素实现高级图像操作 4、通过Canvas实现视差滚动 5、写一个游戏框架（一） 6、写一个游戏框架（二） 7、动画 8、JavaScript键盘输入 9、综合运用 10、定义级别 11、跳跃与坠落 12、添加道具 13、加载资源 14、添加主菜单
1、认识一下Canvas Canvas元素以及JavaScript引擎中新增的一些特性，让Web开发人员不必借助第三方插件，即可设计开发出精细且具有交互性的2D网页。这篇文章就向大家介绍一下Canvas 元素，以及它的一些可能的用途。 JavaScript与Canvas元素 HTML是为创建静态页面而生的。HTML所能实现的动态效果，也仅限于显示GIF动画和闪烁的文本。JavaScript改变了这一切，通过它能够动态修改网页。今天，很多Web 服务都利用AJAX来创建网页，为用户提供更加流畅的体验，也超越了标准HTML页面中常见的“点击－重新加载－点击”式的交互模式。 然而，JavaScript的某些功能会受到其宿主浏览器的制约。尽管可以在网页中创建和修改任何元素，但JavaScript不能（轻易地）让浏览器显示一种新对象。通过JavaScript修改文本、插入图像或者缩放表格都很容易，因为这些对象本来就是HTML所支持的。如果你想再玩得刺激一点，比如写一个网页游戏，怎么办？那恐怕就得苦心积虑地改变标准HTML元素的用途，克服种种不测才能达到目的。要么，你就得求助于Flash或Silverlight 这样的插件。 Canvas元素登场了。这个新HTML元素为JavaScript开发者提供了一种无需插件即可在网页中直接绘图的机制。Canvas元素最早是由苹果公司在其WebKit框架中引入的，Safari浏览器和Dashboard微件都在使用。Canvas元素现在也被建议加入了HTML5规范，得到了最新的Chrome、Firefox、Opera以及Konqueror等浏览器的支持。Internet Explorer（至少在IE8之前）还不支持Canvas，但ExplorerCanvas项目倒是为IE提供了与Canvas元素类似的功能。 Canvas元素对做过2D图形编程的人是小菜一碟。可以在这个元素上画线、画各种形状、画渐变，甚至可以利用与其他2D API中类似的函数来修改其中的每一个像素。得益于Chrome的V8、Firefox的SpiderMonkey以及Safari的Nitro等最新JavaScript引擎的性能，创建精细且具有交互性的Web应用已经完全没有问题。
javascript常用代码大全
Javascript常用代码大全 //打开模式对话框
//返回模式对话框的值 function okbtn_onclick() { var commstr=''; window.returnValue=commstr; window.close() ; } okbtn_onclick() //全屏幕打开IE 窗口 var winWidth=screen.availWidth ; var winHeight=screen.availHeight-20; window.open("main.aspx","surveyWindow","toolbar=no,wid th="+ winWidth +",height="+ winHeight +",top=0,left=0,scrollbars=yes,resizable=yes,center:yes,statu sbars=yes"); //脚本中中使用xml function initialize() { var xmlDoc var xslDoc xmlDoc = new ActiveXObject('Microsoft.XMLDOM') xmlDoc.async = false; xslDoc = new ActiveXObject('Microsoft.XMLDOM') xslDoc.async = false; xmlDoc.load("tree.xml") xslDoc.load("tree.xsl") folderTree.innerHTML = xmlDoc.documentElement.transformNode(xslDoc) } 一、验证类 1、数字验证内 1.1 整数 1.2 大于0的整数（用于传来的ID的验证) 1.3 负整数的验证 1.4 整数不能大于iMax 1.5 整数不能小于iMin 2、时间类 2.1 短时间，形如(13:04:06) 2.2 短日期，形如(2003-12-05) 2.3 长时间，形如(2003-12-05 13:04:06) 2.4 只有年和月。形如(2003-05,或者2003-5) 2.5 只有小时和分钟,形如(12:03) 3、表单类 3.1 所有的表单的值都不能为空 3.2 多行文本框的值不能为空。 3.3 多行文本框的值不能超过sMaxStrleng 3.4 多行文本框的值不能少于sMixStrleng 3.5 判断单选框是否选择。 3.6 判断复选框是否选择. 3.7 复选框的全选，多选，全不选，反选 3.8 文件上传过程中判断文件类型 4、字符类 4.1 判断字符全部由a-Z或者是A-Z的字字母组成 4.2 判断字符由字母和数字组成。 4.3 判断字符由字母和数字，下划线,点号组成.且开头的只能是下划线和字母 4.4 字符串替换函数.Replace(); 5、浏览器类 5.1 判断浏览器的类型 5.2 判断ie的版本 5.3 判断客户端的分辨率 6、结合类 6.1 email的判断。 6.2 手机号码的验证 6.3 身份证的验证 二、功能类 1、时间与相关控件类 1.1 日历 1.2 时间控件 1.3 万年历 1.4 显示动态显示时钟效果（文本，如OA中时间） 1.5 显示动态显示时钟效果(图像，像手表) 2、表单类 2.1 自动生成表单 2.2 动态添加，修改，删除下拉框中的元素 2.3 可以输入内容的下拉框 2.4 多行文本框中只能输入iMax文字。如果多输入了，自动减少到iMax个文字（多用于短信发送) 3、打印类 3.1 打印控件 4、事件类 4.1 屏蔽右键 4.2 屏蔽所有功能键 4.3 --> 和<-- F5 F11,F9,F1 4.4 屏蔽组合键ctrl+N 5、网页设计类 5.1 连续滚动的文字，图片Javascript基础教程
Javascript简介 (2) Javascript简介 (2) 简单的Javascript入门示例 (4) 编写Javascript 代码 (5) 语句(Statements) (5) 语句块(Blocks) (6) 注释(Comments) (7) 表达式(Expressions) (8) 赋值和等于(Assignments and Equality) (9) Javascript常用运算符(Operators) (10) 算术运算符 (10) 逻辑运算符 (11) 赋值运算符 (12) Javascript 循环语句(Javascript Loop Statements) (12) 使用for 循环语句 (13) 使用for...in 循环语句 . (15) 使用while 和do...while 循环语句 (17) 使用break 和continue 语句 (20) Javascript写在哪里 (23) Javascript在
之间 (23)Javascript在
之间 (24) Javascript放在外部文件里 (25) Javascript变量(Javascript Variables) (26) 什么是变量？ (26) 变量的声明(Declaring Variables) (26) 变量的命名规则 (27) Javascript条件语句(Javascript Conditional Statements) (27) 单项条件结构(if条件语句) (28) 双向条件结构(if...else条件语句) (29) 多项条件结构(switch条件语句) (31) Javascript保留字(Javascript Reserved Words) (32) Javascript未来保留字(Javascript Future Reserved Words) (33) Javascript简介 Javascript简介前台编码规范(HTML, JS, CSS)
密级：内部1引言 (2) 1.1编写目的 (2) 1.2变更记录 (2) 1.3定义 (2) 1.4参考资料 (2) 2HTML (2) 2.1命名 (2) 2.2标签 (3) 2.3排版 (3) 2.4CSHTML (3) 3JS (3) 3.1组织 (3) 3.2命名 (4) 3.3变量 (4) 3.4方法 (4) 3.5对象及控件 (4) 3.6第三方库 (4) 3.7排版 (4) 3.8AJAX (5) 4CSS (5) 4.1组织 (5) 4.2命名 (5) 4.3兼容性 (5) 4.4第三方库 (6) 4.5排版 (6)
前台编码规范 1引言 1.1编写目的 帮助开发团队形成一致的前台编码风格，并指出某些容易引发BUG的不良编码习惯，预期读者为长沙安晨信息科技有限公司的全体开发人员。 1.2变更记录 版本号作者日期备注 1.0Aaron7/1/2014 1.1Aaron7/31/2014Add examples 1.2Aaron8/4/2014Update the format 1.3定义 术语定义备注 HTML Hypertext Markup Language JS Javascript CSS Cascading Style Sheet 1.4参考资料 2HTML 2.1命名 文件名采用帕斯卡命令法，所有单词首字母大写，词汇缩小可以全部大写，单词间不加任何连接符。例如“UserLogin.cshtml”
?文件名应见名知义，能清晰描述页面主要功能，例如“AddUser.cshtml”。 2.2标签 ?所有标签都应该正确关闭，例如“
，
| no |