Omi框架学习之旅 - 插件机制之omi-router及原理说明

Posted 2020-09-09 Sorrow.X

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Omi框架学习之旅 - 插件机制之omi-router及原理说明相关的知识，希望对你有一定的参考价值。

先来看看官网的介绍吧：https://github.com/AlloyTeam/omi/tree/master/plugins/omi-router

其实我推荐直接看官网的介绍。我所写的，主要给个人做的笔记。也许看的get不到点吧。所以强烈看官网

文档：https://alloyteam.github.io/omi/website/docs-cn.html

github: https://github.com/AlloyTeam/omi

好了，该做笔记了。这次主要记录一下omi-router插件，关于路由，我想不用我多说，因为我也没怎么用其做个项目，实在惭愧。

我的个人理解是：

就是在同一个页面做多个页面的活。
代码量可能多了(基本要用模块化了),但是可以共享一些公用的js代码,或者其他html,css。
不同的组件可以根据hash值插入到指定dom中(omi是不同的组件然后实例化一个,然后omi.render一下就好了)。
hash值可以无刷新前进和后退，这样就做到了页面高速渲染不同的内容，无需等待空白新页面.

单页应用的好处可以直接看第一个链接。用过vue,react的我想都很清楚。只是我。。。

先看下demo吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>router2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        } 
    </style>
