MVC

发表于 更新于 阅读次数： 本文字数： 364 阅读时长 ≈ 1 分钟

M:Model
V:view
c:controller

模块化 把每个分成一个个js小文件
每个模块把操作的html作为一个view，作为v（我觉得应该是model）
再生成一个controller，参数是view，接受view进行操作

这里最好将controller封装成一个对象，像下面这样

1
2
3
4
5
6
7
8
9
10
11
12
13
var controller = {
    view: null,
    init: function (view){
        this.view = view
        this.bindEvents()
    }

    bindEvents: function (){
        xxx.addListener('xxx',function (){
            xxx
        })
    }
}

值得注意的是监听函数中调用的是触发事件本身的元素，也就是这里取this取到的不是controller对象本身，这种情况可以使用箭头函数，箭头函数自身不具有this，使用的this向上寻找到的对象就是正确的了。

同时由于多个模块相互分离，并不知道其它模块的情况，可能出现全局变量污染的情况，因此，需要使用立即执行函数。

js中在ES6前不能使用{}包裹创建局部变量，避免全局变量污染可以使用function的创建局部变量环境。

1
2
3
function xxx(){
    ...
}.call()

但是这个方案实际还是存在问题，xxx其实也是一个全局变量

升级版就出现了

1
2
3
function (){

}.call()

然而遗憾的是这个方法会报语法错误

再升级版

1
2
!function (){
}.call()

使用其它单目运算符也能起到一样的效果，整个包裹大括号也是可行的，但可能出现bug,比如被视为函数实参。
还可以用随机数，不过有点丑陋

同时还可以使用闭包

1
2
3
4
5
6
7
!function (){
    var person ={}
    person.name = 'xxx'
    window.getname = function (){
        return person.name
    }
}