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

ajax提交的请求：

定义和用法

ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax() 可以不带任何参数直接使用。

注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

语法

jQuery.ajax([settings])

参数	描述
settings	可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值。

参数

描述

settings

可选。用于配置 Ajax 请求的键值对集合。

可以通过 $.ajaxSetup() 设置任何选项的默认值。

参数

options

类型：Object

可选。AJAX 请求设置。所有选项都是可选的。

async

类型：Boolean

默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

beforeSend(XHR)

类型：Function

发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。

XMLHttpRequest 对象是唯一的参数。

这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。

cache

类型：Boolean

默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。

jQuery 1.2 新功能。

complete(XHR, TS)

类型：Function

请求完成后回调函数 (请求成功或失败之后均调用)。

参数： XMLHttpRequest 对象和一个描述请求类型的字符串。

这是一个 Ajax 事件。

contentType

类型：String

默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。

context

类型：Object

这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。

就像这样：

$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});

data

类型：String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

dataFilter

类型：Function

给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。

dataType

类型：String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
"json": 返回 JSON 数据。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串

error

类型：Function

默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。

有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。

如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。

这是一个 Ajax 事件。

global

类型：Boolean

是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

ifModified

类型：Boolean

仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 'etag' 来确定数据没有被修改过。

jsonp

类型：String

在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。

jsonpCallback

类型：String

为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。

password

类型：String

用于响应 HTTP 访问认证请求的密码

processData

类型：Boolean

默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

scriptCharset

类型：String

只有当请求时 dataType 为 "jsonp" 或 "script"，并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。

success

类型：Function

请求成功后的回调函数。

参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

这是一个 Ajax 事件。

traditional

类型：Boolean

如果你想要用传统的方式来序列化数据，那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。

timeout

类型：Number

设置请求超时时间（毫秒）。此设置将覆盖全局设置。

type

类型：String

默认值: "GET")。请求方式 ("POST" 或 "GET")，默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

url

类型：String

默认值: 当前页地址。发送请求的地址。

username

类型：String

用于响应 HTTP 访问认证请求的用户名。

xhr

类型：Function

需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。

https://www.w3school.com.cn/jquery/ajax_ajax.asp

posted @ 2015-08-31 22:22 沧海一滴阅读(317) 评论(0) 编辑收藏举报

刷新页面返回顶部

沧海一滴

不积小流，无以成江海

jQuery的使用及关于框架造型专题

Introduction

Listening for Document Ready

Selecting elements

Attaching and removing event listeners

Manipulating classes and attributes

Getting and setting element content

Inserting and removing elements

Walking the DOM tree

Looping over arrays

Animations

AJAX

总结

定义和用法

语法

参数

公告

沧海一滴

不积小流，无以成江海

jQuery的使用及关于框架造型 专题

Introduction

Listening for Document Ready

Selecting elements

Attaching and removing event listeners

Manipulating classes and attributes

Getting and setting element content

Inserting and removing elements

Walking the DOM tree

Looping over arrays

Animations

AJAX

总结

定义和用法

语法

参数

公告

jQuery的使用及关于框架造型专题