在前端开发中,为了充分利用已有的 JavaScript 库,我们常常需要引入一些第三方库。而引入库的方式又千奇百怪:有的以直接 script 导入的方式使用,有的以 AMD (Asynchronous Module Definition)形式使用,有的则需要我们手写一些打包配置以 CommonJS 形式使用。这样就给开发带来了不少麻烦。
而 @jokeyrhyme/promised-requirejs 就是一款能够封装这些繁琐、多样的引用过程并转换为 Promise 形式的 npm 包,方便我们对第三方库进行灵活而高效的调用。
安装
在使用该 npm 包前,需要先安装这个包。通过 npm 安装即可,步骤如下:
--- ------- ------------------------------
使用方法
引入
在项目中引入该 npm 包,采用 CommonJS 引入方式:
----- --------------- - ------------------------------------------
AMD 形式的第三方库的引用
我们先了解一下 AMD 的引入方式是怎样的。
以引用 underscore 库为例,我们可以在我们的 HTML 文件中这样调用:
------- --------------------------- ------------------------- ---- ------- ------ ----- --------------- ---
这样,我们就可以在 JavaScript 代码中使用 requireJS 的 require 方法调用:
----------------------- -------- --- - -- ------- ---------- -- ---
那么我们通过 @jokeyrhyme/promised-requirejs 调用 underscore 库的方法也很简单:
----------------------------- ------------- -- - -- ------- ---------- -- ---
直接 script 导入的第三方库的引用
以引用 jQuery 库为例,我们可以在我们的 HTML 文件中这样调用:
------- ---------------------------------
这样,我们就可以在 JavaScript 代码中使用 jQuery 变量调用:
------------ - -- ------- ------ -- ---
那么我们通过 @jokeyrhyme/promised-requirejs 调用 jQuery 库的方法也很简单:
------------------------- ------------- -- - -- ------- ------ -- ---
Promise 对象
值得一提的是,@jokeyrhyme/promised-requirejs 还是以 Promise 的形式来使用的。
我们在调用 promisedRequire 方法时,它会返回 Promise 对象。当 AMD 模块或者 script 脚本成功加载后,Promise 对象就会被 resolved。如需捕获错误,只要在 Promise 对象中的 catch 方法内。
下面是 example:
------------------------- ------------- -- - --------------------------- ------------ -------------- -- - --------------- ----- ----- ---
这个例子很好理解,如果加载 jquery 库成功,我们就可以在 body 中添加一行 "Hello world" 的标题,如果出现错误,则会打印错误信息。
总结
通过封装 CommonJS 和 AMD 形式的引用方式,@jokeyrhyme/promised-requirejs 将原本复杂、繁琐的使用过程转化为了动态、灵活的 Promise 形式,让我们在使用第三方库时更高效,更简单。相信如果你在开发中遇到了引用问题,这一篇教程能够给你提供帮助。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60066bc4967216659e2442ce