requireJs简介

模块化

模块就是实现特定功能的一组方法

原始写法

把不同的函数(以及记录状态的变量)简单的放在一起,就算一个模块

function m1() {
	
}
//m1就是一个模块,但是污染了全局变量

var module1 = new Object({
	_count: 0,
	m1: function() {},
})
// module1模块,解决了全局变量问题.但暴露了所有成员,内部状态可以被改写

var module2 = (function(){
	var _count = 0
	var m1 = function() {}
	return {m1: m1}
})()
//module2解决了私有变量问题,但是无法依赖其他模块

var module3 = (function(module2){
	var _count = 0
	module2.m1 = function() {}
	return module2
})(window.module2 || {})
//可以进行模块的依赖.

AMD规范

AMD是'Asynchronous Module Definition'的缩写.意思是"异步模块定义"

require([module], callback)

require.js的用法

require.js的诞生解决了两个问题

1. 实现js文件的异步加载,避免网页失去响应
2. 管理模块之间的依赖性,便于代码的编写和维护

加载

npm install require

<script defer async="true" src="js/require.js" data-main="js/main"></script>

1. script标签引入js文件是同步加载的.为了防止阻塞.async属性表示这个文件要异步加载.
2. 为了兼容IE,加上defer.
3. data-main属性表示主入口文件.第一个被加载的主模块

主模块写法

require()函数接受两个参数,第一个参数是数组,元素时所依赖的模块,
第二个参数是一个回调函数.前面的模块加载完成后被调用.加载的模块会议参数形式传入函数

require(['jquery', 'underscore', 'backbond'], function($, _, Backbond) {
	// 逻辑代码
})

模块配置

使用require.config()方法对加载行为进行自定义.

require.config({
	baseUrl: 'js',					//基础路径
	paths: {
		'jquery': 'jquery.min',		//找的文件是jquery.min.js,默认是js文件.
		'underscore': 'underscore.min',
		"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"		//可以是线上的网址
	}
})

AMD模块的写法

require.js要求每一个模块是一个单独的js文件,并且模块必须按照AMD规范来写

//math.js

//没有依赖的模块
define(function() {
	var add = function(x, y) {return x+y}
	return {add: add}
})

//有依赖的模块
define(['myLib'], function(myLib) {
	function add() {myLid.doSomething()}

	return {add: add}
})

//加载方法
require(['math'], function(math) {
	alert(math.add(1, 1))
})

加载非规范的模块

如果要加载的模块不符合AMD规范.那么就要用require.config里面的shim来进行配置

require.config({
	baseUrl: 'js',
	paths: {
		'underscore': "underscore.min",
		'backbone': 'backbone.min',
	},
	shim: {								//不符合AMD规范的依赖
		'underscore': {
			exports: "_"
		},
		'backbone': {
			deps: ['underscore'],		//依赖
			exports: 'backbone',		//输出
		}
	}
})

所谓不符合AMD规范的模块,是专指形如jquery这种插件写法的js插件.并不是随便一段js都可以打包用shim打包成模块
而是遵循如下格式

(function(window) {
	var $ = {
		a: {},
		b: 1,
	}
	window.$ = $
	return window.$
})(window || {})

//模块化之前的插件,大都遵循这种写法,比如jquery

require.js插件

require.js只支持加载js文件,如果要加载文本text,图片image,json文件,markdown文件还要下载相关插件

define([

	'text!review.text',		//文本
	'image!cat.jpg',		//图片	
	], function(review, cat) {
	console.log(review)
	document.body.appendChild(cat)
})