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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
javascript实现tab切换特效
Nov 12 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 Javascript
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
咖啡与牛奶
2021/03/03 冲泡冲煮
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
介绍Python中的文档测试模块
2015/04/28 Python
python中字符串前面加r的作用
2015/06/04 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
Python读写锁实现实现代码解析
2020/11/28 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
Delphi笔试题
2016/11/14 面试题
物业管理公司实习生自我鉴定
2013/09/19 职场文书
物流创业计划书
2014/02/01 职场文书
家长通知书教师评语
2014/04/17 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
跑吧孩子观后感
2015/06/10 职场文书
Python实现排序方法常见的四种
2021/07/15 Python
python ConfigParser库的使用及遇到的坑
2022/02/12 Python
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技