码迷,mamicode.com
首页 > 其他好文 > 详细

ES6-模块化

时间:2017-08-27 12:04:33      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:eth   文件   export   port   requirejs   color   引入   var   --   

ES6-模块化

  在es6标准中,js原生支持modulele。这种将js代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的,比如CommonJS、AMD和CMD。接下来我们看一下这几种规范。


 

一、模块化规范

1.1 CommonJs规范实例

  详细请移步这里

1 import ‘./demo‘;    //导入当前目录下的模块
2 import ‘mysql‘ ;    //导入模块目录中的模块
3 
4 export.exports = {}   //导出模块

  NodeJS对其有更好的实现。

1.2 AMD规范实例

     1、html代码

 1 index.html
 2 ---------------
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6   <title></title>
 7   <!-- 引入require.js -->
 8   <script type="text/javascript" src="http://cdn.bootcss.com/require.js/2.3.3/require.js"></script>
10 </head>
11 <body>
12   <script type="text/javascript" src="main.js"></script>
13 </body>
14 </html>

 

   2、js代码

myName.js
---------------
// 定义模块
define(‘myName‘,[],function () {
  return ‘My name is toTo_li.‘
})

yourName.js
---------------
// 定义模块
define(‘yourName‘,[],function () {
  return ‘Your name is boke.‘
})

main.js
---------------
// 调用模块
require([‘myName‘,‘yourName‘],function (myName,yourName) {
  console.log(myName)
  console.log(yourName)
})

 

      AMD的规范的实现有RequireJS,了解更多请移步CommonJs

1.3 CMD规范实例

     

define(function(require, exports, module) {
  var $ = require(‘jquery‘);  // 导入模块
  var Spinning = require(‘./spinning‘);
  exports.doSomething = ...
  module.exports = ...  // 导出模块
})

 

 二、ES6的模块化

  ES6模块需要使用babel转码,这里简单解释一下什么是babel转码。

    babel就是将‘ES6模块化语法’转化为‘CommonJS模块化语法’,其中的require exports等是Commonjs在具体实现中所提供的变量,了解过node的同学应该知道。

import ‘./test‘;  // 导入当前目录中的模块
import ‘jquery‘;  // 导入模块目录中的模块
export function test() {}  // 导出模块

 

   ES6的模块化是将不同功能的代码分别写在不同的文件中,各模块只需导出公共接口部分,然后通过模块的导入的方式可以在其他地方使用。

  

 1 //point.js
 2 module "point"{
 3      export class Point{
 4          constructor(x,y){
 5               public x = x;
 6               public y = y;
 7          }  
 8      }      
 9 }
10 
11 //myapp.js
12 //声明引用的模块
13 module point from "/point.js";
14 
15 //这里可以看出,尽管声明了引用的模块,还是可以通过指定需要的部分进行导入
16 import Point from "point";
17 
18 var origin = new Point(10,5);
19 console.log(origin);

 

  

  关于ES6模块的具体信息,可以查看阮一峰老师的模块化

 

ES6-模块化

标签:eth   文件   export   port   requirejs   color   引入   var   --   

原文地址:http://www.cnblogs.com/toTo-li/p/7439844.html

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