xinglie.github.io
xinglie.github.io copied to clipboard
xinglie
Magix中的微前端实践
微前端
微前端主要是借鉴后端微服务的概念。简单地说，就是将一个巨无霸（Monolith）的前端工程拆分成一个一个的小工程。别小看这些小工程，它们也是“麻雀虽小，五脏俱全”，完全具备独立的开发、运行能力。整个系统就将由这些小工程协同合作，实现所有页面的展示与交互。
规则
一、充分使用浏览器原生方案
- 如果有
dom操作，请直接使用浏览器原生的api，不要引用jQuery，也不要自己去写简版的jQuery lite之类的，没必要。
lastNode.classList.add('@game.css:succ');
- 加载器使用浏览器提供的
import即可。
import Frontend from 'https://xinglie.github.io/frontend/build/fe.js';
let FE_ID = Magix.guid('_fe_');
Frontend.config(FE_ID, {
logo: 0,
hash: 0,
scrollId: FE_ID
});
Frontend.boot();
- 每个项目需要的第三方类库在自己项目中加载，项目与项目之间不共享这些模块。如果共享这些模块，就需要考虑如何共享，如何升级。从单一项目出发来讲，这样的方式并不利于开发和维护，越内聚越少与外界有关联越好。所以即使某些模块重复加载也未尝不可。
- 项目中，不再使用
reset.css这样的样式文件，项目中的样式选择器一定要拒绝标签选择器。reset.css放在入口文件中统一提供
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link type="image/x-icon" href="./icon.png" rel="shortcut icon">
<title>Loading</title>
<style>body,ul{padding:0;margin:0}ul{list-style-type:none}body{font:14px/1.5 'helvetica neue',arial,'hiragino sans gb',stheiti,'wenquanyi micro hei',sans-serif}@keyframes load{0%{width:0}100%{width:98%}}.outer{background:#e6e6e6;position:fixed;left:50%;top:50%;width:300px;margin:-20px 0 0 -150px;height:2px;}.inner{width:0%;background:#4d7fff;height:100%;animation:load 3s forwards;margin-bottom:-2px;}</style>
</head>
<body>
<div id="fe"><div class="outer"><div class="inner"></div></div></div>
<script type="module">import a from './src/fe.js';a.config('fe',{logo:1,hash:1});a.boot()</script>
</body>
</html>
实践
主项目文件
https://xinglie.github.io/
被加载的第三方
https://xinglie.github.io/frontend/
