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 相关文章推荐
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
python 正则表达式 概述及常用字符
2009/05/04 Python
详解Python中dict与set的使用
2015/08/10 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
Python chardet库识别编码原理解析
2020/02/18 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
abstract是什么意思
2012/02/12 面试题
放飞蜻蜓反思
2014/02/05 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
安全生产专项整治方案
2014/05/06 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS