JS模块化工具requirejs简易教程

一 requirejs的作用

a) 防止命名冲突，requirejs可以将我们的变量都封装在变量内，通过暴露出一些接口而解决这个问题
b) 解决不同js之间的依赖
c) 可以让我们的代码以模块化的方式组织！

使用require你不用再以script标签引入js文件（除了require.js），它会按需要动态加载。

二 怎么学习使用requirejs

以下是最常用的几个函数
d) requirejs.config 为模块指定别名，方便模块的引入（起别名的地方）
e) requirejs 通过它将写好的模块进行引入，并根据这些引入的模块编写主代码（组合模块的地方）
f ) define 用它编写模块，在相应的地方引入（定义自己模块的地方）

三 简单实例

A 把body的背景色变成红色

代码结构（main.js和index.html是我们自己编写，另外的jquery和requirejs是下载好的）



index.html内容（data-main属性后跟“入口文件”，入口文件是指require加载完成后立即会去执行的js文件，完整的其实是js/main.js，require会自动在末尾加".js"，所以我们不用加）



main.js的内容（ 第二段代码是用requirejs调用刚才定义的jquery，第二个参数是一个回调函数，回调函数有一个参数$，代表了前面第一个方括号中的参数jquery ）

）



B 以模块化的方式写一个登录验证

模块化的好处是，每人负责不同的模块，别人用的时候不必知道这个模块里有什么。

代码结构



index.html和之前一样，只引入require.js，主要写validate.js和main.js

先定义validate.js （ 函数中是一个独立的空间，无法和外界交互，只有return返回的值能被外面访问，所以，所有函数都写在return中 ）



再写main.js （ 第二个函数中的前面的数组中是此函数需要的依赖，后面的函数的形参列表是前面依赖的形参。这样函数中可以根据形参引用对应模块的方法啦！ ）



虽然简单，但清晰明了的说明了requirejs怎么用。
requirejs介绍到这里已经够用了，主要是如何使用define将一个个功能定义成模块。