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

 

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

 

你可能感兴趣的:(requirejs学习笔记)