关于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 相关文章推荐
Prototype Number对象 学习
Jul 19 Javascript
JavaScript 乱码问题
Aug 06 Javascript
Js 刷新框架页的代码
Apr 13 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
JS简单计算器实例
Jan 20 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
React实现全选功能
Aug 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
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Python socket处理client连接过程解析
2020/03/18 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
学生处主任岗位职责
2013/12/01 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
安全目标管理责任书
2014/07/25 职场文书
中考学习决心书
2015/02/04 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
酒桌上的开场白
2015/06/01 职场文书
2019消防宣传标语!
2019/07/10 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
关于vue-router-link选择样式设置
2022/04/30 Vue.js