JavaScript读源码系列--微前端之import-html-entry
最近网络上对于微前端讨论的愈加激烈，qiankun 就是一款由蚂蚁金服推出的比较成熟的微前端框架，基于 single-spa 进行二次开发，用于将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。尤其适合遗留项目技术栈难以维护，又需要新的技术来迭代功能。
qiankun一大特点就是将html做为入口文件，规避了JavaScript为了支持缓存而根据文件内容动态生成文件名，造成入口文件无法锁定的问题。将html做为入口文件，其实就是将静态的html做为一个资源列表来使用了，这样也避免了一些潜在的问题。本文的主角就是支持qiankun将html做为入口所依赖的 import-html-entry 库，版本是1.7.3。
importHTML
import-html-entry的默认导出接口，返回值为一个promise对象。接口声明如下。
importHTML(url, opts = {})
参数说明：
- url ：需要解析的
html模板路径 - opts：默认值为一个空对象
- 传入为函数类型的时候，直接做为
fetch使用 - 传入为对象类型的时候，对象属性用于解析
html模板的，如果没有传入，模块内置了默认属性。
- 传入为函数类型的时候，直接做为
| 属性 | 参数 | 返回值 | 功能 | 默认 |
|---|---|---|---|---|
| fetch | url:string |
promise | 用于获取远端的脚本和样式文件内容 | 浏览器fetch，如果浏览器不支持，会报错 |
| getPublicPath | 模板url:string |
publicPath:string |
用于获取静态资源publicPath，将模板中外部资源为相对路径的，转换为绝对路径。 |
以当前location.href为publicPath |
| getDomain | ?? | string | 如果没有提供getPublicPath参数，则使用getDomain，两者都没有提供的时候，使用默认getPublicPath |
无 |
| getTemplate | html模板字符串:string |
html模板字符串:string |
用于支持使用者在模板解析前，做一次处理 | 无处理 |
接口返回promiseresolve参数为一个对象，拥有以下属性。
| 属性 | 类型 | 说明 | 参数 |
|---|---|---|---|
| template | string | 被处理后的html模板字符串，外联的样式文件被替换为内联样式 |
- |
| assetPublicPath | string | 静态资源的baseURL |
- |
| getExternalScripts | function:promise | 将模板中所有script标签按照出现的先后顺序，提取出内容，组成一个数组 |
- |
| getExternalStyleSheets | function:promise | 将模板中所有link和style标签按照出现的先后顺序，提取出内容，组成一个数组 |
- |
| execScripts | function:promise | 执行所有的script中的代码，并返回为html模板入口脚本链接entry指向的模块导出对象。 |
参见下文 |
export default function importHTML(url, opts = {}) {
let fetch = defaultFetch;
let getPublicPath = defaultGetPublicPath;
let getTemplate = defaultGetTemplate;
// compatible with the legacy importHTML api
if (typeof opts === 'function') {
fetch = opts;
} else {
fetch = opts.fetch || defaultFetch;
getPublicPath = opts.getPublicPath || opts.getDomain || defaultGetPublicPath;
getTemplate = opts.getTemplate || defaultGetTemplate;
}
return embedHTMLCache[url] || (embedHTMLCache[url] = fetch(url)
.then(response => response.text())
.then(html => {
const assetPublicPath = getPublicPath(url);
const { template, scripts, entry, styles } = processTpl(getTemplate(html), assetPublicPath);
return getEmbedHTML(template, styles, { fetch }).then(embedHTML => ({
template: embedHTML,
assetPublicPath,
getExternalScripts: () => getExternalScripts(scripts, fetch),
getExternalStyleSheets: () => getExternalStyleSheets(styles, fetch),
execScripts: (proxy, strictGlobal) => {
if (!scripts.length) {
return Promise.resolve();
}
return execScripts(entry, scripts, proxy, { fetch, strictGlobal });
},
}));
}));
}
1~13行，主要是用来处理传入参数类型及默认值的。15行，对解析操作做了缓存处理，如果相同的url已经被处理过，则直接返回处理结果，否则通过fetch去获取模板字符串，并进行后续处理。20行，processTpl方法是解析模板的核心函数，后面会具体说，这里主要返回了经过初步处理过的模板字符串template、外部脚本和样式的链接前缀assetPublicPath，所有外部脚本的src值组成的数组scripts，所有外部样式的href值组成的数组styles，还有上面提到的html模板的入口脚本链接entry，如果模板中没有被标记为entry的script标签，则会返回最后一个script标签的src值。22行，调用getEmbedHTML函数将所有通过外部引入的样式，转换为内联样式。embedHTML函数的代码比较简单，可以直接去看。25~31行，这里使用了getExternalScripts、getExternalStyleSheets、execScripts三个函数，一一来看下。
getExternalStyleSheets
export function getExternalStyleSheets(styles, fetch = defaultFetch) {
return Promise.all(styles.map(styleLink => {
if (isInlineCode(styleLink)) {
// if it is inline style
return getInlineCode(styleLink);
} else {
// external styles
return styleCache[styleLink] ||
(styleCache[styleLink] = fetch(styleLink).then(response => response.text()));
}
},
));
}
函数的第一个参数是 模板中所有link和style标签组成的数组，第二个参数是用于请求的fetch，函数比较简单，主要是通过对link和style的区分，分别来获取样式的具体内容组成数组，并返回。
后面发现，在解析模板的时候
style标签的内容并没有被放入styles中，不知道是不是一个失误，issue准备中_
getExternalScripts
export function getExternalScripts(scripts, fetch = defaultFetch) {
const fetchScript = scriptUrl => scriptCache[scriptUrl] ||
(scriptCache[scriptUrl] = fetch(scriptUrl).then(response => response.text()));
return Promise.all(scripts.map(script => {
if (typeof script === 'string') {
if (isInlineCode(script)) {
// if it is inline script
return getInlineCode(script);
} else {
// external script
return fetchScript(script);
}
} else {
// use idle time to load async script
const { src, async } = script;
if (async) {
return {
src,
async: true,
content: new Promise((resolve, reject) => requestIdleCallback(() => fetchScript(src).then(resolve, reject))),
};
}
return fetchScript(src);
}
},
));
}
函数的第一个参数是模板中所有script标签组成的数组，第二个参数是用于请求的fetch。
3行，主要是包装了一下fetch，提供了缓存的能力8行，这个判断主要是为了区别处理在importEntry中调用函数的时候，提供的可能是通过对象方式配置的资源，例如scripts可能会是这个样子[{src:"http://xxx.com/static/xx.js",async:true},...]。
execScripts
这段代码太长，下面的代码中，将和性能测试相关的部分删除掉了，只留下了功能代码。
export function execScripts(entry, scripts, proxy = window, opts = {}) {
const { fetch = defaultFetch, strictGlobal = false } = opts;
return getExternalScripts(scripts, fetch)
.then(scriptsText => {
const geval = eval;
function exec(scriptSrc, inlineScript, resolve) {
if (scriptSrc === entry) {
noteGlobalProps(strictGlobal ? proxy : window);
// bind window.proxy to change `this` reference in script
geval(getExecutableScript(scriptSrc, inlineScript, proxy, strictGlobal));
const exports = proxy[getGlobalProp(strictGlobal ? proxy : window)] || {};
resolve(exports);
} else {
if (typeof inlineScript === 'string') {
// bind window.proxy to change `this` reference in script
geval(getExecutableScript(scriptSrc, inlineScript, proxy, strictGlobal));
} else {
// external script marked with async
inlineScript.async && inlineScript?.content
.then(downloadedScriptText => geval(getExecutableScript(inlineScript.src, downloadedScriptText, proxy, strictGlobal)))
.catch(e => {
console.error(`error occurs while executing async script ${ inlineScript.src }`);
throw e;
});
}
}
}
function schedule(i, resolvePromise) {
if (i < scripts.length) {
const scriptSrc = scripts[i];
const inlineScript = scriptsText[i];
exec(scriptSrc, inlineScript, resolvePromise);
// resolve the promise while the last script executed and entry not provided
if (!entry && i === scripts.length - 1) {
resolvePromise();
} else {
schedule(i + 1, resolvePromise);
}
}
}
return new Promise(resolve => schedule(0, resolve));
});
}
4行，调用getExternalScripts来获取所有script标签内容组成的数组。53行，我们先从这里的函数调用开始，这里通过schedule函数开始从脚本内容数组的第一个开始执行。37~51行，这段定义了schedule函数，通过代码可以看出，这是一个递归函数，结束条件是数组循环完毕，注意看45行，和模板解析函数一样的逻辑，如果entry不存在，则指定数组的最后一个为脚本入口模块，将执行结果通过放在Promise中返回。exec函数比较简单，主要是对entry和非entry的脚本做了区分，对entry模块的执行结果进行返回，见代码18行。
整个代码逻辑比较简单，主要关注entry的处理即可。
另外，代码中通过间接的方式使用了eval 执行了getExecutableScript 函数处理过的脚本字符串，间接的方式确保了eval中代码执行在全局上下文中，而不会影响局部，如果这块不是很清楚，参见神奇的eval()与new Function()，【译】以 eval() 和 new Function() 执行JavaScript代码 ，永远不要使用eval
getExecutableScript
这个函数的主要作用，是通过修改脚本字符串，改变脚本执行时候的window/self/this 的指向。
function getExecutableScript(scriptSrc, scriptText, proxy, strictGlobal) {
const sourceUrl = isInlineCode(scriptSrc) ? '' : `//# sourceURL=${ scriptSrc }\n`;
window.proxy = proxy;
// TODO 通过 strictGlobal 方式切换切换 with 闭包，待 with 方式坑趟平后再合并
return strictGlobal
? `;(function(window, self){with(window){;${ scriptText }\n${ sourceUrl }}}).bind(window.proxy)(window.proxy, window.proxy);`
: `;(function(window, self){;${ scriptText }\n${ sourceUrl }}).bind(window.proxy)(window.proxy, window.proxy);`;
}
核心代码主要是这里;(function(window, self){;${ scriptText }\n${ sourceUrl }}).bind(window.proxy)(window.proxy, window.proxy);。
拆开来看。
// 声明一个函数
let scriptText = "xxx";
let sourceUrl = "xx";
let fn = function(window, self){
// 具体脚本内容
};
// 改变函数中 this 的指向
let fnBind = fn.bind(window.proxy);
// 指向函数，并指定参数中 window 和 self
fnBind(window.proxy, window.proxy);
通过这一波操作，给脚本字符串构件了一个简单的执行环境，该环境屏蔽了全局了this 、window和self。但是这里默认传入的依然是window，只是在调用的时候可以通过参数传入。
importEntry
export function importEntry(entry, opts = {}) {
// ...
// html entry
if (typeof entry === 'string') {
return importHTML(entry, { fetch, getPublicPath, getTemplate });
}
// config entry
if (Array.isArray(entry.scripts) || Array.isArray(entry.styles)) {
const { scripts = [], styles = [], html = '' } = entry;
const setStylePlaceholder2HTML = tpl => styles.reduceRight((html, styleSrc) => `${ genLinkReplaceSymbol(styleSrc) }${ html }`, tpl);
const setScriptPlaceholder2HTML = tpl => scripts.reduce((html, scriptSrc) => `${ html }${ genScriptReplaceSymbol(scriptSrc) }`, tpl);
return getEmbedHTML(getTemplate(setScriptPlaceholder2HTML(setStylePlaceholder2HTML(html))), styles, { fetch }).then(embedHTML => ({
// 这里处理同 importHTML , 省略
},
}));
} else {
throw new SyntaxError('entry scripts or styles should be array!');
}
}
第一个参数entry 可以是字符串和对象，类型为字符串的时候与importHTML功能相同。为对象的时候，传入的是脚本和样式的资源列表。如下所示
{
html:"http://xxx.com/static/tpl.html",
scripts:[
{
src:"http://xxx.com/static/xx.js",
async:true
},
...
],
styles:[
{
href:"http://xxx.com/static/style.css"
},
...
]
}
其他
src/process-tpl.js 模块主要做了一件事，就是对资源进行分类收集并返回，没有什么难懂的地方。
src/utils 主要是提供了一些工具函数，其中getGlobalProp和noteGlobalProps比较有意思，用于根据entry执行前后window上属性的变化，来获取entry的导出结果。这两个函数主要依据的原理是对象属性的顺序是可预测的，传送门解惑
export function getGlobalProp(global) {
let cnt = 0;
let lastProp;
let hasIframe = false;
for (let p in global) {
if (shouldSkipProperty(global, p))
continue;
// 遍历 iframe，检查 window 上的属性值是否是 iframe，是则跳过后面的 first 和 second 判断
for (let i = 0; i < window.frames.length && !hasIframe; i++) {
const frame = window.frames[i];
if (frame === global[p]) {
hasIframe = true;
break;
}
}
if (!hasIframe && (cnt === 0 && p !== firstGlobalProp || cnt === 1 && p !== secondGlobalProp))
return p;
cnt++;
lastProp = p;
}
if (lastProp !== lastGlobalProp)
return lastProp;
}
export function noteGlobalProps(global) {
// alternatively Object.keys(global).pop()
// but this may be faster (pending benchmarks)
firstGlobalProp = secondGlobalProp = undefined;
for (let p in global) {
if (shouldSkipProperty(global, p))
continue;
if (!firstGlobalProp)
firstGlobalProp = p;
else if (!secondGlobalProp)
secondGlobalProp = p;
lastGlobalProp = p;
}
return lastGlobalProp;
}
noteGlobalProps用于标记执行entry前window的属性状态，执行entry模块后，会导出结果并挂载到window上。getGlobalProp用于检测entry模块执行后window的变化，根据变化找出entry的指向结果并返回。