摘要：模塊化里的和閉包與立即執(zhí)行函數(shù)的使用這篇文章記錄我寫(xiě)在線個(gè)人簡(jiǎn)歷過(guò)程中學(xué)習(xí)的知識(shí)完整代碼暫未完成預(yù)覽地址輪播組件的使用英文官網(wǎng)中文網(wǎng)使用方法模塊化學(xué)習(xí)寫(xiě)代碼的方法抄運(yùn)行修改模塊化把對(duì)應(yīng)功能放到塊里面這個(gè)塊可以是文件或者或者別的等等立即執(zhí)

這篇文章記錄我寫(xiě)在線個(gè)人簡(jiǎn)歷過(guò)程中學(xué)習(xí)的知識(shí)
完整代碼(暫未完成)
預(yù)覽地址

英文官網(wǎng)

中文網(wǎng)--Swiper4.x使用方法

學(xué)習(xí)寫(xiě)代碼的方法:
CRM
抄,運(yùn)行,修改

模塊化:把對(duì)應(yīng)功能放到塊里面,這個(gè)塊可以是文件,或者div或者別的等等

將js分成不同的幾個(gè)模塊后,然后使用文件引入,但是會(huì)出現(xiàn)問(wèn)題:如果使用var 聲明變量,那么就會(huì)成為全局變量,這樣容易覆蓋.

在ES6之前,只有函數(shù)里面才有局部變量.
如果只用花括號(hào)包起來(lái),那么在C++或者JAVA里面就是局部變量,但是JS里面會(huì)變量提升,提升到當(dāng)前函數(shù)的最高地方,所以仍然是全局變量.

所以如果想用局部變量,解決方法是把它放到一個(gè)函數(shù)中,然后立即執(zhí)行,這樣這個(gè)函數(shù)內(nèi)部的變量就是局部變量.也不會(huì)被相同名字的全局變量覆蓋.

不加感嘆號(hào)就會(huì)語(yǔ)法錯(cuò)誤,不會(huì)執(zhí)行.所以得加一個(gè)感嘆號(hào),取反,就會(huì)運(yùn)行后面的代碼,執(zhí)行后面的函數(shù).雖然改變了返回值,但是我們不需要返回值.所以改變了也無(wú)所謂

所以接下來(lái)我們將所有自己分離出來(lái)的單個(gè)js文件,都使用立即執(zhí)行函數(shù)!function(){}.call()包起來(lái)

這樣才算真正的模塊化,代碼相互之間沒(méi)有影響.

ps:
ES6模塊

下面的例子都使用立即執(zhí)行函數(shù)隔離作用域
如果兩個(gè)模塊之間需要交流,例如在第一個(gè)模塊上初始化,在第二個(gè)模塊上使用

比如兩個(gè)模塊

module1.js和module2.js都被引入一個(gè)html文件里

//module1.js
!function(){
    var person = window.person = {
        name:"frank",
    }
    //局部變量person和全局變量person用的是同一個(gè)地址
}.call()

雖然不同變量,但是是同樣的地址

//module2.js
!function(){
    var person = person;//即var person = window.person;
    console.log(person);
}.call();

這樣不同模塊間就可以通信,但這種方法不好.

始終不知道person的全部信息
,只能知道age的信息,且只能做一些它允許你操作的事情,這樣module1就會(huì)對(duì)局部變量person有一個(gè)掌控.不會(huì)出現(xiàn)有人把person變成-1的情況,因?yàn)樗L問(wèn)不到age,他只能去GrowUp,除此之外沒(méi)有能訪問(wèn)到的方法.

//module1.js
!function(){
    var person = {
        name:"mataotao",
        age:18,
    };
    window.mataotaoGrowUp = function(){
        person.age+=1;
        return person.age;
    };
}.call();

//module2.js
!function(){
    var newAge = window.mataotaoGrowUp();
    console.log(newAge);//19
}.call();

閉包在哪里?

如果一個(gè)函數(shù)訪問(wèn)了函數(shù)外的變量(mataotaoGrowUp()使用了person.age),那么 函數(shù)+函數(shù)外的變量,就是 閉包.

閉包作用:

用來(lái) 隱藏?cái)?shù)據(jù)細(xì)節(jié) (不告訴你多少歲但是你可以讓他漲一歲,隱藏了age 的細(xì)節(jié)和name)

