这是上一篇《webpack打包avalon＋oniui+jquery》的姐妹篇，avalon 的高级应用篇。大家要知道，现在最流行的网页架构就是SPA，SPA能提高用户体验。用户许多数据都在保存到本地，第二次跳回此子页时，不用重新远程请求数据与页面。

avalon的mmRouter吸收了 backbone.History与angular路由器模块的优点，简单易用，性能优良（router匹配方法使用字典树实现，比纯正则匹配快许多）。

我们沿用上一篇的目录，在dev下建立一个mmRouter目录，将mmRouter用到的两个模板引进来

这次我们添加了两个页面，就需要添加两个入口JS文件。webpack里面也做了相应调整，并且使用webpack.optimize.CommonsChunkPlugin将共用部分抽取出来

var webpack = require("webpack");

var path = require("path");

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {

    entry: {

        index: './dev/index', //我们开发时的入口文件

        router: './dev/router',

        router2: './dev/router2'

    },

    output: {

        path: path.join(__dirname, "dist"),

        filename: "[name].js"}, //页面引用的文件

    module: {

        loaders: [

            {test: /\.css$/, loader: 'style-loader!css-loader'}

        ],

        preLoaders: [

            {test: /\.js$/, loader: "amdcss-loader"}

        ]

    },

    plugins: [commonsPlugin],

    resolve: {

        extensions: ['.js', "", ".css"],

        alias: {

            jquery: path.join(__dirname, 'dev/jquery/jquery.js'),

            avalon: path.join(__dirname, 'dev/avalon/avalon.shim'), //在正常情况下我们以CommonJS风格引用avalon,以require('avalon')

            '../avalon': path.join(__dirname, 'dev/avalon/avalon.js')//由于oniui都以是../avalon来引用avalon的，需要在这里进行别名

        }

    }

}

我们来看第一个页面，是做一个切换卡。当我们点击链接时，改变地址栏，然后mmHistory被监听到，通知mmRouter在所有路由规则中进行匹配，匹配到了，就进入对应回调，修改VM中的对应属性，进行切换！

var avalon = require("avalon")

require("./mmRouter/mmRouter")

var vm = avalon.define({

    $id: "test",

    tabs: [

        {trigger: "切换卡1", panel: "面板1"},

        {trigger: "切换卡2", panel: "面板2"},

        {trigger: "切换卡3", panel: "面板3"}

    ],

    currentIndex: 1

});

avalon.router.get("/:id", function (a) {

    avalon.log(typeof a, a, "这在回调里")

    vm.currentIndex = a

});

avalon.history.start();

avalon.scan(0, vm);

setTimeout(function(){

    avalon.router.navigate("1")//默认切换到中间项

},400)

router.html


<!DOCTYPE html>

<html>

    <head>

        <title>mmRouter组件</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="dist/common.js"></script>

        <script src="dist/router.js"></script>

        <style>

            .tabs{

                list-style: none;

                margin: 0px;

                padding: 0px;

            }

            .tabs li{

                float: left;

                display: inline-block;

                width:200px;

                height:30px;

                line-height: 30px;

                text-align: center;

                background: green;

                border-left: 1px dashed darkkhaki;

            }

            .tabs li a{

                cursor: pointer;

                text-decoration: none;

                display: inline-block;

                height: 100%;

                width: 100%;

                color: #999;

            }

            .tabs li.active{

                background: goldenrod;

            }

            .tabs li.active a{

                color:#fff;

            }

            .tabs li:first-child{

                border-left: 0 none;

            }

            .tabs:after{

                content: "";

                clear: both;

                display: table;

            }

            .panel{

                width:604px;

                height:120px;

                background: floralwhite;

            }

        </style>

    </head>

    <body ms-controller="test">

        <h1>mmRouter综合实例一: avalon.get</h1>

        <ul class="tabs">

            <li ms-repeat="tabs" ms-class="active:$index == currentIndex">

                <a ms-href="#!/{{$index}}">{{el.trigger}}</a>

            </li>

        </ul>

        <div class="panel" ms-repeat="tabs" ms-visible="$index == currentIndex">{{el.panel}}</div>

    </body>

</html>

再看另一个页面

var avalon = require("avalon")

require("./mmRouter/mmRouter")

var vm = avalon.define({

    $id: "test",

    path: ""

});

avalon.router.get("/:id/*path", function (a) {

    avalon.log(typeof a, a, "math more")

    vm.path = this.path

});

avalon.router.get("/:id", function (a) {

    avalon.log(typeof a, a, "这在回调里")

    vm.path = this.path

});

avalon.history.start();

avalon.scan(0, vm);

router2.html

<!DOCTYPE html>

