面试必问之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就指向这个对象。