博文说明!
1.博客内容纯粹个人理解及其实践,仅供参考,如有错误之处欢迎指正。
2.博客内容关注点:
此文主要关注对 面向对象设计、ES6的class语法、相关架构模式和设计模式的理解及其实践,不再关注对数据代理、模板解析、数据绑定和双向数据绑定技术的说明,如不理解可以先阅读我的上一篇博文。20届前端求职之Vue系列(一) 数据代理、模板解析、数据绑定、双向数据绑定【实践】
3.代码的gitHub地址
实践过程中遇到的一些问题总结
1.class的类属性暂不被支持,即使使用上babel也是一样。
2.class的静态属性暂不被支持
- 暂只支持静态方法,不支持静态属性,参考class 静态属性
3.class内静态方法的调用方式,只能是类名.方式,不能是this.的方式。
4.一些 回调/特殊函数的this指向问题
- 借用闭包方式解决 let _this = this;
- 使用函数对象原型方法call、apply、bind方式指定this
- foreach函数的this指向也可以通过传递第二参数的方式解决。
5…
实践结果
一:运行效果
相关view(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.class-test{
width: 200px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="template">
<p>{
{msg}}</p>
<input type="text" j-model="modelShow">
<p>{
{modelShow}}</p>
<div j-class="classTest">
<p>{
{classShow}}</p>
</div>
<button j-on:click="eventTest">eventTest</button>
<p>{
{eventShow}}</p>
</div>
</body>
</html>
相关model(entry.js)
//import {Jue} from './core/Jue' // 引入使用发布订阅设计模式实现的Jue类
import {
Jue} from './core2/Jue' // 引入使用观察者设计模式实现的Jue类
let vm = new Jue({
el: '#template',
data: {
msg: 'template success,Good Job',
classShow:"if red,class success,Good Job",
modelShow:"",
classTest:"class-test",
eventShow:""
},
methods: {
eventTest: function() {
this.eventShow = "event success,Good Job";
}
}
});
window.vm = vm;
运行效果
二:最终目录结构
三:项目GitHub地址
实践准备
一:数据代理、模板解析、数据绑定、双向数据绑定知识。
参考:20届前端求职之Vue系列(一) 数据代理、模板解析、数据绑定、双向数据绑定【实践】
二:设计模式
项目中目标/发布者(model数据)与观察者/订阅者(view中表达式)的关系是多对多的关系。
1.观察者设计模式(狭义)
- 属于GoF的23种设计模式中的一种
- 对象组成:目标与观察者
- 目标与观察者的耦合关系:通常通过接口(多个类时统一观察者被通知的方法)做到松耦合
- 多对多的关系如何设计:在Subject中维护一个Observer集合,在Observer中维护一个Subject集合。
- 多对多的关系如何实现:通过在项目中,劫持目标的get方法建立目标与观察者的关系,劫持目标的set方法发布者通知观察者更新。
- 在接下来项目中的实现(如下core2和handler2包)
2.发布订阅设计模式
- 可以认为是观察者设计模式(广义)的一种,也可以认为是独立的设计模式,此时不属于GoF的23种设计模式。
- 对象组成:发布者、经纪人、订阅者(其实也就是把观察者模式的目标Subject拆分成了发布者Publisher + 经纪人Broker)。
- 发布者与订阅者的耦合关系:发布者、经纪人、订阅者三者关系为发布者对象 <–>经纪人对象,经纪人对象 <–>订阅者对象 ,发布者与订阅者对象之间不直接关联,实现二者的解耦合效果。
- 多对多的关系如何设计:发布者对象 <–>经纪人对象(一对一),经纪人对象 <–>订阅者对象(多对多,相互维护一个集合属性)
- 多对多的关系如何实现:通过在项目中,劫持目标时,建立发布者与经纪人(一对一)的关系,劫持目标的get方法建立经纪人与订阅者的关系,劫持目标的set方法经纪人通知订阅者更新。
- 在接下来项目中的实现(如下core和handler包)