requirej入门（一）

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

RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一

1 <!DOCTYPE html>
2 <html>
3     <head>
4         <script type="text/javascript" src="a.js"></script>
5     </head>
6     <body>
7       <span>body</span>
8     </body>
9 </html>

a.js:

1 (function(){
2     function fun1(){
3       alert("it works");
4     }
5
6     fun1();
7 })()

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

requirejs写法

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script src="../js/require.js"></script>
 7     <script>
 8          require(['t']);
 9     </script>
10 </head>
11 <body>
12 _requireJS
13 </body>
14 </html>

t.js:

1 define(function(){
2    function fun1(){
3        alert("it works");
4    }
5     fun1();
6 });

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

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

 1 <script type="text/javascript" src="a.js"></script>
 2 <script type="text/javascript" src="b.js"></script>
 3 <script type="text/javascript" src="c.js"></script>
 4 <script type="text/javascript" src="d.js"></script>
 5 <script type="text/javascript" src="e.js"></script>
 6 <script type="text/javascript" src="f.js"></script>
 7 <script type="text/javascript" src="g.js"></script>
 8 <script type="text/javascript" src="h.js"></script>
 9 <script type="text/javascript" src="i.js"></script>
10 <script type="text/javascript" src="j.js"></script>

本文来源：http://www.runoob.com/w3cnote/requirejs-tutorial-1.html

转载于:https://www.cnblogs.com/congxueda/p/5949046.html

requirej入门（一）相关推荐

用Construct 2制作入门小游戏~
今天在软导课上了解到了Construct 2这个神器,本零基础菜鸟决定尝试做一个简单的小游戏(实际上是入门的教程啊= = 首先呢,肯定是到官网下载软件啊,点击我下载~ 等安装完毕后我便按照新手教程开始 ...
Docker入门六部曲——Swarm
原文链接:http://www.dubby.cn/detail.html?id=8738 准备工作安装Docker(版本最低1.13). 安装好Docker Compose,上一篇文章介绍过的. 安 ...
Docker入门六部曲——Stack
原文链接:http://www.dubby.cn/detail.html?id=8739 准备知识安装Docker(版本最低1.13). 阅读完Docker入门六部曲--Swarm,并且完成其中介绍 ...
Docker入门六部曲——服务
原文链接:http://www.dubby.cn/detail.html?id=8735 准备已经安装好Docker 1.13或者以上的版本. 安装好Docker Compose.如果你是用的是Do ...
【springboot】入门
简介: springBoot是spring团队为了整合spring全家桶中的系列框架做研究出来的一个轻量级框架.随着spring4.0推出而推出,springBoot可以説是J2SEE的一站式解决方案 ...
SpringBoot (一) ：入门篇 Hello World
什么是SpringBoot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不 ...
入门指南目录页 -PaddlePaddle 飞桨入门指南 FAQ合集-深度学习问题
入门指南目录页 -PaddlePaddle 飞桨入门指南 FAQ合集 GT_Zhang关注 0.1012019.08.01 18:43:34字数 1,874阅读 795 Hi,欢迎各位来自Paddl ...
5 分钟入门 Google 最强NLP模型：BERT
BERT (Bidirectional Encoder Representations from Transformers) 10月11日,Google AI Language 发布了论文 BERT: ...
命名实体识别入门教程（必看）
关于开发自己的命名实体识别先期思路: 虽然网上有很多相关代码,但实际如何入门材料较少,故整理下: CRF:先期可以用人民日报语料库去做,步骤如下: https://blog.csdn.net/hude ...

requirej入门（一）

requirejs写法

requirej入门（一）相关推荐

最新文章

热门文章