[原]《Web前端开发修炼之道》-读书笔记JavaScript部分

JavaScript的分层概念

为了使代码更清晰，减少冗余，提高代码重用率，和css分层一样：

base层：最低端，给common层和page层提供接口的，两个职责：1：不同浏览器之间js的差异提供统一接口；2：扩展js语言底层提供的接口。

common层：提供可复用的组件，和页面内具体功能无关。common层的功能是给page层用的。

page层：最顶端，该层主要是完成各个页面内的功能需求。

良好的编程习惯

命名空间和匿名函数的使用

避免JS冲突，避免全局变量泛滥，划分模块。

生成命名空间是一个很常用的功能，可以将其封装为一个函数。

?

1 2 3 4 5 6 7 8 9 10 11 12

var GLOBAL = {}; GLOBAL.namespace = function(str) { 　　var arr = str.split("."), o=GLOBAL; 　　for(var i = (arr[0]=="GLOBAL") ? 1 : 0;  i<arr.length;  i++){ 　　　　o[arr[i]] = o[arr[i]] || {}; 　　　　o = o[arr[i]]; 　　} }      //调用 GLOBAL.namespace("A.DOG"); GLOABL.A.DOG.name = "wangcai";

给程序一个入口

特别重要的一点，直接关系到代码的可读性。

CSS放在头部，JS放在尾部

大家都知道，再啰嗦一遍，浏览器加载网页，加载到JS时，由于脚本比较多，而html代码还没有加载，这是页面会显示空白，脚本阻塞了html的加载，等到毫不容易加载完成了，有时候会发现这些网页元素没有样式，所以一个好的习惯是，CSS放在页头，JS放在页尾（先加载css,再加载html,再加载js.） 这样就能适时的将界面呈现给用户，减少页面空白的时间。

添加注释

形成有规律的代码注释风格，对代码的维护和修改有很大的帮助。

• 公共组件、插件注释，需要在文件头部加注释

/**

* 文件用途说明

* 作者日期

* 制作日期

**/

• 大的模块注释方法

//========================

// 代码用途

//========================

• 小注释

//代码说明

注释独占一行，不要再代码后同一行内加注释

编程适用技巧

• 保持弹性，适应变化
• 可复用性，避免产生副作用
• 通过传参实现定制，用hash散列对象传参
• 控制this关键字的指向
• 预留回调借口
• DRY原则，don’t repeat yourself，相同的代码只写一次，然后再多处引用，提高重用率，减少代码量，提高代码的可维护性。
  

系列知识链接

[原]《Web前端开发修炼之道》-读书笔记CSS部分

[原]《Web前端开发修炼之道》-读书笔记HTML部分

[原]JavaScript必备知识系列