什么是模块化？

  • 将若干功能进行封装，以备将来被重复使用。

为什么要前端模块化？

  • 将公共功能进行封装实现复用
  • 灵活解决依赖
  • 解决全局变量污染

如何实现前端模块化？

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

    <!-- 通过标签加载js是不能做到模块化的 -->

    <script src="./js/jquery.min.js"></script>

    <script src="./js/a.js"></script>

    <script src="./js/b.js"></script>

</body>

</html>

Javascript 语言本身是不具备模块化能力的，需要自已进行封装来实现模块的定义以及加载，其实现遵照一定的规范（COMMONJS）

Nodejs 是运行在服务端的Javascript，它是按着commonjs的规范实现的模块化

经过实践发现浏览器端Javascript按着commonjs的规范实现模块化时，有很不足之处，此时就有人在commonjs的基础上重新定了一个规范AMD(Async Module Define)，其代表就是require.js

随前端开发演变，又有人定义另外一个浏览器端模块化的规范CMD(Common Module Define)，淘宝的玉伯定义的，其代表是seajs

前端模块化使用requirejs

  • requirejs 本身是一个js文件，它按照AMD规范实来实现模块的定义和加载规则，应用在浏览器端。

定义模块

  模块是以文件形式存在的（一个文件对应一个模块也可以一个文件对应多个模块），通过define()方法来定义一个模块。

  • 基本定义
define(function () {

        // 回调函数中即模块逻辑

        var str = 'a';

        alert(str);

        // code....

    });
  • 依赖注入（解决依赖的一种方式）
// 通过一个数组来声明，模块的依赖

define(['./a'], function (a) {

    var str = 'b';

    // 通过形式参数a来接收a模块的返回值

    // a模块返回值（对象）包含了方法now

    a.now();

    // a模块返回值（对象）包含了方法sayHi

    a.sayHi(a.name);

    console.log(str);

    // code....

});
  • 返回值

  定义模块时，可以有返回值，但并不是必须，返回数据类型没有任何约束，通常返回值是对象更有意义。

define(function () {

    // 回调函数中即模块逻辑

    var str = 'a';

    // console.log(str);

    // 直接返回字符串

    // return str;

    // 还可以是一个函数

    // return function () {

    //  console.log('现在是' + new Date);

    // }

    // 也可以是一个对象

    return {

        name: '小明',

        sayHi: function (name) {

            console.log('你好' + name);

        },

        now: function () {

            console.log('现在是' + new Date);

        }

    }

    // 返回值可以是任意类型，对象更有意义

    // code....

});

加载模块

   通过 require() 或者 requirejs() 方法来加载一个模块

  • 基本使用
    <!-- 引入requirejs -->

    <script src="./libs/require.js"></script>

    <script>

        // 加载模块

        // 同时加载两个模块，执行顺序与书写顺序无关

        require(['./a', './b']);

    </script>
  • 加载有依赖的模块
 <!-- 引入requirejs -->

    <script src="./libs/require.js"></script>

    <script>

        // 加载模块

        // b和c模块同时依赖了a模块

        // 当加载b和c模块时，a模块可以自动被加载进来

        require(['./b', './c']);

    </script>
  • 依赖注入
    <script>

        require(['./a'], function (a) {

            console.log(a);

            a.sayHi(a.name)

            a.now();

        });

    </script>

入口文件

  •   通过为引入require的标签加入 data-main 属性，其属性值为某一个模块的路径，此模块可以自动被加载并执行。
    <!-- 使用自定义属性指定的模块，称为入口文件 -->

    <!-- 此文件会自动被执行 -->

    <script src="./libs/require.js" data-main="./index.js"></script>

加载路径

　requirejs加载模块时，路径是遵照一些规则的，分成以下几种情况

  1. 当没有入口文件时，加载路径以引入requirejs的页面为准
  2. 当存在入口文件时，加载路径以入口文件所在目录为准
  3. 通过配置可以自定义加载路径
    <h2>配置requirejs的的路径</h2>

    <script src="./libs/require.js" data-main="./main.js"></script>

    <script>

        // 相对于当前页面

        // require(['./src/a']);

        // 假如使用入口文件，

        // 路径参照的是入口文件所在的目录

        // require(['./src/src/a']);

    </script>

配置项

  • 配置基础路径
// 通过config方法可以对requirejs进行配置

  // 其中通过baseUrl来配置加载路径

  require.config({

      baseUrl: './public'

  });
  • 配置路径

通过path属性可以配置模块真实路径（baseUrl + path），这样配置后可以使得路径调整变的灵活。

// 通过config方法可以对requirejs进行配置

    // 其中通过baseUrl来配置加载路径

    require.config({

        baseUrl: './public',

        // 使用path可以为模块真实路径起个"别名"

        paths: {

            jquery: 'assets/jquery/jquery.min'

        }

    });

    // a和b模块都依赖于jquery，当改变jquery路径时

    // 只需要改变配置里的path就可以了

    require(['./src/a', 'src/b']);
  • 配置不支持模块的插件

　　在现实开发中并不是所有的JS库都是按着模块化形式开发，但是我们又不得不使用这些JS库，requirejs提供了解决方案。

为了帮助理解，总结了模块的两个特点“舍与得”

　　   a) “舍”指模块将自身模块的功能提供给其它模块使用

    define(function () {

        var obj = {

            name: '小明',

            sayHi: function () {

                //code...

            },

            now: function () {

                // code...

            }

        }

        // 将自身功能提供给其它模块

        return obj;

    })

b) “得”指模块将其它模块提供的功能直接拿来用

    define(['demo'], function (demo) {

        // 通过数组形式提定依赖的模块

        // 以形参的形式使用其它模块提供的功能

    });

