互联网部-供应商团队js规范

文件命名

页面、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,也必须使用var
标准变量采用驼峰标识
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
}
switch和括号之间有空格
break之后跟下一个case中间留一个空行
构造函数,大写第一个字母
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);
原文地址:https://www.cnblogs.com/xjyh/p/4532893.html