海枫科技前端编码风格规范之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(){} }); } }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,110评论 1 10
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,881评论 2 17
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • 原文: https://github.com/ecomfe/spec/blob/master/javascript...
    zock阅读 3,408评论 2 36
  • 我相信关于房子,太多人有话要说。 那些年,我们打算买而最终没有买的房子,就像那些年我们一起追过的姑娘,终...
    杉杉妈妈阅读 418评论 4 3