本章将介绍如何使用avalon来实现前端路由功能。
我们需要用到两个avalon路由配套模块—— mmHistory.js 和 mmRouter.js 。其中mmHistory是用于历史管理，它会劫持页面上所有点击链接的行为，当这些链接是以 #/ 、 #!/ 开头，就尝试匹配路由规则，阻止页面刷新 （通过hash方式或HTML5的replaceState方式） 。mmRouter是给我们定义路由规则，路由规则可以更精细地指定每个参数 (param) 的匹配规则，如果符合就执行对应的回调，如果不符合，就进入error回调。
关于该路由系统更具体的描述，可以查阅 这里 。
作为示例，我们打算制作一个网站的 “用户中心” 页面，其中左侧为导航列表，右侧为受左侧列表控制的内容显示区域：
该“用户中心”页面有这么几个要求：
⑴ 页面不跳转，仅做局部（即内容区域部分）刷新；
⑵ 可以通过不同的url进入对应的页面（即内容区域显示对应的内容）；
⑶ 浏览器能记住url状态，比如从“账户详情”点入“我要充值”页面，然后再点击浏览器返回按钮，可以正确回到“账户详情”页面。
由于不是石器时代，自然不会再选择iframe这种内耗高、不友好的元素来架构页面（而且iframe也实现不了后面两个需求呀） 。那么我们会很快联想到Ajax技术，这个想法很本质，不过单纯的Ajax也没办法达到我们的要求，所以才需要引入开头提到的两个avalon路由模块。
我们可以先写出简单的页面原型：
index.html：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>账户中心</title> <link rel="stylesheet" href="css/user.css"> <script src="js/lib/require.js" type="text/javascript" data-main="js/page/user"></script> </head> <body ms-controller="user" class="ms-controller"> <script type="text/javascript"> //这里给后端提供数据接口 var conf = { username: {"id": "11", "name": "VaJoy"} } </script> <header> <span>{{username.name}}你好，欢迎来到账户中心</span> </header> <nav> <ul> <li><a href="#!/index">我的首页</a></li> <li><a href="#!/detail">账户详情</a></li> <li><a href="#!/recharge">我要充值</a></li> </ul> </nav> <article> 内容... </article> </body> </html>
user.js：
require.config({ baseUrl: 'js/lib/', paths:{ avalon: 'avalon', domReady:'domReady', mmHistory: 'mmHistory', mmRouter: 'mmRouter', jquery: 'jq' }, shim:{ avalon: { exports: "avalon" }, mmHistory:{ deps: ['avalon']}, mmRouter:{ deps: ['avalon']} } }); require(['avalon',"domReady!"], function() { var vm = avalon.define({ $id: "user", username:conf.username }); avalon.scan(); });
user.css：
body,html{padding: 0;margin:0;background: #EEE;} .ms-controller{visibility: hidden;} header{height: 50px;background: white;} header>span{display:block;padding: 16px;} nav{position: absolute;left:0;margin-top:50px;width: 200px;} nav>ul>li{margin-top: 12px;} nav>ul>li>a{text-decoration: none;color:blue;} nav>ul>li>a:hover{color:red;} article{padding: 15px;margin-left:200px;min-height: 600px;background: white;}
运行结果如下：
接着我们要新建三个页面——mine.html、detail.html 和 recharge.html ，分别对应“我的首页”、“账户详情” 和 “我要充值” 的右侧内容，咱在里面随便写点内容意思意思即可，比如mine.html我就写了一句话：
接着我们默认先把mine.html引入到index.html中，这里我们借助avalon的 ms-include-src 接口，修改下index.html：
<nav> <ul> <li><a href="#!/index">我的首页</a></li> <li><a href="#!/detail">账户详情</a></li> <li><a href="#!/recharge">我要充值</a></li> </ul> </nav> <article ms-include-src="pageUrl"> <!--这里使用ms-include-src接口，它会引入pageUrl属性所对应的文件--> </article>
接着修改 user.js的部分：
require(['avalon',"domReady!"], function() { var vm = avalon.define({ $id: "user", username:conf.username, pageUrl:"mine.html" //默认为mine.html }); avalon.scan(); });
运行如下：
接着是时候让 mmHistory.js 和 mmRouter.js 发挥它们的作用了，我们修改下user.js的部分代码：
require(['mmHistory','mmRouter',"domReady!"], function() { var vm = avalon.define({ $id: "user", username:conf.username, pageUrl:"mine.html" //默认为mine.html }); function callback() {if(this.path==="/index"){ vm.pageUrl="mine.html"; }else { var path_tail = this.path.replace(/\//, ""); vm.pageUrl = path_tail + ".html"; //动态修改pageUrl属性值 } } avalon.router.get("/*path", callback); //劫持url hash并触发回调 avalon.history.start(); //历史记录堆栈管理 avalon.scan(); });
注意由于在 require.config 的 shim 中我们已经定义了 mmHistory.js 和 mmRouter.js是依赖于avalon的，故此处无须再引入avalon模块，requireJS执行该代码段之前会先加载好avalon的。
我们通过这两行代码执行了路由和历史记录的管理：
avalon.router.get("/*path", callback); //劫持url hash并触发回调 avalon.history.start(); //历史记录堆栈管理
其中router.get() 的第一个参数表示路由匹配规则，比如这里的“/*path”表示匹配全部路径，匹配到了就触发回调callback函数。
更多的匹配规则我们可以直接在 mmRouter.js 中查看注释信息：
router.get() 在触发callback前会生成一个this.path对象供callback调用，其值为当前匹配到的路径，比如当url后缀变成 #!/recharge 的时候，this.path的值为匹配到的"/recharge" 。了解了这个之后，callback 函数也很好理解了：
function callback() {if(this.path==="/index"){ vm.pageUrl="mine.html"; //如果url后缀变成"#!/index"，则pageUrl为“mine.html” }else { var path_tail = this.path.replace(/\//, ""); //去掉this.path值的第一个斜杠 vm.pageUrl = path_tail + ".html"; //动态修改pageUrl属性值 } }
这时候的运行结果如下所示：
自此便实现了我们的需求。但是这样还不够完美——每个页面的样式咋处理呢？
我们可以直接在页面上写<style>标签，或者直接写个<link>引入外部样式文件，但前者不好维护，后者毕竟不是插入到head中的不太规范。那么我们能否也用requireJS模块化动态引入样式文件呢？答案是肯定的，不过得借助于其组件 css.js 。
以“账户详情”（detail.html）为例，我们创建一个detail.css文件，里面设置 .detail{color:red;}。
先确保require.config中的paths里加上了该组件：
paths:{ //这里配置的地址，都是相对于上方的baseUrl的
avalon: 'avalon',
domReady:'domReady',
mmHistory: 'mmHistory',
mmRouter: 'mmRouter',
css: 'css' //加上css.js
}
然后修改detail.html页面内容：
<section ms-controller="detail" class="detail ms-controller"> 哟哟哟，这里是详情页面，{{username.name}}你好 </section> <script> require(['avalon','css!../../css/detail.css'], function(){ //下面的其实建议写成一个模块detail.js然后由require引入 avalon.define({ $id: "detail", username: conf.username }); avalon.scan(); }) </script>
“css!/XXX.css” 是css.js的写法，注意以"css!"开头即可。
运行结果如下：
以上便是avalon前端路由的简单实现，本章的示例代码可以从 这里 下载。
后续章节可能会开始写一写avalon的API。共勉~
相关推荐
本章开始搭配requireJS来使用avalon，开始之前，我们可以对avalon进行精简改造（注：新版的avalon已提供了shim版本，无需再做如下的精简了，直接点这里获取）。avalon源码里有自己的AMD加载器和DOMReady模块，使用...
我们可以在这里获取最新版本的avalonJS，然后将其引入页面中（本章先不考虑搭配requireJS，仅仅先玩一玩、介绍下）：接着，类似于ng的“ng-controller”，avalon的控制域属性名叫做“ms-controller”，你可以把它...
我们需要用到两个avalon路由配套模块——mmHistory.js 和mmRouter.js。...#/、#!...mmRouter是给我们定义路由规则，路由规则可以更精细地指定每个参数(param)的匹配规则，如果符合就执行对应的回调，如果不符合，就进入...
内容概要：本文详细介绍了信捷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
KUKA机器人相关文档