码迷,mamicode.com
首页 > Web开发 > 详细

amd cmd commonjs 模块规范 和 es6 的 module 语法

时间:2017-12-03 00:41:38      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:复杂   script   属性   ejs   服务器   imp   javascrip   函数   comment   

  • js的模块化

    在前端开发的原始时期,只要在script标签中嵌入js代码就能实现一些基本的交互效果,但是随着时代的进步。js扮演的角色变得重要起来,js应用的场景页越来越复杂,。然而,js都没有类的概念,更不用说模块了。

    为什么要有模块化

    1. 当一个项目变得复杂的时候,会出现问题,比如:
      命名冲突:开发中重复命名,导致命名冲突。
      文件依赖:项目开发中,依赖的js文件,引入遗漏,引入顺序错误。

    2. 使用模块化开发可以避免类似情况,而且利于项目的维护:
      提升开发效率:代码方便重用,能直接引入,避免重复开发。
      方便后期维护:维护起来文件依赖和结构清晰

  • AMD
    AMD 英文Asynchronous Module Definition,中文“异步模块定义”。它是一个在浏览器端模块化开发的规范。AMD规范的主要实现是RequireJs


define(id?, dependencies?, factory)
id:指定义中模块的名字(可选)。如果没有提供该参数,模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数,模块名必须是“顶级”的和绝对的(不允许相对名字)。
dependencies:当前模块依赖的,已被模块定义的模块标识的数组字面量(可选)。
factory:一个需要进行实例化的函数或者一个对象。   


   define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
       exports.verb = function() {
           return beta.verb();
           //Or:
           return require("beta").verb();
       }
   });
  • CMD 
    CMD 英文 Common Module Definition。CMD 依赖就近。CMD规范的主要实现是SeaJs

      define(function(require, exports, module){ 模块代码 });
      
  • commonjs
    CommonJS是服务器端模块的规范,Nodejs使用该规范。
    CommonJS定义,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象属性。
    通过 require 来加载模块。
    commonJs通过 exports 和 modul.exports 来暴露模块中的内容。

  • es6的module 语法 
    一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。
    export 命令用于规定模块的对外接口。
    import 命令用于输入其他模块提供的功能。

    // profile.js
    export var firstName = ‘Michael‘;
    export var lastName = ‘Jackson‘;
    export var year = 1958;
    // main.js
    import {firstName, lastName, year} from ‘./profile‘;
    
    function setName(element) {
      element.textContent = firstName + ‘ ‘ + lastName;
    }

amd cmd commonjs 模块规范 和 es6 的 module 语法

标签:复杂   script   属性   ejs   服务器   imp   javascrip   函数   comment   

原文地址:http://www.cnblogs.com/wolfjyx/p/7955959.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!