书写可维护的代码

代码的维护,修改以及扩展都是需要时间和人力成本的,所以为了减少浪费不必要的成本,从一开始就要书写可维护的代码,这样给自己也给项目其他人提供便利。

书写可维护的代码意味着你的代码是:

  1. 可读的
  2. 一致性
  3. 可预测的
  4. 可维护以及可扩展的

全局变量

全局变量的定义:

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
*/

 其他规范

其他规范包括空格,缩进,循环花括号,函数命名,以及注释等,也要形成统一的规范。方便代码的阅读以及多人协作。

参考资料

1.汤姆大叔《深入了解javascript系列》

书写规范的javaScript的更多相关文章

  1. 前端编码规范之JavaScript

    上次浅谈了下关于CSS的编码规范,大部分童鞋持赞同意见,仍存在一些童鞋不太理解这些规范的意义. 如果是个人或者小作坊开发,其实这些所谓的编码规范也没啥意思,因为大家写好的代码直接就给扔到网上去了,很少 ...

  2. CSS书写规范

    一.CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列 ...

  3. 推荐大家使用的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  4. 分享给大家的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  5. CSS书写规范及顺序

    CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...

  6. 推荐大家使用的CSS书写规范及顺序

    @设计达人网 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文 ...

  7. CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总 ...

  8. CSS书写规范、顺序和命名规则

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考   这些是参考了国外一些文章以及我的个 ...

  9. 推荐大家使用的CSS书写规范、顺序(转载)

    转自:http://www.admin10000.com/document/2979.html 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体 ...

随机推荐

  1. 浅谈oracle树状结构层级查询测试数据

    浅谈oracle树状结构层级查询 oracle树状结构查询即层次递归查询,是sql语句经常用到的,在实际开发中组织结构实现及其层次化实现功能也是经常遇到的,虽然我是一个java程序开发者,我一直觉得只 ...

  2. win10 UWP GET Post

    win10 应用应该是要有访问网络,网络现在最多的是使用GET,Post,简单的使用,可以用网络的数据:获得博客的访问量. 在使用网络,我们需要设置Package.appxmanifest 网络请求使 ...

  3. WPF 如何画出1像素的线

    如何有人告诉你,请你画出1像素的线,是不是觉得很简单,实际上在 WPF 上还是比较难的. 本文告诉大家,如何让画出的线不模糊 画出线的第一个方法,创建一个 Canvas ,添加一个线 界面代码 < ...

  4. shell script测试命令(test)

    shell script测试命令(test) test命令 检查系统上面某些文件或者相关的属性 常用选项 test -e :检查该文件名是否存在 例:检查/dmtsai是否存在 [root@local ...

  5. IT 圈里有哪些经常被读错的词?

    原文链接:IT 圈里有哪些经常被读错的词? ()标相应英文单词[]标音标 =====公司/产品名===== Youtube (You-tube [tju:b]) 念 优tiu啵 不念 优吐毙Skype ...

  6. 【转】ARM vs X86 – Key differences explained!

    原文:http://www.androidauthority.com/arm-vs-x86-key-differences-explained-568718/ Android supports 3 d ...

  7. js正则验证特殊字符

    js正则验证特殊字符 方案一 var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im, regCn = /[·!#¥(--):: ...

  8. 基于HTML5及WebGl下生成的json格式的工控SCADA风机叶轮旋转

    突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...

  9. log4j 和slf4j的比较

    log4j 和slf4j的比较 slf4j 官网:https://www.slf4j.org/manual.html slf4j(simple logging facade for java)是Jav ...

  10. LeetCode 228. Summary Ranges (总结区间)

    Given a sorted integer array without duplicates, return the summary of its ranges. Example 1: Input: ...