第一次接触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 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
基于jquery的页面划词搜索JS
Sep 14 Javascript
jQuery示例收集
Nov 05 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
js密码强度检测
Jan 07 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
javascript Array 数组常用方法
2015/04/05 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
js实现随机点名
2021/01/19 Javascript
python实用代码片段收集贴
2015/06/03 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
python利用微信公众号实现报警功能
2018/06/10 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
详解Python 函数如何重载?
2019/04/23 Python
详解python中的数据类型和控制流
2019/08/08 Python
通过代码实例了解Python sys模块
2020/09/14 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
高中美术教学反思
2014/01/19 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
最新离婚协议书范本
2014/08/19 职场文书
生活部的活动方案
2014/08/19 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
纪录片信仰观后感
2015/06/08 职场文书
叶问观后感
2015/06/15 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
git中cherry-pick命令的使用教程
2022/06/25 Servers