<html>

    <head>

        <title>mmRouter组件</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width">

        <script src="dist/common.js"></script>

        <script src="dist/router2.js"></script>

    </head>

    <body ms-controller="test">

        <ul>

            <li><a href="#!/aaa">aaa</a></li>

            <li><a href="#!/bbb">bbb</a></li>

            <li><a href="#!/ccc">ccc</a></li>

            <li><a href="#!/ddd/222">ddd</a></li>

            <li><a href="#!/eee">eee</a></li>

        </ul>

        <h1>{{path}}</h1>

    </body>

</html>

然后运行webpack命令


webpack打包avalon＋mmRouter的更多相关文章

  1. webpack打包avalon

    webpack打包avalon+oniui+jquery 随着avalon的发展壮大,我根据CSDN的统计数字,中国前端大概有1%的人在使用avalon了. avalon的最大优势是能兼容IE6,并且 ...

  2. webpack打包avalon＋oniui+jquery

    随着avalon的发展壮大,我根据CSDN的统计数字,中国前端大概有1%的人在使用avalon了. avalon的最大优势是能兼容IE6,并且其API是非常稳定,只是在1.3.7 对ms-duplex ...

  3. 使用webpack打包ThinkPHP的资源文件

    使用webpack打包ThinkPHP的资源文件 利用自己的空余时间一直在维护http://www.wx2share.com这个小网站,全是一个人在弄,由于只租得起虚拟空间,所以后台采用了简单方便的T ...

  4. 【原】使用webpack打包的后，公共请求路径的配置问题

    在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时,我们就这样使用 这种 ...

  5. Webpack打包进阶

    说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...

  6. 基于ES6模块标准通过webpack打包HTM5项目

    本篇主要演示通过webpack打包phaser项目,webpack安装方法在此处就不一一赘述了 经常用phaser来写html5游戏的朋友可能会发现,当游戏场景比较多时,如果都写在一个js文件中那么将 ...

  7. webpack 打包成功，但是css不起作用

    问题: webpack 打包成功,但是css不起作用 问题分析/解决: 原因有以下几种 使用了webpack2的语法规则不正确; webpack2要求必须写-loader; 可能是只写了css-loa ...

  8. 14.如何解决使用webpack打包之后，font-awsome路径不对的问题，终极解决方法

    问题描述: 使用webpack打包vue项目,使用font-awsome字体,发现打包之后,font-awsome图标不显示,报错为路径不对 看了下打包的路径,的确路径不对,打包之后font-awso ...

  9. webpack学习--创建一个webpack打包流程

    创建一个webpack打包流程 首先安装webpack插件 mkdir webpack-demo && cd webpack-demo npm init -y npm install ...

随机推荐

  1. 第16课 右值引用（3）_std::forward与完美转发

    1. std::forward原型 template <typename T> T&& forward(typename std::remove_reference< ...

  2. 第11章 拾遗5：IPv6和IPv4共存技术（3）_NAT-PT技术【全书完】

    6.4 NAT-PT (1)NAT-PT和NAT的差别 ①NAT-PT(附带协议转换的网络地址转换)技术秉承NAT技术的思想,但在原理方面大有不同. ②NAT-PT和NAT本质的区别在于应用场合的不同 ...

  3. java synchronized 同步详解

    记下来,很重要. Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问同一个对象object中的这个synchron ...

  4. sqlserver默认的内存策略

    sqlserver默认的内存策略,如果内存足够大,没有限制的话,会把一次搜索结果都放在内存中,下次搜索如果数据没发生变化(数据库缓存依赖策略),那么直接在内存数据中搜索,而不重新加载数据.可以通过每次 ...

  5. oracle SQL语句取本周本月本年的数据

    --国内从周一到周日 国外是周日到周六 select to_char(sysdate-1,'D') from dual;--取国内的星期几 去掉减一取国外的星期 --取本周时间内的数据 ,)+) an ...

  6. oracle查看和替换含不可见字符(空白)

    select lengthb('1397256'), dump('1397256') from dual; select ascii('') from dual; ), '') from dua ...

  7. spring boot使用配置文件内容

    配置文件如下所示: server: port: 8081 context-path: /demo tag: 12 user: name1: mist-dev password: 123 然后可以通过以 ...

  8. code signing is required for product type 'Application' in SDK 'iOS 8.1' 错误分析以及解决方案

    在真机测试的时候往往会突然出现这样一个错误,code signing is required for product type 'Application' in SDK 'iOS 7.0'  ,就是说 ...

  9. lampp中的ftp使用介绍

    搭建完毕lampp 具体要求如下:使用Lampp的proftpd,开通多个FTP用户,并各分配一个目录,而且需要限制用户在自己的目录里面,可以自由读写. 操作步骤:第一步:设置ftp用户组,输入命令: ...

  10. 47.纯 CSS 创作一个蝴蝶标本展示框

    html,body{ margin:; padding:; } body{ height: 100vh; display: flex; justify-content: center; align-i ...