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

命名

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(){} }); } }