</head>
<body>
    <div id="app"></div>
    


    <script type="text/javascript" src="./src/omi11.js"></script>
    <script>
        Omi.OmiFinger.init();

        class Home extends Omi.Component {
            constructor(data) {
                super(data);
            }

            render() {
                return     `
                    <div>
                        Home
                    </div>
                `;
            }
        };

        Omi.tag(‘Home‘, Home);

        class About extends Omi.Component {
            constructor(data) {
                super(data);
            }

            render() {
                return     `
                    <div>
                        About
                    </div>
                `;
            }
        };

        Omi.tag(‘About‘, About);

        class UserList extends Omi.Component {
            constructor(data) {
                super(data);
            }

            render() {

                return `
                    <ul>
                        <li>
                            <a omi-router to="/user/omi/category/html" href="">omi</a>
                        </li>
                        <li>
                            <a omi-router to="/user/dnt/category/css" href="">dnt</a>
                        </li>
                        <li>
                            <a omi-router to="/user/sorrowx/category/js" href="">sorrowx</a>
                        </li>
                    </ul>
                `;
            }
        };

        Omi.tag(‘UserList‘, UserList);

        class User extends Omi.Component {
            constructor(data) {
                super(data);
            }

            beforeRender() {
                this.data.name = this.$store.$route.params.sName;
                this.data.category = this.$store.$route.params.sType;
                var info = this.queryInfo(this.data.name);
                this.data.age = info.age;
                this.data.sex = info.sex;
            }

            queryInfo(name) {
                this.mockData = {
                    omi: {age: 1, sex: ‘女‘},
                    dnt: {age: 12, sex: ‘男‘},
                    sorrowx: {age: 13, sex: ‘男‘},
                };

                return this.mockData[name];
            }

            back() {
                history.back();
            }

            render() {
                return `
                    <div>
                        <button omi-finger tap="back">back</button>
                        <ul>
                            <li>name: {{name}}</li>
                            <li>age: {{age}}</li>
                            <li>sex: {{sex}}</li>
                            <li>category: {{category}}</li>
                        </ul>
                    </div>
                `;
            }
        };

        Omi.tag(‘User‘, User);

        class App extends Omi.Component {
            constructor(data) {
                super(data);
            }

            install() {
                Omi.OmiRouter.init({
                    routes: [
                        { path: ‘/‘, component: Home },
                        { path: ‘/about‘, component: About },
                        { path: ‘/user-list‘, component: UserList },
                        { path: ‘/user/:sName/category/:sType‘, component: User }
                    ],
                    renderTo: "#view",
                    defaultRoute: ‘/about‘,    // 默认
                    root: this
                });
            }

            style() {
                return `
                    ul{
                        border-bottom: 1px solid #ccc;
                        padding-bottom:5px;
                    }
                    li{
                        display:inline-block;
                    }
                    ul li a {
                        text-decoration: none;
                    }
                    #view li{
                        display:block;
                    }
                    #view ul{
                        border-width: 0px;
                    }
                `;
            }

            render() {
                return `
                    <div>
                        <ul>
                            <li>
                                <a omi-router to="/" href="">Home</a>
                            </li>
                            <li>
                                <a omi-router to="/about" href="">About</a>
                            </li>
                            <li>
                                <a omi-router to="/user-list" href="">用戶</a>
                            </li>
                        </ul>
                        <div id="view"></div>
                    </div>
                `;
            }
        };

        var app = new App();
        Omi.render(app, ‘#app‘);
        
    </script>
</body>
</html>

还是直接运行一把，看下结果吧，

http://wx.indoorun.com/indoorun/wxtest/touch/router3.html#/user-list

在手机上点击，或者浏览器f12进入模拟器查看，因为使用了tap事件。

至于omi怎么实现的？

答：我就大概的说一下其实现原理吧，快下班了, 源码会贴在下面的。

1. 入口： Omi.OmiRouter.init（option）;

option的参数如下： {

routes：[{}， {}， {}...], // {path:‘路由映射的hash‘， component: ‘组件,需要实例化的组件然后渲染到指定dom‘}

renderTo: ‘#id‘, // 渲染到哪个dom去啊，对吧

defaultRoute: ‘默认路由hash‘， // 打开链接时不同的用户看到的结果一样撒

root: this // 把组件实例顺便传进去

}

2. 当我们点击链接时，我们需要触发了，入口如下

            render() {
                return `
                    <div>
                        <ul>
                            <li>
                                <a omi-router to="/" href="">Home</a>
                            </li>
                            <li>
                                <a omi-router to="/about" href="">About</a>
                            </li>
                            <li>
                                <a omi-router to="/user-list" href="">用戶</a>
                            </li>
                        </ul>
                        <div id="view"></div>
                    </div>
                `;
            }

每个a标签都加了omi-router属性，说明被omi-router插件的一下这个方法注册了事件，代码如下

            Omi.extendPlugin(‘omi-router‘, function (dom, instance) {    // 给Omi.plugins 添加 omi-router 插件
                dom.setAttribute(‘href‘, ‘javascript:void(0)‘);

                dom.addEventListener(‘click‘, function () {
                    hashMapping(dom.getAttribute(‘to‘));
                }, false);
            });

里面的匿名函数，每当点击有omi-router属性的标签便会触发这个匿名函数。调用了这个关键的函数hashMapping(dom.getAttribute(‘to‘));，代码如下

        function hashMapping(to) {    // to: 路径地址
            routerOption.routes.every(function (route) {    // route: 路由对象
                var toArr = to.match(route.reg);    // to匹配route.reg正则返回匹配到的结果数组
                if (toArr) {
                    var pathArr = route.path.match(route.reg);    // route.path匹配route.reg正则返回匹配到的结果数组
                    params = getParams(toArr, pathArr);
                    renderTo = route.renderTo || routerOption.renderTo;    // 渲染到哪去(显然每个路由对象也可以有renderTo属性)
                    store = route.store || routerOption.store;    // 数据存储
                    Component = route.component;    // route的组件
                    pushState(to);
                    return false;    // 只有匹配到结果后到达这里就跳出函数啦
                };
                return true;    // 否则继续遍历
            });
        };

to: 路径地址指的是标签中的to属性的值，然后和配置选项中的routes数组，进行对比。主要获取store,Component,params的数值，然后pushState()方法会改变浏览器

中的url地址，当然也给window注册了一个hashchange事件，所以当url改变时，会触发该事件，如下

        window.addEventListener(‘hashchange‘, function() {    // hashchange事件, url改变就触发
            hashMapping(window.location.hash.replace(‘#‘,‘‘), renderTo);
            render();
        }, false);

这里的render()方法比较重要哦，组件实例化，和渲染都在里面执行，如果已经有了对应的实例，还得从omi的instances删掉，在重新实例化一个，代码如下

        function render(){
            if(store){
                store.$route = { };
                store.$route.params = params;
            }else{
                store = {
                    methods:{
                        install: function() {
                            this.$route = { };
                            this.$route.params = params;
                        }
                    }
                };
            };
            if(preRenderTo === renderTo&&preInstance){
                deleteInstance(preInstance);
            };
            var instance = new Component();    // 组件类
            Omi.render(instance, renderTo, {
                store: store
            });
            preInstance = instance;
            preRenderTo = renderTo;
        };

从omi的instances移除实例的代码如下：

        function deleteInstance(instance) {    // 删除存在的实例
            for (var key in Omi.instances) {
                if(Omi.instances.hasOwnProperty(key)){
                    Omi.instances[key].id = instance.id;
                    delete  Omi.instances[key];
                    instance = null;
                    break;
                };
            };
        };

主要代码基本讲完了。

ps:

路由，感觉还得自己写写小例子，不然玩的不6啊。

以上是关于Omi框架学习之旅 - 插件机制之omi-router及原理说明的主要内容，如果未能解决你的问题，请参考以下文章

Omi框架学习之旅 - 组件通讯(data-*通讯) 及原理说明

Omi框架学习之旅 - 组件通讯(data通讯) 及原理说明

打怪升级之小白的大数据之旅(五十)＜MapReduce框架原理二:shuffle＞

Java框架之MyBatis 07-动态SQL-缓存机制-逆向工程-分页插件

打怪升级之小白的大数据之旅(五十一)＜MapReduce框架原理三:OutputFormat&Join＞

插件化框架解读之Android 资源加载机制详解