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实现丰富的功能，如访问...
内容概要：本文详细介绍了信捷PLC在多个应用场景中的具体实现，包括随机密码生成、动态验证码、动态分期付款功能及锁机例程。首先探讨了随机密码生成，通过PLC的随机数生成功能并结合数学运算，实现了4位随机密码。其次，讲解了动态验证码的实现，利用PLC的实时时钟和通信功能，使验证码随时间动态变化。再次，介绍了动态分期付款功能，通过监测支付信号和比较已支付金额与总金额，实现分期付款的控制。最后，讨论了锁机例程，通过状态继电器和时间窗控制，确保设备在特定条件下不被随意使用。每个部分都提供了详细的梯形图代码和注释，帮助读者理解和实现。 适合人群：对PLC编程有一定基础的技术人员，尤其是从事工业自动化领域的工程师。 使用场景及目标：适用于需要增强设备安全性、提高验证机制可靠性的工业控制系统。通过学习这些例程，工程师可以在实际项目中灵活运用PLC实现复杂的功能，如设备访问控制、支付管理等。 其他说明：文中不仅提供了具体的代码实现，还分享了一些实用技巧和注意事项，如密码比对策略、时间同步校验、多品牌PLC移植建议等。此外，还提到了一些防破解措施，增强了系统的安全性。
213000-fbo-ggs-Linux-x64-Oracle-shiphome.zip ogg21.3安装包，适用于经典架构
内容概要：本文介绍了基于Stanley算法和预瞄距离自适应机制的CarSim与Simulink联合仿真模型。Stanley算法用于路径跟踪，通过计算横向和航向偏差调整车辆转向角；预瞄距离自适应机制根据车辆速度动态调整预瞄距离，确保在不同速度和路况下都能灵活应对。CarSim提供高精度车辆动力学模型，Simulink则负责算法实现和系统集成。文中还分享了多个实用技巧，如速度单位转换、PID控制器参数调整、数据同步问题解决等，并提供了完整的模型文件供下载。 适合人群：从事自动驾驶研究的技术人员、高校师生及相关领域的研究人员。 使用场景及目标：适用于自动驾驶路径跟踪的研究与开发，旨在提高车辆在不同速度和路况下的路径跟踪性能，减少横向误差，增强行驶稳定性。 其他说明：文中提到的模型文件包括Carsim参数配置文件cpar、Simulink模型文件及详细参考资料，有助于快速搭建并调试联合仿真环境。
内容概要：本文详细介绍了西门子S7-1200 PLC在污水处理项目中的应用，涵盖多个关键技术模块。首先讨论了模拟量转换，通过具体的代码示例展示了如何将模拟量信号转换为可用于控制的数值。接下来探讨了电动阀控制，解释了如何利用逻辑指令实现电动阀的开关控制。液位控制部分则通过比较指令实现了液位的精准调控。Modbus通讯部分讲解了如何通过Modbus协议控制变频器，包括通讯参数的配置和数据传输的具体实现。PID控制部分详细解析了PID控制器的参数设置及其在污水处理中的应用。最后，PUT与 GET指令的应用确保了主站与从站之间的数据同步。此外，文中还分享了一些实战经验和调试技巧，如模拟量处理的基本方法、Modbus通讯的注意事项以及PID控制的实际应用。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是对PLC编程和污水处理控制系统感兴趣的读者。 使用场景及目标：①帮助工程师理解和掌握西门子S7-1200 PLC在污水处理项目中的具体应用；②提供详细的代码示例和实战经验，便于读者快速上手并应用于实际项目；③解决常见问题，提高系统的稳定性和可靠性。 其他说明：文中不仅涵盖了理论知识，还包括大量的实战经验和调试技巧，有助于读者更好地应对实际项目中的挑战。
【A股温度计】www.agwdj.com 镜像版程序V1.0说明 •通过数据可视化技术，将复杂的A股市场数据转化为直观的图形界面，帮助投资者快速把握市场脉搏。 【核心功能】 •全景视角：突破信息碎片化局限，快速定位涨跌分布，一眼锁定今日热点板块 •板块排序：基于申万行业分类标准，对31个一级行业和131个二级行业实时动态排序 •硬件适配：智能适配不同分辨率屏幕，4K以上屏幕显示信息更多（视觉更佳） •智能缩放：A股全图让大A市场5000+个股同屏显示（支持鼠标滚轮及触摸设备5级缩放） 【三秒原则】 •三秒看懂：通过精心设计的视觉图形，让用户在三秒内看清市场整体状况 •三秒定位：智能算法让大成交额个股和热点板块自动靠前，快速定位机会 •三秒操作：极简的界面，让用户减少操作 【使用场景】 •盘前准备：快速了解隔夜市场变化，制定当日策略 •盘中监控：实时跟踪市场动向，及时把握当日机会 •盘后复盘：全面分析当日市场表现，总结经验教训 【适合人群】 •个人用户：快速了解市场整体趋势变化，辅助决策 •专业人员：获取每天市场的数据云图支持研究工作 •金融机构：作为投研系统的可视化补充组件 •财经媒体：制作专业市场分析图表和报道 【市场切换】 •默认加载"A股全图"，可切换单独显示的类型如下： •上证A股/深证A股/北证A股/创业板/科创板/ST板块/可转债/ETF 【程序优势】 •运行环境：纯PHP运行（无需安装任何数据库） •数据更新：实时同步→A股温度计→www.agwdj.com •显示优化：自动适配8K/4K/2K/1080P等不同分辨率的屏幕 •设备兼容：对市面上主流的设备及浏览器做了适配（检测到手机/平板/电视等默认Chrome/Firefox/Edge内核过低的情况会自动提示） 【其他说明】 •A股温度计程序演示网址：https://www.agwdj.com
汽车车载网络系统检修.ppt
KUKA机器人相关文档
内容概要：本文详细介绍了利用Matlab实现模拟退火算法来优化旅行商问题（TSP）。首先阐述了TSP的基本概念及其在路径规划、物流配送等领域的重要性和挑战。接着深入讲解了模拟退火算法的工作原理，包括高温状态下随机探索、逐步降温过程中选择较优解或以一定概率接受较差解的过程。随后展示了具体的Matlab代码实现步骤，涵盖城市坐标的定义、路径长度的计算方法、模拟退火主循环的设计等方面。并通过多个实例演示了不同参数配置下的优化效果，强调了参数调优的重要性。最后讨论了该算法的实际应用场景，如物流配送路线优化，并提供了实用技巧和注意事项。 适合人群：对路径规划、物流配送优化感兴趣的科研人员、工程师及高校学生。 使用场景及目标：适用于需要解决复杂路径规划问题的场合，特别是涉及多个节点间最优路径选择的情况。通过本算法可以有效地减少路径长度，提高配送效率，降低成本。 其他说明：文中不仅给出了完整的Matlab代码，还包括了一些优化建议和技术细节，帮助读者更好地理解和应用这一算法。此外，还提到了一些常见的陷阱和解决方案，有助于初学者避开常见错误。
内容概要：本文详细介绍了BYVIN（比德文）电动四轮车控制器的技术细节，涵盖了硬件设计和软件实现两大部分。硬件方面，提供了PCB文件和PDF原理图，展示了电路板布局、元件位置及电路连接关系。软件方面，代码结构清晰，模块化设计良好，包括初始化、速度数据处理、PWM配置、故障保护机制等功能模块。文中还提到了一些独特的设计细节，如PWM死区补偿、故障分级处理、卡尔曼滤波估算电池电量等。此外，代码仓库中还包括了详细的注释和调试技巧，如CAN总线实时数据传输、硬件级关断+软件状态机联动等。 适合人群：具备一定嵌入式开发基础的研发人员，尤其是对STM32F4系列单片机和电动车辆控制系统感兴趣的工程师。 使用场景及目标：适用于希望深入了解电动四轮车控制器设计原理和技术实现的研究人员和开发者。目标是掌握电动四轮车控制器的硬件设计方法和软件编程技巧，提升实际项目开发能力。 其他说明：本文不仅提供了代码和技术细节，还分享了许多实战经验和设计思路，有助于读者更好地理解和应用这些技术。
内容概要：本文介绍了一个专业的剧本杀创作作家AI。它能根据客户需求创作各种风格和难度的剧本杀剧本，并提供创作建议和修改意见。其目标是创造引人入胜、逻辑严密的剧本体验。它的工作流程包括接收理解剧本要求、创作剧本框架情节、设计角色背景线索任务剧情走向、提供修改完善建议、确保剧本可玩性和故事连贯性。它需保证剧本原创、符合道德法律标准并在规定时间内完成创作。它具备剧本创作技巧、角色构建理解、线索悬念编织、文学知识和创意思维、不同文化背景下剧本风格掌握以及剧本杀游戏机制和玩家心理熟悉等技能。; 适合人群：有剧本杀创作需求的人群，如剧本杀爱好者、创作者等。; 使用场景及目标：①为用户提供符合要求的剧本杀剧本创作服务；②帮助用户完善剧本杀剧本，提高剧本质量。; 阅读建议：此资源详细介绍了剧本杀创作作家AI的功能和服务流程，用户可以依据自身需求与该AI合作，明确表达自己的创作需求并配合其工作流程。
内容概要：本文详细介绍了五个用于空气耦合超声仿真的COMSOL模型，涵盖二维和三维场景，适用于铝板和钢板的多种缺陷检测。每个模型都包含了具体的参数设置、边界条件选择以及优化技巧。例如，Lamb波检测模型展示了如何利用A0模态检测铝板内的气泡，而三维模型则强调了内存管理和入射角参数化扫描的重要性。表面波检测模型提供了裂纹识别的相关性分析方法，变厚度模型则展示了如何通过几何参数化来模拟复杂的工件形态。文中还分享了许多实用的操作技巧，如内存优化、信号处理和自动化检测逻辑。 适用人群：从事无损检测研究的技术人员、COMSOL软件使用者、超声检测领域的研究人员。 使用场景及目标：①帮助用户理解和掌握空气耦合超声仿真的具体实现方法；②提供实际工程应用中的缺陷检测解决方案；③指导用户进行高效的仿真建模和结果分析。 其他说明：文中提供的模型不仅涵盖了常见的缺陷检测场景，还包括了一些高级技巧，如参数化扫描、自动化检测逻辑等，能够显著提高工作效率。同时，文中还给出了硬件配置建议和一些常见的注意事项，确保用户可以顺利运行这些模型。
内容概要：本文档介绍了名为“精通各种销售文案的专家”的虚拟角色，该角色由深度学习和自然语言处理技术构建，旨在为各行业提供专业的销售文案服务。文档详细列出了角色的背景、偏好、目标、限制条件以及技能。它强调了角色在文案创意撰写、精准市场定位、效果优化和培训指导方面的能力，并且提到它能够根据不同的产品特性创作多元化的文案风格，同时确保文案符合法律规范、品牌形象一致性和时效性。此外，还展示了具体的文案示例，如智能手表和空气净化器的广告语，最后概述了与用户合作的标准流程，包括初步沟通、文案构思、初稿撰写及反馈修订等步骤。; 适合人群：需要撰写或优化销售文案的企业营销人员、广告策划师以及想要提高文案写作水平的内容创作者。; 使用场景及目标：①为企业或个人提供定制化销售文案服务，以提升品牌影响力和销售业绩；②帮助文案撰写者掌握文案策划技巧，提高文案质量；③确保文案符合法律法规和品牌要求，维护品牌形象。; 阅读建议：阅读时应重点关注角色的核心能力和所提供的具体服务，同时注意文档中提及的文案创作原则和流程，以便更好地理解如何利用该角色来满足自身的文案需求。
KUKA机器人相关文档
内容概要：本文详细探讨了多智能体系统中神经网络与自适应动态滑模控制的应用及其在Simulink中的复现。首先介绍了多智能体系统的概念及其通信方式，然后讨论了神经网络在多智能体决策中的应用，展示了如何使用Keras构建前馈神经网络。接着阐述了自适应动态滑模控制的基本原理，包括滑模面设计和自适应控制参数调整。最后，重点讲解了如何在Simulink中集成这些技术，提供了具体的实现步骤和优化建议，如使用Matlab Function模块嵌入神经网络和自适应滑模控制算法，以及解决抖振问题的方法。 适合人群：从事智能控制系统研究和开发的技术人员，尤其是对多智能体系统、神经网络和自适应动态滑模控制感兴趣的科研人员和工程师。 使用场景及目标：适用于需要提高多智能体系统在复杂环境下稳定性和效率的研究项目。具体目标包括减少控制系统的抖振现象，提升响应速度和精度，降低计算资源消耗。 其他说明：文中提供的代码片段和实现细节有助于读者快速理解和应用这些先进技术。同时，强调了在实际工程中需要注意的问题，如采样时间和代数环检测等。
内容概要：本文详细探讨了永磁同步电机（PMSM）无传感器控制领域的改进卡尔曼滤波速度观测器的应用。首先介绍了卡尔曼滤波的基本原理及其在PMSM速度观测中的应用，指出了传统卡尔曼滤波在复杂非线性系统中的局限性。接着阐述了改进卡尔曼滤波的具体方法，包括自适应调整过程噪声协方差矩阵Q和观测噪声协方差矩阵R，以应对PMSM运行时参数变化的情况。文中还展示了如何在Simulink中构建PMSM的数学模型并实现普通和改进卡尔曼滤波的子模块，通过仿真对比验证了改进算法的有效性和优越性。此外，讨论了改进版在不同工况下的表现，尤其是在高速区和负载突变情况下的精度提升。 适合人群：从事电机控制系统研究与开发的技术人员，尤其是对卡尔曼滤波有一定了解并希望深入了解其在PMSM无传感器控制中应用的人群。 使用场景及目标：适用于需要提高PMSM无传感器控制精度的研发项目，目标是通过改进卡尔曼滤波算法，实现更精准的速度和位置估计，降低系统成本并提高可靠性。 其他说明：文章强调了改进卡尔曼滤波在实际应用中的细节处理，如自适应调整噪声协方差矩阵、优化矩阵运算等，为后续研究提供了宝贵的实践经验和技术指导。
游戏型多媒体教育软件.ppt