avalon学习笔记ui篇-如何将avalon默认的amd模型禁止，以及用require重写。

一、如何禁止avalon自带的amd模型

1、采用avalon.shim.js这个文件，这个文件删除了原本自带的amd模型，不需要手动删除，修改。

2、打开avalon.js这个文件，搜索avalon.config，将true改为false。

二，下载text.js和css.js

1、因为avalonUI依赖了html文件和css文件。

2、并且将text.js和css.js，在配置中预加载

1. priority:['text','css']

三、完整配置项

1. require.config({
2. //baseUrl:'',
3. paths:{
4. 'text':'../file/text',
5. 'css':'../file/css',
6. 'avalon':'../bower_components/avalon/avalon.shim',
7. 'datepickers':'../file/datepicker/avalon.datepicker',
8. 'notice':'../file/notice/avalon.notice'
9. },
10. priority:['text','css']
11. })
12. require(['../demo/datepicker/app/datepicker_demo'],function(){
14. })

四、目录结构

1、基本所有UI我都下载了下来，所以文件有点大，file中是所有avalonUI组件

五、html页面加载requirejs和data-main

1. <script data-main="../../main/datepicker" defer async="true" type="text/javascript" src="../../bower_components/requirejs/require.js"></script>

1、defer async="true"代表了异步加载，所以不用担心，渲染问题

六、具体文件书写datepicker_demo

1. define(['avalon','notice'],function(){
2. var model = avalon.define("noticeDemo", function(vm) {
3. vm.$bOpts = {
4. header: "提示信息title",
5. content: "提示信息content"
6. }
7. vm.changeHeader = function(id) {
8. var vmodel = avalon.vmodels[id];
9. vmodel.header = "new notice title"
10. }
11. vm.changeContent = function(id) {
12. var vmodel = avalon.vmodels[id];
13. vmodel.content = "new notice content, yeap !"
14. }
15. vm.toggleType = function(id) {
16. var typeArr = ["info", "success", "error"];
17. var noticeVM = avalon.vmodels[id];
18. var index = Math.floor(Math.random()*3);
19. noticeVM.type = typeArr[index];
20. }
21. vm.toggleNotice = function(id) {
22. var noticeVm = avalon.vmodels[id];
23. noticeVm.toggle = !noticeVm.toggle;
24. }
25. })
26. avalon.scan();
27. })

七，出现错误以及解决方法

1、问题

看到一片404报错很正常，UI组件依赖了很多东西，所以要一一对应目录，进行删减。

2、解决方法

打开对应的js文件，寻找到文件，修改为正确目录即可。

总结：我即将开始我个人完整开发前端的项目，以前都是老大带着我玩，现在要自己玩了，项目经理说要用require，其实我是想用seajs，唉，require的中文文档确实不怎样，我英文又不太好。问题蛮多的，也不太完善，项目结构混乱，待有空慢慢修改。

来自为知笔记(Wiz)