requireJs笔记

官方网址：http://www.requirejs.org/

中文版翻译：http://makingmobile.org/docs/tools/requirejs-api-zh/

插件作用：对于JS模块文件进行管理，动态加载，项目完成时合并压缩模块。

一、基本用法：

1、外链文件，data-main中为外链的文件名，无需加后缀：

2、页面直接写入代码（可将data-main设为require.config配置文件）：

require.config({  baseUrl:'./js',paths: {  "a": "other/a",  "b": "other/b",  "c": "some/c",  "d": "some/d"},waitSeconds: 150
});//依赖加载（外层先加载）
require(["a","c","d","b"], function() {  a();c();d();b();
});

二、语法摘要（详细语法参见官方API）

1、引用插件内函数

Test.js:

define({test:function(msg) {alert("test" + msg);},userName: "111"
});

Requirjs引用：

require(["test"], function (a) {  //a按顺序对应加载的文件a.test("asdf");
});

2、require函数外部调用内部定义的函数，需等require内文件都加载完成了才有效

3、文件依赖加载(当前插件依赖jquery,需等jquery加载完成后才会执行)

define(['jquery'],function($){var returnVar = {userName: "111",aa: function(){}}return returnVar;
});

4、插件引用外部函数

外部函数：

function callE(msg){alert('e'+msg)
}
function callF(msg){alert('f'+msg)
}

Require配置：

require.config({baseUrl:'./js',paths: {  "e": "other/e",  "f": "other/f"},config:{  //外部函数赋值'e': {   //e指对应加载的模块名size: 'eee',cal:callE},'f':{size: 'fff',cal:callF}},waitSeconds: 150
})

插件引用：

define(function(require, exports, module){function aa(){module.config().cal('123e');}var m={aa:aa}return m;
})

5、jsonp服务，JSONP的callback参数为"callback"，因此"callback=define"告诉API将JSON响应包裹到一个"define()"中。

require(["http://example.com/api/data.json?callback=define"],function (data) {//data将作为此条JSONP data调用的API响应console.log(data);}
);

JSONP的这种用法应仅限于应用的初始化中。一旦JSONP服务超时，其他通过define()定义了的模块也可能得不得执行，错误处理不是十分健壮。

6、shim: 为那些没有使用define()来声明依赖关系、设置模块的"浏览器全局变量注入"型脚本做依赖和导出配置。

requirejs.config({shim: {'jquery.colorize': {deps: ['jquery'],exports: 'jQuery.fn.colorize'},'jquery.scroll': {deps: ['jquery'],exports: 'jQuery.fn.scroll'},'backbone.layoutmanager': {deps: ['backbone']exports: 'Backbone.LayoutManager'}}
});

7、paths备错配置

requirejs.config({//为了在IE中正确检错，强制define/shim导出检测enforceDefine: true,paths: {jquery: ['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min',//若CDN加载错，则从如下位置重试加载'lib/jquery']}
});

8、DOM Ready

在DOM加载完成后执行requeire内代码，domReady插件需另外加载。

require(['domReady!'], function (doc) {//本函数会在DOM ready时调用。//注意'domReady!'的值为当前的document
});

9、错误捕获

requirejs.onError = function (err) {console.log(err.requireType);if (err.requireType === 'timeout') {console.log('modules: ' + err.requireModules);}throw err;
};

三、r.js模块合并压缩

需在目录中放置r.js,同时有一个合并规则配置文件

例如build.js:

({appDir: './',baseUrl: './js',dir: './dist',modules: [{name: 'config'         //页面中data-main引入文件exclude:['other/b']    //不合并压缩的文件},{name: 'config2'},{name: 'main'}],fileExclusionRegExp: /^(r|build)\.js$/,optimizeCss: 'standard',removeCombined: true,paths: {a:'empty:',     //empty:指不被压缩合并，单独请求b:'other/b',c:'some/c',d:'some/d',e:'other/e',f:'other/f'}
})

r.js依赖于nodejs环境，使用方法：进入文件所在目录，运行node r.js -o build.js

四、项目实例

项目背景：VC内嵌网页项目，需与VC进行简单数据交互

代码设计：

1、独立文件配置文件路径，在require.js之前独立引用加载

Config.js:

//将配置作为全局变量"require"在require.js加载之前进行定义，它会被自动应用。下面的示例定义的依赖会在require.js,一旦定义了require()之后即被加载
var require={  baseUrl:'./js',paths: {  "a": "other/a",  "b": "other/b",  "c": "some/c",  "d": "some/d" },waitSeconds: 150
}

2、页面引入文件（模块文件使用代码）

<scriptdata-main="test6" src="require.js"></script>

3、按功能划分模块及目录

4、提取接口。

把需要引用的VC定义的函数，在config.js里通过config.cal()重新赋值。

提供给VC调用的函数（大部分为事件执行之后的回调），在config.js定义一个初始化对象，然后在各模块里进行相应赋值，如初始化对象：

Var vcCallback={refreshList:function(){},   //刷新列表数据refreshUserInfo:function(){}   //刷新用户数据
}

在require()代码里对其重写，如：vcCallback.refreshList=createView;

requireJs笔记相关推荐

requirejs使用笔记
一.requirejs为何会多次加载两次data-main文件文件目录: html页面: <!DOCTYPE html> <htmllang="en"& ...
RequireJS学习笔记（转）
前言进入移动前端是很不错的选择,这块也是我希望的道路,但是不熟悉啊... 现在项目用的是require+backbone,整个框架被封装了一次,今天看了代码搞不清楚,觉得应该先从源头抓起,所以再看看 ...
requirejs 学习笔记 0
2019独角兽企业重金招聘Python工程师标准>>> require.config({waitSeconds : 12,paths:{jquery : "https:// ...
miniui文件上传 linux,MINIUI grid学习笔记
grid 控件 a.事件的绑定和移除 grid.on("rowclick", fn); //绑定事件 (这个的话类似jquery的绑定事件) grid.un("rowcl ...
backbone.js学习笔记
backbone.js学习笔记之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
【AngularJs学习笔记五】AngularJS从构建项目开始
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
从零玩转Webpack4+实现原理笔记(一)
一.webpack 开篇 1.什么是 webpack? webpack 是一套基于 NodeJS 的"模块打包工具", 在 webpack 刚推出的时候就是一个单纯的 JS 模块打 ...
尚硅谷es6新特性笔记
尚硅谷es6新特性笔记一.let与const let的变量声明以及声明特性 const的变量声明以及声明特性 const.let.var 三者之间的区别二.变量解构赋值三.模板字符串四.对象的 ...
vue全家桶学习笔记
大纲核心成员 vue:核心功能-插件,组件,数据管理,生命周期 vue-router:路由机制-拆分,拆开,将文件划分大小 vuex:vue官方提供的数据共享机制,全局性管理数据编译打包 webp ...

requireJs笔记

requireJs笔记相关推荐

最新文章

热门文章