【原】requirejs学习笔记

　　随着JS越来越庞大，已经不仅仅是以前复制粘贴做特效的时代了，JS越来越偏向于业务逻辑与应用。JS在web开发中占有越来越重要的地位。

由于JS代码庞大，文件数目多，传统的使用<script src=""></script>会带来很多性能的问题，因此requirejs可以为我们提供解决思路，它有以下的功能：

 

1、声明不同js文件之间的依赖

2、可以按需、并行、延时载入js库

3、可以让我们的代码以模块化的方式组织

 

下面进行实战：

文档结构是这样的

 

.js/app/config.js

.js/require.js

.js/app/hello1.js

.js/app/hello2.js

.js/app/hello3.js

index.html

 

在index.html中引入requirejs

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

 

其中，data-main指定主要的配置文件. config.js如下： 

 

require.config({

   //默认情况下模块所在目录为js/app
     baseUrl: 'js/app',


     //这里设置的路径是相对与baseUrl的，不要包含.js，否则会报错
    paths: {

           h1: 'hello1',
　　　　　　 h2:'hello2',
　　　　　　 h3:'hello3'
     }

  });
 
 // 开始逻辑.
 requirejs(['h1', 'h2', 'h3'],

 function   (h1, h2, h3) {
     //这里是引入那三个js之后的回调函数
　　　　h1.hello();  //I am hello1
　　　　h2.hello();  //I am hello2
　　　　h3.hello();  //I am hello3


 });

 

　　

hello1.js

define([], function() {
  return {
    hello: function() {
      console.log("I am hello1");
    }
  }
});

 

hello2.js

define([], function() {
  return {
    hello: function() {
      console.log("I am hello2");
    }
  }
});

 

hello3.js

define([], function() {
  return {
    hello: function() {
      console.log("I am hello3");
    }
  }
});

　

require加载文件时，会自动加上.js后缀。当某些模块依赖其他模块时，可以通过define([xxx],function(xxx){yyy});的方式添加依赖关系，

require会在异步加载后，自动调整次序。

 

shim

当有些js不是AMD规范的时候，或者我有一个public.js需要依赖于jquery时，config.js可以这样写

代码如下：

requirejs.config({

	baseUrl: 'js/app',
　　
	paths:{
		"jquery":"jquery-1.11.2.min",
		"public":"public",
	},

	// 这个配置是你在引入依赖的时候的包名,比如一些不是AMD规范的插件
    shim: {
        'public': {
            deps: ['jquery'],
　　　　　　　//exporets 就是被外界访问的接口，比如jquery的$　
            exports: 'public'
        },
    }
});

require(['public'], function (p) {

    // somecode
});

　　

使用中遇到的问题以及解决方法：

当我require.js没有用在单页面的时候，我遇到了这样一个问题：

　　比如我1.html需要有另外的一些单独函数，而其他页面是不需要的，并且我希望在加载完config.js之后再执行我那个单独的函数，那要怎么做呢。

如果直接写在config.js里面的require后的回调函数那里，那么要单独分开每一个config.js，这样就没意思了。一位博友给出的答案是

index.html

<script src="js/require.js" data-main="js/app/config.js"  require-module="js/app/other.js"></script> //加个require-module属性，后面加上你需要单独引入的js

　　

config.js 里面这样

require.config({

	baseUrl: 'js/app',
	paths:{
		"jquery":"jquery-1.11.2.min",
		"public":"public",
	},

	shim: {    
	   'public': {deps: ['jquery'],exports:'public'}
    }

});

require(['jquery','public'], function($,p){

　　　　//改变的是这里
	var scripts = document.getElementsByTagName("script");

	for (var i = 0; i < scripts.length; i++) {
		　　　　// 获取页面所需加载模块入口名称，需要单独引入的js写在 script里面  require-module这个属性这里
			var module = scripts[i].getAttribute("require-module");

				if (module != undefined && module != "") {

					require([module ]);

					break;
				}
	}
	

});

　　

 

这样的话，你就可以在确保config里面的js加载完毕后，再加载你自己的js

 

暂时先写到这里先，有错误的话欢迎指出