JS模块化工具requirejs

川长思鸟来 2022-12-17 07:11 210阅读 0赞

## 问题 ##

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();

alert执行的时候，html内容是一片空白的，即body并未被显示，当点击确定后，才出现，这就是JS阻塞浏览器渲染导致的结果。

## requirejs写法 ##

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具有如下优点：

**防止js加载阻塞页面渲染**  
**使用程序调用的方式加载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>

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关 Protostuff 序列化工具类

Protostuff 简介 Protostuff是一个序列化库，支持一下序列化格式： protobuf protostuff(本地) graph j

- 日理万妓/ 2023年10月18日 20:01/ 0 赞/ 16 阅读

相关使用模块化工具Rollup打包自己开发的JS库

使用模块化工具Rollup打包自己开发的JS库打包JS库demo项目地址：[https://github.com/Miazzy/xdata-utils-btool

旧城等待，/ 2022年12月29日 06:57/ 0 赞/ 560 阅读

相关 JS模块化工具requirejs

问题 index.html: <!DOCTYPE html> <html> <head> <script typ

川长思鸟来/ 2022年12月17日 07:11/ 0 赞/ 211 阅读

相关 JS模块化4_AMD-RequireJS模块化教程

require.js使用教程 0. 基本语法 AMD：Asynchronous Module Definition 异步模块定义暴露模块： -

太过爱你忘了你带给我的痛/ 2022年09月12日 11:49/ 0 赞/ 248 阅读

相关详解前端模块化工具-Webpack

React自发布以来吸引了越来越多的开发者，React开发和模块管理的主流工具webpack也被大家所熟知。那么webpack有哪些优势，可以成为最主流的React开发工具呢？

逃离我推掉我的手/ 2022年08月10日 03:48/ 0 赞/ 228 阅读

相关 protostuff序列化工具类

package org.wit.ff.util; import java.io.ByteArrayInputStream; import ja

清疚/ 2022年07月15日 08:59/ 0 赞/ 262 阅读

相关 JS模块化工具requirejs

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

野性酷女/ 2022年07月14日 06:14/ 0 赞/ 235 阅读

相关 RequireJS模块化

导语： > 之前一直有听说RequireJS，但是一直都没机会去了解，只知道它是一个给js做模块化的API。最近在做React，其组件化的思想和js模块化的思想不谋而合。

喜欢ヅ旅行/ 2021年11月15日 11:44/ 0 赞/ 373 阅读

相关序列化工具Protobuf

Netty的编码和解码编写网络应用程序时，因为数据在网络中传输的都是二进制字节码数据，在发送数据时就需要编码，接收数据时就需要解码 codec(编解码器)

╰半夏微凉°/ 2021年10月01日 10:30/ 0 赞/ 573 阅读

相关 Docker 图形化工具：Portainer

一.Docker图形化工具 Docker图形页面管理工具常用的，DockerUI，Portainer，Shipyard。DockerUI是Portainer的前身，这三个工具

╰半橙微兮°/ 2021年09月02日 10:03/ 0 赞/ 484 阅读