模块化概念

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. 2.执行计划（explain）分析

    1.使用场景 获取执行计划命令:在select 命令前加上explain 或 desc explain select 或 desc select 1.语句执行之前 :防患于未然 2.出现慢语句时 :亡 ...

  2. ps--窗口配置

    移动工具设置 v 选择图层自动选择不勾 图层ctrl + 左键 视图设置智能参考线标尺 Ctrl+r 窗口设置 关闭 库 颜色 打开 信息 字符 图层 历史记录 信息 面板选项 鼠标单位 像素 rgb ...

  3. 42-Ubuntu-用户管理-07-修改权限命令介绍

    修改文件权限 序号 命令 作用 01 chown 修改文件/目录拥有者 02 chgrp 修改文件/目录所在主组 03 chmod 修改文件/目录权限   chmod   chown chgrp   ...

  4. 防止DDOS攻击有效方法：隐藏服务器真实IP

    如今,网站服务器的安全受到越来越多的重视,但是难免会遇到黑客使用DDoS攻击网站,为了网站的安全通常都会做好防御,其中防止DDoS攻击有效方法:隐藏服务器真实IP ,该技术能够有效地保护网站的安全. ...

  5. async / await对异步的处理

    虽然co是社区里面的优秀异步解决方案,但是并不是语言标准,只是一个过渡方案.ES7语言层面提供async / await去解决语言层面的难题.目前async / await 在 IE edge中已经可 ...

  6. canvas的基础入门

    canvas是定义在浏览器上的画布.它不仅仅是一个标签元素更是一个编程工具是一套编程的接口.利用它可以开发出很多东西,比如动画,游戏,动态的图表等富有变现力和感染力的应用.还可以开发出绚丽的3D动态效 ...

  7. spring开发案例配合mysql

    实体类: package cn.mepu.domain; import java.io.Serializable; /** * 账户实体类 * @author shkstart * @create 2 ...

  8. 在KVM虚拟化中如何实现vlan

    换了好几个浏览器,都不能复制文字上来,不知道为什么.就发我的笔记截图吧

  9. C# ASCII码和英文字母相互转换和ASCII码对照表

    1.字母转换成ASCII码 string str = "hello"; ]; array = System.Text.Encoding.ASCII.GetBytes(str); / ...

  10. python pathlib模块详解

    python pathlib模块详解