17. jQuery的原理，怎么擴展插件 ~~~ //=>jQuery //1. JQ是一個JS類庫，里面提供了很多的常用方法，有助于我們快速開發， // 而且這些方法是兼容所有瀏覽器的（V2 / V3 不兼容低版本瀏覽器） //2. 我之前在學習原生JS的時候，或多或少的看了一部分JQ源碼， 剛畢業的時候JQ用的比較多， // 但是最近兩年一直都在用框架開發，JQ中常用的方法忘差不多了。 // 3. 之前看源碼的時候，發現JQ就是一個類，而$()就是創建這個類的一個實例， // 這個實例是基于內置方法makeArray創造的類數組 // 4. JQ提供的方法有兩部分，一部分是放到原型上的，供實例調取使用， // 一部分是放到對象上的，直接$.xxx調取使用，想要后期自己擴展方法（包括基于JQ寫插件）， // 都可以基于extend這個方法向JQ中擴展 // 5.JQ中提供了動畫、事件、AJAX等常用的方法， // 我學習JQ源碼的時候比較注重里面的一些封裝和編程的思想， // 例如：發布訂閱這種設計模式我就是依據JQ的$.Callbacks學習研究的， // 所以學習JQ給我帶來了很多的好處... ~~~ ~~~ // for(var i = 0;i<5;i++){ // setTimeout(function(){ // console.log(i) // },1000); // } //=>定時器是異步編程，等待循環結束后，才會執行定時器中設定的方法，方法執行遇到的I已經是循環結束后的全局I(5) //=>基于ES6中的LET解決：LET在每一次循環的時候都會形成一個塊級作用域，在這個作用域中把當前本次循環的I的值保存下來了，后期用到的I就找自己保存的值 // for(let i = 0;i<5;i++){ // setTimeout(function(){ // console.log(i) // },1000); // } //=>不用LET我們可以自己搞一個閉包，然后實現I的保存 // for (var i = 0; i < 5; i++) { // ~function (i) { // //=>i:私有變量，每一次循環都形成一個閉包，私有變量I的值存儲的就是當前循環時候I的值 // setTimeout(function(){ // console.log(i) // },1000); // }(i); // } //=>或者基于BIND預先處理一下函數中的THIS和參數值也可以 // for (var i = 0; i < 5; i++) { // setTimeout(function (i) { // console.log(i) // }.bind(null, i), 1000); // } // var a = {n:4}; // var b = a; // b.x = a = {n: 10}; // //=>新創建一個對象 AAAFFF000 ，然后讓 // // b.x=AAAFFF00 {n:4,x:AAAFFF000} // // a=AAAFFF000 // console.log(a.x);//=>UNDEFINED // console.log(b.x);//=>{n: 10} //=>談談你對閉包的理解 // 閉包是JS中一個非常重要的機制，我們很多編程思想、業務邏輯、設計模式都是基于閉包完成的，先說一下我對閉包的理解：閉包就是函數執行產生一個私有的作用域（不銷毀），在這個作用域中的私有變量和外界互不干擾，而且作用域（棧）不銷毀，這些私有變量存儲的值也都保存下來了，所有整體來說閉包就是為了保護和保存變量的 // 實際項目開發中，很多地方使用到了閉包，例如： // 1.循環事件綁定，由于事件綁定是異步編程的，我們此時在循環的時候把索引存儲起來（可以基于自定義屬性存儲，也可以基于閉包存儲），后期需要使用的時候，向上級作用域查找使用即可 // 2.平時做業務邏輯的時候，我一般都是基于單例模式來管理代碼的，這種單例的構建就應用到了閉包 // let xxxRender=(function(){ // return { // init:function(){ // // } // } // })(); // 3.我之前在學習資料上了解了柯理化函數思想，它其實也是基于閉包完成的 // Function.prototype.bind = function bind(context, ...arg) { // return () => { // fn.call(context, ...arg); // } // }; // document.onclick=fn.bind(obj, 10, 20); // // 還有很多地方也應用了閉包，但是閉包比較占內存，我會盡量減少對它的使用，但是有些需求必須要用 ~~~