第一次接触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 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
用JS剩余字数计算的代码
Jul 03 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
详解JS函数防抖
Jun 05 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
JS 控制CSS样式表
2009/08/20 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
jquery 使用简明教程
2014/03/05 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
EsLint入门学习教程
2017/02/17 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
在vue中读取本地Json文件的方法
2018/09/06 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
Python中的闭包总结
2014/09/18 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
Python多线程原理与用法详解
2018/08/20 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
python 实现表情识别
2020/11/21 Python
介绍一下XMLHttpRequest对象
2012/02/12 面试题
技校生自我鉴定
2013/12/08 职场文书
美容师的职业规划书
2013/12/27 职场文书
学校消防安全制度
2014/01/30 职场文书
小学生倡议书范文
2014/05/13 职场文书
公司授权委托书范文
2014/09/21 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
地道战观后感300字
2015/06/04 职场文书
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server