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:
路由demo实战源码：https://github.com/SorrowX/resume_demo
demo效果： https://sorrowx.github.io/resume_demo/
Omi框架学习之旅 - 插件机制之omi-router及原理说明的更多相关文章
- Omi框架学习之旅 - 插件机制之omi-finger 及原理说明
以前那篇我写的alloyfinger源码解读那篇帖子,就说过这是一个很好用的手势库,hammer能做的,他都能做到, 而且源码只有350来行代码,很容易看懂. 那么怎么把这么好的库作为omi库的一个插 ...
- Omi框架学习之旅 - 插件机制之omi-touch 及原理说明
这个插件也能做好多好多的事,比如上拉下拉加载数据,轮播,等一切和运动有关的特效. 具体看我的allowTouch这篇博客,掌握了其用法,在来看它是怎么和omi结合的.就会很简单. 当然使用起来也比较方 ...
- Omi框架学习之旅 - 插件机制之omi-transform及原理说明
给omi-transform插件做个笔记,使用起来也很爽. transform.js这个库,一直想写一篇帖子的,可是,数学不好,三维矩阵和二位矩阵理解的不好,所以迟迟没写了, 这也是一个神库,反正我很 ...
- Omi框架学习之旅 - 之开篇扯蛋
说实话, 我也不知道Omi是干啥的, 只因此框架是alloyTeam出的, dntzhang写的, 也有其他腾讯大神参与了, 还有一些其他贡献者, 以上我也不太清楚, 当我胡说八嘎. 因其写法有人说好 ...
- Omi框架学习之旅 - Hello World 及原理说明
学什么东西都从hello world开始, 我也不知道为啥. 恩,先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. hello world - demo: class Hello e ...
- Omi框架学习之旅 - 获取DOM节点 及原理说明
虽然绝大部分情况下,开发者不需要去查找获取DOM,但是还是有需要获取DOM的场景,所以Omi提供了方便获取DOM节点的方式. 这是官网的话,但是我一直都需要获取dom,对dom操作,所以omi提供的获 ...
- Omi框架学习之旅 - 生命周期 及原理说明
生命周期 name avatars company constructor 构造函数 new的时候 install 初始化安装,这可以拿到用户传进的data进行处理 实例化 installed 安装完 ...
- Omi框架学习之旅 - 通过omi-id来实现组件通讯 及原理说明
这个demo是通过omi-id来获取子类的实例,然后更改data属性,之后updata一下就好了. 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. class Hello ...
- Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明
组件通讯不是讲完了吗(上帝模式还没讲哈),怎么又多了种方式啊. 你484傻,多一种选择不好吗? 其实这个不属于组件通讯啦,只是当父组件实例安装和渲染完毕后,可以执行installed这个方法(默认是空 ...
随机推荐
- wangEditor-基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费(2)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用 Java 8 语言功能
Android Studio 3.0 及以上版本支持所有 Java 7 语言功能,以及部分 Java 8 语言功能(具体因平台版本而异). 本页介绍您可以使用的 Java 8 语言功能.如何正确配置项 ...
- 测试思想-集成测试 关于接口测试 Part1
关于接口测试 by:授客 QQ:1033553122 接口定义 接口泛指实体把自己提供给外界的一种抽象化物,用以由内部操作分离出外部沟通方法,使其能被修改内部而不影响外界其他实体与其交互的方式. 举例 ...
- (网页)javascript如何用递归写一个简单的树形结构
转自博客园: 现在有一个数据,需要你渲染出对应的列表出来: var data = [ {"id":1}, {"id":2}, {"id":3 ...
- iframe在iphone中滚动条无效
在iphone(ios11)中(其他苹果设备未尝试),不论是在微信的浏览器中,还是在其他浏览器中,iframe的滚动条怎么设置都没有效果,页面内容都无法进行滚动; 解决方法: 将iframe包裹在di ...
- （转载）Oracle 树操作(select…start with…connect by…prior)
转载地址:https://www.cnblogs.com/linjiqin/p/3152674.html 备注:如有侵权,请立即联系删除. oracle树查询的最重要的就是select…start w ...
- ALSA声卡驱动的DAPM（一）-DPAM详解
最近使用tinymix 调试相应的音频通道,但是一直不知道音频通道的原理是什么.所以百度了一下,百度结果是与DPAM有关. 一.DAPM简介: DAPM是Dynamic Audio Power Man ...
- 使用Tampermonkey(油猴) 插件，重新实现了，百度搜索热点过滤功能
昨天晚上,花了点时间学习了Chrome插件的制作方法,并书写了<Chrome 百度搜索热点过滤插件 - 开源软件>这一文章,简单地介绍自己实现的百度搜索热点过滤神器的原理和使用方式,并进行 ...
- oracle语句insert into select如何加后续插入条件
oracle语句insert into select如何加后续插入条件 2014-01-21 10:48匿名 分类:其他编程语言 | 浏览 2746 次 oracle中有批量插入语句insert i ...
- 控件_TimePicker
import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view ...