关于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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
基于jquery实现五星好评
Nov 18 jQuery
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 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基础学习之变量的使用
2011/06/09 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
centos6.4下python3.6.1安装教程
2017/07/21 Python
对python中return和print的一些理解
2017/08/18 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
python爬虫请求头设置代码
2020/07/28 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
安全检查与奖惩制度
2014/01/23 职场文书
高校教师岗位职责
2014/03/18 职场文书
班级心理活动总结
2014/07/04 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
导游词之桂林
2019/08/20 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL