成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

模塊化、閉包與立即執(zhí)行函數(shù)的使用、MVC里的V和C

2501207950 / 2045人閱讀

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

模塊化、MVC里的V和C、閉包與立即執(zhí)行函數(shù)的使用

這篇文章記錄我寫在線個人簡歷過程中學習的知識
完整代碼(暫未完成)
預(yù)覽地址

輪播Swiper組件的使用

英文官網(wǎng)

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

模塊化

學習寫代碼的方法:
CRM
抄,運行,修改

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

立即執(zhí)行函數(shù)的使用

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

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

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


不加感嘆號就會語法錯誤,不會執(zhí)行.所以得加一個感嘆號,取反,就會運行后面的代碼,執(zhí)行后面的函數(shù).雖然改變了返回值,但是我們不需要返回值.所以改變了也無所謂

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

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

ps:
ES6模塊

閉包的使用

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

方法一:使用window

比如兩個模塊

module1.js和module2.js都被引入一個html文件里

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

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

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

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

方法二:使用閉包

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

//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();

閉包在哪里?

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

閉包作用:

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

可以用來 做訪問控制 (只能訪問到age,無法訪問到name)

如果沒有立即執(zhí)行函數(shù)來模塊化,那么這個閉包毫無意義,因為person直接使全局變量,所有的函數(shù)都可以訪問到,并且修改也無法隱藏數(shù)據(jù)細節(jié)

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

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

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

實際growUp()就相當于立即執(zhí)行了,因為我聲明了一個函數(shù),而且立即執(zhí)行了

這就是閉包

MVC的V和C

MVC的前提就是 模塊化

View就是能看到的東西

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


這個并且對.swiper-container這個div進行操作,.swiper-container這個div就是 VIEW(用戶可以看到的東西).

對于輪播組件來說,這一部分就是他的view部分

這個div就是init-swiper這個模塊的view.

明白這個之后我們將view多帶帶分離出來

分離view

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

也將剩下的幾個js模塊進行修改

例如

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

Controller就是控制View的方法

MVC中的C用來控制/操作view

以topNavBar為例

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

進一步的改進:

需要注意:

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

this.bindEvents();//相當于this.bindEventS.call(this),這里的this就是init函數(shù)里call的controller,所以這個this是轉(zhuǎn)過來了,也是對象本身

繼續(xù)優(yōu)化,分離代碼

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

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

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

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

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

最終stick-navBar的代碼:

對輪播的js模塊使用controller進行優(yōu)化

本來:

修改后:

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

對當頁跳轉(zhuǎn)的緩動動畫也進行controller的優(yōu)化

下面是當頁跳轉(zhuǎn)的緩動動畫修改后的代碼:

總結(jié)

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96855.html

相關(guān)文章

  • 模塊化編程、MVC、面向?qū)ο缶幊?/b>

    摘要：模塊化編程所謂模塊化編程，就是將代碼模塊化，每一塊代碼都只進行一種操作，可以這樣理解吧。將所有的重復(fù)的代碼都提取出來形成對象構(gòu)造函數(shù)等，在需要使用的時候，調(diào)用或者使用等進行操作。 模塊化編程 所謂模塊化編程，就是將代碼模塊化，每一塊代碼都只進行一種操作，可以這樣理解吧。 全局變量和局部變量的轉(zhuǎn)換 模塊化編程重要的一點就是，在一個模塊里，所有的變量都是局部變量（對整個項目來說，對這個模塊...

    W4n9Hu1 評論0 收藏0

  • JS面向?qū)ο笠?MVC的面向?qū)ο蠓庋b

    摘要：自己的理解的第一個參數(shù)就是的值如果沒用默認是那個調(diào)用函數(shù)的當前的對象在全局作用域中就是被隱藏的所以不寫且在全局作用于調(diào)用函數(shù)的時候就是可以使用或者自己指定的指向 JS面向?qū)ο笠?MVC的面向?qū)ο蠓庋b MDNjavascript面向?qū)ο?面向?qū)ο?Object-Oriented) showImg(https://segmentfault.com/img/remote/1460000016...

    Scliang 評論0 收藏0

  • 前端面試題（3）現(xiàn)代技術(shù)

    摘要：什么是單頁面應(yīng)用單頁面應(yīng)用是指用戶在瀏覽器加載單一的頁面，后續(xù)請求都無需再離開此頁目標旨在用為用戶提供了更接近本地移動或桌面應(yīng)用程序的體驗。流程第一次請求時，將導(dǎo)航頁傳輸?shù)娇蛻舳耍溆嗾埱笸ㄟ^獲取數(shù)據(jù)實現(xiàn)數(shù)據(jù)的傳輸通過或遠程過程調(diào)用。 什么是單頁面應(yīng)用(SPA)？ 單頁面應(yīng)用(SPA)是指用戶在瀏覽器加載單一的HTML頁面，后續(xù)請求都無需再離開此頁 目標：旨在用為用戶提供了更接近本地...

    EasonTyler 評論0 收藏0

  • 前端面試題（3）現(xiàn)代技術(shù)

    摘要：什么是單頁面應(yīng)用單頁面應(yīng)用是指用戶在瀏覽器加載單一的頁面，后續(xù)請求都無需再離開此頁目標旨在用為用戶提供了更接近本地移動或桌面應(yīng)用程序的體驗。流程第一次請求時，將導(dǎo)航頁傳輸?shù)娇蛻舳?，其余請求通過獲取數(shù)據(jù)實現(xiàn)數(shù)據(jù)的傳輸通過或遠程過程調(diào)用。 什么是單頁面應(yīng)用(SPA)？ 單頁面應(yīng)用(SPA)是指用戶在瀏覽器加載單一的HTML頁面，后續(xù)請求都無需再離開此頁 目標：旨在用為用戶提供了更接近本地...

    trigkit4 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<