书写可维护的代码

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

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

  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. caffe源码 池化层 反向传播

    图示池化层(前向传播) 池化层其实和卷积层有点相似,有个类似卷积核的窗口按照固定的步长在移动,每个窗口做一定的操作,按照这个操作的类型可以分为两种池化层: 输入参数如下: 输入: 1 * 3 * 4 ...

  2. 转:C++学习之Pair

    Pair类型概述 pair是一种模板类型,其中包含两个数据值,两个数据的类型可以不同,基本的定义如下: pair<int, string> a; 表示a中有两个类型,第一个元素是int型的 ...

  3. 设计模式:基于线程池的并发Visitor模式

    1.前言 第二篇设计模式的文章我们谈谈Visitor模式. 当然,不是简单的列个的demo,我们以电商网站中的购物车功能为背景,使用线程池实现并发的Visitor模式,并聊聊其中的几个关键点. 一,基 ...

  4. ReflectiveLoader分析(远程线程注入 PE修正)

    从github上下载了ReflectiverLoader认真学习了一下 在代码中得到一些心得和自己的想法,都按步骤写到了代码中,现在分享给大家,如有错,望大家指正 其中需要注入的dll和解析, 内存R ...

  5. MFC程序使用GTest搭建测试框架

    一.起源 最近对单元测试比较感兴趣,之后就上网搜了一些测试的框架,C++项目使用的测试框架基本上都使用的GoogleTest,之后就开启了gtest的学习之路. 主要是根据<玩转Google开源 ...

  6. 用python爬取微博数据并生成词云

    很早之前写过一篇怎么利用微博数据制作词云图片出来,之前的写得不完整,而且只能使用自己的数据,现在重新整理了一下,任何的微博数据都可以制作出来,放在今天应该比较应景. 一年一度的虐汪节,是继续蹲在角落默 ...

  7. 深度学习系列 Part(3)

    这是<GPU学习深度学习>系列文章的第三篇,主要是接着上一讲提到的如何自己构建深度神经网络框架中的功能模块,进一步详细介绍 Tensorflow 中 Keras 工具包提供的几种深度神经网 ...

  8. Leetcode题解(三)

    8.String to Integer (atoi) 题目 这道题目关键是要考虑清楚各种输入用例.针对每一种情况,函数都能处理,也就是函数鲁棒性很高.代码如下: class Solution { pu ...

  9. 网络拓展知识 ACL NAT IPv6

    第1章 ACL 访问控制列表 访问控制表(”位代表精确匹配,而“1“位代表不许匹配. 例如路由器EIGRP的配置中: RouterA(config)#router eigrp 100 RouterA( ...

  10. 有道云翻译接口 Show类

    package com.yangchong.fanyi; import java.awt.EventQueue;import java.awt.Toolkit; import javax.swing. ...