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() 设置任何选项的默认值。

参数

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