JavaScript读源码系列--微前端之import-html-entry

最近网络上对于微前端讨论的愈加激烈,qiankun 就是一款由蚂蚁金服推出的比较成熟的微前端框架,基于 single-spa 进行二次开发,用于将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。尤其适合遗留项目技术栈难以维护,又需要新的技术来迭代功能。

qiankun一大特点就是将html做为入口文件,规避了JavaScript为了支持缓存而根据文件内容动态生成文件名,造成入口文件无法锁定的问题。将html做为入口文件,其实就是将静态的html做为一个资源列表来使用了,这样也避免了一些潜在的问题。本文的主角就是支持qiankunhtml做为入口所依赖的 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.hrefpublicPath
getDomain ?? string 如果没有提供getPublicPath参数,则使用getDomain,两者都没有提供的时候,使用默认getPublicPath
getTemplate html模板字符串:string html模板字符串:string 用于支持使用者在模板解析前,做一次处理 无处理

接口返回promiseresolve参数为一个对象,拥有以下属性。

属性 类型 说明 参数
template string 被处理后的html模板字符串,外联的样式文件被替换为内联样式 -
assetPublicPath string 静态资源的baseURL -
getExternalScripts function:promise 将模板中所有script标签按照出现的先后顺序,提取出内容,组成一个数组 -
getExternalStyleSheets function:promise 将模板中所有linkstyle标签按照出现的先后顺序,提取出内容,组成一个数组 -
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 ,如果模板中没有被标记为entryscript标签,则会返回最后一个script标签的src值。
  • 22 行,调用getEmbedHTML函数将所有通过外部引入的样式,转换为内联样式。embedHTML 函数的代码比较简单,可以直接去看。
  • 25~31行,这里使用了getExternalScriptsgetExternalStyleSheetsexecScripts 三个函数,一一来看下。

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()));
			}
			
		},
	));
}

函数的第一个参数是 模板中所有linkstyle标签组成的数组,第二个参数是用于请求的fetch,函数比较简单,主要是通过对linkstyle的区分,分别来获取样式的具体内容组成数组,并返回。

后面发现,在解析模板的时候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);

通过这一波操作,给脚本字符串构件了一个简单的执行环境,该环境屏蔽了全局了thiswindowself。但是这里默认传入的依然是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 主要是提供了一些工具函数,其中getGlobalPropnoteGlobalProps比较有意思,用于根据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用于标记执行entrywindow的属性状态,执行entry模块后,会导出结果并挂载到window上。
  • getGlobalProp 用于检测entry模块执行后window的变化,根据变化找出entry的指向结果并返回。

你可能感兴趣的:(WEB前端,JavaScript读源码系列,javascript)