javascript模块化之require.js

时间 2019-11-14

标签 javascript 模块化 require.js require 栏目 JavaScript 繁體版

原文原文链接

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

require.js入门jquery

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如何写？requirejs

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

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

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

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

注意：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