javascript高级模块化require.js的具体使用方法(js 高级技巧)

编辑：rootadmin

推荐整理分享javascript高级模块化require.js的具体使用方法(js 高级技巧)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:javascript高级程序设,js 高级技巧,javascript 高级,javascript高级语言程序设计,javascript高级程序编程,《javascript高级程序设计》,javascript高级程序设,javascript 高级,内容如对您有帮助，希望把文章链接给更多的朋友！

本文介绍了require.js的具体使用方法，分享给大家，也给自己留个笔记。

Require.js：

RequireJS是一个非常小巧的javascript模块载入框架，是AMD（Asynchronous Module Definition，异步模块加载机制）规范最好的实现之一。最新版的requireJS压缩后只有k，堪称非常轻量。它还同时可以和其他的框架协调工作，使用requireJS必将使我们的前端代码质量得以提升。

首先我们先来看一下一个普通的页面js加载

运行结果：

此时，如果我们不对弹出框做操作，页面就不会接着加载，就不会有页面内容，这并不是我们想要实现的结果。

下面我们用require.js进行操作：

index.html

index.js

首先页面上不再导入test.js，只是导入了requireJS，其次在javascript中我们使用require()方法，在其中传递了一个数组的参数，实参为我们要导入的js文件的【路径+文件名称。

此时的运行结果：

javascript高级模块化require.js的具体使用方法(js 高级技巧)

可以看出，此时页面内容已经显现出来了。并不像前面我们传统的一样在等待js运行完成后页面再加载，而是页面加载完成后才运行js代码，这样在运行效率上就大大的提高了。

根据上面的代码，我们可以来分析requirejs的基本API:

requireJS会定义三个变量：define，require，requirejs

require==requirejs,一般使用require更简短。 define 用来定义一个模块 require 加载依赖模块（引用定义好的模块），并执行加载完后的回调函数

require有三个参数：

加载网络文件

之前我们加载的都是本地的js文件，但是，有些时候我们又需要加载网络上的文件，那又该怎么加载呢？下面我们就来介绍一下怎样加载网络上的js文件.

我们现在以加载一个jquery.js文件为例：

在取网络上的文件时注意：

1、config方法的参数是一个对象 2、paths的值也是一个对象 3、当我们为网络上的库取名字是任意，但是建议取有意义的名字，别人可以通过名称知道你的网络资源是什么资源 4、库的值是一个数组，意味着可以多个同时写，防止网络异常取不到 5、特别注意：网络资源路径不能带后缀名，否则取不到 6、我们也可以先让去网络中去取，如果取不到，再在本地取，减轻本地服务的压力（属于项目优化）。

同样我们也可以将本地的配置到paths中：

上面的例子中重复出现了require.config配置，如果每个页面中都加入配置，必然显得十分不雅，requirejs提供了一种叫”主数据”的功能，我们首先创建一个main.js：

然后再页面中使用下面的方式来使用requirejs：

在官方提供了一种基于标签属性的方式：

将所有的配置和导入js都放在了main.js中，这样在页面只要这样一个标签就行了。

代码演示如下：

标签: js 高级技巧

本文链接地址:https://www.jiuchutong.com/biancheng/369697.html 转载请保留说明！

上一篇：JS简单实现点击跳转登陆邮箱功能的方法(js简单实现点击按钮商品加入购物车)

下一篇：React Native使用Modal自定义分享界面的示例代码(react-native-modal)