关于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 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
js 窗口抖动示例
Sep 04 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
js实现tab切换效果
Feb 16 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
JavaScript实现网页动态生成表格
Nov 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
原生JavaScript实现todolist功能
2018/03/02 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
python实现每次处理一个字符的三种方法
2014/10/09 Python
python集合用法实例分析
2015/05/30 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
python生成带有表格的图片实例
2019/02/03 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
物理研修随笔感言
2014/02/14 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
村道德模范事迹材料
2014/08/28 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
Java8中接口的新特性使用指南
2021/11/01 Java/Android
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android