模块化概念

AMD是requirejs在推广过程中对模块化定义的规范化产出。

异步加载模块，依赖前置，提前执行

Define定义模块define(['require','foo'],function(){return});

Require加载模块（依赖前置）require(['foo','bar'],function(foo,bar){});

CMD是SeaJS在推广过程中对模块化定义的规范化产出。

Define定义exports导出define(function(require,exports,module){});

module上存储了当前模块上的一些对象。

require(./a)直接引入，require.async异步引入

同步加载，依赖就近，延迟执行

类似的还有CommonjsModule/2.0规范

AMD模块化的代码

//index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

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

</head>

<body>

    <script>

    </script>

</body>

</html>


//main.js

define(['require','main'],function(require){

    require(['index','test'],function(index,test){

        console.log(index());

        console.log(test());

    })

})


//index.js

define(['require','index'],function(require){

    var index = function(){

        console.log('test index');

    }

    return index;

 })


//test.js

define(['require','index'],function(require){

   var init = function(){

       console.log('test init');

   }

   return init;

})

方法调用的方式

//index.js

define(['require','index'],function(require){

    var index = {};

    var index = {

        init:function(){

            console.log('test init');

        }

    }

    return index;

 })


//main.js

define(['require','main'],function(require){

    require(['index','test'],function(index,test){

        console.log(index.init());

        console.log(test.init());

    })

})


//test.js

define(['require','index'],function(require){

    var index = {};

   var index = {

       init:function(){

           console.log('test init');

       }

   }

   return index;

})

效果为



seajs的应用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

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

</head>

<body>

    <script>

        // seajs 的简单配置

seajs.config({

  base: "./js/",

  alias: {

    "jquery": "jquery.js"

  }

})

// 加载入口模块

seajs.use("main")

    </script>

</body>

</html>


//index.js

define(function(require,exports,module){

    // 透过exports对外提供接口

    // exports.doSomething = function(){

    //     console.log('my ok ');

    // }

    // exports.doSomething2 = function(){

    //     console.log('my ok2 ');

    // }

    var a = {};

    a.doSomething = function(){

        console.log('my ok ');

    }

    a.doSomething2 = function(){

        console.log('my ok2 ');

    }

    // console.log(module);

    module.exports = a;

});


//main.js

define(function(require,exports,module){

    require('jquery');

    console.log('..aaa');

    var index =require.async('index',function(index){

        console.log(index);

    });

})

本文看自前端常用的库和实用技术之JavaScript 模块化视频

前端常用的库和实用技术之JavaScript 模块化的更多相关文章

  1. 前端常用的库和实用技术之JavaScript多线程

    多线程概念: 多线程是指从软件或硬件上实现多个线程并发执行的技术.具有多线程能力的计算机因有硬件支持而能够在 同一时间执行多于一个线程,进而提升整理处理性能.具有这种能力的系统包括对称多处理机,多核心 ...

  2. 前端常用的库和实用技术之JavaScript面向切面编程

    Aspect Oriented Programming(AOP)面向切面编程是一个比较热门的话题. AOP主要实现的目的是针对业务处理过程中的切面进行提取,它所面对的是处理过程 中的某个步骤或阶段,以 ...

  3. 前端常用的库和实用技术之JavaScript高级函数

    1.惰性载入函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. 前端常用的库和实用技术之JavaScript高级技巧

    javascript高级技巧 变量作用域和闭包 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. javascript功能插件大集合 前端常用插件 js常用插件

    转载来源:https://github.com/jobbole/aw... 包管理器管理着 javascript 库,并提供读取和打包它们的工具.•npm – npm 是 javascript 的包管 ...

  6. python进阶05 常用问题库（1）json os os.path模块

    python进阶05 常用问题库(1)json os os.path模块 一.json模块(数据交互) web开发和爬虫开发都离不开数据交互,web开发是做网站后台的,要跟网站前端进行数据交互 1.什 ...

  7. Python常用的库简单介绍一下

    Python常用的库简单介绍一下fuzzywuzzy ,字符串模糊匹配. esmre ,正则表达式的加速器. colorama 主要用来给文本添加各种颜色,并且非常简单易用. Prettytable ...

  8. WEB前端常用网站收集

    WEB前端常用网站收集整理 w3school.w3schools 前端里.脚本之家.素材家园 17素材.frontopen NEC更好的CSS方案.一些常用的JS实例 Bootstrap  官网  h ...

  9. 《前端之路》之 Javascript 模块化管理的来世今生

    目录 第二章 - 04: Javascript 模块化管理的来世今生 一.什么是模块化开发 1-1.模块化第一阶段 1-2.封装到对象 1-3. 对象的优化 二.模块化管理的发展历程 2-1.Comm ...

随机推荐

  1. 实用的CSS3－渐变背景色

    线性渐变背景色:     第一个参数为渐变方式,后两个参数为起始点位置和终止点位置,后两个参数为起始颜色和终止颜色,后面那个参数为背景区域padding表示包含padding的区域,content表示 ...

  2. 【Linux】- CentOS安装docker及docker-compose

    1.安装docker,命令如下: -- 把yum包更新到最新 yum update -- 安装需要的软件包, yum-util 提供yum-config-manager功能,另外两个是devicema ...

  3. rpm升级时spec文件执行的流程

    转自:https://www.cnblogs.com/zafu/p/7423758.html %pre 和 %post 脚本片段分别在软件包安装前和安装后执行.%preun 和 %postun 脚本片 ...

  4. ThinkPHP5验证码不显示的原因及解决方法

    其实很久之前刚学习tp5框架的时候就遇到了这个问题,解决完后一直没再出过问题,今天用以前的框架做新项目时又碰到了这个问题,这里记录一下 问题原因: 1.TP5本就存在这个bug 2.数据库连接不正常( ...

  5. 0 ‘+new Array(017)’ 输出？ js+相当于Number()类型转换

    网站搬迁,给你带来的不便敬请谅解! http://www.suanliutudousi.com/2017/10/20/new-array017-%E8%BE%93%E5%87%BA%EF%BC%9F- ...

  6. C# WinfForm 控件之dev图表 ChartControl

    dev 图表控件 学习连接 新建一个winformApp form1上放一个button 再放一个chartControl Name 为cct 直接上代码 private void button1_C ...

  7. JS window对象 取消计时器clearTimeout() setTimeout()和clearTimeout()一起使用，停止计时器。 语法: clearTimeout(id_of_setT

    取消计时器clearTimeout() setTimeout()和clearTimeout()一起使用,停止计时器. 语法: clearTimeout(id_of_setTimeout) 参数说明: ...

  8. linux安装lolcat实现彩色文字输出信息

    [root@localhost ~]# mount /dev/sr0 /media/[root@localhost ~]# rpm -ivh epel-release-latest-7.noarch. ...

  9. Eureka配置详解（转）

    Eureka客户端配置       1.RegistryFetchIntervalSeconds 从eureka服务器注册表中获取注册信息的时间间隔(s),默认为30秒 2.InstanceInfoR ...

  10. 搜索进阶课件,视频,代码(状态压缩搜索,折半搜索,dfs,bfs总结)

    链接:https://pan.baidu.com/s/1-svffrprCOO4CtQoCTQ9hQ 提取码:h909 复制这段内容后打开百度网盘手机App,操作更方便哦