当前位置: 首页 > news >正文

Js模块化之-import和export

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。AMD推崇依赖前置,在定义模块的时候就要声明其依赖的模块 

define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
   a.doSomething()
   // 此处略去 100 行
   b.doSomething()
   ...
}) 


CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。CMD推崇就近依赖,只有在用到某个模块的时候再去require 

define(function(require, exports, module) {
   var a = require('./a')
   a.doSomething()
   // 此处略去 100 行
   var b = require('./b') // 依赖可以就近书写
   b.doSomething()
   // ... 
})

ES6之 export和import

第一种方法: 用{}包装成对象导出

//lib.js 文件
let bar = "stringBar";
let foo = "stringFoo";
let fn0 = function() {
    console.log("fn0");
};
let fn1 = function() {
    console.log("fn1");
};
export{ bar , foo, fn0, fn1}

//main.js文件
import {bar,foo, fn0, fn1} from "./lib";
console.log(bar+"_"+foo);
fn0();
fn1();

第二种方法:导出时修改名称

//lib.js文件
let fn0 = function() {
    console.log("fn0");
};
let obj0 = {}
export { fn0 as foo, obj0 as bar};

//main.js文件
import {foo, bar} from "./lib";
foo();
console.log(bar);

第三种方法:定义时导出

//lib.js文件
export let foo = ()=> {console.log("fnFoo") ;return "foo"},bar = "stringBar";

//main.js文件
import {foo, bar} from "./lib";
console.log(foo());
console.log(bar);

第四种方法:匿名导出-导出默认变量

//如果一个js模块文件就只有一个功能, 那么就可以使用export default导出
//lib.js
export default "string";

//main.js
import defaultString from "./lib";
console.log(defaultString);

第五种方法:匿名导出-导出默认方法

//lib.js
let fn = () => "string";
export {fn as default};

//main.js
//导入的名字可以随便定义
import defaultFn from "./lib";
console.log(defaultFn());

第六种方法:通配符* 导出

//lib.js
export * from "./other";
//如果只想导出部分接口, 只要把接口名字列出来
//export {foo,fnFoo} from "./other";

//other.js
export let foo = "stringFoo", fnFoo = function() {console.log("fnFoo")};

//main.js
import {foo, fnFoo} from "./lib";
console.log(foo);
console.log(fnFoo());

es导入的模块都属于引用,类似于浅拷贝

//lib.js
export let counter = 3;
export function incCounter() {
    counter++;
}
export function setCounter(value) {
    counter = value;
}


//main.js
import { counter, incCounter ,setCounter} from './lib';
// The imported value `counter` is live
console.log(counter); // 3
incCounter();
console.log(counter); // 4
setCounter(0);
console.log(counter); // 0

 

转载于:https://my.oschina.net/kimyeongnam/blog/1841066

相关文章:

  • DevC++连接MySQL可用详细教程
  • LNMP架构 (Ⅱ)——nginx相关配置、nginx代理
  • ----------
  • 重装系统的时候重装不了该怎么办
  • EOS技术贴-如何创建EOS钱包和账号并发起转账和投票
  • 一、typescript介绍和安装
  • OpenStact之cinder
  • 对Node的优点和缺点提出了自己的看法?
  • 【刷算法】求1+2+3+...+n
  • 浅谈JavaScript错误
  • 洛谷P1341 无序字母对
  • 十三、数据源的配置
  • Promise 使用技巧九则
  • Linux ,强制更新只读文件,强制写入命令
  • 卸载pip工具
  • (十五)java多线程之并发集合ArrayBlockingQueue
  • 《Java编程思想》读书笔记-对象导论
  • 《微软的软件测试之道》成书始末、出版宣告、补充致谢名单及相关信息
  • co模块的前端实现
  • Docker容器管理
  • js中的正则表达式入门
  • markdown编辑器简评
  • Nginx 通过 Lua + Redis 实现动态封禁 IP
  • npx命令介绍
  • Python爬虫--- 1.3 BS4库的解析器
  • ReactNativeweexDeviceOne对比
  • SOFAMosn配置模型
  • SQLServer之索引简介
  • vue-cli3搭建项目
  • 持续集成与持续部署宝典Part 2:创建持续集成流水线
  • 初识MongoDB分片
  • 短视频宝贝=慢?阿里巴巴工程师这样秒开短视频
  • 码农张的Bug人生 - 见面之礼
  • 使用 @font-face
  • 使用 QuickBI 搭建酷炫可视化分析
  • 算法之不定期更新(一)(2018-04-12)
  • - 转 Ext2.0 form使用实例
  • ​虚拟化系列介绍(十)
  • !$boo在php中什么意思,php前戏
  • #Lua:Lua调用C++生成的DLL库
  • (1)(1.13) SiK无线电高级配置(五)
  • (1)(1.19) TeraRanger One/EVO测距仪
  • (1/2) 为了理解 UWP 的启动流程,我从零开始创建了一个 UWP 程序
  • (14)Hive调优——合并小文件
  • (Bean工厂的后处理器入门)学习Spring的第七天
  • (react踩过的坑)antd 如何同时获取一个select 的value和 label值
  • (附源码)springboot码头作业管理系统 毕业设计 341654
  • (十八)三元表达式和列表解析
  • (一)【Jmeter】JDK及Jmeter的安装部署及简单配置
  • (转)c++ std::pair 与 std::make
  • (转)Groupon前传:从10个月的失败作品修改,1个月找到成功
  • .Net Core和.Net Standard直观理解
  • .NET delegate 委托 、 Event 事件,接口回调
  • .NET 中 GetProcess 相关方法的性能
  • .NET实现之(自动更新)