avalon学习笔记（五）

最新推荐文章于 2018-04-23 14:24:00 发布

混事儿

最新推荐文章于 2018-04-23 14:24:00 发布

阅读量1.8k

点赞数

分类专栏：学习笔记 avalonjs 文章标签： avalonjs

本文链接：https://blog.csdn.net/u014761456/article/details/42475771

版权

学习笔记同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

avalonjs

5 篇文章 0 订阅

订阅专栏

五，搭建一个工程环境

到此，基础的理论都搞得差不多了，是时候做个实际的例子

换个教程，根据《avalon学习教程》系列--《1、引入avalon》建立一个新项目。

我用的vs2013community版

首先open->web site，指向一个空目录

新建两个folder，一个modules，一个reference。

Modules里存放网站的一个一个模块，reference里面放上我们要用到的第三方库，比如avalon，还有常用的requirejs，jquery等等

按照例子里说的，用到了avalon（我打算用modern版本），requirejs（及其插件domready，css，text），jquery

因为用到了require和domready，avalon里自带的就可以删掉了。

因为用的是modern版，需要仿照shim版改一下

从AMD加载器开始，都注掉，然后把shim里的end开始的代码拷过来。

然后把文件名里的modern去掉，还叫avalon

然后是作为入口的两个文件

Index.html

<!DOCTYPE html>
<html>
<head>
    <title>avalon练习</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <script src="Reference/require/require.js" data-main="main.js"></script>
    <style>
        .ms-controller {
            visibility: hidden;
        }
    </style>

</head>
<body ms-controller="root">
    <div>{{header | html}}</div>
    <div ms-include-src="page"></div>
    <div>{{footer}}</div>
</body>
</html>

有几个东西还是值得注意下

首先是引到了requirejs，data-main是requirejs的属性，指明了最外层的js

然后，把body分成了三个部分，分别绑定了header和footer，header还是按html的格式来解析。

中间用了一个叫page的模板

Style应该是用来保证画面不闪出绑定前的内容，这个入门教程里有提。

然后是main.js

require.config({//第一块，配置
    baseUrl: '',
    paths: {
        jquery: 'Reference/jquery/jquery-2.1.3',
        avalon: "Reference/avalon/avalon",//必须修改源码，禁用自带加载器，或直接删提AMD加载器模块
        text: 'Reference/require/text',
        domReady: 'Reference/require/domReady',
        css: 'Reference/require/css'
    },
    priority: ['text', 'css'],
    shim: {
        jquery: {
            exports: "jQuery"
        },
        avalon: {
            exports: "avalon"
        }
    }
});


require(['avalon', "domReady!"], function () {//第二块，添加根VM（处理共用部分）
    avalon.log("加载avalon完毕，开始构建根VM与加载其他模块")
    avalon.templateCache.empty = " "
    avalon.define("root",function(vm){
        vm.header= "这是根模块，用于放置其他模块都共用的东西，比如<b>用户名</b>什么的",
        vm.footer= "页脚消息",
        vm.page= "empty",
        vm.page2="empty"
    })
    avalon.scan(document.body)

    require(['./modules/testModule/test'], function () {//第三块，加载其他模块
        avalon.log("加载其他完毕")
    });

});

主要都是requirejs的格式，这个需要看requirejs的文档，大概就是给每个js设定一个名字，然后直接在js里引用名字就可以了

第一块，是requirejs的配置

第二块，就是root的viewmodel定义

第三块，是加载别的模块了，我这里起名字叫testModule

每个模块应该至少包括一个html和一个js，所以新建两个文件，一个test.html，一个test.js，放到testModule文件夹下

test.html

<div ms-controller="testVM">
    <input ms-duplex="value" />{{value}}
</div>

test.js

define(["avalon", "text!./test.html"], function (avalon, test) {

    avalon.templateCache.test = test
    avalon.define("testVM",function(vm){
        vm.value= "test text"
    })
    avalon.vmodels.root.page = "test"
})

avalon.templateCache.test = test和avalon.vmodels.root.page = "test"这两句话很关键。

avalon.templateCache.test = test是说把test.html加入到templateCache里，并定义个名字叫test

avalon.vmodels.root.page = "test"是说把一开始在main.js里定义的root的page属性改成刚才定义的test。

这样，test.html里的内容就可以在index的第二个div里显示出来了。

Ok，到此为止，用avalon结合requirejs就生成了一个简单的网站开发工程环境

可喜可贺，可喜可贺

混事儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
avalon学习笔记（五）

五，搭建一个工程环境到此，基础的理论都搞得差不多了，是时候做个实际的例子换个教程，根据《avalon学习教程》系列--《1、引入avalon》建立一个新项目。我用的vs2013community版首先open->web site，指向一个空目录新建两个folder，一个modules，一个reference。Modules里存放网站的一个一个模块，reference里面
复制链接

扫一扫

专栏目录