SPA管理框架 Miox 教程

HTML5 herman 32浏览 0评论

Miox 是一个SPA管理框架。根据 github 上开源信息显示,应该是来自51信用卡团队的开源产品。本文介绍 Miox 的使用教程。

在经典的网页开发中,浏览器创建和管理一系列网页生命周期活动,如会话历史,页面创建,丢弃,页面展示,页面隐藏等,开发人员可以在这些活动上处理自己的逻辑。

miox

在SPA应用程序中,开发人员必须自己处理所有这些事件,或者由一个处理这些事件的框架来处理。Miox是另一个框架与他们交易。

  • Miox特别的地方在于它支持任何渲染核心,这意味着与Miox开发人员可以同时将Miox引入到他们的项目中,并留下他最喜欢的反应或vue。
  • Miox专注于作为一个SPA运行时间,具有如此有限的小目标,它开发了能够轻松集成最基本的技术,包括redux / vuex,SSR等。

到目前为止,51信用卡几乎所有的网络前端项目都是在PC和移动端都使用Miox作为SPA框架,这意味着Miox已经在生产中得到了广泛的使用和测试。

Miox的特点

  • 轻量:空项目打包体积170K+,Miox仅打包体积40K+,轻量的体积大小完成更多的逻辑。
  • 高效:基于尽可能最大限度复用页面的原则,采用缓存算法优化性能。
  • 稳定:代码覆盖率达到90%,基本覆盖所有场景,稳定项目运行。
  • 强大:Miox提供强大的插件支持,满足用户多变的需求。方便的扩展API接口,随心所欲驾驭整个项目。

下面我们看看Miox的命令行安装,创建,应用安装,运行案例,和构建案例的命令。

npm install miox-cli -g
miox create
npm install
npm run dev
npm run build

相关代码可以从https://github.com/51nb/miox上克隆。

基本用法

index.js 是我们项目的入口。加入如下代码:

import Miox from 'miox';
import Engine from 'miox-react';
import router from './route';

const app = new Miox({...options});
app.install(Engine);
app.use(router.routes());
export default app.listen();

route.js:路由文件。

import Router from 'miox-router';
import Page from './page.jsx';

const route = new Router();
export default route;
route.patch('/', async ctx => {
  await ctx.render(Page);
});

page.jsx:呈现webview文件。

import React from 'react';
import ReactDOM from 'react-dom';
export default class ExamplePage extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

运行前面的命令,将呈现“Hello World!” 到页面上的一个容器中。

Miox安装

Miox作为npm上的miox软件包提供

我们提供一个脚手架来促进项目的安装。一旦项目安装完毕,您就可以开始编写业务逻辑了。

安装miox-cli创建项目:

npm install -g miox-cli

然后运行miox create创建一个新项目的代码:

miox create

更多学习资料,请参考官方文档:https://github.com/51nb/miox

本文原文出处:业余草: » SPA管理框架 Miox 教程