面試必問之MVC

omnoob發表於2019-07-12
面試MVC

MVC: Model View Controller

如何解決程式碼寫了就忘

寫完的程式碼過了一週就忘記是幹嘛的了。
那就是用使用MVC！

M ：model 模組化

告訴程式，你的資料有哪些操作。

V ：view 使用者看得見的東西

顧名思義，view就是檢視。告訴程式，你的程式碼在哪一塊。

C ：controller 控制器

controller 負責其他的所有程式碼。

MVC的操作就是：

js檔案中：
!function(){ // 為什麼用 !function(){}.call()
    var view = document.querySelector('html中view對應的部分') // 把html的view傳到這裡的view
    var model = { // 所有對資料的操作都放在model裡
        init: function(){},
        fetch: function(){},
        save: function(){},
        ···: ···
    }
    var controller = {  // 創造一個controller對view進行操作
        view: null, // 先宣告view
        xxxx: xxxx, // 其餘的按照需求增加
        init: function(view){
            this.view = view // 1.請問這裡的this是誰？
            this.bindEvents() 
            // this.bindEvents.call(this)
        },
        bindEvents: function(){
            window.addEventListener('onclick',function(){
              this.active // 2.請問這裡的this是誰？  
            }.bind(this) 
        },
        active: function(){},
        ···: ···,
    }
    controller.init(view)
    // controller.init.call(controller,view)
}.call()
複製程式碼

MVC描述：

  • MVC是一種組織形式，它不是任何一種框架，也不是任何一種技術，它就是一種組織程式碼的思想。

  • 它宣告一個view，代表這個js檔案操作的html是哪一部分。

  • model是包含所有關於資料的操作，比如獲得資料，初始化資料等。

  • controller是一個物件，物件裡有很多鍵值對，把重要的屬性（比如view）和重要的操作（比如init、bindEvents）作為controller的屬性寫進去，這樣我們對view的操作一目瞭然。

  • 對於單一的檔案可能這樣做看起來比直接寫麻煩，但是對於多個JS檔案，使用MVC結構是極大的優化。

    面試必問之MVC
    如圖描述：
    controller監聽view，當使用者點選了view，controller就呼叫model，model向server發請求，server返回響應給model，model把資料返回給controller，controller更新view。

程式碼中提出了幾個問題

  1. 為什麼使用 !function(){}.call()
  2. 請問這裡的this是誰？

如果你都知道答案，說明你對閉包、立即執行函式有了一定的瞭解。
如果你不知道，請繼續往下看。

1. 為什麼使用 !function(){}.call()

如何使用立即執行函式

  1. 我們不想要全域性變數
  2. 我們要使用區域性變數
  3. ES 5 裡面，只有函式有區域性變數
  4. 於是我們宣告一個 function xxx，然後 xxx.call()
  5. 這個時候 xxx 是全域性變數（全域性函式）
  6. 所以我們不能給這個函式名字
  7. function(){}.call()
  8. 但是 Chrome 報錯，語法錯誤
  9. 試出來一種方法可以不報錯:
第一種方法
!function(){}.call() 
我們不在乎這個匿名函式的返回值，所以加個 ! 取反沒關係  

第二種方法：
(function(){}).call()  
不推薦 
    如果有人手賤在這種方法的上一行寫了個xxx，如下
         xxx    
         (function(){}).call() 
     
    這樣瀏覽器就會認為是xxx(function(){}).call(),就會報錯
     
 第三種方法：
xxxx12312542435423123.call() 
不推薦

所以就用第一種方法最好啦！
複製程式碼

如何使用閉包

  1. 立即執行函式使得 person 無法被外部訪問
  2. 閉包使得匿名函式可以操作 person
  3. window.frankGrowUp 儲存了匿名函式的地址
  4. 任何地方都可以使用 window.frankGrowUp

=>
任何地方都可以使用 window.frankGrowUp 操作 person，但是不能直接訪問 person

（此處有個例子）

2. 請問這裡的this是誰？

程式碼中已經有所註釋，還看不明白就使用.call()，把this寫出來。 可以簡單的理解，如果一個物件.call()，那麼this就指向這個物件。

相關文章