模块化概念

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. JPA安装配置

    现在让我们继续安装JPA,如下几个步骤. 第一步:确认已经Java安装 首先,需要在系统上安装Java软件开发工具包(SDK).为了验证这一点,根据所使用的平台执行以下两个命令. 如果Java安装已正 ...

  2. jquery 弥补ie6不支持input:hover状态

    <!doctype html><html>    <head>    <meta charset="utf-8">    <t ...

  3. UI自动化ADB出现devices offline的解决方法

    终端运行如下命令即可解决: adb kill-server adb start-server adb remount

  4. 让微信小程序页面之间的通信不在变得困难

    一个开始 小程序开发者总会碰到各种页面之间的通信问题,实现方式也五花八门,比如... 场景还原 首先这是一个电商小程序. 有这样一个需求: 首页某个地方要展示购物车商品数量. 当我在其他页面加购了商品 ...

  5. 10种JavaScript特效实例让你的网站更吸引人

    我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预 ...

  6. 深度探索C++对象模型之第四章：函数语义学

    C++有三种类型的成员函数:1.static/nonstatic/virtual 一.成员的各种调用方式 C with Classes 只支持非静态成员函数(Nonstatic Member Func ...

  7. docker一键部署zookeeper

    version: '3.1' services: zoo1: image: zookeeper:3.4.11 restart: always hostname: zoo1 container_name ...

  8. 用jQuery,ajax,实现三级联动封装JS的文件

    // JavaScript Document $(document).ready(function(e) { //找到ID=SANJI的DIV,造三个下拉扔进去 var str = "< ...

  9. sqoop的导入|Hive|Hbase

    导入数据(集群为对象) 在Sqoop中“导入”概念指:从非大数据集群(RDBMS)向大数据集群(HDFS,HIVE,HBASE)中传输数据,叫做:导入,即使用import关键字. 1 RDBMS到HD ...

  10. NX二次开发-UF_MODL_ask_angle_tolerance获取建模的角度公差

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_ui.h> UF_initialize() ...