关于RequireJS的简单介绍即使用方法


Posted in Javascript onOctober 20, 2016

RequireJS介绍

RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

兼容性

浏览器(browser) 是否兼容
IE 6+ 兼容 ✔
Firefox 2+ 兼容 ✔
Safari 3.2+ 兼容 ✔
Chrome 3+ 兼容 ✔
Opera 10+ 兼容 ✔

优点

实现js文件的异步加载,避免网页失去响应

管理模块之间的依赖性,便于代码的编写和维护

快速上手

step 1

引入require.js

require()中的依赖是一个数组,即使只有一个依赖,你也必须使用数组来定义

第二个参数是回调函数(callback),可以用来解决模块之间的依赖性

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="require.js"></script>
    <script type="text/javascript">
      require(["js/a"], function(){
        alert("load finished");
      });
    </script>
  </head>
  <body>
   body
  </body>
</html>

step 2

require.config是用来配置模块加载位置

如果固定的位置比较长,可以使用 baseUrl : "js",则paths中就不用写js了

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="require.js"></script>
    <script type="text/javascript">
      require.config({
        paths : {
          "jquery" : ["http://vs.thsi.cn/js/jquery-1.7.2.min", "js/jquery"],
          "a" : "js/a"        
        }
      });

      require(["jquery", "a"], function(){
        alert("load finished");
      });
    </script>
  </head>
  <body>
   body
  </body>
</html>

step 3

step 2中重复出现了require.config配置,如果每个页面中都加入配置,就显得不大好了,requirejs提供了一种叫"主数据"的功能

创建一个main.js把step 2中require.config放到main.js中

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

step 4

通过require加载的模块一般都需要符合AMD规范即使用define来申明模块,但是部分时候需要加载非AMD规范的js,这时候就需要用到另一个功能:shim

require.config({
  shim: {
    "underscore" : {
      exports : "_";
    },
    "jquery.form" : ["jquery"]
  }
});
require(["jquery", "jquery.form"], function($){
  $(function(){
    $("#form").ajaxSubmit({...});
  })
});

以上就是小编为大家带来的关于RequireJS的简单介绍即使用方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JS之小练习代码
Oct 12 Javascript
在JavaScript中,为什么要尽可能使用局部变量?
Apr 06 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
javascript if条件判断方法小结
May 17 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
javascript淘宝主图放大镜功能
Oct 20 #Javascript
利用Angular.js限制textarea输入的字数
Oct 20 #Javascript
一个极为简单的requirejs实现方法
Oct 20 #Javascript
JavaScript实现窗口抖动效果
Oct 19 #Javascript
原生js图片轮播效果实现代码
Oct 19 #Javascript
Angular2表单自定义验证器的实现
Oct 19 #Javascript
javascript滚轮控制模拟滚动条
Oct 19 #Javascript
You might like
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
党的生日演讲稿
2014/09/10 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
js实现模拟购物商城案例
2021/05/18 Javascript
利用JavaScript写一个简单计算器
2021/11/27 Javascript
windows系统安装配置nginx环境
2022/06/28 Servers