jQuery的使用及关于框架造型(转)

  1. 云栖社区>
  2. 博客>
  3. 正文

jQuery的使用及关于框架造型(转)

developerguy 2015-08-31 22:22:00 浏览815
展开阅读全文

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的选择器,而现在,所有的浏览器基本都支持了querySelectorquerySelectorAll这里是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

 

网友评论

登录后评论
0/500
评论
developerguy
+ 关注