RequireJS 从陌生到掌握-白红宇

RequireJS 从陌生到掌握

阅读量：4039 次

发布时间：2019-05-24

本文共 1642 字，大约阅读时间需要 5 分钟。

RequireJS是一种前端的js模块管理技术，对前端的复杂的模块管理有很大的帮助。

RequireJS的官网地址：http://www.requirejs.org/

RequireJS是用来做什么的呢？

它是用来管理客户端JS的模块化的一种处理技术，适用于客户端有大量的JS代码需要进行整合管理的情况。

RequireJS在客户端可以做什么呢？

1>管理JS的引入和依赖

2>定义JS模块化处理

3>集成JS模块到指定的页面

首先建立如下图所示的文件组织结构：

RequireJS_demo

|-----index.html

|-----js

|------requireJS.js

|------main.js

|------jquery-2.1.4.js

|------lib

|------testNodependModule.js

|------testDependModule.js

使用样例

1.导入与集成

RequireJS做出的改变首先体现在页面的集成上，

在index.html的body中引入它：

Note: data-main指定的是requireJS的配置文件，这个文件必须手动创建。

这个配置文件main.js包含的内容如下所示：

require.config({      baseUrl:"./js",      paths:{         jquery:"jquery-2.1.4"       }      });require(["jquery"],function(){       alert("hello,jquery!");       });

当正确引入配置文件之后并在浏览器打开index.html会发现，在index.html的head部分引入两个个JS文件：

main.js ; jquery-2.1.4.js

配置文件中的baseUrl指定的是引入后续js文件的起始路径。paths:指定的是引入文件的路径配置和引用名称。导入配置在paths中的文件到前端页面需要显式的调用require来引入。

2.定义JS模块

对于对外部没有依赖或者引用的JS模块可以使用如下的定义：

step 1:在lib文件夹下建立testNodependModule.js

step 2:在这个JS文件中定义如下内容

define(function(){  console.log("loading no depend module");       });

这样一个无依赖模块就定义好了。

对于对外部文件有依赖或者引用的JS模块可以使用如下的定义：

step 1:在lib文件夹下建立testDependModule.js

step 2:在这个JS文件中定义如下内容

define(["jquery"],function($){         $("#module").html("load depend module");         });

有依赖的模块定义完成。

3.集成JS模块到指定的页面

首先将定义好的模块注册到require.config的paths中，如下所示：

require.config({      baseUrl:"./js",      paths:{         jquery:"jquery-2.1.4",      tndm:"lib/testNodependModule",      tdm:"lib/testDependModule"       }      });

然后在main.js中使用require引入，如下所示：

require(["tndm"]);require(["tdm"],function(){       console.log("loading");       });

在浏览器中刷新index.html就可以看到效果，浏览器建议使用Chrome,FireFox.

转载地址：http://wepdi.baihongyu.com/

你可能感兴趣的文章

持续可用与CAP理论 – 一个系统开发者的观点

查看>>

nginx+tomcat+memcached (msm)实现 session同步复制

查看>>

c++字符数组和字符指针区别以及str***函数

QT打开项目提示no valid settings file could be found

flutter-实现圆角带边框的view（android无效）

java LinkedList与ArrayList迭代器遍历和for遍历对比

查看>>

drat中构造方法

查看>>