所经历的 JS 框架使用及迁移(一)

所经历的 JS 框架使用及迁移(一)

由于 Prototype 的出现，比 jQuery 早，早期网站使用了 JS 框架 Prototype，后来由于一些快速开发的需要，同时启用了 jQuery ，jQuery 的简洁灵活，功能强大，让人爱不释手。因此在代码中，就有了两份代码并存。再到现在，由于前端缩身、效率等的需要，需要将 Prototype 移除，所以就开始了一个比较繁琐的迁移过程。所幸的是，Prototype 的依赖还不是特别的深。

Prototype 和 jQuery 都作为优秀的 javascript 框架，在实现的内容上，核心库本身，都封装了 Ajax 操作、抽象了浏览器兼容问题、DOM 操作，方便地使用 CSS 选择器功能、事件处理等，并无太多不同。重要的区别在于实现的形式和由此带来的使用方式上。Prototype 的重点是面向对象，扩展了 javascript 本身，为功能更加强大而开发。jQuery 则专为方便使用、本身高效而开发，全闭包、链式操作、隐式迭代，强大的事件绑定，短小精悍。从业界来说，jQuery 的使用占据了4成以上的份额。

下面来看 Prototype 到 jQuery 的迁移所做的工作。

由于需要将 Prototype 与 jQuery 并存，所以 $ 由 Prototype 所使用，而 jQuery 的 $ 被重新赋值为：$j。

var $j=jQuery.noConflict();

将 JS 代码从 Prototype 向 jQuery 迁移主要有如下操作：
A、DOM 操作部分
取元素:
Prototype:
$ 的用法是 $("id") 或者是 $(htmlelement), CSS 选择器 用 $$，并且返回数组。

相对应的，在 jQuery 中
$j 的用法是 $j("#id") 或者是 $j(htmlelement)，另外 $j 就同时支持 css 选择器。

这个要注意的地方，在于 Prototype 在取 id 成功之后，返回的是 HTML 元素对象。而 jQuery 返回的是 jQuery 对象，在 Firebug 中 console.log 出来之后象数组，所以如果要改变对象的属性，比如 innerHTML，可以用 jQuery 提供的 html()方法，而不能用 innerHTML，要想取得 HTML 元素对象，得用 get(0) 去取，如：
$j("#id").get(0) 跟 Prototype 的 $("id") 效果一样。
$j("#id").html() 和 $j("#id").get(0).innerHTML 效果一样。 如果用 $j("#id").innerHTML ，只是凭空为 jQuery 对象增加了一个属性。

由此，也带来迁移中一个容易出错的地方。
看如下两段代码：
Prototype 版:

var no = $("no");
console.log(no);
if(!no)
{
	console.log("no not exists!");
}

jQuery 版:

var no = $j("#no");
console.log(no);

if(!no || no.length == 0)
{
	console.log("no not exists!");
}

由于返回值的不同，对元素是否存的检测也是不同的。

下面是在chrome 控制台上的测试输出。

Prototype 版:

var no = $("no");
undefined
console.log(!no);
true
undefined

jQuery 版:

var no = $j("#no");
undefined
console.log(!no);
false
undefined