RequireJs

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

RequireJs介绍:
RequireJS是一个脚本载入程序,是小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。

RequireJs优点:
1)允许你把你的javascript代码独立成文件和模块(模块化加载)
2)同时管理每个模块间的依赖关系
3)一个提高你的javascript代码速度和质量的有效方法
4)同时它还让你的代码更容易阅读和维护

2.RequireJs用法和普通js的区别
1)普通js
helloRequireJs01.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="helanfang01.js"></script>
    </head>
    <body>
      <span>我是一段文字</span>
    </body>
</html>

其中引入的helanfang01.js

/*
 * 方式一:
 function fun1(){
  alert("it works");
}

fun1();*/

// 方式二:
 (function(){
    function fun1(){
      alert("it works");
    }

    fun1();//调用执行
})()

最后出现的形式是,需要先点掉弹出框,然后body中的文字就可以显示出来。

2)RequireJs
helloRequireJs02.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- 使用了require。js之后的一些格式 -->
        <script type="text/javascript" src="require.js"></script>
        <script type="text/javascript">require(["helanfang02"])</script>
    </head>
    <body>
      <span>我是一段文字</span>
    </body>
</html>

其中helanfang02.js

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

    fun1();
})

这里最后出现的结果是,在出现弹出框的同时,body中的文字也会出现,这一点也是二者之间的一个比较明显的区别。

整个项目的构建如下图:
项目介绍

新手学习,先记录一下。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值