摘要:參照組件單一職責(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,建議依賴庫(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è)的類型。
路由不考慮熱更新。
所有模板文件,都通過(guò)ES6 default import導(dǎo)入,JS文件建議全部通過(guò)destruct的方式引用。
</>復(fù)制代碼
/**
* @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] 依賴注入服務(wù),直接override
[x] 函數(shù)字段,直接override
[x] 通過(guò)控制器內(nèi)聲明shouldFieldUpdate方法來(lái)精確控制對(duì)應(yīng)字段是否更新。
[x] 如果控制器未聲明shouldFieldUpdate方法,默認(rèn)判定策略是類型變化,類型出現(xiàn)變化即直接override
HMR示例</>復(fù)制代碼
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://specialneedsforspecialkids.com/yun/86526.html
摘要:面對(duì)日益紛雜的前端工具,作為新人常感無(wú)從下手。腳手架應(yīng)用開(kāi)發(fā)流程與工具項(xiàng)目生成器集成方案解決前端開(kāi)發(fā)中自動(dòng)化工具性能優(yōu)化模塊化框架開(kāi)發(fā)規(guī)范代碼部署開(kāi)發(fā)流程等問(wèn)題框架簡(jiǎn)潔直觀強(qiáng)悍的框架,讓開(kāi)發(fā)更迅速后端程序的福音。 面對(duì)日益紛雜的前端工具,作為新人常感無(wú)從下手。經(jīng)過(guò)一番檢索和簡(jiǎn)單對(duì)比,再結(jié)合自己的喜好,篩選了將要學(xué)習(xí)和使用的工具,以適應(yīng)日益工程化、專業(yè)化的 Web 前端開(kāi)發(fā)工作。 s...
摘要:什么是單頁(yè)面應(yīng)用單頁(yè)面應(yīng)用是指用戶在瀏覽器加載單一的頁(yè)面,后續(xù)請(qǐng)求都無(wú)需再離開(kāi)此頁(yè)目標(biāo)旨在用為用戶提供了更接近本地移動(dòng)或桌面應(yīng)用程序的體驗(yàn)。流程第一次請(qǐng)求時(shí),將導(dǎo)航頁(yè)傳輸?shù)娇蛻舳耍溆嗾?qǐng)求通過(guò)獲取數(shù)據(jù)實(shí)現(xiàn)數(shù)據(jù)的傳輸通過(guò)或遠(yuǎn)程過(guò)程調(diào)用。 什么是單頁(yè)面應(yīng)用(SPA)? 單頁(yè)面應(yīng)用(SPA)是指用戶在瀏覽器加載單一的HTML頁(yè)面,后續(xù)請(qǐng)求都無(wú)需再離開(kāi)此頁(yè) 目標(biāo):旨在用為用戶提供了更接近本地...
摘要:什么是單頁(yè)面應(yīng)用單頁(yè)面應(yīng)用是指用戶在瀏覽器加載單一的頁(yè)面,后續(xù)請(qǐng)求都無(wú)需再離開(kāi)此頁(yè)目標(biāo)旨在用為用戶提供了更接近本地移動(dòng)或桌面應(yīng)用程序的體驗(yàn)。流程第一次請(qǐng)求時(shí),將導(dǎo)航頁(yè)傳輸?shù)娇蛻舳?,其余?qǐng)求通過(guò)獲取數(shù)據(jù)實(shí)現(xiàn)數(shù)據(jù)的傳輸通過(guò)或遠(yuǎn)程過(guò)程調(diào)用。 什么是單頁(yè)面應(yīng)用(SPA)? 單頁(yè)面應(yīng)用(SPA)是指用戶在瀏覽器加載單一的HTML頁(yè)面,后續(xù)請(qǐng)求都無(wú)需再離開(kāi)此頁(yè) 目標(biāo):旨在用為用戶提供了更接近本地...
摘要:不用我贅述,前端開(kāi)發(fā)人員一定耳熟能詳。命令會(huì)用這個(gè)配置,生成的結(jié)果都會(huì)給文件名加,文件也會(huì)壓縮??捎霉ぞ呓榻B啟動(dòng)調(diào)試服務(wù)器,使用作為配置,不直接生成物理文件,直接內(nèi)存級(jí)別響應(yīng)調(diào)試服務(wù)器資源請(qǐng)求。 AngularJS不用我贅述,前端開(kāi)發(fā)人員一定耳熟能詳。有人稱之為MVWhatever框架,意思是使用AngularJS,你可以參考任意范式進(jìn)行應(yīng)用開(kāi)發(fā),無(wú)論是MVC、還是MVVVM都信手拈來(lái)...
閱讀 1426·2021-11-15 11:38
閱讀 3575·2021-11-09 09:47
閱讀 1973·2021-09-27 13:36
閱讀 3218·2021-09-22 15:17
閱讀 2556·2021-09-13 10:27
閱讀 2870·2019-08-30 15:44
閱讀 1178·2019-08-27 10:53
閱讀 2709·2019-08-26 14:00