模块化概念

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. 剑指offer——66翻转字符串

    题目描述 牛客最近来了一个新员工Fish,每天早晨总是会拿着一本英文杂志,写些句子在本子上.同事Cat对Fish写的内容颇感兴趣,有一天他向Fish借来翻看,但却读不懂它的意思.例如,“student ...

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

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

  3. 高级UI晋升之常用View（三）下篇

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将从WebView来介绍常用View: 一.WebView介绍 Andro ...

  4. Windows平台将远程服务器的目录挂载为本地磁盘

    我们在设置数据库自动备份时,为了数据的安全往往需要直接将数据备份到远程服务器上.在Linux可以通过NFS挂载来实现,在Windows平台可以直接通过net use+subst来实现将远程服务器的目录 ...

  5. Xn数列

     题目描述 Description 给你6个数,m, a, c, x0, n, g Xn+1 = ( aXn + c ) mod m,求Xn m, a, c, x0, n, g<=10^18 输 ...

  6. python--reflect

    一.反射 python 中用字符串的方式操作对象的相关属性,python 中一切皆对象,都可以使用反射 用eval 有安全隐患,用 反射就很安全 1.反射对象中的属性和方法 class A: a_cl ...

  7. 标准 IO fread 与 fwrite 的使用(可以实现二进制流的读写)

    size_t   fread(void *ptr,  size_t size,   size_t nmemb,   FILE *stream); size_t   fwrite(const void ...

  8. linux 档案 指令（鸟哥私房菜）

    [ls -al] [ls -l --full-time] 显示文件完整的日期格式 [ls] 显示非隐藏档的文件信息 [ls -al] 显示所有文档信心.文档前面的 “”.“”表明该文档是隐藏档.eg. ...

  9. Failed selinux 错误

    再看他如何解决,步骤大概是: 1.开机之后进入linux启动选择界面,停在平时启动的哪那一行按E键,进入grub编辑页面. 2.按↓键光标往下移,在标签fi下面的内容里加上一个enforcing=0. ...

  10. vue 单元素过渡

    demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...