jQuery的使用及关于框架造型（转）

Introduction

正如jQuery所宣称的一样，Write Less, Do More。很多时候我们喜欢用它来解决问题。但增加一个库必然意味着更大的网络负担，意味着更高的页面初始载入时间。并且，现在与当初已经有了很大不同，jQuery是伴随着IE6出来的，当时，jQuery在跨浏览器开发上有不可替代的作用。但今天，伴随ES5的广泛被支持以及各个浏览器本身的完善，我们可以考虑适当的丢掉它，改善性能。
需要注意的是，并不是说jQuery是不可取的，在某些场合，用它是更合适的，需要我们自己判断。

Listening for Document Ready

我们经常用到

$( document ).ready()

或者它的简写

$()

,用来传入当所有dom准备完毕后，执行逻辑的相关回调。原生js可以这么写：

document.addEventListener('DOMContentLoaded', function () {
// dom 已经准备好被操作了
});

Selecting elements

我们常常依赖于jQuery的选择器，而现在，所有的浏览器基本都支持了

querySelector

与

querySelectorAll

，这里是MDN链接

var lochNess = document.querySelector(".monsters");
console.log("It's from Scotland - " + lochNess.textContent);

var scary = document.querySelectorAll(".monsters");
for (var i = 0; i < scary.length; i++) {
console.log(scary[i].innerHTML);
}

Attaching and removing event listeners

侦听事件是web开发中再重要不过的一环。曾经IE独树一帜，与其它浏览器提供的API不一致，导致需要用jQuery来快速开发，现在，所有的浏览器都提供了addEventListener：

var btn = document.querySelectorAll("button"),

btn[0].addEventListener("click", function () {
list.addEventListener("mouseover", enlarge);
});

btn[1].addEventListener("click", function () {
list.removeEventListener("mouseover", enlarge);
});

Manipulating classes and attributes

曾经，不使用jQuery来处理class是一件很麻烦的事情，而现在，由于classList的存在(这里是MDB链接)我们可以快捷的解决这一类问题，另外，如果需要操作attribute，可以使用setAttribute(同样是MDN链接)

var btn = document.querySelectorAll("button"),
div = document.querySelector("#myDiv");

btn[0].addEventListener("click", function () {
//可以获取任意的属性
console.log(div.id);
});

// Element.classList存放了所有当前元素的class
var classes = div.classList;

btn[1].addEventListener("click", function () {
console.log(classes);
});

btn[2].addEventListener("click", function () {
//可以添加，删除
classes.add("red");
});

btn[3].addEventListener("click", function () {
//也可以翻转
classes.toggle("hidden");
});

Getting and setting element content

jQuery提供了text() html()用以操作元素的内容，我们可以使用原生的textContent与innerHTML属性代替它们。

var myText = document.querySelector("#myParagraph"),
btn = document.querySelectorAll("button");

// 获取
var myContent = myText.textContent;
console.log("textContent:  " + myContent);

// 改变
btn[0].addEventListener('click', function () {
myText.textContent = " Koalas are the best animals ";
});

var myHtml = myText.innerHTML;
console.log("innerHTML:  " + myHtml);

btn[1].addEventListener('click', function () {
myText.innerHTML = "<button> Penguins are the best animals </button>";
});

Inserting and removing elements

原生的js可以这样添加与删除元素：

var lunch = document.querySelector("#lunch");

// 添加
var fries = document.createElement("div");
fries.innerHTML = '<li><h4> Fries </h4></li>';
lunch.appendChild(fries);

// 特定位置添加

var beef = document.querySelector("#Beef"),

topSlice = document.createElement("li"),
bottomSlice = document.createElement("li");

bottomSlice.innerHTML = topSlice.innerHTML = 'Cheese';

beef.parentNode.insertBefore(topSlice, beef);
beef.parentNode.insertBefore(bottomSlice, beef.nextSibling);
};

//删除
var pickles = document.querySelector("#pickles");
if (pickles) {
pickles.parentNode.removeChild(pickles);
}

Walking the DOM tree

原生的js也可以遍历DOM树

var snakes = document.querySelector('#snakes'),
birds = document.querySelector('#birds');

snakes.addEventListener('click', function (e) {
console.log("Children: ");
var children = e.target.children;
for (var i = 0; i < children.length; i++) {
console.log(children[i].textContent);
}
});

birds.addEventListener('click', function (e) {
// 获取最近的兄弟节点
var previous = e.target.previousElementSibling;
if (previous) {
console.log("Previous sibling: " + previous.textContent);
}
var next = e.target.nextElementSibling;
if (next) {
console.log("Next sibling: " + next.textContent);
}

//所有的兄弟们
Array.prototype.filter.call(e.target.parentNode.children, function (child) {
if (child !== e.target) {
console.log(child.textContent);
}
});

});

Looping over arrays

jQuery提供的 each与map已经可以被ES5的forEach与map替代

var ninjaTurtles = ["Donatello", "Leonardo", "Michelangelo", "Raphael"];

ninjaTurtles.forEach(function (entry) {
console.log(entry);
});

var lovesPizza = ninjaTurtles.map(function (entry) {
return entry.concat(" loves pizza!");
});
console.log(lovesPizza);

Animations

jQuery的动画效果是非常强大的，在很多场合还是很难替代的，不过，由于CSS3，动画可以转到由CSS来实现。这部分就不给DEMO了。

AJAX

如果唯一使用jQuery的唯一理由，是它便捷的AJAX，那么，将jQuery替换成一个轻量的多的库吧！比如reqwest，这个库压缩后不到10kB。

总结

