require.js 入门笔记

Posted 2020-06-28

　　网站越来越庞大,JS也是越写越多. 当所有的JS 都集中在 html的 head 部分时,网页加载变得很慢,很多的 JS代码也并不是全都适用在当前的页面,造成了代码的冗余度非常高.

　　而且长长的JS代码,没有很好的将他们 模块化,对以后的维护造成极大的困难.

　　为此特地去了解下 require.js 的用途以及使用方法,为以后 代码重构 和 模块化 提供帮助.让后来者能更好的去管理代码.

 

1 为什么我要用require.js?

　　最近在制作个网站.引入了 

<script src="static/script/jquery.js"></script>
<script src="static/script/jquery.lazyload.min.js"></script>
<script src="static/script/swiper.js"></script>
<script src="static/script/laydate/laydate.js"></script>
    .
    .
    .
<script scr="static/script/common.js"></script>
<!--业务代码-->

　　HTML里依次引入了 js 代码,在加载这些 js 的时候,页面将停止渲染,直到 js 文件加载完毕.

　　不同的 js 之间存在依赖关系,必须保证 js 文件按顺序执行,当依赖关系变得复杂的时候, 编写和维护将会变得极其困难.

　　为此我们引入 require.js, 正是为了解决这两个问题.

 

2 在页面中加载require

　　先去官网下载 最新的 require.js.

　　在 html 头部 引用该 JS

　　

<script data-main="static/script/main" src="static/script/require.js"></script>

　　data-main 是必要的属性, 指定 require.js 的入口文件.浏览器将会在 require.js加载完时 自动加载 该 入口文件

3 加载 javascript

　　使用 require.config 来管理我们的 js

require.config({
	baseUrl: "static/script",
	paths:{
		jquery:‘jquery‘,
		lazy:‘jquery.lazyload‘
		common:‘common‘,
		swiper:‘swiper‘,
		laydate:‘laydate/laydate‘,
                //　　测试
                test:‘test‘,
	}
});

　　利用 require.config, 使用baseUrl及"paths" config去设置module ID.

4 定义模块

　　在test.js 里 定义模块

　　一个 js 文件里 应该只定义一个模块,模块里 云溪加载多个模块,顺序不定,但是 依赖的顺序 最终会是正确的.

define([‘jquery‘],function($){
	var width = 1000;
	return {
		//some function()
		setWidth():{
			width = $(window).width()
		},
		getWidth():{
			return width;
		}
	};
});

　　

 

5 加载模块.

　　

require([‘test‘],function(test){
    test.setWidth();
    //  输出宽度
    alert(test.getWidth());
});

 

6 加载非规范的模块

　　当模块没有才用 规范的 define() 定义的时候,我们就需要 shim

require.config({
	paths:{
		jquery:‘jquery-2.1.4.min‘,
	},
	shim:{
		‘test‘:{
			//	该不规范的模块所需要的依赖
			deps:[‘jquery‘],
			exports:‘test‘,
		}
	},
});