mini mvvm 简单实现版，代码有待改进
<html>
<head>
<title>mini-mvvm</title>
</head>
<body>
<div id='app'>
<p>
My name is {{firstName + ' ' + lastName}}, I am {{age}} years old.
</p>
</div>
<script type="text/javascript">
const bindViewToData = ((el, data) => {
let source = el.innerHTML;
let updateTextArray = [];
let updateText = (el) => {
el._textContent = el._textContent || el.textContent;
el.textContent = el._textContent.replace(/\{\{([^\{\}]+)\}\}/gm, ($0, $1) => {
return new Function('data','with(data){return ' + $1+'}')(data);
});
};
let update = () => {
let findChild = (el) => {
var childs = el.childNodes;
if(childs){
childs = Array.prototype.slice.apply(childs);
for (var i = childs.length - 1; i >= 0; i--) {
if(childs[i].nodeType === 3){
updateText(childs[i]);
}else if(childs[i].childNodes){
findChild(childs[i]);
}
};
}
};
findChild(el);
};
update();
for(var k in data){
data._data = data._data || {};
if(data.hasOwnProperty(k)){
data._data[k] = data[k];
Object.defineProperty(data, k, {
get: (function(k){
return function(){
return this._data[k];
}
})(k),
set: (function(k){
return function(val){
if(this._data[k] !== val){
this._data[k] = val;
update();
}
};
})(k)
});
}
}
});
const appData = {
firstName: 'Lucy',
lastName: 'Green',
age: 13
}
bindViewToData(document.getElementById('app'), appData)
// div 里面的 p 元素的内容为
// My name is Lucy Green, I am 13 years old.
appData.firstName = 'Jerry'
appData.age = 16
// div 里面的 p 元素的内容自动变为
// My name is Jerry Green, I am 16 years old.
</script>
</body>
</html>
相关推荐
这个名为"mini-mvvm"的项目，是作者对MVVM模式的一种实践尝试，旨在通过简化版的实现来理解其核心概念。 **1. MVVM模式介绍** MVVM模式的主要目标是解耦视图（View）和模型（Model），同时提供一个可绑定的视图模型...
"mini-vue"将带你实现一个简单的插件接口，理解如何扩展框架功能。 9. **异步更新队列**：Vue为了优化性能，采用了异步更新策略。在"mini-vue"中，你需要理解并实现这个队列，处理数据变更后的延迟更新。 10. **...
在"mini-vue"中，我们可以实现一个简单的编译器，处理基础的文本插值（{{ }}）和元素绑定（v-bind）。 组件化（Componentization）是另一个关键概念。Vue允许我们将UI拆分成可重用的组件，每个组件有自己的模板、...
微信小程序（WeChat Mini Program）是一种轻量级的应用开发平台，它允许开发者使用JavaScript、WXML（微信小程序标签语言）和WXSS（微信小程序样式语言）来编写应用，同时结合微信提供的API实现丰富的功能，如访问...
内容概要：本文档《数据结构》（02331）第一章主要介绍数据结构的基础概念，涵盖数据与数据元素的定义及其特性，详细阐述了数据结构的三大要素：逻辑结构、存储结构和数据运算。逻辑结构分为线性结构（如线性表、栈、队列）、树形结构（涉及根节点、父节点、子节点等术语）和其他结构。存储结构对比了顺序存储和链式存储的特点，包括访问方式、插入删除操作的时间复杂度以及空间分配方式，并介绍了索引存储和散列存储的概念。最后讲解了抽象数据类型（ADT）的定义及其组成部分，并探讨了算法分析中的时间复杂度计算方法。 适合人群：计算机相关专业学生或初学者，对数据结构有一定兴趣并希望系统学习其基础知识的人群。 使用场景及目标：①理解数据结构的基本概念，掌握逻辑结构和存储结构的区别与联系；②熟悉不同存储方式的特点及应用场景；③学会分析简单算法的时间复杂度，为后续深入学习打下坚实基础。 阅读建议：本章节内容较为理论化，建议结合实际案例进行理解，尤其是对于逻辑结构和存储结构的理解要深入到具体的应用场景中，同时可以尝试编写一些简单的程序来加深对抽象数据类型的认识。
内容概要：本文详细介绍了施耐德M580系列PLC的存储结构、系统硬件架构、上电写入程序及CPU冗余特性。在存储结构方面，涵盖拓扑寻址、Device DDT远程寻址以及寄存器寻址三种方式，详细解释了不同类型的寻址方法及其应用场景。系统硬件架构部分，阐述了最小系统的构建要素，包括CPU、机架和模块的选择与配置，并介绍了常见的系统拓扑结构，如简单的机架间拓扑和远程子站以太网菊花链等。上电写入程序环节，说明了通过USB和以太网两种接口进行程序下载的具体步骤，特别是针对初次下载时IP地址的设置方法。最后，CPU冗余部分重点描述了热备功能的实现机制，包括IP通讯地址配置和热备拓扑结构。 适合人群：从事工业自动化领域工作的技术人员，特别是对PLC编程及系统集成有一定了解的工程师。 使用场景及目标：①帮助工程师理解施耐德M580系列PLC的寻址机制，以便更好地进行模块配置和编程；②指导工程师完成最小系统的搭建，优化系统拓扑结构的设计；③提供详细的上电写入程序指南，确保程序下载顺利进行；④解释CPU冗余的实现方式，提高系统的稳定性和可靠性。 其他说明：文中还涉及一些特殊模块的功能介绍，如定时器事件和Modbus串口通讯模块，这些内容有助于用户深入了解M580系列PLC的高级应用。此外，附录部分提供了远程子站和热备冗余系统的实物图片，便于用户直观理解相关概念。
某型自动垂直提升仓储系统方案论证及关键零部件的设计.zip
2135D3F1EFA99CB590678658F575DB23.pdf#page=1&view=fitH
可以搜索文本内的内容，指定目录，指定文件格式，匹配大小写等
Windows 平台 Android Studio 下载与安装指南.zip
Android Studio Meerkat 2024.3.1 Patch 1（android-studio-2024.3.1.14-windows.zip）适用于Windows系统，文件使用360压缩软件分割成两个压缩包，必须一起下载使用： part1: https://download.csdn.net/download/weixin_43800734/90557033 part2: https://download.csdn.net/download/weixin_43800734/90557035
国网台区终端最新规范
国网台区终端最新规范
1.【锂电池剩余寿命预测】Transformer-GRU锂电池剩余寿命预测（Matlab完整源码和数据） 2.数据集：NASA数据集，已经处理好，B0005电池训练、B0006测试； 3.环境准备：Matlab2023b，可读性强； 4.模型描述：Transformer-GRU在各种各样的问题上表现非常出色，现在被广泛使用。 5.领域描述：近年来，随着锂离子电池的能量密度、功率密度逐渐提升，其安全性能与剩余使用寿命预测变得愈发重要。本代码实现了Transformer-GRU在该领域的应用。 6.作者介绍：机器学习之心，博客专家认证，机器学习领域创作者，2023博客之星TOP50，主做机器学习和深度学习时序、回归、分类、聚类和降维等程序设计和案例分析，文章底部有博主联系方式。从事Matlab、Python算法仿真工作8年，更多仿真源码、数据集定制私信。
Android项目原生java语言课程设计，包含LW+ppt
大学生入门前端-五子棋vue项目
这是一个完整的端到端解决方案，用于分析和预测阿联酋（UAE）地区的二手车价格。数据集包含 10,000 条二手车信息，覆盖了迪拜、阿布扎比和沙迦等城市，并提供了精确的地理位置数据。此外，项目还包括一个基于 Dash 构建的 Web 应用程序代码和一个训练好的 XGBoost 模型，帮助用户探索区域市场趋势、预测车价以及可视化地理空间洞察。 数据集内容 项目文件以压缩 ZIP 归档形式提供，包含以下内容： 数据文件： data/uae_used_cars_10k.csv：包含 10,000 条二手车记录的数据集，涵盖车辆品牌、型号、年份、里程数、发动机缸数、价格、变速箱类型、燃料类型、颜色、描述以及销售地点（如迪拜、阿布扎比、沙迦）。 模型文件： models/stacking_model.pkl：训练好的 XGBoost 模型，用于预测二手车价格。 models/scaler.pkl：用于数据预处理的缩放器。 models.py：模型相关功能的实现。 train_model.py：训练模型的脚本。 Web 应用程序文件： app.py：Dash 应用程序的主文件。 callback
资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！ 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。
资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！ 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。
此为代码审查工具 可查 文件数，字节数，总行数，代码行数，注释行数，空白行数，注释率等