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

 

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

 

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