尽全力使脚本变的更小，可以使用户获得更高的加载速度，以及更好的用户体验。但也要谨慎的做取舍，没必要大量的造jQuery已经提供的轮子。
除了在编码方面带来性能优化，我们还可以借助工具达到同样的效果。可以看一看博主的webpack方面的文章 :)
http://www.cnblogs.com/E-WALKER/p/4771700.html


折腾过 KISSY 类库，简单说几点：

1. 开发 KISSY 之前，淘宝使用的是 YUI2 类库。但从 2009 年开始，YUI2 在逐步退出历史舞台，YUI 团队的大部分精力都投入到 YUI3 的开发中去了。从当时的情况来看，YUI2 前途堪忧，YUI3 则还不够成熟，并且 YUI3 的定位（大而全的框架型类库）不适合淘宝的前台业务场景（以浏览型为主的展现页面）。

2. 我自己是力推 jQuery 的。但由于历史原因，阿里系对 jQuery 的成见很深，认为其接口太灵活，不利于团队协作，以及其插件质量良莠不齐，社区不如 YUI 健壮。2008 年在淘宝前端内部争辩过 jQuery，可惜我没坚持，没推广成功。

3. 但当时不少新人都喜欢 jQuery 的 API 风格，jQuery 社区也发展得越来越好。我自己也是个铁杆 jQuery API fans. 因为前两点原因，2009 年在开发 KISSY Editor 时，底层虽然是基于 YUI2 的，但我逐步已经做了很多替换封装，实现了一个简易的杂糅了 YUI2 和 jQuery API 风格的底层类库，这就是 KISSY 的原型。

4. 接下来是技术驱动的一段时期，2010 年基于 KISSY core 写了 Switchable、Suggest 等在淘宝被大量使用的 UI 组件，一下来就推广开来了。（中间 YUI2 和 KISSY 并存了很长时间）

5. KISSY 进一步发展，得益于核心开发成员承玉的加盟。2011 年后，KISSY 从 KISS 的定位，逐步演化成了立足于淘宝、力争大而全、同时可定制的一个类库。承玉做的非常不错，还有龙藏的 Flash 组件等，以及仿 YUI3 Gallery 的组件贡献模式，这些让 KISSY 成为了适合淘宝业务的最佳类库。

上面说了这么多，总结下与楼主的问题相关的几点：

1. 选择什么类库，抑或自己开发，跟团队的技能倾向有关。如果雅虎和阿里没关系，或许阿里就不会这么雅虎味，或许也就不会对 jQuery 有成见，或许现在压根儿就没 KISSY 什么事。

2. 类库的选择离不开业务场景。如果淘宝不是浏览型为主的网站，而是个个页面都像 GMail 一样复杂，那也许淘宝选择的类库会是 ExtJS 或 Google Closure 或 YUI3 等等。其实淘宝的后台项目中，还真有不少是用 ExtJS 的。

3. 对于商业公司来说，类库的重点不是基础模块，而是业务模块。这里的业务模块包括淘宝的登录注册等模块，也包括 Switchable、Suggest 等泛业务模块（比如淘宝首页的搜索提示，看似是通用的，其实是跟淘宝的业务类型分不开的。YUI2 也有一个 Autocomplete 组件，但其庞大的体积根本不适应淘宝）。

4. 类库的选择，还跟整个业界的环境和团队决策者的眼光相关。比如从去年开始，前端社区越来越意识到了开放共荣的重要性，意识到了规范的重要性。CommonJS、AMD 等等，以及 NodeJS 的兴起，这一切变化，也在悄然改变着大家的抉择。这是我开发 SeaJS 的原因。如今，我们有了更好的、更偷懒、同时更灵活的选择和组合解决方案。

任何路都没什么错，关键是，要知道自己在哪。

这不算什么。还有自行开发的Key-Value数据库、分布式存储系统、HTTP服务器……稍大一点的公司都会有这些玩意的。
为什么它们会出现，大概有以下几点：
(1) 架构级的工程师需要证明自己的能力和价值（晋升需要，或者手痒）
(2) 自制轮子确实有些地方胜过标准轮子

代码用来解决实际问题，然后经过重构和更高的抽象形成框架。框架应该告诉你不要做什么，输出的是一种如何构建应用的价值理念。

功成名就的开源（js）框架主要是像prototype、jquery、mootools、underscore、backbone.js这样的有自己风格的产品。相比之下历史上出现的巨型以提供widget倾向的框架在口碑上就略逊一筹，如dojo、YUI、ext等等，他们也很成功，但是程序员员往往持有自己不同的看法，认为这种重量级的解决

说jQuery简单的人，根本没看过jQuery的代码，
同理，说xx简单的人也一样
无论在任何一家公司，首先要混口饭吃吧，你要混饭吃，就得好好干活，但是程序员都想偷懒啊，有现成的用，干嘛不用现成的？所以从打工者的角度来说，用jQuery之类现成的东西给老板自然是最好的，但是这里还涉及到一个美工的协调问题，很多直接拿来的控件，离美工MM设计出来的页面还是一定量的区别的，这里面就涉及到HTML结构的问题了，有些好改，有些不好改，

1. 业务的组件驱动，例如：Yahoo、阿里、百度
例如：阿里派的KISSY和百度的七巧板估计也是和自己的产品线（百度知道、百度百科）有关系；
2. 为了增加在开发者队伍中的影响力，这种公司一般推出都是重量级些的方案，例如：微软、Adobe、Google
Javascript的影响力越来越大，大公司自然不肯错过
3. 其它一些不入流的开源框架，大多为证明自己的技术价值，做技术牛人，这种一般是以借鉴、模仿
http://www.zhihu.com/question/20099586