什么是模块化？

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

为什么要前端模块化？

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

如何实现前端模块化？

<!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. 关于 laravel 集合的使用

    常用的有 count() count方法返回集合中所有项的数目: $collection = collect([1, 2, 3, 4]); $collection->count(); forPa ...

  2. jquery图片滚动jquery.scrlooAnimation.js

    ;(function ($, window, document, undefined) { var pluginName = "scrollAnimations", /** * T ...

  3. Python基于jieba的中文词云

    今日学习了python的词云技术 from os import path from wordcloud import WordCloud import matplotlib.pyplot as plt ...

  4. Python Web开发中，WSGI协议的作用和实现原理详解

    首先理解下面三个概念: WSGI:全称是Web Server Gateway Interface,WSGI不是服务器,python模块,框架,API或者任何软件,只是一种规范,描述web server ...

  5. ruby 数据类型Range

    范围(Range)无处不在:a 到 z. 0 到 9.等等.Ruby 支持范围,并允许我们以不同的方式使用范围: 作为序列的范围 作为条件的范围 作为间隔的范围 作为序列的范围 (1..5) #==& ...

  6. C语言实现斐波那契数列

    1.函数一用递归实现 2.函数二用循环实现 #include<stdio.h> #include<stdlib.h> #pragma warning(disable:4996) ...

  7. git的基本操作总结

    参考链接 https://blog.csdn.net/u012661010/article/details/73433872 https://blog.csdn.net/shj_php/article ...

  8. .Net 面试题 汇总（三）

    101.ASP.net的身份验证方式有哪些?分别是什么原理? 答:Windwos(默认)用IIS... From(窗体)用帐户 Passport(密钥) 102.在.net中,配件的意思是? 答:程序 ...

  9. Windows 10 下如何彻底关闭 Hyper-V 服务(翻外篇)

    原文:Windows 10 下如何彻底关闭 Hyper-V 服务(翻外篇) windows禁用/启用hyper-V,解决hyper-V与模拟器同时启用时造成冲突 我是这样解决的,以管理员身份运行命令提 ...

  10. CentOS修改网卡名称

    转 一．问题说明 测试环境中出现的小问题,因为虚拟机之间经常复制来复制去,导致网卡配置这块的不一致现象. 配置文件的信息: [root@ora10g network-scripts]# catifcf ...