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