可以用來(lái) 做訪問(wèn)控制 (只能訪問(wèn)到age,無(wú)法訪問(wèn)到name)

如果沒(méi)有立即執(zhí)行函數(shù)來(lái)模塊化,那么這個(gè)閉包毫無(wú)意義,因?yàn)閜erson直接使全局變量,所有的函數(shù)都可以訪問(wèn)到,并且修改也無(wú)法隱藏?cái)?shù)據(jù)細(xì)節(jié)

立即執(zhí)行函數(shù)+閉包 實(shí)現(xiàn)對(duì)象細(xì)節(jié)的封裝的方法

面試官會(huì)將上面的module1做如下修改（實(shí)際本質(zhì)不變）

//module1.js
var accessor = function(){//這是一個(gè)返回了匿名函數(shù)的函數(shù),accessor-訪問(wèn)器
    var person = {
        name:"mataotao",
        age:18,
    };
    return function(){
        person.age+=1;
        return person.age;
    };
}
var growUp = accessor();//執(zhí)行accessor得到一個(gè)GrowUp函數(shù)
//growUp現(xiàn)在是一個(gè)全局變量了
growUp();

實(shí)際growUp()就相當(dāng)于立即執(zhí)行了,因?yàn)槲衣暶髁艘粋€(gè)函數(shù),而且立即執(zhí)行了

這就是閉包

MVC的前提就是 模塊化

例如在
這個(gè)模塊中我們初始化了一個(gè)Swiper

這個(gè)并且對(duì).swiper-container這個(gè)div進(jìn)行操作,.swiper-container這個(gè)div就是 VIEW(用戶(hù)可以看到的東西).

對(duì)于輪播組件來(lái)說(shuō),這一部分就是他的view部分

這個(gè)div就是init-swiper這個(gè)模塊的view.

明白這個(gè)之后我們將view多帶帶分離出來(lái)

我們修改代碼,多帶帶將view分離,例如輪播圖的view:

也將剩下的幾個(gè)js模塊進(jìn)行修改

例如

view就是要告訴js,html中的哪一塊是我要操作的東西

MVC中的C用來(lái)控制/操作view

以topNavBar為例

將要做的操作寫(xiě)成controller函數(shù),并把要操作的view當(dāng)做參數(shù)傳進(jìn)去,實(shí)現(xiàn)對(duì)view的控制/操作

進(jìn)一步的改進(jìn):

需要注意:

對(duì)象的函數(shù)里的this,就是對(duì)象本身controller.init(view);//相當(dāng)于controller.init.call(controller,view);//this就是當(dāng)前對(duì)象

this.bindEvents();//相當(dāng)于this.bindEventS.call(this),這里的this就是init函數(shù)里call的controller,所以這個(gè)this是轉(zhuǎn)過(guò)來(lái)了,也是對(duì)象本身

如果我們要做其他的事情,比如把激活和不激活這個(gè)導(dǎo)航分離,不要寫(xiě)在bindEvents里了,繼續(xù)在對(duì)象里添加操作的函數(shù)

bind(this)后,就是把controller綁定到這個(gè)函數(shù)的this上,把這個(gè)函數(shù)的this由window變成controller,之后this.active();和this.deactive();這兩個(gè)this 就變成了controller了

bind方法用于將函數(shù)體內(nèi)的this綁定到某個(gè)對(duì)象，然后返回一個(gè)新函數(shù)。
bind()使用方法

這里的bind()就是將函數(shù)體內(nèi)的this綁定到了controller,函數(shù)體內(nèi)的this就是controller了

如果不用bind()也可以用箭頭函數(shù)()=>{},箭頭函數(shù)本身是沒(méi)有this的.所以如果在箭頭函數(shù)用this,那么就是箭頭函數(shù)外面的離它最近的this!

最終stick-navBar的代碼:

本來(lái):

修改后:

修改之后的前后對(duì)比
結(jié)構(gòu)非常清晰有條理,將整個(gè)要做的事井井有條得分為幾個(gè)部分

下面是當(dāng)頁(yè)跳轉(zhuǎn)的緩動(dòng)動(dòng)畫(huà)修改后的代碼:

這樣代碼就不會(huì)顯得混亂了,controller對(duì)view的操作被有條理地分開(kāi),有初始化view,綁定view事件,激活這個(gè)view,不激活這個(gè)view等等對(duì)view的操作
controller所有的屬性就是對(duì)view的所有操作!!!
這就是mvc里的c的意義