专栏首页smh的技术文章使用Require.js实现模块化开发

使用Require.js实现模块化开发

在javascript中,我们把比较复杂的都是用模块化,今天我们就来了解一下require.js来实现模块化开发

require.js是什么?

require.js是在AMD规范上实现的一个 JavaScript 模块异步加载器。

require.js下载

下载地址:http://requirejs.org/docs/download.html

项目结构

首先请按照我的目录创建如下目录:

lib下存放一些常用的库,和我们最关键的require.js

script下存放我们自己写的一些js。

index.html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script data-main="js/script/main.js" src="js/lib/require.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>module1:</td>
            <td><input type="button" id="module1" value="调用" /></td>
            <td class="module1"></td>
        </tr>
        <tr>
            <td>module2:</td>
            <td><input type="button" id="module2" value="调用" /></td>
            <td class="module2"></td>
        </tr>
        <tr>
            <td>module3:</td>
            <td><input type="button" id="module3" value="调用" /></td>
            <td class="module3"></td>
        </tr>
    </table>
</body>
</html>

       这就是普通的html代码,我们主要看script标签,导入了require.js然后还有个data-main属性,这属性指定在加载完 reuqire.js 后,就用 requireJS 加载该属性值指定路径下的 JS 文件并运行,所以这个js为入口。

main.js代码,require配置

require.config({
    baseUrl: 'js',
    paths: {
        jquery: 'lib/jquery-3.4.1.min',
        module1: 'script/module1',
        module2: 'script/module2',
        module3: 'script/module3'
    }
});
require(['jquery', 'module1', 'module2', 'module3'], function ($, module1, module2, module3) {
    $("#module1").click(function () {
        module1.fun("module-1");
    });
    $("#module2").click(function () {
        module2.fun("module-2");
    });
    $("#module3").click(function () {
        module3.fun("module-3");
    });
})

main.js为入口,所以就要配置require,这里我只配置两个常用项

baseUrl:加载模块的根目录,因为模块大多数情况都在同一目录下,配置了此项在配置模块的时候就不用加跟目录了。

paths:这里就是配置模块了,以key:value结构的形式,可以省略文件的.js的后缀名。

require函数

此函数就是用于加载模块和依赖的,加载完成后会只想回调函数,回调函数中的参数要和前面的模板的顺序一致。我这里就把paths里配置了4个模块都加载了。

模块编写(module1.js)

define(['jquery'], function ($) {
    var moduleclick = function (name) {
        $(".module1").html("hello:" + name + "");
    };
    return { fun: moduleclick };
})

      我们在编写模块的时候,需要按照amd的规范,使用define函数来定义,然后需要return返回你需要在外部调用的函数或者变量。

       define函数跟require函数一样,两个参数,第一个参数是一个数组,用于加载依赖,比如我这里用了jquery的语法,所以就必须加载jquery这个依赖。第二个参数也就是回调函数,在回调函数中编写你的js逻辑代码。

      好了,下篇我们接着讲require的全局配置和非amd规范的模块导入。

延生(全局配置):所谓全局配置,就是配置只需要设置一次,我们这篇的入口文件是main.js。难道我们要把整个项目的js都写在main.js中吗?如果不,那我们每个页面都要重新写一个main.js来配置require吗?

延生(非amd规范): 非amd规范的模块就是不是使用define来定义的模块,和没有主动return返回你需要的函数这种类型的js。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Require.js配置全局和配置非amd规范JS

    我们来说全局配置,我们知道导入require.js之后会设置data-main属性来执行入口文件,然后再入口文件中进行require的配置。

    从此null
  • CSS:focus-within让你脱离JS

    CSS有很多有意思的东西,让以前必须要使用js才能完成的效果,现在使用一些css选择器就完成了,今天我们就来说说focus-within。

    从此null
  • javascript中变量提升以及处理方法

    今天我们来说说js中变量提升,for循环作用域在使用过程中遇到的一些问题,并解决。

    从此null
  • 【文献】 新一代测序技术(NGS) 的十年之旅

    标题:Coming of age: ten years of next-generation sequencing technologies

    生信技能树
  • F.I.S初探(前端工程化)

    一、初识FIS 在做项目中遇到了静态资源浏览器缓存更新的问题,于是在网络上寻找解决方案。之前虽然没有解决过这个问题,但方法无非就是为其设定新URI使得浏览器强制...

    用户1105954
  • HiC数据辅组基因组组装之Lachesis

    Lachesis是希腊神话众神之一,负责决定生命之线的长度。但是咱们这个lachesis是2013年发表在nature biotechnology上(https...

    生信技能树
  • Jother了解 原

    jother是javascript语言中利用少量字符构造精简的匿名函数方法对于字符串进行的编码方式。其中少量字符包括:"!"、"+"、"("、")"、"["、"...

    青木
  • nodejs学习笔记

    1、module.exports+require很好用,可以用来做全局变量,比如在a.js中require了一个js,并且修改了这个js的一个属性,然后b.js...

    黒之染
  • Ansible常见模块与使用方法

    老七Linux
  • 知乎一条龙第二弹,API 部署开放、H5线上展示与源码共享

    前面写了一个知乎爬虫、API 和小程序一条龙第一弹,反响还不错,于是在这些天的空闲时间里,我又优化下代码,并且把服务部署到了云服务器上,开放了 API 供需要的...

    数据森麟

扫码关注云+社区

领取腾讯云代金券