博文说明！
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包）
