一、关于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(一)相关推荐

  1. 基于angularJS和requireJS的前端架构

    1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来 ...

  2. RequireJS学习笔记(转)

    前言 进入移动前端是很不错的选择,这块也是我希望的道路,但是不熟悉啊... 现在项目用的是require+backbone,整个框架被封装了一次,今天看了代码搞不清楚,觉得应该先从源头抓起,所以再看看 ...

  3. RequireJS示例

    建议项目结构: HTML文件结构: <!DOCTYPE html> <html> <head lang="en"><meta charse ...

  4. requirejs模块化html,requirejs模块化-入门

    先创建5个js文件,放在js文件夹下,分别是: 1.js define(function(){ return a=1; }); 2.js define(function(){ return a=2; ...

  5. 提高性能:用RequireJS优化Wijmo Web页面

    上周Wijmo 2014 V2版本刚刚发布(下载地址),  有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wijmo-pro.all.3.20142.45.m ...

  6. RequireJS和AMD规范

    目录 概述 define方法:定义模块 require方法:调用模块 AMD模式小结 配置require.js:config方法 插件 优化器r.js 参考链接 概述 RequireJS是一个工具库, ...

  7. 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 ...

  8. JS模块化工具requirejs教程02

    基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出 ...

  9. 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi

    一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...

  10. [知识储备]用RequireJS +zepto开发微信公众号

    2019独角兽企业重金招聘Python工程师标准>>> 一.了解RequireJS 和zepto 1.RequireJS的目标是鼓励代码的模块化,其遵循 AMD(异步模块定义)规范. ...

最新文章

  1. phpcms V9利用num++实现多样形式列表标签调用
  2. OpenMP入门教程(一)hello world
  3. 黑星什么意思_星月菩提黑星海南料什么意思
  4. 使用ILSpy探索C#7.0新增功能点
  5. java速学_5分钟快速入门Java,不看真的可惜了
  6. Servlet其他关联类---ServletContext类
  7. On Comparing Side-Channel Preprocessing Techniques for Attacking RFID Devices
  8. 10岁才上小学的他,如今是高校男神教授
  9. 结合MSDN理解windows service 服务安装的三个类。
  10. cesium加载百度地图_Cesium专栏-百度地图加载(附源码下载)
  11. Python 和 奥数 — 同余法求数值
  12. Gateway过滤器详解
  13. jQuery Word Export: missing dependency (FileSaver.js)
  14. 高效办公之高效学习技巧:倍速学习软件详解
  15. vue2+electron 给大家说个相声
  16. DICOM:基于fo-dicom的简易DICOM Viewer
  17. 一起来分解一个Netty应用
  18. Cesium-Primitive图元的讲解
  19. 苹果平板电脑:显示已停用;怎么样打开
  20. 饿了么物流移动端业务可用性监控体系建设

热门文章

  1. 用 lastIndexOf()、substr()、split()方法截取一段字符串
  2. busybox devmem 直接获取、修改内存信息
  3. 1.SpringMVC 概述
  4. ubuntu12.04 安装配置jdk1.7
  5. A-Webkit第四章:添加学生
  6. 正确地组织python项目的结构
  7. Windows Serer2003域升级到Windows Server2008R2域
  8. 最新25个高质量PSD素材免费下载
  9. 新浪微博***事件分析
  10. MYSQL同步 Slave_IO_Running: No 或者Slave_SQL_Running: No 解决办法