美文网首页海枫科技
海枫科技前端编码风格规范之JavaScript规范

海枫科技前端编码风格规范之JavaScript规范

作者: Hyphone | 来源:发表于2017-03-06 11:11 被阅读100次

    命名

    1.JS文件命名与对应被引入的jsp文件命名保持一致(不包含工具以及通用JS)
    2.变量 驼峰命名法;常量 全部字母大写,_分割;私有属性变量方法 _开头;函数及函数的参数 驼峰命名法;类 单次首字母大写,类的方法及属性 驼峰命名法;
    3.类 类名与当前JS文件名一致;

    add.js var Add = {}

    4.类中使用jquery声明dom元素时,使用$开头

    $name = $('#name');

    字符串格式

    JS中使用到的字符串使用单引号''声明
    不推荐书写:

    var name = "海枫科技";

    推荐书写:

    var name = '海枫科技';

    对象

    JS对象主要有以下3种类型:
    1.原生对象
    原生对象是语言规范的一部分,不管在什么样的运行环境下运行,原生对象都能用。原生对象包括:Array、Date、Math等等。

    var cars = new Array();

    2.宿主对象
    与前者相对而言,宿主对象是由JS代码运行的环境创建,不同的环境创建有不同的宿主对象。而且基本都能使我们与之交互。假如写的是在浏览器上运行的代码,会有window、document、location和history等宿主对象。

    document.body.innerHTML = '海枫科技';

    3.用户对象
    用户对象(植入对象)是在代码中定义的对象,在运行的过程中创建。

    其他

    1.类对象中:后面加一个空格
    2.间隔缩减4个空格

    综合案例

    var Add = { init: function(){ this.initModel(); this.initConfig(); }, initModel: function(){ this.model = { $name: $('#name'), $age: $('#age') } this.addEvent(); }, initConfig: function(){ this.config = { URL_SAVE: '/hyphone/save', URL_GENDER: '/gender/list', ID: '20129902901909' } }, addEvent: function(){ var self = this, _model = self.model, _config = self.config; _model.$name.on('click', function(){ console.log(this.value); }); _model.$age.on('click', function(){ console.log(this.value); self.loadGenders(); }); }, loadGenders: function(){ var self = this, _model = self.model, _config = self.config; $.ajax({ type: 'GET', dataType: 'json', url: _config.URL_GENDER + _config.ID success: function(result){ _config.genders = result.rows; }, error: function(){} }); } }

    相关文章

      网友评论

        本文标题:海枫科技前端编码风格规范之JavaScript规范

        本文链接:https://www.haomeiwen.com/subject/clbzwttx.html