javascript模块化之require.js实例教程

发布时间:2021-01-24编辑:脚本学堂
本文介绍了javascript模块化加载器require.js的用法,有需要的朋友参考下。

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

require.js入门

1.从官网下载最新版本;
2.将文件引入到页面中,假设项目目录为:
require.js模块加载器
     
在index.html中引入require.js.参考写法:
 

复制代码 代码示例:
<!DOCTYPE html>
 <html>
     <head>
         <title>requirejs test</title>
         <meta charset="utf-8">
         <script data-main="./js/main" src="./js/require.js"></script>
    </head>
     <body>
         
     </body>
</html>
 

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

3.main.js如何写?
 

复制代码 代码示例:
require.config({
    paths: {
       jquery:'./jquery'
    }
});
 
require(['jquery'], function($) {
     console.log($);
 });
 

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项,写好需引入文件的文件名称,导出接口,依赖文件即可。