什么是模块化？

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

为什么要前端模块化？

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

如何实现前端模块化？

<!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. 让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓

    <!--js copy事件--><script type="text/javascript" src="/static/js/clipboard.min ...

  2. java程序员所必须掌握的内容

    以下内容有待细化,并用于考察员工的水平! 从低的往高级的说. 初级 1.掌握java语法 oop+io+网络 2.基本的数据结构 3.基本的算法-例如排序,合并 4.基本的几个javaee框架 spr ...

  3. Mac系统配置php环境

    [写在前面——叨叨叨] -_-#急着配环境的同志们可以绕道.最近学校的实验室里接了一个小项目——考勤刷卡系统,利用RFID在硬件层获取学生卡的ID,通过wifi传输至服务器,进行考勤信息存储,手机端获 ...

  4. Maven命令参数

    命令参数 备注 mvn -v --version 显示版本信息; mvn -V --show-version 显示版本信息后继续执行Maven其他目标; mvn -h --help 显示帮助信息; m ...

  5. 五、RegExp(正则表达式)篇

    正则表达式,只用记住: 0./pattern/igm   i--不区分大小写 g--找到所有相匹配的 m--多行匹配  可以只写其中一个  ps:/pattern/i (无视大小写) 1." ...

  6. pynlpir + pandas 文本分析

    pynlpir是中科院发布的一个分词系统,pandas(Python Data Analysis Library) 是python中一个常用的用来进行数据分析和统计的库,利用这两个库能够对中文文本数据 ...

  7. 如何在hadoop中使用外部的python程序文件

    业务场景大概是这样,我需要在公司hadoop集群上对博文进行结巴分词.我的数据是存储在hive表格中的,数据量涉及到五百万用户三个月内发的所有博文. 首先对于数据来说,很简单,在hive表格中就是两列 ...

  8. DHT11资料

    产品名:温湿度传感器 型号:DHT11 厂商:奥松电子 参数: 相对湿度: 分辨率:0.1%RH        16Bit 精度:25℃  正负 %2 温度: 分辨率:0.1%RH        16 ...

  9. iScroll实现下拉刷新上拉加载

    前言 初学iscroll这个控件,给我的一个感觉还是蛮不错的. 什么是iScroll:是目前最成熟的自定义滚动解决方案之一,在移动端和PC有很好的兼容性.iScroll官方提供了5个不同的版本 isc ...

  10. LEAVE TO LIST-PROCESSING

    LEAVE SCREEN 現在の画面の処理を中止し.次の画面を呼び出す - LEAVE TO SCREEN 現在の画面の処理を中止し.動的に定義された次の画面を呼び出す - LEAVE [PROGRA ...