我们在开发微信小程序通常会因为实例和数据池的数据推送而烦恼
通俗的说这样一个痛点就是，什么时候setData，在哪setData，怎么把实例的数据中取出来进行setData
那么有没有一种方法
当我们对变量或实例修改后，就可以自动的渲染界面而不用再setData呢？
当然有！
分析需求测试可行性
在微信小程序中
Page({
data:{
//存放数据
test:{
content:"helloworld"
}
}
})
<block>{{test.content}}</block>
即可显示出“helloworld”
这表示前端页面对数据具备多层访问的能力
继续，如果是访问一个不存在的数据呢
<block>{{test.content2.nodata}}</block>
我们将得到一个为空的页面，并没有任何报错，即是具备访问安全性的
那么我们把一个对象放在data中也能正常访问吗？经过测试这也是可行的。
也就是说我们完全可以把任何Object放在data中。
通过阅读微信小程序的开发文档，我们可以知道
如果你放置一个对象在data中，在前端进行渲染时会进行
JSON.stringify + JSON.parse对数据进行一次操作后再安全的引用，但不会修改源数据
所以，如果我们在data中放置一个类，也是能被正常引用的
class Person{
constructor(name){
this.name = name;
}
}
let myPerson = new Person("张三");
let pageInstance;
Page({
data:{
person:myPerson
},
onLoad(){
pageInstance = this;
}
})
<block>{{person.name}}</block>
前端取值时等同于
JSON.parse(JSON.stringify(data)).?person.?name => "张三"
其中
.?表示安全取值
那么如果需要修改名字则需要
myPerson.name = "李四";
pageInstance.setData({
person:myPerson
})
总结需求
我们需要在设置名字的同时就能够立即响应到页面，也就是说
myPerson.name = "李四";//的同时，页面就得到了更新
解决方案 Proxy + 语法欺骗
- 我们可以通过Proxy对类的实例进行链式（深度）监听，并生成事件响应来进行setData
- 但Proxy会造成类的实例方法提示功能丢失，并不方便Coding,所以需要进行构造函数的语法欺骗
代码部分
我们先来看一下经过修改后的实例
// pages/myPage/myPage.js
const { EasyPage, LaunchEnv, EasyModule } = require("../../lib/EasyAPP/EasyAPP");
class Person{
constructor(name){
this.name = name;
//语法欺骗，同时为该类进行链式（深度）监听
return new EasyModule(this);
}
}
class MyPage extends EasyPage{
async onShow() {//同微信小程序自带的onShow方法
if(await Platform.isLogin_sync()){
if(Platform.getUser().credits == undefined){
//获取用户Credits
Platform.getUser().getCredits();
}
}
}
}
new LaunchEnv({
page:new MyPage (),
data:{
Person:new Person("张三");
}
})
可以看到，我们替换了微信原生的使用Page()来启动页面的方式
通过定义Mine对象，来设置页面的事件。
再通过new LaunchEnv()来生成界面，并定义它的的数据，而这次，我们简单明了的传入了一个Person的对象
如果此时任何引用去修改person的name属性，都将自动发起界面的更新
同时，在微信小程序的热更新下，这种链接性也不会丢失。
如此一来，我们可以将编程模式和前端数据“完全隔离”开来，而不必将功能混杂在各个页面中，我们只需潜心开发我们的业务相关的类，在任何时候，任何地方甚至控制台，都能修改数据并显示在屏幕上。
前端需要什么数据直接访问即可。
位于"../../lib/EasyAPP/EasyAPP"下的代码EasyAPP.js
在之后的章节中，将对代码进行功能刨析
// Auther MingZeY
// Email: 1552904342@qq.com
/**
* 微信小程序自带的一些APP方法提示接口
*/
class AppInterface{
/**
* 生命周期回调——监听小程序初始化。
* 小程序初始化完成时触发，全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。
* 参数：与 wx.getLaunchOptionsSync 一致
*/
onLaunch(obj){}
/**
* 生命周期回调——监听小程序启动或切前台。
* 小程序启动，或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听。
* 参数：与 wx.onAppShow 一致
*/
onShow(obj){}
/**
* 生命周期回调——监听小程序切后台。
* 小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。
*/
onHide(){}
/**
* 错误监听函数。
* 小程序发生脚本错误或 API 调用报错时触发。也可以使用 wx.onError 绑定监听。
* 参数：与 wx.onError 一致
*/
onError(error){}
/**
* 页面不存在监听函数。
* 1.9.90
* 小程序要打开的页面不存在时触发。也可以使用 wx.onPageNotFound 绑定监听。注意事项请参考 wx.onPageNotFound。
* 参数：与 wx.onPageNotFound 一致
*/
onPageNotFound(obj){}
/**
* 未处理的 Promise 拒绝事件监听函数。
* 2.10.0
* 小程序有未处理的 Promise 拒绝时触发。也可以使用 wx.onUnhandledRejection 绑定监听。注意事项请参考 wx.onUnhandledRejection。
* 参数：与 wx.onUnhandledRejection 一致
*/
onUnhandledRejection(obj){}
/**
* 监听系统主题变化
* 2.11.0
* 系统切换主题时触发。也可以使用 wx.onThemeChange 绑定监听。
* 参数：与 wx.onThemeChange 一致
*/
onThemeChange(obj){}
}
/**
* 微信小程序自带的一些Page方法提示接口
*/
class PageInterface{
data(){}
/**
* 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
*/
onLoad(query){}
onShow(){}
onReady(){}
onHide(){}
onUnload(){}
onPullDownRefersh(){}
onReachBottom(){}
onShareAppMessage(){}
onShareTimeline(){}
onAddToFavorites(){}
onPageScroll(){}
onResize(){}
onTabItemTap(){}
onSaveExitState(){}
}
/**
* APP 主类
*/
class EasyAPP extends AppInterface{
constructor(){
super();
}
/**
* 创建页面，但不创建Page实例，只有onLoad事件触发后才能有相关操作
*/
launch(){
let that = this;
let config = {};
let keys = Object.getOwnPropertyNames(Object.getPrototypeOf(this));
for(let key of keys){
config[key] = function(){
that[key]();
}
}
App(config);
}
}
/**
* Page 主类
*/
class EasyPage extends PageInterface{
constructor(){
super();
this.pageInstance = undefined;
this.dataContiner = this.data() || {};
}
launch(passData = {}){
let that = this;
let config = {};
//载入数据
Object.assign(that.dataContiner,passData);
Object.assign(config,{
data:that.dataContiner
})
//载入方法
let keys = Object.getOwnPropertyNames(Object.getPrototypeOf(that));
if(keys.indexOf("onLoad") == -1){
//修复没有Load无法刷新界面的问题
keys.push("onLoad");
}
for(let key of keys){
if(key == "onLoad"){
config[key] = function(...args){
that.pageInstance = this;
//TODO 更新/挂载数据
this.setData(that.dataContiner);
that["onLoad"].apply(that,args);
}
continue;
}
if(key == "data"){
continue;
}
config[key] = function(...args){
that.pageInstance = this;
that[key].apply(that,args);
}
}
Page(config);
}
setData(data){
if(this.pageInstance == undefined){
// console.log(`[Warn] ${this.constructor.name} 的 Page 对象实例未生成!更新界面失败，操作该页面以重新获得 Page 对象`);
return;
}
Object.assign(this.dataContiner,data);
this.pageInstance.setData(data);
}
}
/**
* 数据虚拟空间对象
*/
class DataVM{
constructor(obj,listener = function(){}){
this.source = obj;
this.proxy = this.bind();
this.listeners = [listener];
return this.proxy;
}
update(t,k,v,r){
console.log("更新渲染界面！");
for(let f of this.listeners){
f(t,k,v,r);
}
}
bind(){
let that = this;
let getCache = [];
let handler = {
get:function(t,k,r){
if(k == "__DataVM"){
return that;
}
if(k == "__Refersh"){
that.update(t,k,undefined,r);
return;
}
if(k == "__NOTRACK"){
return t;
}
if(t == that.source){
getCache = [];
}
getCache.push(t[k]);
let isRepeat = function(o){
for(let i = 0; i < getCache.length-1; i++){
if(o instanceof Object && getCache[i] == o){
return true;
}
}
return false;
}
if(typeof t[k] == "object" && t[k].__DataVM == undefined){
if(isRepeat(t[k])){
// console.warn("循环访问对象，已拒绝");
return undefined;
}
return reactive(t[k]);
}else{
return t[k];
}
},
set:function(t,k,v,r){
t[k] = v;
//唤起更新事件
that.update(t,k,v,r);
return true;
}
}
let reactive = function(obj){
return new Proxy(obj,handler);
}
return reactive(this.source);
}
getProxy(){
return this.proxy;
}
getSource(){
return this.source;
}
addListener(f){
this.listeners.push(f);
}
}
class EasyModule extends DataVM{}
class LaunchEnv{
constructor(obj){
let {
page,
data,
} = obj;
this.page = page;
this.data = data;
this.build();
}
async build(){
let page = this.page;
let data = this.data;
if(!page instanceof EasyPage){
throw Error();
}
page.launch(data);
//绑定数据更新事件
for(let name in data){
let targetEnv = data[name];
let dataBuilder = function(key,value){
let obj = {};
obj[key] = value;
return obj;
}
if(targetEnv.__DataVM instanceof DataVM){
let vm = targetEnv.__DataVM;
vm.addListener((target,key,value,reciver) => {
page.setData(dataBuilder(
name,
vm.getProxy()
))
})
}
}
}
}
module.exports.EasyAPP = EasyAPP;
module.exports.EasyPage = EasyPage;
module.exports.EasyModule = EasyModule;
module.exports.DataVM = DataVM;
module.exports.LaunchEnv = LaunchEnv;
网友评论