前言
在 Web 开发中，经常需要往页面中插入一些动态脚本来实现一些功能。但是，由于安全性的考虑，现代浏览器默认会阻止未经授权的脚本的执行。为了解决这个问题，一种解决方案是将脚本通过 Ajax 获取，并通过 innerHTML 的方式插入到页面中。这种方式虽然可以解决安全性的问题，但是在实际应用中也存在着一些问题，比如脚本的执行时机等。npm 包 script-inner-html 就是为了解决这个问题而开发的一个工具库。
安装和使用
安装
使用 npm 进行安装：
npm install script-inner-html
使用
基本用法
使用 script-inner-html 最简单的方式是直接调用它的默认导出函数，这个函数接受两个参数，第一个参数是要插入的 HTML 片段，第二个参数是可选的选项对象。
-- -------------------- ---- -------
------ --------------- ---- --------------------
----- ------ - -
--------- ----------
--------
------------------- ---------
---------
--
------------------------需要注意的是，script-inner-html 会在调用完成之后返回一个 Promise，这个 Promise 的 resolve 值是 HTML 片段所代表的 DOM 元素。这个 Promise 可以用来做一些异步操作，比如等待脚本的执行完成。
-- -------------------- ---- -------
------ --------------- ---- --------------------
----- ------ - -
--------- ----------
--------
------------- -- -
------------------- ---------
----------
-- ------
---------
--
-----------------------
-------- -- -
------------------- ------------
---选项
script-inner-html 支持一些选项来控制脚本的执行等行为。以下是它支持的选项列表：
async：布尔值，表示脚本是否应该异步执行，默认为 false。resolveWhenLoaded：布尔值，表示脚本在加载完成后是否应该 resolve 默认返回的 Promise 对象，默认为 false。
-- -------------------- ---- -------
------ --------------- ---- --------------------
----- ------ - -
--------- ----------
------- ----- ------------------
------------------- ---------
---------
--
-----------------------
-------- -- -
------------------- ------------
---装饰器
script-inner-html 还支持一个装饰器命令，可以用来在 HTML 中添加一些元数据，比如脚本的依赖等信息。
-- -------------------- ---- -------
--------- -----
------
------
--------- ------------
------- ------------- --------------------------
-------
------
--------- ----------
-------
-------可以使用 script-inner-html 提供的 @metadata 命令来为这个脚本添加元数据：
-- -------------------- ---- -------
--------- -----
------
------
--------- ------------
-------
------
--------- ----------
------- --------------
---------------- ------------
------ - -------- - ---- ----------------
---------
-------
-------这会在运行时向脚本注入一些元数据，可以在项目构建时使用这些信息来进行编译和打包等操作。
示例代码
以下是一个使用 script-inner-html 的完整示例：
-- -------------------- ---- -------
--------- -----
------
------
--------- ------------
-------
------
--------- ----------
--------
------ - ---------- - ---- ----------------
------------- - ---------- -
-------------
--
---------
------- -----------------------------------------------------------
--------
---------------------------- -
------------------- ----------
---
---------
------- ------
------------------- ---------
---------
------- ----- ------------------
------------- -- -
------------------- ---------
----------
-- ------
---------
-------
-------使用 script-inner-html 将这个 HTML 片段加入到页面中：
-- -------------------- ---- -------
------ --------------- ---- --------------------
----- ------ - -
--------- -----
------
------
--------- ------------
-------
------
--------- ----------
--------
------ - ---------- - ---- ----------------
------------- - ---------- -
-------------
--
---------
------- -----------------------------------------------------------
--------
---------------------------- -
------------------- ----------
---
---------
------- ------
------------------- ---------
---------
------- ----- ------------------
------------- -- -
------------------- ---------
----------
-- ------
---------
-------
-------
--
-----------------------
-------- -- -
-------------------- ------------
---这个代码片段会将这个 HTML 加入到页面中，并执行其中的脚本。需要注意的是，在这个例子中使用的脚本涉及了一些异步操作，在使用 script-inner-html 时需要正确处理 Promise 对象，以确保脚本的执行完成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725a81e8991b448e8794