对于非模块requirejs也有解决方案，通过另外一种形式来满足“舍与得”的特点，如下

    // 通过config方法可以对requirejs进行配置

    // 其中通过baseUrl来配置加载路径

    require.config({

        baseUrl: './public',

        // 使用path可以为模块真实路径起个"别名"

        paths: {

            jquery: 'assets/jquery/jquery.min',

            c: 'src/c',

            demo: 'assets/custom/demo'

        },

        shim: {

            c: {

                // 指定当前c模块依赖于demo

                // 相当于标准模块里的

                // define(['demo'], function () {});

                deps: ['demo'],

                exports: 'newobj'

            },

            demo: {

                // 指明当前demo模块的返回值

                // 相当于标准模块里的

                // define(function () {return obj;});

                exports: 'obj'

            }

        }

    });

    // require(['./src/a', 'src/b', 'c']);

    require(['c']);

匿名模块和具名模块

// 匿名

define([], function () {

  // code...

  // return

});

// 具名

define('demo', [], function () {

  // code...

});

先写到这里吧，有机会再补充

require.js 模块化的更多相关文章

  1. require.js模块化

    require.js简单来说就是把js代码分装模块化了 模块化 模块就是实现特定功能的一组方法.只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. 我拿一个运动框架来解释一下req ...

  2. 初步理解require.js模块化编程

    初步理解require.js模块化编程 一.Javascript模块化编程 目前,通行的Javascript模块规范共有两种:CommonJS和AMD. 1.commonjs 2009年,美国程序员R ...

  3. require.js模块化写法

    模块化 模块就是实现特定功能的一组方法.只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. 下述两种写法等价 exports 对象是当前模块的导出对象,用于导出模块公有方法和属性. ...

  4. require.js 模块化简单理解

    组件化 基于UI 样式布局 没有过多 js 代码操作的 比如:一个导航栏 一个表单 一个搜索框 一个侧边栏 一个html 等等.... 模块化 基于功能模块 一个可以替换的js部分称之为模块(modu ...

  5. require.js模块化管理和加载js（按需加载）简单实例教学

    一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...

  6. require.js模块化开发

    模块化开发的原因: 1.引入的js过多然后在加载的过程中容易出现假死的状态,导致页面会发生白屏 2.变量名的问题 在多人协作开发的时候容易出现变量名的冲突 面向对象 3.引入优先级的问题 模块化开发分 ...

  7. javascript模块化编程库require.js的用法

    随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的.更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码 ...

  8. Support for AMD usage of jwplayer (require js)

    使用require js 模块化代码时,其中播放器用的是jwplayer7.x 然后载入jwplayer.js后总是报license无效(license已经加入),最后在jwplayer官网论坛里找到 ...

  9. Uncaught Error: Script error for "popper.js", needed by: bootstrap - require.js

    Uncaught Error: Script error for "popper.js", needed by: bootstrap https://requirejs.org/d ...

随机推荐

  1. SAP销售订单屏幕字段控制隐藏，必输等

    1.T-CODE:shd0 创建变式  , 点击确认按钮后,SAP进入下一个屏幕,然后重复上面的操作,直到所有屏幕已完成设置. 如果后续屏幕不需要设置,可点击“退出并保存”按钮.保存后,进入下图所示页 ...

  2. NPOI追加内容到xlsx报错，用Epplus往excle xlsx追加数据

    问题的现象就是,只要不修改xlsx,一直写入或者再次写入xlsx,追加内容都是不会有问题的.但是只要你修改了xlsx,用excle2010或者2007修改了xlsx的内容里面的列宽,或者行高,或者进行 ...

  3. Apache Maven（六）：存储库

    Maven 存储库主要是存放一些第三方依赖jar包等. 严格来说,只有两种存储库:本地和远程,本地存储库是指您远程下载到本地的一个缓存,还包含尚未发布的临时构建文件.远程存储库是指一些可以通过各种协议 ...

  4. ECSHOP和SHOPEX快递单号查询德邦插件V8.6专版

    发布ECSHOP说明: ECSHOP快递物流单号查询插件特色 本ECSHOP快递物流单号跟踪插件提供国内外近2000家快递物流订单单号查询服务例如申通快递.顺丰快递.圆通快递.EMS快递.汇通快递.宅 ...

  5. 第五课：PHP echo和print 语句

    PHP  echo 和 print 语句 PHP 是通过 print 和 echo 语句来动态输出 HTML 内容,虽然 print 和 echo 语句两者的功能几乎是完全一样,但是还是有一点差别的. ...

  6. python读取大文件和普通文件

    读取文件,最常见的方式是: with open('filename', 'r', encoding = 'utf-8') as f: for line in f.readlines(): do_som ...

  7. Python学习手册之函数和模块

    在上一篇文章中,我们介绍了 Python 的控制结构,现在我们介绍 Python 函数和模块. 查看上一篇文章请点击:https://www.cnblogs.com/dustman/p/9976234 ...

  8. Leecode刷题之旅-C语言/python-7.整数反转

    /* * @lc app=leetcode.cn id=7 lang=c * * [7] 整数反转 * * https://leetcode-cn.com/problems/reverse-integ ...

  9. Python2 Sequence类型簇

  10. AtCoder AGC028-F：Reachable Cells

    越来越喜欢AtCoder了,遍地都是神仙题. 题意: 给定一个\(N\)行\(N\)列的迷宫,每一个格子要么是障碍,要么是空地.每一块空地写着一个数码.在迷宫中,每一步只允许向右.向下走,且只能经过空 ...