前端架构 IMVC 实时热更新模式

àì夳堔傛蜴生んèń 2022-06-18 02:44 95阅读 0赞

Backbone 框架的逐渐衰退，前端 MVC 发展缓慢，有被 MVVM/Flux 所取代的趋势

React/Vue 和 Redux/Vuex 分别在 MVC 中的 View 层和 Model 层大施展。

IMVC 代码在服务端和浏览器都可运行，单页面和多页页面应用都适用，可以这两种模式之间进行配置项自由切换。配合 Node.js、Webpack、Babel 完成项目开发

IMVC 的工程化设施：

*  node.js 运行时，npm 包管理
 *  expressjs 服务端框架
 *  babel 编译 ES2015+ 代码到 ES5
 *  webpack 打包和压缩源码
 *  standard.js 检查代码规范
 *  prettier.js + git-hook 代码自动美化排版
 *  mocha 单元测试

实现代码实时热更新：

目标：一个命令启动开发环境，修改代码不需重启进程   
做法：一个 webpack 服务于 client，另一个 webpack 服务于 server   
client: express + webpack-dev-middleware   
server: memory-fs + webpack + vm-module

CSS 按需加载：

根源：浏览器只在 dom-ready 之前会等待 css 资源加载完成后再渲染页面   
描述：当单页跳转到另一个 url，css 资源还没加载完，页面显示成混乱布局   
处理：将 css 视为预加载的 ajax 数据，以 style 标签的形式按需引入   
策略：用 context 缓存预加载数据，避免重复加载

代码切割、按需加载：

*  不使用 webpack-only 的语法 require.ensure
 *  在浏览器里 require 被编译为加载函数，异步加载
 *  在 node.js 里 require 是同步加载

命令行任务：

*  使用 npm-scripts 在 package.json 里完成 git、webpack、test、prettier 等任务的串并联逻辑
 *  npm start 启动完整的开发环境
 *  npm run start:client 启动不带服务端渲染的开发环境
 *  npm run build 启动自动化编译，构建与压缩部署的任务
 *  npm run build:show-prod 用 webpack-bundle-analyzer 可视化查看编译结果

redux 的简化版 relite

简化版的 redux，叫做 relite。

*  actionType, actionCreator, reducer 合并
 *  自动 bindActionCreators，内置异步 action 的支持

IMVC 的技术选型

*  Router: create-app = history + path-to-regexp
 *  View: React = renderToDOM || renderToString
 *  Model: relite = redux-like library
 *  Ajax: isomorphic-fetch

IMVC 的目标是框架层面

*  用法简单，初学者也能快速上手
 *  只维护一套 ES2015+ 的代码
 *  既是单页应用，又是多页应用（SPA + SSR）
 *  可以部署到任意发布路径 (Basename/RootPath)
 *  一条命令启动完备的开发环境
 *  一条命令完成打包/部署过程