第一次接触JS require.js模块化工具


Posted in Javascript onApril 17, 2016

随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。

第一次接触JS require.js模块化工具

RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升。

requirejs能带来什么好处

官方对requirejs的描述:

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

大致意思:

在浏览器中可以作为js文件的模块加载器,也可以用在Node和Rhino环境,balabala...。这段话描述了requirejs的基本功能"模块化加载",什么是模块化加载?我们要从之后的篇幅中一一解释

先来看一段常见的场景,通过示例讲解如何运用requirejs

正常编写方式
index.html:

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="a.js"></script>
 </head>
 <body>
  <span>body</span>
 </body>
</html>

a.js:

function fun1(){
 alert("it works");
}
 
fun1();

可能你更喜欢这样写

(function(){
 function fun1(){
  alert("it works");
 }
 
 fun1();
})()

第二种方法使用了块作用域来申明function防止污染全局变量,本质还是一样的,当运行上面两种例子时不知道你是否注意到,alert执行的时候,html内容是一片空白的,即<span>body</span>并未被显示,当点击确定后,才出现,这就是JS阻塞浏览器渲染导致的结果。

requirejs写法

当然首先要到requirejs的网站去下载js -> requirejs.rog
index.html:

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="require.js"></script>
  <script type="text/javascript">
   require(["a"]);
  </script>
 </head>
 <body>
  <span>body</span>
 </body>
</html>

a.js:

define(function(){
 function fun1(){
  alert("it works");
 }
 
 fun1();
})

浏览器提示了"it works",说明运行正确,但是有一点不一样,这次浏览器并不是一片空白,body已经出现在页面中,目前为止可以知道requirejs具有如下优点:

1、防止js加载阻塞页面渲染
2、使用程序调用的方式加载js,防出现如下丑陋的场景

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
<script type="text/javascript" src="e.js"></script>
<script type="text/javascript" src="f.js"></script>
<script type="text/javascript" src="g.js"></script>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript" src="i.js"></script>
<script type="text/javascript" src="j.js"></script>

以上就是本文的全部内容,希望对大家认识require.js模块化工具有所帮助。

Javascript 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 #Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 #Javascript
理解javascript对象继承
Apr 17 #Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 #Javascript
js如何准确获取当前页面url网址信息
Sep 13 #Javascript
基于javascript实现图片切换效果
Apr 17 #Javascript
非常棒的jQuery图片轮播效果
Apr 17 #Javascript
You might like
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
js实现简单扫雷
2020/11/27 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
【python】matplotlib动态显示详解
2019/04/11 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
什么是makefile? 如何编写makefile?
2012/08/08 面试题
职专应届生求职信
2013/11/16 职场文书
2014年教师节寄语
2014/08/11 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书