本章将介绍如何使用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)的匹配规则，如果符合就执行对应的回调，如果不符合，就进入...
内容概要：本文详细探讨了在Simulink环境中构建的风火水储联合调频系统中，储能系统的荷电状态（SOC）对区域控制偏差（ACE）的影响。文中通过具体案例和MATLAB代码展示了储能系统在不同SOC水平下的表现及其对系统稳定性的作用。同时，文章比较了储能单独调频与风火水储联合调频的效果，强调了储能系统在应对风电波动性和提高系统响应速度方面的重要作用。此外，作者提出了针对SOC变化率的参数整定方法以及多电源协同工作的优化策略，旨在减少ACE波动并确保系统稳定运行。 适合人群：从事电力系统调频研究的专业人士，尤其是熟悉Simulink仿真工具的研究人员和技术人员。 使用场景及目标：适用于希望深入了解储能系统在电力系统调频中作用的研究者和技术人员，目标是通过合理的SOC管理和多电源协同工作，优化调频效果，提高系统稳定性。 其他说明：文章提供了详细的MATLAB代码片段，帮助读者更好地理解和应用所讨论的概念。同时，文中提到的实际案例和仿真结果为理论分析提供了有力支持。
内容概要：本文深入探讨了欧姆龙PLC NJ系列中大型程序中结构化编程与面向对象编程的结合及其应用。首先介绍了结构化编程作为程序框架的基础，通过功能块（FB）实现清晰的程序结构和流程控制。接着阐述了面向对象编程的理念，将现实世界的对象映射到程序中，利用类的概念实现模块化和可扩展性。两者结合提高了程序的容错率，增强了程序的稳定性和可维护性。文中通过多个实际案例展示了如何在工业自动化领域中应用这两种编程方法，如电机控制、设备类的创建、异常处理机制、接口实现多态性、配方管理和报警处理等。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是那些希望提升PLC编程技能的人群。 使用场景及目标：适用于需要优化PLC程序结构、提高程序可靠性和可维护性的场合。目标是帮助工程师掌握结构化编程和面向对象编程的技巧，从而写出更加高效、稳定的PLC程序。 其他说明：文章强调了在实际项目中灵活运用两种编程方法的重要性，并提醒读者注意实时性要求高的动作控制应采用结构化编程，而工艺逻辑和HMI交互则更适合面向对象编程。
matlab与聚类分析。根据我国历年职工人数（单位：万人），使用有序样品的fisher法聚类。
卡尔曼滤波生成航迹测量程序
内容概要：本文详细介绍了利用格子玻尔兹曼方法（LBM）对多孔电极浸润特性的模拟研究。首先阐述了LBM的基本原理，包括碰撞和迁移两个关键步骤，并提供了相应的Python伪代码。接着讨论了如何处理多孔介质中的固体边界，特别是通过随机算法生成孔隙结构以及结合CT扫描数据进行三维重构的方法。文中还探讨了表面张力、接触角等因素对浸润过程的影响，并给出了具体的数学表达式。此外，文章提到了并行计算的应用，如使用CUDA加速大规模网格计算，以提高模拟效率。最后，作者分享了一些实用技巧，如通过调整松弛时间和润湿性参数来优化模拟效果，并强调了LBM在处理复杂几何结构方面的优势。 适合人群：从事电池研发、材料科学领域的研究人员和技术人员，尤其是关注多孔电极浸润性和电解液扩散机制的人群。 使用场景及目标：适用于希望深入了解多孔电极内部流体动力学行为的研究者，旨在帮助他们更好地理解和预测电极材料的浸润特性，从而改进电池设计和性能。 其他说明：尽管LBM在处理多孔介质方面表现出色，但在某些极端条件下仍需引入额外的修正项。同时，参数的选择和边界条件的设定对最终结果有着重要影响，因此需要谨慎对待。
内容概要：本文详细介绍了在Zynq扩展口上使用FPGA和W5500实现TCP网络通信的过程。作者通过一系列实验和技术手段，解决了多个实际问题，最终实现了稳定的数据传输。主要内容包括：硬件搭建（SPI接口配置）、数据回环处理、压力测试及优化、多路复用扩展以及上位机测试脚本的编写。文中提供了大量Verilog代码片段，展示了如何通过状态机控制SPI通信、优化数据缓存管理、处理中断等问题。 适合人群：对FPGA开发和网络通信感兴趣的工程师，尤其是有一定Verilog编程基础的研发人员。 使用场景及目标：适用于需要在嵌入式系统中实现高效、稳定的TCP通信的应用场景。目标是帮助读者掌握FPGA与W5500结合进行网络通信的具体实现方法和技术细节。 其他说明：文章不仅提供了详细的代码实现，还分享了许多实践经验，如硬件连接注意事项、信号完整性问题的解决方案等。此外，作者还提到了未来的工作方向，如UDP组播和QoS优先级控制的实现。
python3.10以上 可安装pyside6（类似pyqt），具体安装操作步骤
内容概要：本文详细介绍了利用有限差分时域法(FDTD)进行可调谐石墨烯超材料吸收体的设计与仿真。文中解释了石墨烯超材料的基本结构（三层“三明治”结构）、关键参数（如化学势、周期、厚度等）及其对吸收性能的影响。同时展示了如何通过调整石墨烯的化学势来实现吸收峰的位置和强度的变化，以及如何优化结构参数以获得最佳的吸收效果。此外，还提供了具体的代码示例，帮助读者理解和重现相关实验结果。 适合人群：从事纳米光子学、超材料研究的专业人士，尤其是对石墨烯基超材料感兴趣的科研工作者和技术开发者。 使用场景及目标：适用于希望深入了解石墨烯超材料的工作原理及其潜在应用场景的研究人员；旨在探索新型可调谐光学器件的设计思路和发展方向。 其他说明：文中不仅分享了理论知识，还包括了许多实践经验，如避免常见错误、提高仿真相关效率的小技巧等。对于想要将研究成果应用于实际产品的团队来说，这些细节非常有价值。
随机生成2字，3字，4字，5字，6字，7字，8字，9字，10字的中文词组20个
内容概要：本文详细探讨了智能座舱域控设计的发展历程和技术趋势。首先介绍了智能座舱从被动式交互到主动式交互的技术演变，包括硬件和交互方式的进步。随后，文章重点讨论了智能座舱功能发展趋势，涵盖车载显示技术的多屏化、大屏化和高端化，以及SoC芯片的多核异构架构和算力融合，强调了其在智能座舱中的核心作用。此外，还阐述了电子电气架构从分布式向集成化的转型，分析了其面临的挑战和未来趋势。最后，基于当前智能座舱的发展需求，提出了一种基于双片龍鷹一号芯片的新域控平台设计方案，详细描述了其硬件设计实现方案，旨在提供高性能、高可靠性的智能座舱解决方案。 适合人群：汽车电子工程师、智能座舱研发人员及相关领域的技术人员。 使用场景及目标：①帮助读者理解智能座舱的技术发展历程及其未来发展方向；②为智能座舱域控平台的设计和开发提供参考和技术支持；③探讨电子电气架构的转型对汽车行业的影响及应对策略。 其他说明：文章结合实际案例和技术数据，深入浅出地解释了智能座舱的各项技术细节，不仅提供了理论指导，还具有较强的实践意义。通过对智能座舱域控平台的全面剖析，有助于推动智能座舱技术的创新发展，提升用户体验。
内容概要：本文详细介绍了多智能体协同编队控制的技术原理及其应用实例。首先通过生动形象的例子解释了编队控制的核心概念，如一致性算法、虚拟结构法和Leader-Follower模式。接着深入探讨了如何用Python实现基础的一致性控制，以及如何通过调整参数（如Kp、Ka）来优化编队效果。文中还讨论了实际工程中常见的问题，如通信延迟、避障策略和动态拓扑变化，并给出了相应的解决方案。最后，强调了参数调试的重要性，并分享了一些实用技巧，如预测补偿、力场融合算法和分布式控制策略。 适合人群：对多智能体系统、无人机编队控制感兴趣的科研人员、工程师和技术爱好者。 使用场景及目标：适用于希望深入了解多智能体协同编队控制理论并能够将其应用于实际项目的研究人员和开发者。目标是帮助读者掌握编队控制的关键技术和实现方法，提高系统的稳定性和可靠性。 其他说明：文章不仅提供了详细的理论讲解，还附有具体的代码示例，便于读者理解和实践。同时，作者结合自身经验分享了许多宝贵的调试技巧和注意事项，有助于读者在实际应用中少走弯路。
评估管线钢环焊缝质量及其对氢脆的敏感性.pptx
C盘清理bat脚本自动清理C盘垃圾文件
GBT21266-2007 辣椒及辣椒制品中辣椒素类物质测定及辣度表示方法
弹跳球 XNA 游戏项目。演示如何使用 C# 在 Visual Studio XNA 中构建类似 arkanoiddx-ball 的游戏。
内容概要：文章全面解析了宇树科技人形机器人的发展现状、技术实力、市场炒作现象及其应用前景和面临的挑战。宇树科技成立于2016年，凭借春晚舞台的惊艳亮相和社交媒体的热议迅速走红，其人形机器人具备先进的运动控制算法、传感器技术和仿生结构设计。然而，市场炒作现象如高价租赁、二手市场炒作和虚假宣传等影响了市场秩序。尽管存在炒作，人形机器人在工业、服务和家庭领域仍具广阔前景，但也面临技术升级、成本控制、安全性和政策监管等挑战。 适合人群：对机器人技术、人工智能以及科技发展趋势感兴趣的读者，包括科技爱好者、投资者和相关行业的从业者。 使用场景及目标：①帮助读者了解宇树科技人形机器人的技术特点和发展历程；②揭示市场炒作现象及其影响；③探讨人形机器人的应用前景和面临的挑战。 其他说明：文章强调了宇树科技人形机器人在技术上的突破和市场上的表现，同时也提醒读者关注市场炒作现象带来的风险，呼吁各方共同努力推动人形机器人产业健康发展。
msvcp140.dll丢失怎样修复