什么是模块化？

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

为什么要前端模块化？

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

如何实现前端模块化？

<!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. tomcat端口占用后的解决办法【亲测有效】

    https://www.cnblogs.com/zhangtan/p/5856573.html 检测正在使用的端口   这里就以win7为例进行讲解. 首先打开cmd,打开的方法很简单,在开始菜单中直 ...

  2. 爬虫——BeautifulSoup4解析器

    BeautifulSoup用来解析HTML比较简单,API非常人性化,支持CSS选择器.Python标准库中的HTML解析器,也支持lxml的XML解析器. 其相较与正则而言,使用更加简单. 示例: ...

  3. 【操作系统作业—lab1】linux shell脚本 遍历目标文件夹和所有文件 | 包括特殊字符文件名的处理

    要求:写一个linux bash脚本来查看目标文件夹下所有的file和directory,并且打印出他们的绝对路径. 运行command:./myDir.sh  input_path  output_ ...

  4. Linux之MariaDB

    MariaDB数据库的起源 MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可.开发这个分支的原因之一是:甲骨文公司收购了MySQL后,有将MySQL闭源的潜 ...

  5. tp5多条件查询

    ->where('m.user_nickname|w.nickname|c.companyname','like','%'.$search.'%')\

  6. HyperLedger Fabric 1.4 超级账本简介（5.2）

    超级账本(Hyperledger)是推动区块链跨行业应用的开源项目的总称,组织成员可以发起新的区块链项目,加入到超级账本项目(Hyperledger)中,但需要遵循Hyperledger的生命周期.  ...

  7. java入门---简介&简单输出小例子&开发前准备

        Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称.由James Gosling和同事们共同研发,并在1995年正式推出.J ...

  8. python2.7练习小例子（二十七）

        27):题目:一个5位数,判断它是不是回文数.即12321是回文数,个位与万位相同,十位与千位相同.      #!/usr/bin/python # -*- coding: UTF-8 -* ...

  9. OpenCV代码提取：transpose函数的实现

    OpenCV中的transpose函数实现图像转置,公式为: 目前fbc_cv库中也实现了transpose函数,支持多通道,uchar和float两种数据类型,经测试,与OpenCV3.1结果完全一 ...

  10. jdk带的一些工具，强悍

    这些工具有的已经接触到了,功能很强悍,但是使用也有点复杂(参数) 在代码中使用System.setProperty()或者在启动程序时使用-D选项设置代理服务器地址和端口 看看别人的研究: JDK自带 ...