摘要：參照組件單一職責(zé)，單個(gè)模塊文件僅承擔(dān)有限職責(zé)，。路由聲明與組件聲明在統(tǒng)一文件內(nèi)部聲明。組件替換約定服務(wù)在內(nèi)部屬于單例，實(shí)例聲明通過(guò)的方式，聲明服務(wù)。指令熱替換同樣采用較為粗放的容器定位策略，通過(guò)路由模板替換實(shí)現(xiàn)。
ng-hot-loader
前言
webpack-dev-server自帶支持模塊熱替換特性(HMR)，不刷新頁(yè)面實(shí)現(xiàn)代碼局部更新，使用HMR可以大幅提升開(kāi)發(fā)效率。
實(shí)現(xiàn)目標(biāo)
[x] 樣式熱替換 -- style-loader本身即支持HMR，建議依賴(lài)庫(kù)css直接解析出文件link，降低熱替換成本
[x] 模板熱替換
[x] 服務(wù)熱替換
[x] 過(guò)濾器熱替換 -- expression 變動(dòng)才會(huì)重新實(shí)例化過(guò)濾器
[x] 指令熱替換 -- 目前low level的支持
[x] 控制器熱替換
實(shí)現(xiàn)策略
合理劃分angular模塊，將angular模塊劃分為主模塊，業(yè)務(wù)模塊。路由, 業(yè)務(wù)服務(wù)，全局服務(wù)合理分散到主模塊與業(yè)務(wù)模塊中。參照angular組件單一職責(zé)，單個(gè)模塊(文件)僅承擔(dān)有限職責(zé)，。
HMR關(guān)鍵核心為組件聲明 => 組件定位 => 組件更新。
文件命名建議按照官方styleguide
關(guān)聯(lián)filter, service, directive在單一模塊中聲明。
關(guān)鍵核心依舊在模塊，路由聲明。路由聲明中，模板與控制器統(tǒng)一采用ES6引入方案，template: templateVariable，控制器聲明統(tǒng)一采用pure function的方式，而不是字符串的方式。
路由聲明與組件聲明在*.module.js統(tǒng)一文件內(nèi)部聲明。
控制器暫時(shí)不考慮通過(guò)$controllerProvider注冊(cè)的類(lèi)型。
路由不考慮熱更新。
所有模板文件，都通過(guò)ES6 default import導(dǎo)入，JS文件建議全部通過(guò)destruct的方式引用。
/**
* @description - application level router config.
* @author bornkiller
*/
"use strict";
// layout module dependency
import layoutAuthorizeTemplate from "./authority/authorize.html";
import { AuthorizeController } from "./authority/authorize.controller";
import layoutNavbarTemplate from "./flow/navbar.html";
import layoutSidebarTemplate from "./flow/sidebar.html";
import layoutCoreTemplate from "./flow/core.html";
import { SidebarController } from "./flow/sidebar.controller";
// layout module name
const LAYOUT_MODULE = "app.layout";
// layout module router
const LayoutRoute = [
{
name: "authorize",
url: "/authorize",
views: {
"core": {
template: layoutAuthorizeTemplate,
controller: AuthorizeController,
controllerAs: "vm"
}
}
},
{
name: "application",
url: "/application",
views: {
"navbar": {
template: layoutNavbarTemplate
},
"sidebar": {
template: layoutSidebarTemplate,
controller: SidebarController,
controllerAs: "vm"
},
"core": {
template: layoutCoreTemplate
}
}
}
];
angular.module(LAYOUT_MODULE, [])
// eslint-disable-next-line angular/di
.config(["$stateProvider", function ($stateProvider) {
LayoutRoute.forEach((route) => {
$stateProvider.state(route);
});
}]);
export { LAYOUT_MODULE };
模塊劃分
通過(guò)劃分模塊實(shí)現(xiàn)最終目標(biāo)：
ng-hot-analyzer - 分析組件的聲明與定位，主要包括import，register token的分析。最終匯總，實(shí)現(xiàn)模塊定位 <--> 模塊導(dǎo)出實(shí)例 <--> NG組件注冊(cè)的圖譜。
ng-hot-loader - 匯聚子模塊操作，基于分析結(jié)果與對(duì)應(yīng)模板，生成對(duì)應(yīng)HMR代碼。
ng-hmr - 熱更新具體實(shí)現(xiàn)。
組件替換約定
服務(wù)在angularjs內(nèi)部屬于單例，實(shí)例聲明通過(guò)factory的方式，聲明literal object服務(wù)。
過(guò)濾器僅支持ng-bind使用。
模板熱替換目前采用較為粗放的容器定位策略，基于最近的ui-router view進(jìn)行局部替換。
指令熱替換同樣采用較為粗放的容器定位策略，通過(guò)路由模板替換實(shí)現(xiàn)。
控制器統(tǒng)一使用ES6 Class聲明，字段更新策略如下：
[x] 刪除字段
[x] 依賴(lài)注入服務(wù)，直接override
[x] 函數(shù)字段，直接override
[x] 通過(guò)控制器內(nèi)聲明shouldFieldUpdate方法來(lái)精確控制對(duì)應(yīng)字段是否更新。
[x] 如果控制器未聲明shouldFieldUpdate方法，默認(rèn)判定策略是類(lèi)型變化，類(lèi)型出現(xiàn)變化即直接override
HMR示例
if (module.hot) {
module.hot.accept(["${descriptor.location}"], function () {
${translateImportType(descriptor)}
$hmr.hmrOnChange("${capitalize(descriptor.category)}", "${descriptor.token}", ${descriptor.name});
$hmr.hmrDoActive("${capitalize(descriptor.category)}", "${descriptor.token}", ${descriptor.name});
});
};
項(xiàng)目實(shí)現(xiàn)
https://github.com/bornkiller...
https://github.com/bornkiller...
https://github.com/bornkiller...
https://github.com/bornkiller... 熱替換DEMO
TODO
支持字符串聲明控制器
調(diào)整模板scope定位方式
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/86526.html
