前端神器avalonJS入门(二)
本章开始搭配requireJS来使用avalon,开始之前,我们可以对avalon进行精简改造(注:新版的avalon已提供了shim版本,无需再做如下的精简了,直接点这里获取)。
avalon源码里有自己的AMD加载器和DOMReady模块,使用requireJS来加载各依赖脚本的话,使用其配套插件DOMReady来ready执行会更合适,而且avalon的AMD模块也多余了。故我们可以把这俩块代码咔嚓掉。
只需要在源码里搜索“AMD”和“DOMReady”就能找到位于尾部的这俩模块,删掉它们可以节省400多行代码(大约是第4358行到4777行):
要注意的是avalon的DOMReady模块里带了自扫描机制,它能在DOMReady后自动执行avalon.scan()来扫描和执行文档中的avalon功能属性:
所以我们删掉源码中DOMReady模块的话,之后编写avalon脚本应当在最后手动加上一句 avalon.scan() 或 avalon.scan(document.getElementById("XX")) ,前者会扫描整个文档,后者只会扫描所选DOM内区域,我个人是推荐使用后者。
其实在第一篇的时候就有提过这个问题了,只是没细说:
删掉avalon自带的AMD和DOMReady模块后,还有一个小地方也建议修改下(非必须项),它是avalon内置的调试方法,为不干扰后续自己的脚本调试,可以把它注释掉。
方法是直接在源码搜索“console”,大约在46行的位置注释掉log()方法里的调试代码即可:
需求
本章要用到的脚本除了精简后的avalonJS,还需要requireJS及其插件DomReady.js(后续篇章还会用到css.js来按需加载样式文件)。
你可以在我的Github上直接下载本章的Demo,也省去了搜罗上述脚本的过程。
示例
我们依旧拿上一篇的选项卡来做本章示例即可,本章主要介绍的仅为如何在使用requireJS的基础上使用avalon:
我们本章示例的文件系统可以是这样的:
其中的js/page文件夹下的 index.js 作为 index.html 页面的脚本入口(requireJS的main入口)。js/tool文件夹下则存放要用到的工具。这样还蛮简洁直观的对吧。
在 index.html 页面里,我们仅需引入配置了入口的requireJS文件即可:
<script src="js/tool/require.js" type="text/javascript" data-main="js/page/index"></script>
然后加入我们上一篇avalon文章中写好的内容,整体是这样的:
![](/assets/blank.gif)
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>初玩阿瓦隆</title><script src="js/tool/require.js" type="text/javascript" data-main="js/page/index"></script> </head> <body> <script type="text/javascript">//这里给后端提供数据接口var conf = {gg:[{"id":"1","title":"公告文章标题1"},{"id":"2","title":"公告文章标题2"},{"id":"3","title":"公告文章标题3"},{"id":"4","title":"公告文章标题4"}],bd:[{"id":"1","title":"媒体报道文章标题1"},{"id":"2","title":"媒体报道文章标题2"},{"id":"3","title":"媒体报道文章标题3"},{"id":"4","title":"媒体报道文章标题4"}]}; </script> <div ms-controller="list"><span ms-mouseover="changeUl(1)">公告</span><span ms-mouseover="changeUl(0)">媒体报道</span><a ms-href="'#!/'+ more_name">{{more_text}}</a><ul><li ms-repeat="infoList"><a ms-href="'#!/'+ more_name + '/' + el.id" ms-title="el.title">{{el.title}}</a></li></ul> </div> </body> </html>
![](/assets/blank.gif)
主页面写好了,我们再看看requireJS的入口脚本 js/page/index.js 怎么写。
首先是配置我们要调用到的文件(比如avalonJS和domReadyJS):
![](/assets/blank.gif)
require.config({baseUrl: 'js/', //相对于index.html页面文件的地址paths:{ //这里配置的地址,都是相对于上方的baseUrl的avalon: 'tool/avalon',domReady:'tool/domReady'},shim:{avalon: { exports: "avalon" }} });
![](/assets/blank.gif)
其中的baseUrl是当前config的全局路径,后面paths里定义的路径都是相对于baseUrl的,baseUrl的好处就是如果路径很长的话,可以拿它当前缀变量。
例如上述代码paths里定义avalon的地址是 "tool/avalon",实际运行的时候会给它加上前缀baseUrl(当然也会加上省略的后缀名.js)变成 "js/tool/avalon.js"。
shim指的是给非严格AMD标准的文件加上一层“壳”,增强代码健壮性。
接着就是我们对avalon脚本的常规调用了:
![](/assets/blank.gif)
require(['avalon',"domReady!"], function() {var vm = avalon.define({$id: "list",more_name: "gg",more_text: "更多公告",gg:conf.gg,bd:conf.bd,infoList:conf.gg,changeUl:function(flag){if(flag){vm.more_name = "gg";vm.more_text = "更多公告";vm.infoList = vm.gg;}else{vm.more_name = "bd";vm.more_text = "更多报道";vm.infoList = vm.bd;}}});avalon.scan(); });
![](/assets/blank.gif)
注意要用
require(['依赖文件1',"依赖文件2"], function() {//回调 })
来处理模块依赖,然后注意domReadyJS的模块引用写法是“domReady!”,即在最后加了一个感叹号,表示优先使用其作为DOMReady处理模块。
整理一下,我们的 js/page/index.js 文件最终是这样的:
![](/assets/blank.gif)
运行index.html,会发现一切顺利:
本章就先简单介绍在requireJS下如何使用avalon,下一篇avalon文章打算给大家介绍非常了得的东西——avalon的前端路由。
共勉~
转载于:https://www.cnblogs.com/cymbidium/p/5341399.html
前端神器avalonJS入门(二)相关推荐
- 视频教程-最新完整VUE前端教程从入门到精通,纯干货企业级项目实战-Vue
最新完整VUE前端教程从入门到精通,纯干货企业级项目实战 10年以上开发经验,曾经是八维教育实训主任,千峰教育高级HTML5前端讲师,尚品中国创始人.现任程序思维创始人.曾和大厂.国企等大型企业合作开 ...
- javascript 高级程序设计_JavaScript 经典「红宝书」,几代前端人的入门选择
人的一生中总要读几本经典书,在这个"经典"泛滥的年代,什么才是权威的代表,我想大概是一本的书的口碑,能积累下上佳口碑的书,往往也是能经得住时间推敲的.比如这本: 相信许多前端开发者 ...
- 前端开发从入门到进阶完全指南,不用再迷茫前端要怎么学啦!
我经常会看到很多同学在学习前端的时候比较迷茫,不知道到底应该以怎样的学习路线来入门和进阶前端领域.每次遇到这种问题我也会分享一下自己的学习经验,但是发现这是一个问得非常多的一个共性问题. 作为程序员, ...
- CSS入门二、美化页面元素
零.文章目录 CSS入门二.美化页面元素 1.字体属性 CSS Fonts (字体)属性用于定义字体系列.大小.粗细.和文字样式(如斜体) (1)字体系列font-family font-family ...
- 【区块链 | 前端】前端开发人员入门区块链的最佳实践
前端开发人员入门区块链的最佳实践 一. 建立信仰 从技术入门一个行业通常是漫无目的,个人认为正确的入行区块链的方式是去了解他的背景,是去建立自己信仰的,尤其身处一个刚起步就被扼杀的行业,我们每个人都是 ...
- 迷你MVVM框架 avalonjs 入门教程(司徒正美)
迷你MVVM框架 avalonjs 入门教程 关于AvalonJs 开始的例子 扫描 视图模型 数据模型 绑定属性与动态模板 作用域绑定(ms-controller, ms-important) 模板 ...
- 前端的Docker入门与实践
前端的Docker入门与实践 感谢 & 参考 本文内容还是相对很浅的,Docker中关于分布式,集群的内容没有涉及,所以本文推荐前端同学看一看,后端同学就不推荐了.本文中所有命令都是针对Ubu ...
- 总结:前端开发从入门到高薪中文指南.pdf
提到前端工程师,很多人的第一反应都是:那个工资高,门槛低的职业.没错,也正因如此,越来越多的人开始投入前端岗位. 可是有些人似乎不太了解前端岗位为何如此高薪,认为自己看了些教程,读了几本书,会用HTM ...
- AI 绘画神器 Midjourney入门教程,超详细
AI 绘画神器 Midjourney入门教程,超详细 一.介绍 最近大火的AI绘画工具"Midjourney"大家想必已经听过他的大名了. 那些惊掉下巴的图片,看似不可能,又特别真 ...
最新文章
- Java项目:小蜜蜂扩音器网上商城系统(java+JSP+Servlet+JDBC+Ajax+mysql)
- 去年领了163亿薪资的马斯克,刚推出智能召唤功能就被吐槽:遇到人开的车就蒙圈...
- SSH连接远程服务器,本地known_hosts文件记录了什么
- 【2017-05-19】WebForm复合控件、用DropDownList实现时间日期选择。
- Tensorflow中使用tfrecord,队列方式读取数据
- Uncaught (in promise) Error: Avoided redundant navigation to current location: “/index“. 解决方法
- CSDN博客 不登录不能复制粘贴
- qq邮箱服务器地址ip地址,如何查询对方QQ邮箱的ip地址?QQ邮箱ip地址的查询方法...
- oracle财务模块培训,ORACLE财务管理系统培训手册之现金模块
- draft.js编辑器开发笔记
- 记录使用浏览器扫码功能(pad 笔记本 手机)
- 应聘总经理的答卷,供大家打分!(一)
- 但行好事 莫问前程(四月)
- 【报告分享】快手男性消费用户洞察-36Kr磁力引擎(附下载)
- Java 练习之回合制游戏,练习接口,随机,数组,可变参数
- 我爱赚钱吧:你也可以通过建网站赚钱的④
- 最简洁的Git的基本操作
- C语言核心知识点Day05
- STM32 输入捕获 测量频率 PWM占空比
- 苹果手机home键在哪里_苹果手机为什么没有返回键? 原来隐藏着更好的方法, 涨知识了...
热门文章
- zabbix远程mysql_zabbix action 执行远程命令
- java web随机抽取_java实现随机抽取奖品工具类
- vb6 combo根据index显示选项内容_按指定次数重复显示,两种方法随意选
- c语言简单的模拟坐标,C语言模拟实现简单扫雷游戏
- Java实验实现一个circle类,java实验报告-类的定义.doc
- amd r5 m330 linux驱动下载,AMDAMD Radeon(TM) R5 M330 14.502.1014.0000显卡驱动官方正式版下载,适用于win8.1-64-驱动精灵...
- 怎么往integer型数组添加数据_面试中经常问到的Redis七种数据类型,你都真正了解吗?...
- JAVA15.JDK15.6 Record二次预览特性
- 安装php遇到的问题
- JavaScript进阶2-学习笔记