zoukankan      html  css  js  c++  java
  • 前端模块化 CommonJS AMD CMD ES6

      模块化开始现在已经很流行了,方便代码的管理,通常一个文件就是一个模块,有自己的作用域,只是向外暴露特定的变量或者函数
    目前流行的js模块化规范就有 CommonJS AMD CMD ES6 模块系统,这个总结 是看别人的原始出处在 掘金APP 上;
      一: CommonJS
        Node.js是commonJS规范的主要实践者,它有四个重要的环境变量为模块化的实现提供支持:module exports require global
        用module.exprots定义当前模块对外输出的借口 用require加载模块
        定义math.js文件
          var basicNum = 0;
          function add(a,b){
      

        return a+b;
          };
        module.exports = {add:add,basicNum:basicNum}; //对象输出特定变量
        //文件引入
        var math = require('./math');
        math.add(2,3);
        //文件引入核心模块时候不需要带路径
        var http = require('http');
        http.createSevise(...).listen(3000);
        CommonJS 用同步的方式加载模块,在服务器端模块文件都是在本地磁盘上,读取非常快,但是在浏览器端限于网络原因,更适合用异步加载
      二: AMD和require.js
        AMD规范采用异步方式加载模块,模块的加载不影响它后面的语句执行,所有依赖这个模块语句都定义在一个函数回调中,
        等到加载完成之后,才开始执行回调函数,用require.config()指定引用路径 用define()定义模块 用require加载模块
        首先我们需要引入require.js文件和一个入口文件main.js 在main.js中配置require.config()并规定项目中用到的基础模块
        //在网页中引入require.js和main.js
        <script src="js/require.js" data-main="js/main"></script>
        //在main.js入口文件 首先定义config()指定各模块路径和引用名
        require.config({
        baseUrl: 'js/lib',
        paths: {
          'require': 'jquire.main' //实际路径为 js/lib/jquire.main.js
          'underscore': 'underscore.main'
        }
        });
        //执行基本操作
        require(['jquire','underscore'],function($,...){
          //some code here
        });
        引用模块时候,我们讲模块名放在[]中作为require()第一参数,如果我们定义的模块本身也依赖其他模块,那就需要将他们放在[]中作为define()第一参数,

        如果我们定义的模块本身也依赖其他模块,那就需要将他们放在
        //定义main.js模块
        define(function(){
        var basicNum = 0;
        var add = function(x,y){
          return x+y;
        };
        return {
          add : add,
        basicNum : basicNum
        };

        });
        //定义一个依赖underscore.js模块
        define(['underscore'],function(_){
        var classify = function(list){
        -.countBy(list,function(num){
        return num > 20 ? 'old' : 'young';
        });
        }
        return {
          classify:classify
          }
        });
        //引用模块,将模块放在[]内
        require(['jquire','main'],function($,math){
        var sum = math.add(2,3);
          $("#sum").html(sum);
        });
      三:CMD和sea.js
        require.js在声明依赖模块时会第一之间加载并执行模块内的代码;
        define(['a','b','c'],function(a,b,c){
        //等于在最前面声明并初始化要用到的所有模块
        if(false){
          //即便没有用到某个模块b,但b还是提前执行了
          b.foo();
          }
        });
        CMD是另一个js模块化方案,和AMD很相识,不同点在于:AMD推崇依赖前置,提前执行,CMD推崇依赖就近,延迟执行,在sea.js中推广中产生的
        //CMD写法:
        define(function(require,exports,module){
        var a = require('./a'); //在需要时候声明
          a.doSomething();
        if(false){
          var b = require('./b');
          b.doSomething()
        }
        });
        //sea.js
        //定义模块main.js
        define(function(require,exports,module){
        var $ = require('jquire.js');
        var add = function(a,b){
          return a+b;
        };
        exports.add = add;
        });
        //加载模块
        seajs.use(['main.js'],function(){
          var sum = math.add(1+1);
        });
      四:ES6 Module
        ES6在语言标准的层面上,实现了模块功能,而且实现得相当简单,旨在浏览器和服务器通用的模块解决方案,
        其主要构成是:export和import,export命令用于规定模块的对外接口,import命令用于输入其他模块提供功能
        //定义模块main.js
        var basicNum = 0;
        var add = function(a,b){
          return a+b;
        };
        export({basicNum,add});
        //引用模块
        import {basicNum,add} from './main'
        function test(ele){
          ele.testCont = add(2+basicNum);
        };

        如果用export default{basicNum,add}; 不用使用大括号
        //定义输出
        export default{basicNum,add};
        //引入
        import math from './main';
        function test(ele){
          ele.testCont = math.add(99+math.basicNum);
        }
        ES6模块不是对象,import命令会被javascript引擎静态分析,在编译时引入模块代码,而不是在代码运行时候加载,所以无法实现条件加载
        也是这个原因,使得静态分析成为可能
      五:ES6模块与CommonJS模块的差异
        1.CommonJS模块输出的是一个值得拷贝,ES6模块输出的值得引用
          CommonJS模块输出是一个值得拷贝,也就是说一旦输出一个值,模块内部变化就影响不到这个值
          ES6模块运行机制,JS引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用,等到脚本真正执行时,再根据
          这个只读引用到被加载的那个模块里面去取值, import加载的值也会跟着变,因此ES6模块是动态引用,并且不会缓存值
        2.CommonJS模块是运行时加载,ES6模块是编译时输出接口
          运行时加载:CommonJS模块就是对象,即在输入时是先加载整个对象,生成一个对象,然后再从这个对象上读取方法,这种称为:运行时加载
          编译时加载:ES6模块不是对象,而是通过exprot命令显示指定输出的代码,import时采用静态命令形式,而不是加载整个模块 这种称为:编译时加载

      CommonJS加载是一个对象 (module.exprots属性) 而ES6模块不是对象,它的对外接口是一种静态定义,在代码静态解析阶段会生成

  • 相关阅读:
    jdbc连接数据库
    UUID
    Oracle 查询
    JAVA开发工具eclipse中@author怎么改
    JAVA实现多线程入门
    JAVA编程中的类和对象
    为ubuntu操作系统增加root用户
    搭建Java环境JDK,和运行环境JRE
    安装Ubuntu14.04版本的操作系统
    Eclipse连接到My sql数据库之前操作
  • 原文地址:https://www.cnblogs.com/hjpqwer/p/8596577.html
Copyright © 2011-2022 走看看