摘要：參照組件單一職責，單個模塊文件僅承擔有限職責，。路由聲明與組件聲明在統(tǒng)一文件內(nèi)部聲明。組件替換約定服務在內(nèi)部屬于單例，實例聲明通過的方式，聲明服務。指令熱替換同樣采用較為粗放的容器定位策略，通過路由模板替換實現(xiàn)。
ng-hot-loader
前言
webpack-dev-server自帶支持模塊熱替換特性(HMR)，不刷新頁面實現(xiàn)代碼局部更新，使用HMR可以大幅提升開發(fā)效率。
實現(xiàn)目標
[x] 樣式熱替換 -- style-loader本身即支持HMR，建議依賴庫css直接解析出文件link，降低熱替換成本
[x] 模板熱替換
[x] 服務熱替換
[x] 過濾器熱替換 -- expression 變動才會重新實例化過濾器
[x] 指令熱替換 -- 目前low level的支持
[x] 控制器熱替換
實現(xiàn)策略
合理劃分angular模塊，將angular模塊劃分為主模塊，業(yè)務模塊。路由, 業(yè)務服務，全局服務合理分散到主模塊與業(yè)務模塊中。參照angular組件單一職責，單個模塊(文件)僅承擔有限職責，。
HMR關鍵核心為組件聲明 => 組件定位 => 組件更新。
文件命名建議按照官方styleguide
關聯(lián)filter, service, directive在單一模塊中聲明。
關鍵核心依舊在模塊，路由聲明。路由聲明中，模板與控制器統(tǒng)一采用ES6引入方案，template: templateVariable，控制器聲明統(tǒng)一采用pure function的方式，而不是字符串的方式。
路由聲明與組件聲明在*.module.js統(tǒng)一文件內(nèi)部聲明。
控制器暫時不考慮通過$controllerProvider注冊的類型。
路由不考慮熱更新。
所有模板文件，都通過ES6 default import導入，JS文件建議全部通過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 };
模塊劃分
通過劃分模塊實現(xiàn)最終目標：
ng-hot-analyzer - 分析組件的聲明與定位，主要包括import，register token的分析。最終匯總，實現(xiàn)模塊定位 <--> 模塊導出實例 <--> NG組件注冊的圖譜。
ng-hot-loader - 匯聚子模塊操作，基于分析結(jié)果與對應模板，生成對應HMR代碼。
ng-hmr - 熱更新具體實現(xiàn)。
組件替換約定
服務在angularjs內(nèi)部屬于單例，實例聲明通過factory的方式，聲明literal object服務。
過濾器僅支持ng-bind使用。
模板熱替換目前采用較為粗放的容器定位策略，基于最近的ui-router view進行局部替換。
指令熱替換同樣采用較為粗放的容器定位策略，通過路由模板替換實現(xiàn)。
控制器統(tǒng)一使用ES6 Class聲明，字段更新策略如下：
[x] 刪除字段
[x] 依賴注入服務，直接override
[x] 函數(shù)字段，直接override
[x] 通過控制器內(nèi)聲明shouldFieldUpdate方法來精確控制對應字段是否更新。
[x] 如果控制器未聲明shouldFieldUpdate方法，默認判定策略是類型變化，類型出現(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à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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86526.html
