• 互联网部-供应商团队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);
  • 相关阅读:
    [建议]我对博客园的发展的一点想法
    [转载] 理想、激情、生存—— 一位技术管理人员的20年工作经历和感悟
    FIT FOR .NET(3)
    基于真实项目的TDD应用
    [团队公告]博客园的敏捷软件开发团队成立了
    .NET数据访问体系结构指南
    这是不是微软MSN的一个Bug呢?
    抽象工厂的应用
    简单基础的问题,但是非常容易出错.
    VS 2005 Beta2 Team Suite Edtion
  • 原文地址:https://www.cnblogs.com/xjyh/p/4532893.html
Copyright © 2020-2023  润新知