文件命名
页面、js文件命名:采用中划线连接方式,比如说: error-report.html
js文件夹命名:scripts
公共js命名:common.js
文件结构组织
每个页面中中独有的js文件,/scripts文件夹下js文件结构应与页面结构一致
JS语法
变量声明 |
function doSomethingWithItems(items) { var value = 10, // 注释啊,注释啊,亲 result = value + 10 // 注释啊,注释啊 for (var i=0, len=items.length; i < len; i++) { doSomething(items[i]); } }
|
标准变量采用驼峰标识 |
var thisIsMyName;
|
函数声明 |
var doSomething = function (item) { // 内容 }; |
括号对齐 |
if (condition) { doSomething() } 花括号必须要,即使内容只有一行
|
在方法之间、单行或多行注释前、逻辑块之间加入空行,增加可读性 | |
逗号、分号后留一个空格 |
var values = [ 1, 2, 3, 4, 5, 6, 7 ], i, len; for (i=0, len=values.length; i<len; i++) { process(values[i]); } |
字符常量统一使用单引号' |
var str = '123';
|
for-in |
var prop; for (prop in object) { // 注意这里一定要有 hasOwnProperty 的判断, 否则 JSLint 或者 JSHint 都会有一个 warn ! if (object.hasOwnProperty(prop)) { console.log("Property name is " + prop); console.log("Property value is " + object[prop]); } } |
switch |
switch (condition) { case "first": // code break; case "third": // code break; default: // code }
|
构造函数,大写第一个字母 |
function Person(name) { this.name = name; } |
使用的ID的地方一定全大写 |
var goodID;
|
使用的URL的地方一定全大写 |
var reportURL;
|
常量采用大写字母,下划线连接的方式 |
var MAX_COUNT = 10;
|
页面js代码内部结构组织
在这,首先要说的是,我们是后端人员,在部门刚起步前后端未分离的情况下,负责了页面中js的编码
下面写的在前端看来是些很烂的东西,但路要一步步走,只能在考虑我们工作难度的基础上实现代码的部分规范
真正的前端甚至可以用MVC框架,但我们不可以,在这首先要考虑的是工作量与新人的适应性
页面js代码内部分为4部分
第一部分
<script language="javascript"> //唯一全局变量 var thisPage = {}; </script>
第二部分
/*页面数据复杂初始化或回填*/ (function ($) { //大多数页面此处为空,复杂回填在此进行,每个操作上方用/**/标明功能,内部用//注释 /*美化html控件*/ $(document).myFormElement(); })(jQuery);
第三部分
/*页面方法——基本用于事件绑定*/ (function ($) { //每个函数上方用/**/标明功能,内部用//注释 /*快捷搜索*/ thisPage.quickSearch = function(pageNum){ //内部实现 alert(pageNum); }; })(jQuery);
第四部分
/*页面方法——事件绑定*/ (function ($) { //每个事件绑定上方用/**/标明功能,内部用//注释 /*搜索按钮点击事件*/ $(".qs").on('click', function(){ myIndex.quickSearch(1); }) })(jQuery);