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模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
随机推荐
- yii2.0操作数据库
首先不得不说yii2.0面向对象的比较彻底,建议没学过或者没学好面向对象的同学再看看面向对象. 其次切入正题. 先创建数据库,这步自己写. DROP TABLE IF EXISTS `country` ...
- Thinkphp新增字段无法插入到数据库问题
Thinkphp框架开发过程中,因需求需要改动数据表,新增了几个字段. 调用 M(‘xxx’)->add($data) 插入值时,新增的字段数据总是插入不进去,每次都是默认的值,于是恍然—-缓存 ...
- 大圣画廊v0.2（2015.7.17）
0.2版本号加入的功能 以tag分类图片 美化.添加瀑布流效果 添加tag页和单张图片页 添加公布图片页 以下是具体解释. 每添加一个功能,都要从模型.模板,视图,路由四个方面一一改动. 模型:添加t ...
- iOS开发之--一些有用的博文和博客
应用内购的详细教程: http://mp.weixin.qq.com/s?__biz=MzA3NzM0NzkxMQ==&mid=2655357883&idx=2&sn=7cda ...
- GIS Cesium地图数据配置
1.打开IIS,点击站点 2.跨域配置 配置方式: 在地图数据目录之中放置web.config文件,里面存放 <?xml version="1.0" encoding=&qu ...
- 85、android handler的警告Handler Class Should be Static or Leaks Occur
转载:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1106/1922.html 在使用Handler更新UI的时候,我是这样写 ...
- coderfun-boot接私活利器，文档详实，非一般的开发速度
项目主页:https://gitee.com/klguang/coderfun-boot 演示地址:http://106.15.195.9:8080/admin/项目文档:https://www.ka ...
- 170316、spring4:@Cacheable和@CacheEvict实现缓存及集成redis
注:1.放入cache中,采用@Cacheable;使缓存失效@CacheEvict 2.自定义CacheManager只需要继承org.springframework.cache.support.A ...
- SharePoint 常用操作杂谈
前言 本文完全原创,转载请说明出处,希望对大家有用. 本篇博客是个人总结,一方面以便日后查看,另一方面希望能为其他人提供一些便利. 阅读目录 SharePoint 2010 UserProfile 添 ...
- Linux云服务器下Tomcat部署超详细
基于阿里云Centos 7服务器的Tomcat 项目部署 工具:一台安装jdk1.8的Centos 6/7.X 云服务器(64位) Putty ssh远程连接云服务器的软件 FileZillaCli ...