requireJS 基本使用

在requireJs 中,.js的后缀是可以省略不写的
 <script data-main="main" src="require.js"></script> 
在require.js 加载完之后,会查找页面上script标签的data-main属性的值,然后加载,data-main指定的js文件

找到名为main的js文件
通过requireJs同时加载了js1、js2、js3,也可以同时加载更多js文件
第2个回调函数在导入的js文件全部加载完之后才会执

require([‘js1‘, ‘js2‘, ‘js3‘], function(){
console.log(‘js1 js2 js3 loaded‘)
var total = num1 + num2 + num3
console.log(total)

hello1()
hello2()
hello3()
})

使用requireJs可以很方便的导入js文件,但是要注意js文件中变量名和方法名与其他js文件中变量名方法名冲突的问题
产生冲突的原因:
浏览器端js文件存在共用的全局作用域,全局作用域中变量名、方法名可能会被覆使用requireJs加载js文件,会自动在head标签中添加script标签,这些script标签带有async属性,async属性会使浏览器异步并行加载这些js文件(即同时开始加载这些js文件)

创建模块

判断require是否正确

if (typeof define === "function"&&define.amd) {
console.log("define来自require.js")
} 

requirejs == require

requirejs(["js4"],function (js4) {
console.log("导出的是:")
console.log(js4);
});

模块化 nodejs(服务端,commonJS) require.js(客户端,AMD) sea.js(中国,客户端,CMD) ES6(ECMA)

定义模块

参数一模块名必须字符串。参数2依赖,

define(["require", "exports", "module","js5"],function (require, exports, module,js5) {
//exports = "天幽"; 失败
module.exports = "天幽";

console.log(require);
console.log(exports);
console.log(module);

//var num = require("js5") 获取js5
//console.log(num);
});

或者这样写 define(function (require, exports, module,js5) { (ps:推荐上面那种。这种写法消耗能比较大)

导出的方法4种
exports 是能使用.添加属性,不能使用=重新赋值
module.exports 既可以使用.添加属性,也可以使用=重新赋值
return 最常用方法,相当于在module.exports使用=
define(object) 直接跟一个对象,相当于module.exports = {};
全局中的require == requirejs();
函数作用域require == LocalRequire(); 返回值就是模块的导出

时间: 2024-10-18 03:31:02

requireJS 基本使用的相关文章

requireJS

1.用于ADM(基于模块的异步加载JavaScript代码的机制)js模块开发 2.下载requireJS 3.好处: 1)有效防止命名冲突(js多时可能很多全局变量容易重复) 2)声明不同的js文件之间的依赖 3)模块化的开发 4.常用方法: requirejs.config:为模块指定别名 requirejs:将写好的模块引入并编写主代码 define:编写模块,在相应地方来引用 5.例子: 1)引入模块入口data-main是入口;<script data-main="js/main

requireJS(一)

一:为什么要使用requireJS? 很久之前,我们所有的JS文件写到一个js文件里面去进行加载,但是当业务越来越复杂的时候,需要分成多个JS文件进行加载,比如在页面中head内分别引入a.js,b.js,c.js等,如下所示: <script src="js/app/a.js"></script> <script src="js/app/b.js"></script> <script src="js/

JS模块化工具requirejs教程02

基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出这个api是用来定义一个模块 require 加载依赖模块,并执行加载完后的回调函数 前一篇中的a.js: define(function(){ function fun1(){ alert("it works"); } fun1(); }) 通过define函数定义了一个模块,然后再页面

Angular-ui-router + oclazyload + requirejs实现资源随route懒加载

本文主要说明在用AngularJS开发web应用中如何实现lazyload,使用AngularJS需要在前端实现路由功能,本文就介绍利用此点实现前端资源的懒加载. 问题 目前大部分AngularJS的应用用requirJS组织模块,但是很多都没有使用lazyload功能,在app.js中启动时将全部依赖加载进来,在模块功能较少,前端资源少的情况下没问题.那么问题来了,依赖资源过多时怎么办? build时利用grunt-contrib-requirejs提取合并文件,减少http请求,但是存在问题

requirejs下载与配置

写在开始: requirejs有中文版api文档,可以访问http://www.requirejs.cn/home.html 下载requirejs 访问http://www.requirejs.cn/docs/download.html 下载require.js(可以下载原版或压缩版,压缩版体积小,原版未压缩,便于开发人员阅读) 这里下载到scripts目录 参考资料: http://www.requirejs.cn/

requirejs一 加载JavaScript文件

首先,目录如下(根目录有一个index.html文件.有一个scripts文件夹): scripts文件夹有如下的文件 以下是index.html代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>My Sample Project</title> 5 <!-- data-main attribute tells require.js to load 6 scripts/main.js after

浅谈HTML5单页面架构(三)—— 回归本真:自定义路由 + requirejs + zepto + underscore

本文转载自:http://www.cnblogs.com/kenkofox/p/4650310.html 不过,这一篇,我想进一步探讨一下这两个框架的优缺点,另外,再进一步,抛开这两个框架,回到本真,自己搞个简单的路由一样可以实现单页面. 这个对于刚做前端开发的新同学来说就最好不过了,如果一来到岗位就一大堆angular.backbone.requirejs,看资料都看一两周.其实大家最熟悉的东西还是那个美元$,用美元能解决的问题,就不要麻烦到angular.backbone大爷了. 事先说明,

浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore

本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)——requirejs + angular + angular-route>探讨了angular+requirejs的一个简单架构,这一篇继续来看看backbone如何跟requirejs结合. 相同地,项目架构好与坏不是说用了多少牛逼的框架,而是怎么合理利用框架,让项目开发更流畅,代码更容易管理.那么带着这个目的,我们来继续探讨backbone. 首

浅谈HTML5单页面架构(一)——requirejs + angular + angular-route

本文转载自:http://www.cnblogs.com/kenkofox/p/4643760.html 心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs

RequireJS对文件合并与压缩实现方法

RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量. 本文为大家讲解的是requireJS对文件合并与压缩的实现方法,感兴趣的同学参考下. RequireJS提供了一个打包与压缩工具r.js,r.js的压缩工具使用UglifyJS进行压缩的或Closure Compiler.r.js下载 requireJS