-
-
JavaScript重构
收藏JavaScript重构的方法、技巧讨论
分享到：
最近更新文章
Backbone.js介绍
注：教程请参见这里（本文有很多内容都是从这里翻译的），官方网站在这里；综合例子参见这里。
Backbone.js是一个前端MVC框架，model能够绑定键值对和自定义事件，集合具备可枚举方法的富API，视图具备事件处理能力，并且可以通过RESTful的JSON接口和你已有的API通信。
View
Backbone里的视图就是用来反映数据模型的，可以监听事件并响应，通过利用Un ...
前端解耦的一个最简单示例
且看这样一段HTML片段：
<div id="name" style="background-color:red" onclick="alert('');">Jim</div>
这是前端代码全部耦合在一起的例子，下面对它进行MVC解耦。
第一步解耦，把View层分离出来：
< ...
关于CommonJS
老实说，之前我对CommonJS也是一无所知，直到不久前Node.js火起来，我去研究它，才了解到Node.js其实是CommonJS的一个部分实现，我才关注起CommonJS来。
以前我们说起HTML，我们说起JavaScript，大家的印象似乎都停留在了“网页”上面，从2005年开始，因为Ajax的缘故，有一种叫做“前端程序员”的新型物种诞生了。
可是现在，前端程序员不甘心自 ...
JavaScript实现继承的几种方式
在这篇文章中，介绍了原型链继承的情形，事实上，JavaScript虽没有给出继承的关键字，但是我们依然能够拿出一些好办法实现。
1、原型链继承：
...
从后端设计来类比前端设计的思考
今天同事的一句话给我留下深刻的印象：“前端也有MVC，DOM树就是这个M，CSS就是这个V，至于C，非JavaScript莫属”。
很高兴团队中有越来越多的人能 ...
JavaScript重构（十）：强化对象封装和模块封装
1、类本身就是一种封装形式，先来看看最简单的封装，JavaScript中没有private关键字，对于私有成员，不如我们统一一个以下划线开头的命名来标识：
var User = function(name){
this._name = name;
this.getName = function(){
return _name;
};
};
2、不过，上面的办法还不 ...
JavaScript并发下载
在IE6/7里JavaScript会从两个方面阻碍页面呈现：script标签下面的网页资源在script加载完之前会停止请求、下载。 script标签下面的html元素在script加载完之前会停止渲染。
在ie6/7 firefox2/3 Safari3 Chrome1 和 opera下 script标签会阻碍下载：
虽然在ie8，safari4，chrome2下scri ...
JavaScript重构（九）：自定义的JavaScript产品框架
产品做到一定程度，JavaScript不仅仅需要几个层面上的重构，而需要将这些合理的、零散的重构集成起来、系统化，最终形成一套适合自己产品的前端框 ...
随手记：为系统设计一套简易的JavaScript框架需要考虑的要素
最近在工作中做前端的重构，其中一个重要步骤就是设计一套简易的前端框架，把所想到的随手记下来：
物理和分布 js文件布局 模块化 依赖关系梳理 加载梳理
技能储备 JavaScript进阶 JavaScript面向对象 JQuery（或其他JavaScript基础框架）熟悉使用
规范和规则 JavaScript规范 对象化示例代码
框架内容 模型定义 ...
Javascript Memoizer
以下来自John Hann的实现，这段代码引起了我的注意，它用巧妙的方法把方法调用的结果缓存起来了。
代码解析：
// memoize: 使用memoization来缓存的通用方法
// func: 要被缓存的方法
// context: 方法执行上下文
// Note: 方法必须是外部可访问的，参数是可字符序列化的
function memoize (func, cont ...
JavaScript重构（八）：JSDoc和JSLint
JSDoc可以生成类似于JavaDoc一样的API文档，这对于前端开发是必不可少的。
下载jsdoc-tookit（http://code.google.com/p/jsdoc-toolkit/）和jsdoc-tookit-ant-task（http://code.google.com/p/jsdoc-toolkit-ant-task/），CSDN的转义功能有问题，所以把尖括号都换成了书名号： ...
JavaScript重构（七）：重用老代码
在Java中，有这样一段老代码：
class Round{
public void drawRound(); //画圆
}
现在新代码希望能和它共存，使用一个Person的对象来控制，只不过，可 ...
JavaScript重构（六）：利用继承来做事
终于要说到JavaScript的继承了，原型链继承是最常用的一种方式：
function Video(){};
function Movie(){};
Movie.prototype = new Video();
Movie.prototype.constructor = Movie; //不要丢失构造器
啰嗦一句，如果我拿到的是方法的实例，一样可以做继承：
func ...
JavaScript重构（五）：利用原型和闭包，完成组件方法
var Player = (function(){
Player = function(){ //这只是个空壳
throw new Error("Can not instantiate a Player object.");
};
Player.MIN_EXTENDED_TIME = 1;
Player.MAX_EXTENDED_TIME = 3;
...
JavaScript重构（四）：JavaScript编码规则
没有规矩，不成方圆，JavaScript带来了灵活性，也带来了不受控的变量和访问，所以要用规则限制它。一支成熟的团队，还是一支新鲜的团队，规则应当是不一样的，我只是列出一些常见的或者有效的办法，来约束跳跃的开发人员，思维可以任意飞跃，代码却要持续受控。当然，任何规则都是建立在一定的认知基础之上的，面向对象JavaScript的基础是必备的，否则一切无从谈起。
变量和方法控制：
模块开发不允 ...
JavaScript重构（三）：JavaScript的测试
进行JavaScript重构时，我希望引入易于使用的测试框架来保证重构的顺利进行，未来能持续通过测试代码对JavaScript逻辑的正确性做保障。
JsUnit （http://sourceforge.net/projects/jsunit/，http://www.jsunit.net/）
JsUnit是一个独立的JavaScript单元测试框架，和JUnit差不多，没有上手难度，包括传统的se ...
JavaScript重构（二）：JS的动态加载
前一节留下了一个问题，如果JS分门别类也清晰了，那我现在需要在必要的情况下才加载某一模块的JS，这个怎么实现呢？
方法一，最简单也是最容易被接受的方法，通过后台代码来控制，还是少些复杂的JS吧，通过一个标签、一个分支判断，就可以做到，何乐而不为呢？
方法二，如果要使用纯JS来控制，那么看看这样如何：
$.ajax(){
url:"xxx/play.js" ...
JavaScript重构（一）：模块划分和命名空间
通常我们的团队中，开发人员在Java语言层面具备相当的技术素养，经验丰富，而且有许多成熟的、合理的规约，类型繁多的代码隐患检查工具，甚至在团队间还有计划内的评审和飞检。但是前端的代码不似后台，就像一个没人疼的孩子，不仅仅容易被低估、被轻视，导致质量低劣、可维护性差，技能上，更缺少优秀的前端开发人员。
JavaScript是前台代码中重要组成部分，随着版本的延续，产品越做越大，JavaScript层 ...