书写可维护的代码

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

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

  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. Linux下搭建svn服务端

    安装 使用yum安装非常简单: yum -y install subversion (压缩包安装比这麻烦的多) Tortoise本是window下客户端工具,但也可以建仓库,作为服务端.Linux只有 ...

  2. 简易RPC框架-客户端限流配置

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  3. Oracle学习笔记之用户自定义函数

    自定义函数语法格式:   用户自定义的函数,可以直接在sql语句中直接调用,并且任何一个funciton都必须有返回值,而且该函数声明后,是保存在数据端的,我们随时可以使用:注意:函数只能有一个返回值 ...

  4. Ubuntu系统下的实用软件推荐

    想要在ubuntu下工作? 又担心影响效率? 这些软件可以帮助你解决问题 ! 基本在windows上可以做到的功能, 在linux中也同样能够实现,而且自己寻找解决方案的过程才是最有趣的! 1.gua ...

  5. 微信公众号支付|微信H5支付|微信扫码支付|小程序支付|APP微信支付解决方案总结

    最近负责的一些项目开发,都用到了微信支付(微信公众号支付.微信H5支付.微信扫码支付.APP微信支付).在开发的过程中,在调试支付的过程中,或多或少都遇到了一些问题,今天总结下,分享,留存. 先说注意 ...

  6. CentOS7.3安装NVIDIA-1080ti驱动、cuda、cudnn、TensorFlow

    本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 Ubuntu非要换centOS...好吧... 看了很多是通过ELRepo源安装驱动,不过我没 ...

  7. 伤不起的微信小程序

    前段时间不是很忙,刚好公司需要开发一个微信小程序,于是我就入坑了(此坑还是有点深滴,请备好干粮). 我是一名iOS开发工程师,个人觉得入门开发小程序的话,需要基本的web前端知识,比如说:代码的书写格 ...

  8. 2016-2017 ACM-ICPC, Asia Tsukuba Regional Contest D Hidden Anagrams

    题目链接:http://codeforces.com/gym/101158/attachments /* * @Author: lyucheng * @Date: 2017-10-21 12:20:0 ...

  9. Dragon Balls

    Dragon Balls Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...

  10. jquery getScript动态加载JS方法改进详解[转载]

    转载自http://www.jb51.net/article/31973.htm 有许多朋友需要使用getScript方法动态加载JS,本文将详细介绍此功能的实现方法     $.getScript( ...