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模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
随机推荐
- sublime text 2自定义代码片段
本文引用 http://www.blogjava.net/Hafeyang/archive/2012/08/17/how_to_create_code_snippet_in_subline_tex ...
- 登陆Oracle11g的企业管理器
本地:https://localhost:1158/em/ 如果远程:那么把localhost换成服务器IP
- [转]VC++下使用ADO操作数据库
(1).引入ADO类 1 2 3 #import "c:program filescommon filessystemadomsado15.dll" no_namespace re ...
- leetcode 153: Majority Element
Given an array of size n, find the majority element. The majority element is the element that appear ...
- Windows下IPython安装
1:安装Python, 下载后安装即可:https://www.python.org/downloads/windows/,(选择Python2或Python3) 添加Path环境变量 2:安装ez_ ...
- [Web] 如何实现Web服务器和应用服务器的负载均衡？
本文对Web服务器和应用服务器的负载均衡进行说明. 在负载均衡的思路下,多台服务器为对称方式,每台服务器都具有同等的地位,可以单独对外提供服务而无须其他服务器的辅助.通过负载分担技术,将外部发送来的请 ...
- 各种层次NET人应该知道些什么？
A.任何一个使用.NET的人 1.描述线程与进程的区别? 2.什么是Windows服务,它的生命周期与标准的EXE程序有什么不同 ? 3.Windows上的单个进程所能访问的最大内存量是多少?它与系统 ...
- 使用Fastjson生成Json字符串少字段属性（数据丢失）
最后是控制台打印生成的结果如下:FastJson生成字符串是:{"id":"2","name":"节点1"," ...
- Struts入门（三）深入Struts用法讲解
访问Servlet API Action搜索顺序 动态方法调用 指定多个配置文件 默认Action Struts 后缀 接收参数 处理结果类型 1.访问Servlet API 首先我们了解什么是Ser ...
- Whether to hide the cookie from JavaScript
w禁用js访问特定cookie. https://codeigniter.com/userguide3/helpers/cookie_helper.html $this->load->he ...