4-es6的模块化编程
诞生背景
其他都是第三方库，只有es才是官方正宗的，如果es早就制定的话，也不至于现在的这么百花齐放（混乱）的局面了
核心规范
一个文件就是一个模块
export是暴露出模块的公开方法
import是导入
实例代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="wrapp">
<input type="text"></br>
<input type="text"></br>
<button>求和</button></br>
<div class="sumWrap"></div>
</div>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="bundle.js"></script>
</body>
</html>
app.js
/**
*模块:
*功能:入口
*/
import {add} from './tools';
$('button').click(function () {
var num1=$('input:eq(0)').val();
var num2=$('input:eq(1)').val();
var sum=add(num1,num2);
$('.sumWrap').text(sum)
})
tools.js
/**
*模块:tools
*功能:工具
*/
//除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
import * as log from './log';
var add=function (x,y) {
var sum= Number(x)+Number(y);
log.info('tools>add执行结果为：'+sum);
console.log(log)
return sum;
}
export {add};
log.js
/**
*模块:log模块
*功能:打印
*/
var info=function (str) {
console.log(str)
};
var warn=function (err) {
console.warn(str)
};
var err=function (str) {
console.error(str)
};
export {info,err};
效果预览
作者说明
因为es只是出了规范，具体的是实现还是靠浏览器，目前为止没有一个浏览器支持es6模块开发规范的。所以我用了webpack编译打包了
4-es6的模块化编程的更多相关文章
- es6的模块化编程
es6的模块化编程 基本用法 es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能. 一个模块就是一个独 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础：ES6初体验 & 模块化编程
缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...
- 简述JavaScript模块化编程（二）
前置阅读:简述JavaScript模块化(一) 在前面一文中,我们对前端模块化所经历的三个阶段进行了了解: CommonJs,由于是同步的,所以主要应用于服务器端,以Node.js为代表. AMD,异 ...
- 第五篇，理解JS模块化编程思想
模块化编程 ·模块化编程是一种处理复杂系统分解成更好的可管理模块的方式,它可以把系统代码划分为职责单一高度解耦切可替代的模块. ·系统中某一部分的变化将如何影响其他部分就会变得显而易见,系统的可维护性 ...
- 从273二手车的M站点初探js模块化编程
前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...
- Javascript模块化编程（三）：require.js的用法
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...
- Javascript模块化编程（二）：AMD规范
Javascript模块化编程(二):AMD规范 作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_d ...
- Javascript模块化编程（一）：模块的写法
Javascript模块化编程(一):模块的写法 作者: 阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html ...
- 【模块化编程】理解requireJS-实现一个简单的模块加载器
在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ..... ...
- Javascript模块化编程（二）：AMD规范（转）
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
随机推荐
- C语言跳出循环
使用while或for循环时,如果想提前结束循环(在不满足结束条件的情况下结束循环),可以使用break或continue关键字. break关键字 在<C语言switch语句>一节中,我 ...
- HYSBZ 1036（树的统计Count）
题目链接:传送门 题目大意:中文题,略 题目思路:树链剖分裸题. 闲谈:树链越练越熟练了 #include <iostream> #include <cstdio> #incl ...
- 【黑金原创教程】【TimeQuest】【第六章】物理时钟与外部模型
声明:本文为黑金动力社区(http://www.heijin.org)原创教程,如需转载请注明出处,谢谢! 黑金动力社区2013年原创教程连载计划: http://www.cnblogs.com/al ...
- js数组和字符串去重复几种方法
js数组去重复几种方法 第一种:也是最笨的吧. Array.prototype.unique1 = function () { var r = new Array(); label:for(var i ...
- HDFS编程
HDFS编程主要API Hadoop类 功能 org.apache.hadoop.fs.FileSystem 一个通用文件系统的抽象基类,可以被分布式文件系统继承.所有的可能使用Hadoop文件系统的 ...
- 01.Elasticsearch安装
1.下载运行Elasticsearch 1.下载解压elasticsearch Elasticsearch官网地址:https://www.elastic.co/ Elasticsearch最新版下载 ...
- 8个Javascript小技巧
1. 使用 + 字符可以转换成数字 比如要把一个字符串数字转换成数字,你可能会这样做: var one = '1'; var two = '2'; var numberOne = Number(one ...
- bootloader,kernel,initrc
http://www.ibm.com/developerworks/cn/linux/l-k26initrd/index.html http://www.68idc.cn/help/server/li ...
- 【转】通过ionice和nice降低shell脚本运行的优先级
对于一些运行时会造成系统满载的脚本, 例如数据库备份, 会影响当时其他服务的响应速度, 可以通过ionice和nice对其IO优先级和CPU优先级进行调整例如降低"/usr/local/bi ...
- Python高级特性（3）: Classes和Metaclasses（转）
原文:Python高级特性(3): Classes和Metaclasses 类和对象 类和函数一样都是Python中的对象.当一个类定义完成之后,Python将创建一个“类对象”并将其赋值给一个同名变 ...