requireJS知识点

data-main属性:

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

这里指定了根是app.js,只有直接或间接与app.js有关的依赖关系的模块才会被插入到html中。

 

require.config() 配置

其参数为一个配置对象,配置项及含义如下:

  baseUrl --> 用于加载模块的根路径

  paths --> 用于映射不存在根路径下面的模块路径

  shims --> 配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用requireJS定义,但是你还是想通过RequireJS来使用它,那么你就需要在配置中把它定义为一个shim。

  deps --> 加载依赖关系数组

requirejs.config({// 默认情况下从这个文件开始去拉取资源baseUrl: 'script/app',// 如果你的依赖模块以pb头,会从script/pb加载模块path: {pb: '../pb'},// load backone as a shim,所谓就是将没有采用的requirejs方式定义// 模块的东西转变为requirejs模块shim: {'backone':{deps:['underscore'],exports:'Backone'}}
});

 

define()函数:

该函数用于定义模块,形式如下:

// logger.jsdefine(['a', function(a){'use strict';function info(){ console.log('我是个私有函数'); }return {name: '一个属性',test: function(a){console.log(a + '你好!');a.f();info();}};
}]);

define函数接受两个参数。

第一个参数 --> 是一个字符串数组,表示你定义的模块依赖的模块,这是依赖模块a。

第二个参数 --> 是一个函数,参数是注入前面依赖模块,顺序同第一个参数顺序。在函数中可做逻辑处理,通过return一个对象暴露模块的属性和方法,不再return中的可认为是私有方法和私有属性。

 

require()函数:

该函数用于调用定义好的模块,可以是用define函数定义的,也可以是一个shim,形式如下:

// app.jsrequire(['logger'], function(logger){logger.test('大熊');console.log(logger.name);
});// 输出结果:
// 大熊你好!
// 不确定(取决于a模块的f方法)
// 我是私有函数
// 一个属性

依赖一个不适用requirejs方式的库:

hello.js如下:

function helloFun(){console.log('hello,world~');
}

配置方式如下:

requirejs.config({baseUrl: '/public/js',path: {hello: 'hello'},shim: {hello: { exports: 'helloFun'}}
});

引入方式如下:

requirejs(['hello'], function(hello){hello();
});

暴露多个变量:init

hello.js如下:

function fun1(){console.log('111111');
}function fun2(){console.log('22222');
}

配置如下:

requirejs.config({baseUrl: '/public/js',path: {hello: 'hello'},shim: {hello: {init:function(){return {fun1: fun1,fun2: fun2,};}}}
});

引入方式如下:

requirejs(['hello'], function(hello){hello.fun1();hello.fun2();
});

当exports与init同时存在的时候,exports将被忽略。

 

无主的与有主的模块:

define('jquery', [], function(){ ... });

这里的jquery表示给当前这个模块起了名字jquery,它已经是有主的了,只能属于jquery

在使用一个第三方的时候,一定要注意它是否声明了一个确定的模块名。

define([...], function(){ ... });

上面这个是无主模块。可以在 requirejs.config 里,使用任意一个模块名来引用它。大部分的模块就是无主的。

挖墙脚:

对于有主的模块,不把它们当做满足 requirejs 规范的模块,而当作普通js库,然后在 shim 中导出它们定义的全局变量。

requirejs.config({baseUrl: '/public/js',path: {myjquery: 'lib/jquery/jquery'},shim: {myjquery: { exports: 'jQuery' }}
});requirejs(['myjquery'], function(jq){console.log(jq);
});

如何不让jquery污染全局的$:

requirejs.config({baseUrl: '/public/js',path: {jquery: 'lib/jquery/jquery','jquery-private': 'jquery-private'},map: {'*': { 'jquery':'jquery-private' },'jquery-private': { 'jquery':'jquery' }}
});requirejs(['jquery'], function(jq){console.log($);
});

Map参数 -- Map参数是用来解决同一个模块不同版本的问题,比如在项目开发中,开发初期使用了jquery1.7版本,但是由于业务的需求需要引入jquery1.9以上的版本时候,但是又担心有些依赖于jquery1.7的代码升级到1.9以上的时候会有问题,因此可以让一部分代码还是依赖于jquery1.7,新增的代码依赖于jquery1.9。

现在在入口文件 app.js 添加如下代码:

requirejs.config({map:{'app/a':{ 'jquery':'js/lib/jquery1.7.js'},'app/b':{ 'jquery':'js/lib/jquery1.9.1.js'}},
});require(['app/a'], function(jq){ ... });require(['app/b'], function(jq){ ... });

然后在 app/a.js 添加如下代码:

// a.jsdefine(function(require, exports, module){var a = require(['jquery']);
});

在 app/b.js 添加如下代码:

// b.jsdefine(function(require, exports, module){var b = require(['jquery']);
});

在app.js中

require(['app/a'], function(jq){ });时候,在加载 app/a.js 的时候回加载jquery1.7.js文件,在加载app/b.js的时候会加载jquery1.9.1.js。

config参数 -- config是指需要将配置信息传给一个模块,这些配置往往是 application 级别的信息,需要一个手段将他们向下传递个模块。在requireJS中,基于require.config()的config配置项来实现。要获取这些信息的模块可以加载特殊的依赖“module”,并调用module.config()。

app.js代码如下:

requirejs.config({config:{'app/c':{ size':'large'},'app/d':{ color:'blue'}},
});require(['app/c'], function(c){console.log(c);
});require(['app/d'], function(d){console.log(d);
});

在 c.js 里面的代码:

define(function(require, exports, module){// 其值是 'large'var size = module.config().size;return size;
});

d.js代码:

define(['module'], function(module){// Will be the value 'blue'var color = module.config().color;return color;
});

 

本文链接:https://my.lmcjl.com/post/7333.html

展开阅读全文

4 评论

留下您的评论.