require.js 入门笔记

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了require.js 入门笔记相关的知识,希望对你有一定的参考价值。

  网站越来越庞大,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‘,
		}
	},
});

  

以上是关于require.js 入门笔记的主要内容,如果未能解决你的问题,请参考以下文章

require.js学习笔记

学习 | 基于require.js的三级联动菜单入门

require学习笔记总结

笔记关于require.js 的用法

AngularJS入门学习笔记一

html 笔记:前端 - 移动端下拉刷新 - 3.带有require.js的AMD