前端 MVC 与模块化

模块化

将页面中各部分执行逻辑抽取出来单独写在一个js文件模块。

模块调用

• 在模块中不要使用var声明变量（会变量提升为全局变量），模块之间会相互影响；
• 可以封装为立即执行函数：!function(){}.call()（会改变函数返回值，但没什么关系）；
• 如模块之间要共享变量，可以把变量设置在window，或使用闭包（必然跟立即执行函数一起使用）：

!function() {

    // 1、把变量设置在window
    var name = window.name = 'ywh'      

    // 2、把闭包函数设置在window（隐藏细节，使person不可以直接访问）
    var person = {
        name: 'ywh',
        age: 18
    }
    window.ywhGroupUp = function() {    
        person.age += 1
        return person.age
    }
}.call()

MVC

MVC
MVC

• MVC即根据Model（模型，一般是AJAX），View（视图，DOM API），Controller（控制器，数据结构、算法和面向对象）三个层面来组织代码；
• 根据功能划分：
  • 用户访问网站，与MVC中的View交互，包括获取信息和提交数据等；View接收到用户请求，通知Controller执行相应的逻辑，Controller也可以把内容更新到视图；
  • Controller调用Model的方法，向服务端请求获取数据，Model把结果（数据、请求信息）返回给Controller做进一步处理；
  • Model负责向服务端发起HTTP请求获取并接收响应，把响应返回给Controller。

View：在js模块中获取页面元素（如最外层div）命名为view，封装render方法

var view = document.querySelector('#topNavBar')
// ...

Controller：把对模块中元素的操作函数封装在controller对象中。

var controller = {
    view: null,
    init: function(view) {          // 初始化
        this.view = view
        this.bindEvents()
        // 其他初始化操作
    }
    bindEvents: function() {        // 绑定事件
        let logo = view.querySelector('.logo')
        window.addEventListener('scroll', function(x){
            if (window.scrolly > 0) {
                this.active()
            }
            else {
                this.deactive()
            }
            this.view.classList.add('test')
        }.bind(this))   // 绑定this为外部（即controller）的this
        // 也可以改为箭头函数，箭头函数中的this即为外部的this
    },
    active: function() {            // 激活
        this.view.classList.add('test')
    }
    deactive: function() {          // 不激活
        this.view.classList.remove('test')
    }
}
controller.init(view)

Model：抽取Controller中涉及CRUD的函数放在model。

最后封装到立即执行函数中构成一个模块：

!function(){
    var model = // ...
    var view = // ...
    var controller = // ...
    controller.init(view)
}.call()