海枫科技

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

2017-03-06  本文已影响100人  Hyphone

命名

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

上一篇下一篇

猜你喜欢

热点阅读