requireJS(一)
一、关于requirejs
requirejs是一个用于异步加载js模块的框架。详细介绍的请谷歌~
二、HOW TO USE
首先先去官网下载requirejs.js下来,再在自己的项目中引入
1 <script type="text/javascript" src="../requirejs.js" data-main="../main"></script>
注意到data-main这个属性,简单的理解就是一个入口函数,用来启动脚本的加载过程。
tip:为了使这个文件加载时候不失去响应,你可以选择将它放在网页底部加载,还有另外一个办法就是写成下面这样
1 <script type="text/javascript" src="../requirejs.js" data-main="../main" async="true" defer></script>
async这个属性表明它要异步加载,避免失去响应,另外defer是为了兼容IE浏览器(IE不支持async这个属性),所以完整的把两个都写上。
例子结构目录为
三、简单的例子
假设js/a.js中的代码如下:
1 var info = "hello world"//简单的定义了一个变量
然后在mian.js中用requirejs加载它,如下所示
1 require(["../a.js"],function(a){ 2 alert(info);//弹出hello world 3 })
然后再查看浏览器的开发者工具下,可以看到已经加载了
可以看到require接受3个参数(示例中为2个),第一个参数为标识的id(建议忽略);第二个参数为一个字符型的数组,为要加载的js模块;第三个参数为回调函数,
当js模块注入加载完成后,此函数就会被调用,其中函数的参数,依次顺序对应第二个参数中字符串数组的值。
tip:第二个参数中字符串数组中允许不同的值,当字符串是以“.js”结尾的(例如上面中的js/a.js)或者是以“/”开头,又或者直接是一个完整的url(
包含URL协议,如"http:"、"https:"),则会被requirejs认为用户是直接加载一个js模块。
否则,当字符串是类似”my/module”的时候,它会认为这是一个模块,并且会以用户配置的 baseUrl 和 paths 来加载相应的模块所在的 JavaScript 文件(后面将介绍)
四、配置
现在我们来换一种写法,我们使用require.config来对模块的加载行为自定义,其中参数是一个对象
1 require.config({ 2 paths:{ 3 jquery:"jquery-1.10.2.min", 4 a:"a" 5 } 6 }); 7 8 require(["jquery","a"],function($,a){ 9 alert($().jquery); //1.10.2 10 alert(info); //hello world 11 });
简单的理解就是参数对象中的path属性用来设置路径的。
由于requirejs是以相对于baseurl属性(示例中没有给出)地址来加载所以的代码的。其中baseUrl是为require.config的参数(参数为对象)里一个属性。
如果没有显式指定config及data-main,则默认的baseUrl为包含RequireJS的那个HTML页面的所属目录。
此时,RequireJS默认假定所有的依赖资源都是js脚本,因此无需在module ID上再加".js"后缀(即上面的jquery-1.10.2.min不用写成jquery-1.10.2.min.js
写上会报错(Uncaught Error: Script error for: jquery)。
五、用define自定义模块
1 //b.js 2 3 define(["jquery"],function($){ 4 return { 5 dom:function(){ 6 $("#div1").html("123"); 7 alert("shabi") 8 }, 9 abc:"8888888" 10 }; 11 }) 12 13 //main.js 14 15 require.config({ 16 paths:{ 17 jquery:"jquery-1.10.2.min", 18 a:"a", 19 b:"b" 20 } 21 }); 22 23 require(["jquery","a","b"],function($,a,b){ 24 alert($().jquery); //1.10.2 25 alert(info); //hello world 26 b.dom(); // 改写了页面的html文字,弹出shiba 27 alert(b.abc); //8888888 28 console.log(b.abc); //控制台输出8888888 29 }); 页面代码为:<div id="div1">aaa</div>
上面演示了如何自定义模块包含了值对,函数式(存在依赖的函数式定义),可依据需要自己定义,另外,我们也可以再返回之前做一些其他的事情。
六、其他一些配置属性
baseUrl:用于设置基目录(如上面的例子可以设置baseUrl:"../",代码一样不变)
config(直接看下面的例子
13 14 //main.js 15 16 require.config({ 17 baseUrl:"../", 18 paths:{ 19 a:"a", 20 }, 21 config:{ 22 "a":{ 23 message:"liucunjie" 24 } 25 } 26 }); 27 28 require(["a"],function(a){ 29 a.ms() // 控制台下输出liucunjie 30 });
其中在mian.js配置中,指明config中是哪个模块(上面的例子是a.js模块)
然后在a.js文件代码书写
1 define(["module"],function(module){ 2 return{ 3 ms:function(){ 4 var mess = module.config().message; 5 console.log(mess); 6 } 7 } 8 })
引入module,然后用module.config()来获取。
七、加载非规范(AMD)的模块
理论上,requirejs加载的模块必须是符合AMD规范的,或者是用define()函数定义的模块
如今,很多主流的库都符合AMD规范,但是也有很多库并不符合,这时就需要在配置里设置shim属性
例如backbone这个库,没有采用AMD规范编写
1 require.config({ 2 shim:{ 3 'underscore':{ 4 exports:'_' 5 }, 6 'backbone':{ 7 deps:['underscore','jquery'], 8 exports:'Backbone' 9 } 10 } 11 });
其中deps数组为表明其依赖,exports(输出的变量名)则为这个模块外部调用时的名称。
未完待续。。。。
转载于:https://www.cnblogs.com/cunjieliu/p/3711139.html
requireJS(一)相关推荐
- 基于angularJS和requireJS的前端架构
1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来 ...
- RequireJS学习笔记(转)
前言 进入移动前端是很不错的选择,这块也是我希望的道路,但是不熟悉啊... 现在项目用的是require+backbone,整个框架被封装了一次,今天看了代码搞不清楚,觉得应该先从源头抓起,所以再看看 ...
- RequireJS示例
建议项目结构: HTML文件结构: <!DOCTYPE html> <html> <head lang="en"><meta charse ...
- requirejs模块化html,requirejs模块化-入门
先创建5个js文件,放在js文件夹下,分别是: 1.js define(function(){ return a=1; }); 2.js define(function(){ return a=2; ...
- 提高性能:用RequireJS优化Wijmo Web页面
上周Wijmo 2014 V2版本刚刚发布(下载地址), 有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wijmo-pro.all.3.20142.45.m ...
- RequireJS和AMD规范
目录 概述 define方法:定义模块 require方法:调用模块 AMD模式小结 配置require.js:config方法 插件 优化器r.js 参考链接 概述 RequireJS是一个工具库, ...
- requirejs搭建前端框架
1. 文件结构 2. base.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 requirejs.config({ b ...
- JS模块化工具requirejs教程02
基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出 ...
- 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi
一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...
- [知识储备]用RequireJS +zepto开发微信公众号
2019独角兽企业重金招聘Python工程师标准>>> 一.了解RequireJS 和zepto 1.RequireJS的目标是鼓励代码的模块化,其遵循 AMD(异步模块定义)规范. ...
最新文章
- phpcms V9利用num++实现多样形式列表标签调用
- OpenMP入门教程(一)hello world
- 黑星什么意思_星月菩提黑星海南料什么意思
- 使用ILSpy探索C#7.0新增功能点
- java速学_5分钟快速入门Java,不看真的可惜了
- Servlet其他关联类---ServletContext类
- On Comparing Side-Channel Preprocessing Techniques for Attacking RFID Devices
- 10岁才上小学的他,如今是高校男神教授
- 结合MSDN理解windows service 服务安装的三个类。
- cesium加载百度地图_Cesium专栏-百度地图加载(附源码下载)
- Python 和 奥数 — 同余法求数值
- Gateway过滤器详解
- jQuery Word Export: missing dependency (FileSaver.js)
- 高效办公之高效学习技巧:倍速学习软件详解
- vue2+electron 给大家说个相声
- DICOM:基于fo-dicom的简易DICOM Viewer
- 一起来分解一个Netty应用
- Cesium-Primitive图元的讲解
- 苹果平板电脑:显示已停用;怎么样打开
- 饿了么物流移动端业务可用性监控体系建设
热门文章
- 用 lastIndexOf()、substr()、split()方法截取一段字符串
- busybox devmem 直接获取、修改内存信息
- 1.SpringMVC 概述
- ubuntu12.04 安装配置jdk1.7
- A-Webkit第四章:添加学生
- 正确地组织python项目的结构
- Windows Serer2003域升级到Windows Server2008R2域
- 最新25个高质量PSD素材免费下载
- 新浪微博***事件分析
- MYSQL同步 Slave_IO_Running: No 或者Slave_SQL_Running: No 解决办法