面試必問之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結構是極大的優化。
  

  

  如圖描述：
  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就指向這個對象。