javascript模块化之require.js-优快云博客

本文介绍Require.js的基础使用方法，包括如何下载并引入该模块加载器，配置基础路径、指定依赖模块，以及如何定义符合AMD规范的模块。通过实例演示Require.js如何解决模块间依赖问题，提升开发效率。

require.js是一款很流行的模块加载器，它可以模块化你的js代码，提高你的开发效率和代码质量；使用它开发能够很好的处理模块之间的依赖性，方便维护；异步加载js文件，避免页面加载时由于要顺序加载包括js文件，出现不响应等不好的用户体验！

require.js入门

1.从官网下载最新版本；

2.将文件引入到页面中，假设项目目录如下：

在index.html中引入require.js.参考写法:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>requirejs test</title>
 5         <meta charset="utf-8">
 6         <script data-main="./js/main" src="./js/require.js"></script>
 7     </head>
 8     <body>
 9          
10     </body>
11 </html>

data-main属性的作用是指定入口文件，main.js只是一个示例，可以随意指定文件名，此时main.js会首先被加载。

3.main.js如何写？

1 require.config({
2     paths: {
3        jquery:'./jquery'
4     }
5 });
6  
7 require(['jquery'], function($) {
8     console.log($);
9 });

require.config用于配置一些参数，如基础路径baseUrl，路径path，图中所示为配置jquery的文件路径；

require函数接收两个参数，第一个参数为数组，即引入依赖模块，第二个参数为回调函数，在所引入的依赖模块加载完成后执行；

依次加载所需模块管理好依赖性；模块的加载为异步加载，解决了阻塞问题。

注意：require引入模块需满足AMD规范，即模块语法为：

define(['依赖的模块'],function(a){
　　var b = a.saf;
　　return b;
})

若文件没有依赖于其他模块可直接写为：

define(function(){
    var num = 1+5;
    return num;
})

requirejs也可以加载一些不符合AMD规范的文件，加载这样的文件时，需做一些配置

在require.config里配置shim项，写好需引入文件的文件名称，导出接口，依赖文件即可。

参考博文：www.requirejs.org，http://www.ruanyifeng.com/blog/2012/11/require_js.html

转载于:https://www.cnblogs.com/qingw/p/3688918.html