html js css 解耦,编写可维护的前端代码

最近在看JavaScript高级程序设计，看到可维护代码的编写，做一下笔记与总结，方便以后查看。

1.代码约定

1.1可读性

代码的格式化 使用若干个空格来进行缩进，因为制表符在不同编辑器种的显示效果不同

注释

函数和方法 注明参数，返回值，前提假设....

大段代码

复杂的算法 说明算法逻辑，方便别人查看，也方便自己查阅

Hack 说明浏览器的差异，防止别人修改时没考虑到误删...

1.2 变量和函数命名

不要使用没有意义或容易引起歧义的名字，如：foo，doSomething...

变量名尽量用名词，如： car，person....

函数名用动词开始，如：getName(); 返回值为boolean用 is 开头

变量和函数使用可以说清楚方法作用和变量含义的名称，不要担心长度，后期可以压缩

1.3 变量类型透明

类型透明也就是在变量定义的时候可以知道变量的类型

主要有以下三种方式：

初始化变量

var found = false; // boolean

var count = -1; // number

缺点：不能使用在函数声明中的函数参数(现在通过ES6中的函数参数初始化解决)

使用匈牙利标记法 o表示对象，s表示字符串...

var bFound; // boolean

var iCount; // int

缺点：代码难以阅读

使用类型注释 类型注释放到变量名右边，初始化前面

var found /*:Boolean*/ = false;

var count /*:int*/ = -1;

缺点：不能使用js多行注释

使用typeScript(终极)

2.松散耦合

2.1 解耦HTML/JavaScript

JavaScript中使用HTML

不要使用js插入HTML，可以通过在页面中隐藏元素，当页面渲染后，通过js显示该元素，而不是生成

通过Ajax请求获取HTML

HTML中使用JavaScript

将js文件写成独立文件，script标签引入

2.2 解耦CSS/JavaScript

通过动态修改样式类，而不是修改特定样式

// 不建议写法

element.style.color = 'red';

element.style.backgroundColor = 'blue';

// 建议写法

// css

.dit{

color: red;

background-color: blue;

}

// js

element.className = 'edit';

2.3 解耦应用逻辑/事件处理程序

有以下几条原则：

勿将event对象传给其他方法，只传函数中需要的数据

任何可以在应用层面动作都应该可以在不执行任何事件处理程序的情况下进行

任何事件处理程序都应该处理事件，然后将处理转交给应用逻辑

// 不建议写法

function handleKeyPress(event){

if(event.keyCode === 13){

var target = event.target;

var value = 5 * parseInt(target.value);

if(value > 10){

document.getElementById('id').style.display = 'block';

}

}

}

// 建议写法

// 好处：如果我点击鼠标也执行相同逻辑，那么直接调用validateValue就可以了

// 应用逻辑

function validateValue(value){

value = 5 * parseInt(value);

if(value > 10){

document.getElementById('id').style.display = 'block';

}

}

// 事件处理程序

function handleKeyPress(event){

if(event.keyCode === 13){

var target = event.target;

validateValue(target.value);

}

}

3.其他

3.1 尊重对象所有权

简单点说就是不是你自己的创建或者维护的某个对象，他的对象和方法，不能修改

具体说：

不要为实例或原型添加属性或方法

不要重新定义已存在的方法

3.2 避免全局变量

最多创建一个全局变量，其他对象或函数保存在其中，其中有个概念叫做命名空间

命名空间就是指用来放置页面功能的对象

// 命名空间

let YAHOO = {};

YAHOO.util.Dom

YAHOO.util.Event

....

3.3 避免与null进行比较

判断一个是否为null 如果直接比较是使用过度的，并且由于比较不充分可能导致错误，

所以在判断一个值的类型的时候要与期望的类型进行比较，而非不被期望的那些

// value 期望一个Array

if(value !== null){

// do something....

}

// 建议

if(value instanceof Array){

// do something....

}

下面列举一下判断数据类型的方法

判断基本类型，使用typeof

判断引用类型，可以使用instanceof

判断是否为函数，也可以使用typeof

判断是否为undefined,使用typeof,不要直接===判断，如果函数没有声明，那么会报错

所有类型都可以使用Object.prototype.toString.call

let ts = Object.prototype.toString;

ts.call([]) === '[Object Array]'; // true

ts.call(123) === '[Object Number]'; // true

ts.call({}) === '[Object Object]'; // true

....

3.4 使用常量

使用常量可以避免魔术字符串，也可以帮助构建国际化

建议使用常量的几种情况：

重复值 --- 任何多处使用到的值

用户界面字符串 --- 方便国际化

URLs --- 推荐用一个公共地方专门存放所有的URL

任意可能变更的值 --- 如果是以后可能变更的值，都应该提取出来作为一个常量