javascript高级模块化require.js的具体使用方法


Posted in Javascript onOctober 31, 2017

本文介绍了require.js的具体使用方法,分享给大家,也给自己留个笔记。

Require.js:

RequireJS是一个非常小巧的javascript模块载入框架,是AMD(Asynchronous Module Definition,异步模块加载机制)规范最好的实现之一。最新版的requireJS压缩后只有14k,堪称非常轻量。它还同时可以和其他的框架协调工作,使用requireJS必将使我们的前端代码质量得以提升。

首先我们先来看一下一个普通的页面js加载

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/index02.js" ></script>
  </head>
  <body>
    <h1>this is a page.</h1>
  </body>
</html>

运行结果:

javascript高级模块化require.js的具体使用方法

此时,如果我们不对弹出框做操作,页面就不会接着加载,就不会有页面内容,这并不是我们想要实现的结果。

下面我们用require.js进行操作:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/require2.1.11.js"></script>
    <script type="text/javascript">
      require(["js/index","js/index01"],function(){
        console.log("当js加载成功后会执行的函数");
      },function(){
        console.log("当js加载失败后会执行的函数");
      });
    </script>
  </head>
  <body>
  </body>
</html>

index.js

define(function(){
  console.log("this is a test!");
  function test(){
    console.log("haha,i am a test!");
  }
  test();
});

首先页面上不再导入test02.js,只是导入了requireJS,其次在javascript中我们使用require()方法,在其中传递了一个数组的参数,实参为我们要导入的js文件的【路径+文件名称。

此时的运行结果:

javascript高级模块化require.js的具体使用方法 

javascript高级模块化require.js的具体使用方法

javascript高级模块化require.js的具体使用方法

可以看出,此时页面内容已经显现出来了。并不像前面我们传统的一样在等待js运行完成后页面再加载,而是页面加载完成后才运行js代码,这样在运行效率上就大大的提高了。

根据上面的代码,我们可以来分析requirejs的基本API:

requireJS会定义三个变量:define,require,requirejs

  1. require==requirejs,一般使用require更简短。
  2. define 用来定义一个模块
  3. require 加载依赖模块(引用定义好的模块),并执行加载完后的回调函数

require有三个参数:

require(["js/index","js/index01"],function(){
        console.log("当js加载成功后会执行的函数");
      },function(){
        console.log("当js加载失败后会执行的函数");
      });
//第一个参数:定义require中的依赖,参数必须是数组形式,即使只有一个依赖,也必须使用数组形式传参。
//第二个参数:是一个回调函数,用来处理加载完毕后的逻辑,当所有模块加载完成后触发
//第三个参数:也是一个回调函数,用来处理模块加载失败后的情况。如上面代码,js中没有定义index01.js这个文件,所以出调用这个回调函数。

加载网络文件

之前我们加载的都是本地的js文件,但是,有些时候我们又需要加载网络上的文件,那又该怎么加载呢?下面我们就来介绍一下怎样加载网络上的js文件.

我们现在以加载一个jquery.js文件为例:

//百度cdn公共库jQuery地址:   http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js 
//jQuery官方地址:      https://code.jquery.com/jquery-3.1.1.js
//注意:网络上去取时不能加后缀,否则取不到
require.config({
  paths : {
    //为网络上的库去一个名字:jquery
    "jquery" : ["https://code.jquery.com/jquery-3.1.1"]
  }
});

//
require(["jquery","js/test01","js/test02"],function(){
  alert("页面加载成功~~");
},function(){
  alert("页面加载失败~~")
});

在取网络上的文件时注意:

1、config方法的参数是一个对象
2、paths的值也是一个对象
3、当我们为网络上的库取名字是任意,但是建议取有意义的名字,别人可以通过名称知道你的网络资源是什么资源
4、库的值是一个数组,意味着可以多个同时写,防止网络异常取不到
5、特别注意:网络资源路径不能带后缀名,否则取不到
6、我们也可以先让去网络中去取,如果取不到,再在本地取,减轻本地服务的压力(属于项目优化)。

require.config({
  paths : {
    //这样配置,减轻本地服务器的压力
    "jquery" : ["https://code.jquery.com/jquery-3.1.1.js","js/jquery-1.8.3"]
  }
});

//
require(["jquery","js/test01","js/test02"],function(){
  alert("页面加载成功~~");
},function(){
  alert("页面加载失败~~")
});

同样我们也可以将本地的配置到paths中:

require.config({
  paths : {
    //这样配置,减轻本地服务器的压力
    "jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
    //将本地的js文件同样配置,之后引用
    "test01" : ["js/test01"],
    "test02" : ["js/test02"]
  }
});

//
require(["jquery","test01","test02"],function(){
  alert("页面加载成功~~");
},function(){
  alert("页面加载失败~~")
});

上面的例子中重复出现了require.config配置,如果每个页面中都加入配置,必然显得十分不雅,requirejs提供了一种叫”主数据”的功能,我们首先创建一个main.js:

require.config({
  paths : {
    //这样配置,减轻本地服务器的压力
    "jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
    //将本地的js文件同样配置,之后引用
    "test01" : ["js/test01"],
    "test02" : ["js/test02"]
  }
});

然后再页面中使用下面的方式来使用requirejs:

<script type="text/javascript" src="js/require2.1.11.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<script type="text/javascript">

  require(["jquery","t1","t2"],function(){
    alert("页面加载成功~~");
  },function(){
    alert("页面加载失败~~")
  });

</script>

在官方提供了一种基于标签属性的方式:

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

将所有的配置和导入js都放在了main.js中,这样在页面只要这样一个标签就行了。

代码演示如下:

//test01.js--定义一个js模块
define(function(){
  function test(){
    console.log("this is test01.js");
  }
  test();

  $("p").css("color","#DB7093");
});
//main.js--requirejs的全局配置
require.config({
  paths:{
    "jquery":["jquery-1.8.3"],
    "test":["test01"]
  },
  shim:{
    "test":["jquery"]
  }
});
require(["test"],function(){
  console.log("success!");
});
//index.html--此时,引入js文件只需一行代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" data-main = "js/main" src="js/require2.1.11.js" ></script>
  </head>
  <body>
    <p>i am liyanan and this is a testn Page.</p>
  </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 #Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 #jQuery
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 #Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 #Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 #Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 #Javascript
Vue实战之vue登录验证的实现代码
Oct 31 #Javascript
You might like
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
php循环输出数据库内容的代码
2008/05/24 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
python安装与使用redis的方法
2016/04/19 Python
Mac 上切换Python多版本
2017/06/17 Python
Python合并多个Excel数据的方法
2018/07/16 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
什么是Python中的顺序表
2020/06/02 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
电子信息科学专业自荐信
2014/01/30 职场文书
丑小鸭教学反思
2014/02/03 职场文书
上班玩手机检讨书
2014/02/17 职场文书
社区科普工作方案
2014/06/03 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
暑假安全保证书
2015/02/28 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS