jQuery的使用及關於框架造型專題

時間 2019-12-18

原文原文鏈接

Introduction

正如jQuery所宣稱的同樣，Write Less, Do More。不少時候咱們喜歡用它來解決問題。但增長一個庫必然意味着更大的網絡負擔，意味着更高的頁面初始載入時間。而且，如今與當初已經有了很大不一樣，jQuery是伴隨着IE6出來的，當時，jQuery在跨瀏覽器開發上有不可替代的做用。但今天，伴隨ES5的普遍被支持以及各個瀏覽器自己的完善，咱們能夠考慮適當的丟掉它，改善性能。
須要注意的是，並非說jQuery是不可取的，在某些場合，用它是更合適的，須要咱們本身判斷。javascript

Listening for Document Ready

咱們常常用到$( document ).ready() 或者它的簡寫 $(),用來傳入當全部dom準備完畢後，執行邏輯的相關回調。原生js能夠這麼寫：php

document.addEventListener('DOMContentLoaded', function () { // dom 已經準備好被操做了 });

Selecting elements

咱們經常依賴於jQuery的選擇器，而如今，全部的瀏覽器基本都支持了querySelector 與 querySelectorAll，這裏是MDN連接html

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連接)java

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屬性代替它們。jquery

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能夠這樣添加與刪除元素：webpack

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樹git

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了。github

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