模塊化與MVC的VC

時間 2019-11-16

標籤模塊化 mvc 欄目 C&C++ 简体版

原文原文鏈接

1. 模塊化

模塊化是 MVC 的前提。
MVC 能夠解決一個很重要的問題，就是寫完代碼就忘的問題，經過對文件的命名和代碼的簡化，能夠更加方便的辨別代碼的功能與做用。
以js代碼爲例，咱們把main.js，按照功能拆分紅module-1.js等三個文件（名字根據作的事情不一樣而不一樣），造成模塊。這樣每一個文件的代碼都會小而清晰，這也就是模塊化的一種體現。
html

<!--index.html-->
<body>
    module-1 of html
    module-2 of html
    module-3 of html
    <scirpt src="module-1.js"></script>   
    <scirpt src="module-2.js"></script>   
    <scirpt src="module-3.js"></script>  
</body>
複製代碼

2. 如何使用當即執行函數

不一樣模塊代碼裏，相同的全局變量會形成代碼衝突，因此咱們須要把全局變量變成局部變量——當即執行函數的使用。
代碼格式以下：
git

!function(){
    your code
}.call()
複製代碼

2.1 思路步驟（這個試錯過程仍是很重要的）

1.咱們不想要全局變量
2.咱們要使用局部變量
3.ES 5 裏面，只有函數有局部變量
4.因而咱們聲明一個 function xxx , 而後xxx.call()
5.這個時候 xxx是全局變量（全局函數）
6.因此咱們不能給這個函數名字
7.function(){}.call()
8.可是 Chorme 報錯， 語法錯誤（chorme sb）
9.試出來一種方法能夠不報錯： 
    (1)  !function(){}.call()   (咱們不在意這個匿名函數的返回值，因此加個 ! 取反不要緊)
    (2)（function(){}）.call()         不推薦（xxx 換行 (前面的東西) 這樣就亂了）
    (3) frank81937501975.call()    不推薦   (利用隨機數避免重複衝突)
複製代碼

經過使用當即執行函數，咱們實現了代碼之間真正的模塊化（這屬於js的bug,咱們必須用這種方式進行代碼隔離）。
github

2.2 代碼模塊隔離以後如何進行通訊呢？利用閉包

1.能夠藉助全局對象 window 進行賦值取值操做便可。
2.還能夠利用閉包。
bash

// module-1
!function(){}.call()
!function(){
    //  code of module-1
    var person = {
        name: 'frank',
        age: 18
    }
    window.frankGrowUp = function() {
        person.age += 1    // 函數用了它之外的變量 person，因此fn和person就是閉包 ，閉包用來對數據隱藏細節，還能夠進行訪問控制
        return person.age
    }
}.call()

// module-2
!function(){
    // code of module-2
    var newAge = window.frankGrowUp()
    console.log(newAge)  // 19
}.call()
複製代碼

當即執行函數使得 person 沒法被外部訪問
閉包使得匿名函數能夠操做 person
window.frankGrowUp 保存了匿名函數的地址
任何地方均可以使用 window.frankGrowUp操做 person
=> 任何地方均可以使用 window.frankGrowUp操做 person，可是不能直接訪問 person

3. 用MVC中的 VC 寫代碼

MVC Model(模型) View(視圖) Controller(控制)
閉包

<!--index.html-->
<body>
    <div id="view-1"></div>
    <div id="view-2"></div>
    <div id="view-3"></div>
    <scirpt src="module-1.js"></script>   
    <scirpt src="module-2.js"></script>   
    <scirpt src="module-3.js"></script>  
</body>
複製代碼

// module-1.js 模塊 1
!function(){
    var view = 找到對應的模塊1元素 
    var controller = {
        view: null,
        init: function(view) {
            this.view = view // 給controller.view 賦值
            this.操做1()    // 這裏的 this是經過 controller 對象調用決定的（最下面）
            this.操做2()
        },
        操做1:function(){},
        操做2:function(){},
    }
    controller.init(view)    // 執行操做
}.call()
複製代碼

下面這兩個模塊用來舉例子，略亂模塊化

// module-2.js 模塊 2
!function(){
    var view = document.querySelector('#view-2')  
    var controller = {
        view: null,
        init: function(view) {
            this.view = view 
            this.bindEvents()           // this.bindEvents.call(this)
        },
        bindEvents: function(){
            var view = this.view
            window.addEventListener('scroll',(x) => {
                this           // 經過箭頭函數讓函數內外this不變, this至關於一個變量
                                 // 若是是f(){}則this是用戶觸發的元素,可經過bind()綁定this
            }
        },
        active:function(){
            this.view.classList.add('xxx')
        },
        deactive: function(){
            this.view.classList.remove('yyy')
        }
    }
    controller.init(view)         // controller.init.call(controller, view)
}.call()

// module-3.js 模塊 3
!function(){
    var view = 找到對應的模塊3元素 
    var controller = {
        view: null,
        swiper: null,
        swiperOptions: {
            選項1：xxx,
            選項2： xxx,
            ……
        }
        init: function(view) {
            this.view = view 
            this.initSwiper()
        },
        initSwiper:function(){
            this.swiper = new Swiper(
                this.view.querySelector('選擇器'),
                this.swiperOptions
            )
        }
    }
    controller.init(view)    
}.call()
複製代碼