书写规范的javaScript
书写可维护的代码
代码的维护,修改以及扩展都是需要时间和人力成本的,所以为了减少浪费不必要的成本,从一开始就要书写可维护的代码,这样给自己也给项目其他人提供便利。
书写可维护的代码意味着你的代码是:
- 可读的
- 一致性
- 可预测的
- 可维护以及可扩展的
全局变量
全局变量的定义:
1.var + 变量名 在function外声明。即为全局变量。
<script>
var global = 'test';
function getGlobalValue () {
console.log(global)
}
getGlobalValue() // 'test'
</script>
2.不使用var,隐式声明全局变量
<script>
global = 'test';
function getGlobalValue () {
global_1 = 'test1';
console.log(global);
}
getGlobalValue(); //'test'
console.log(global_1); // 'test1'
</script>
3.使用window全局来声明
<script>
window.global = 'test';
console.log(global)
</script>
应尽量避免使用全局变量。过度使用全局变量会导致一些问题:
1.全局变量保存在静态存贮区。与局部变量的动态分配,动态释放内存相比,生存期较长,会占用比较多的内存单元。
2.全局变量破坏了函数的封装性能。
3.全局变量使函数的代码可读性降低。由于多个函数都可能使用全局变量,函数执行时全局变量的值可能随时发生变化,对于程序的查错和调试都非常不利。
for-in循环(for-in Loops)
for-in循环主要用在非数组对象的遍历上。同时也会遍历从原型链上下来的方法,使用hasOwnProperty()方法,可以过滤掉从原型链上下来的方法。
var student = {
name : 'xiaoming',
age : 18,
sex : 'man'
}
//给所有对象添加一个方法
if (typeof Object.prototype.clone === "undefined") {
Object.prototype.clone = function () {};
}
//遍历对象属性,没有过滤原型方法
for (var item in student){
console.log(item + ':' + student[item])
}
/*result:
name:xiaoming
age:18
sex:man
clone:function () {}
*/
//使用hasOwnProperty()过滤原型方法
for (var item in student){
if(student.hasOwnProperty(item)){
console.log(item + ':' + student[item])
}
}
//另一种方法
var item , hasOwn = Object.prototype.hasOwnProperty;
for(item in student){
if(hasOwn.call(student, item)){
console.log(item + ':' + student[item])
}
}
/*result:
name:xiaoming
age:18
sex:man
*/
其他规范
其他规范包括空格,缩进,循环花括号,函数命名,以及注释等,也要形成统一的规范。方便代码的阅读以及多人协作。
参考资料
书写规范的javaScript的更多相关文章
- 前端编码规范之JavaScript
上次浅谈了下关于CSS的编码规范,大部分童鞋持赞同意见,仍存在一些童鞋不太理解这些规范的意义. 如果是个人或者小作坊开发,其实这些所谓的编码规范也没啥意思,因为大家写好的代码直接就给扔到网上去了,很少 ...
- CSS书写规范
一.CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列 ...
- 推荐大家使用的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- 分享给大家的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- CSS书写规范及顺序
CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...
- 推荐大家使用的CSS书写规范及顺序
@设计达人网 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文 ...
- CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总 ...
- CSS书写规范、顺序和命名规则
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考 这些是参考了国外一些文章以及我的个 ...
- 推荐大家使用的CSS书写规范、顺序(转载)
转自:http://www.admin10000.com/document/2979.html 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体 ...
随机推荐
- 浅谈oracle树状结构层级查询测试数据
浅谈oracle树状结构层级查询 oracle树状结构查询即层次递归查询,是sql语句经常用到的,在实际开发中组织结构实现及其层次化实现功能也是经常遇到的,虽然我是一个java程序开发者,我一直觉得只 ...
- win10 UWP GET Post
win10 应用应该是要有访问网络,网络现在最多的是使用GET,Post,简单的使用,可以用网络的数据:获得博客的访问量. 在使用网络,我们需要设置Package.appxmanifest 网络请求使 ...
- WPF 如何画出1像素的线
如何有人告诉你,请你画出1像素的线,是不是觉得很简单,实际上在 WPF 上还是比较难的. 本文告诉大家,如何让画出的线不模糊 画出线的第一个方法,创建一个 Canvas ,添加一个线 界面代码 < ...
- shell script测试命令(test)
shell script测试命令(test) test命令 检查系统上面某些文件或者相关的属性 常用选项 test -e :检查该文件名是否存在 例:检查/dmtsai是否存在 [root@local ...
- IT 圈里有哪些经常被读错的词?
原文链接:IT 圈里有哪些经常被读错的词? ()标相应英文单词[]标音标 =====公司/产品名===== Youtube (You-tube [tju:b]) 念 优tiu啵 不念 优吐毙Skype ...
- 【转】ARM vs X86 – Key differences explained!
原文:http://www.androidauthority.com/arm-vs-x86-key-differences-explained-568718/ Android supports 3 d ...
- js正则验证特殊字符
js正则验证特殊字符 方案一 var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im, regCn = /[·!#¥(--):: ...
- 基于HTML5及WebGl下生成的json格式的工控SCADA风机叶轮旋转
突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...
- log4j 和slf4j的比较
log4j 和slf4j的比较 slf4j 官网:https://www.slf4j.org/manual.html slf4j(simple logging facade for java)是Jav ...
- LeetCode 228. Summary Ranges (总结区间)
Given a sorted integer array without duplicates, return the summary of its ranges. Example 1: Input: ...