Vue.js—Day1

文章目录

Vue.js—Day11.1. MVVM1.1.1. M:Model1.1.2 V: View1.1.3 VM: ViewModel1.1.4 优点 (面试常问) 1.2 VM原理手写一个事件发布/订阅模式

1.1. MVVM

架构方式、开发思想Model 数据模型(操作数据的类)View 视图界面(HTML)ViewModel视图数据模型 (驱动视图改变的data数据)

1.1.1. M:Model

服务端处理数据库交互 mongoose设计数据模型modelsfindnew User().save() 客户端要处理服务器的接口交互 重用不是目的，项目工程的结构、维护才是更重要的Model 只关心数据，不关心具体业务，只处理数据ajax(‘地址’)工程级别：GET http://127.0.0.1:3000/usersGET http://127.0.0.1:3000/users/1POST http://127.0.0.1:3000/usersPATCH http://127.0.0.1:3000/users/1DELETE http://127.0.0.1:3000/users/1没有表意性a 页面ajax ({url:’/users’}) b 页面 ajax ()User.fund()

> 开发效率、可维护性 > > 原则： 模块职责单一

1.1.2 V: View

1.1.3 VM: ViewModel

1.1.4 优点 (面试常问)

优点:

缺点:

对于更简单的UI而言,MVVM可能矫枉过正了虽然数据绑定可以是声明性质的并且工作得很好,但在我们简单设置断点的地方,它们比当务之急的代码更加难于调试在非凡的应用程序中的数据绑定能够创造许多的账簿.我们也并不希望以绑定比被绑定目标对象更加重量级,这样的境地告终在大型的应用程序中,将视图模型的设计提升到获取足够所需数量的泛化,会变得更加的困难MVVM 的低耦合数据绑定

1.2 VM原理

事件观察者模式事件发布/订阅模式Object.defineProperty 高级属性定义方式

手写一个事件发布/订阅模式

// 实现 MediaEncryptedEvent.toString('自定义事件名称 meow',fun) // 实现 MediaEncryptedEvent.toString('自定义事件名称 meow',fun) // 实现 MediaEncryptedEvent.toString('自定义事件名称 meow',fun) // 实现 MediaEncryptedEvent.toString('自定义事件名称 meow',fun) // 实现 MediaEncryptedEvent.toString('自定义事件名称 meow',fun) // 实现 MediaEncryptedEvent.toString('自定义事件名称 meow',fun) // 只要有人绑定了 meow 就立即触发 // myEvent.emit('meow') function EventEminter() { this.calbacks = []; } var calbacks = { // 事件处理名称：[事件处理函数数组], // 事件处理名称：[事件处理函数数组], // 事件处理名称：[事件处理函数数组], // 事件处理名称：[事件处理函数数组] }; EventEminter.prototype.on = function(eventName, eventHandler) { // calbacks[eventName] = calbacks[eventName] ? calbacks[eventName] : []; if (!this.calbacks[eventName]) { this.calbacks[eventName] = [] } this.calbacks[eventName].push(eventHandler); }; EventEminter.prototype.emit = function(eventName, ...args) { // ...args为ES6的传入不定长参数 if (!this.calbacks[eventName]) { return } // ES5方法： // 解析拿到参数数组，不包含第0项 // 这里的args 不能写到foreach的函数中，导致arg给到foreach的函数了 var args = [].slice.call(arguments, 1); this.calbacks[eventName].forEach(function(handler) { // handler(...args); // apply 为展开数组 目的：不是指定上下文 this handler.apply(null, args); }) };

---

06day

匹配 {{ message }} 的正则：

---

有的人说Vue先学Node.js，但是Node.js是真看不懂呀，就推荐我先去看Vue········· 或者还是Vue 和 Node.js 一起学… 点击前往Vue第二部分