MVC与Leancloud数据库使用

Unsplash 找图

MVC

M:Model 模块化操作数据

把JS分文件

解决全局变量,用闭包,匿名函数

!function(){}.call();

(function(){}).call();不推荐

使用window.xxx读取函数信息

第一个函数

!function(){
    var person = {
        name : 'frank',
        age : 18
    }
    window.frankGrowUp = function(){
        person.age += 1;
        return person.age;
    }
}.call();

另外一个函数

!function(){
    var frankGrowUp = window.frankGrowUp;
    console.log(frankGrowUp);
}.call();

如何使用闭包

1. 立即执行函数使得 person 无法被外部访问
2. 闭包使得匿名函数可以操作 person
3. window.frankGrowUp 保存了匿名函数的地址
4. 任何地方都可以使用 window.frankGrowUp
   => 任何地方都可以使用 window.frankGrowUp 操作 person，但是不能直接访问 person

立即执行函数

var accessor =  function(){
    var person = {
        name : 'frank',
        age : 18
    }
    return function(){
        person.age += 1;
        return person.age;
    }
}

var growUp = accessor().call(); //实际是执行 function(){person.age +=1;return person.age};

growUp.call(); //实际是执行 person.age

MVC的V和C

V:View 视图,即用户看得见的.

JS代码加入

var view = docmuent.querySelector('');

C:Controller 控制器

var controller = {
    view: null,
    init: function(view){
        this.view = view;
        this.bindEvents();
        // this.bindEvents.call(this);
    },
    bindEvents : function(){
        var view = this.view;
        //代码
    }
}.

contorller.init.(view);
// controller.init.call(controller, view);

对象调用一个函数,那么this就是这个对象

1. 可以用bind(this)绑定this;
2. 可以用箭头函数,箭头函数没有this,它this就是外面的this;

引入数据库:

1. 创建一个应用
2. 引入av-min.js 得到window.AV
3. 初始化AV对象(代码直接拷)
4. 新建一条数据(代码直接拷)

表单提交监听事件

不监听button.click是因为也要监听回车.
但form.addEventListener(‘sumbmit’,()=>{})中的sumbit包含点击事件与回车事件.

let myForm = document.querySelector('#postMessageForm');
myForm.addEventListener('submit',function(e){
    e.preventDefault();
    let content = myForm.querySelector('input[name=content]').value;
    var Message = AV.Object.extend('Message');
    var message = new Message();
    message.save({
        'content' : content
    }).then(function(object){
        let li = document.createElement('li');
        li.innerText = `${object.attributes.name} : ${object.attributes.content}`;
        let messageList = document.querySelector('#messageList');
        messageList.appendChild(li);
        myForm.querySelector('input[name=content]').value = '';
    })
})

页面读取数据库信息:

var query = new AV.Query('Message');
query.find()
    .then(
        function(messages){
            let array = messages.map((item)=> item.attributes);
            array.forEach((item)=>{
                let li = document.createElement('li');
                li.innerText = `${item.name} : ${item.content}`;
                let messageList = document.querySelector('#messageList');
                messageList.appendChild(li);
            })
        }
    )

MVC总结

1. Model 操作数据
2. View 表示视图
3. Controller 是控制器

Model 和服务器交互，Model 将得到的数据交给 Controller，Controller 把数据填入 View，并监听 View
用户操作 View，如点击按钮，Controller 就会接受到点击事件，Controller 这时会去调用 Model，Model 会与服务器交互，得到数据后返回给 Controller，Controller 得到数据就去更新 View