es6模块化设计
//导出
//方式一
export const name = 'hello'
export let addr = 'chengdu'
export var list = [1,2,3] //方式二
const name = 'hello'
let addr = 'chengdu'
var list = [1,2,3] export default name //默认导出,只能有一个默认导出
export {
//name,
addr,
list
} //导入
import { name,addr,list } form './lesson-mod'
import name, { addr,list } form './lesson-mod'
import name2 form './lesson-mod' //只有默认导出的才能自己命名
import name, { addr as addr2 } form './lesson-mod' //可以利用as重命名
console.log(name,addr,list)
//导出函数,方式一
export default function say (content) {
console.log(content)
}
export function run (){
console.log('running')
} //方式二
const say = (content) => {
console.log(content)
}
const run = () => {
console.log('running')
} export {
say,
run
} //导入函数
import say,{ run } form './xx'
say('hello word')
run()
//导出对象
const data = {
code: 1,
message: 'success'
}
const des = {
age: 20,
addr: 'chengdu'
}
export default {
data,
des
} //导入
import obj from './xxx'
let {data, des} = obj
console.log(obj)
console.log(data,des)
//导出类
class Test {
constructor () {
this.id = 2
}
}
export {
Test
} //导出默认类
export default Test //这样写也行
export class Test {
constructor () {
this.id = 3
}
} //如果导出默认类,类名可以省略
export class {
constructor () {
this.id = 4
}
} //导入
import { Test } from 'xxx'
import Test from 'xxx' //默认导出 let test = new Test()
console.log(test.id)
//同时导出多个类
export class Test1 {
constructor () {
this.id = 3
}
}
export class Test2{
constructor () {
this.id = 4
}
} export default class people {
constructor () {
this.id = 11
}
} //导入
import * as Mod from 'xxxx'
let test1 = new mod.Test1()
console.log(test1.id)
let test2 = new mod.Test2()
console.log(test2.id)
let people = new Mod.default() //注,这里找不到people,要用default
console.log(people.id)
es6模块化设计的更多相关文章
- ES6模块化与常用功能
目前开发环境已经普及使用,如vue,react等,但浏览器环境却支持不好,所以需要开发环境编译,下面介绍下开发环境的使用和常用语法: 一,ES6模块化 1,模块化的基本语法 ES6 的模块自动采用严格 ...
- iOS程序模块化设计
一.模块化设计的概述: 模块化设计(Block-based design):对一定范围内的不同功能或相同功能的不同性能.不同规格的产品进行功能分析的基础上,划分并设计出一系列功能模块,通过模块的选择和 ...
- PHP--进行模块化设计
PHP--进行模块化设计 [来源] 达内 [编辑] 达内 [时间]2012-10-30 导航模块可以简单列为一个关于三级页面链接的HTML文件.通常你可以通过用另一种颜色来标明对当前区域的链 ...
- 深入浅出百度地图API开发系列(3):模块化设计
在前面两张简单介绍了百度地图API的基础知识和使用之后,我们来分析一下百度地图API的基本架构,了解一下基本架构可以帮助我们更清晰的了解API的功能和调用过程,也就可以帮助我们在实际开发中可以更方便的 ...
- AngularJs学习笔记7——四大特性之模块化设计
模块化设计 1.引用自定义模块并调用 自定义模块中,如果有一些服务.封装好笑模块,在另外一个模块中(声明的时候,在依赖列表中加入要引入的模块) var app02 = angular.module(' ...
- C51的模块化设计方法
一个大的单片机程序往往包含很多模块,我是这样组织的: 1.每一个C源文件都要建立一个与之名字一样的H文件(头文件),里面仅仅包括该C文件的函数的声明,其他的什么也不会有,比如变量的定义啊等等不应该有. ...
- thinkphp学习笔记5—模块化设计
原文:thinkphp学习笔记5-模块化设计 1.模块结构 完整的ThinkPHP用用围绕模块/控制器/操作设计,并支持多个入口文件盒多级控制.ThinkPHP默认PATHINFO模式,如下: htt ...
- App 组件化/模块化之路——使用SDK的思路进行模块化设计接口
在不久之前分享一篇<App 组件化/模块化之路——如何封装网络请求框架>文章介绍了我在项目中封装网络请求框架的思路.开发一个 App 会涉及到很多网络请求 API ,例如登录注册接口.用户 ...
- ES6模块化
关于ES6模块化 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能,比如 Ruby 的require ...
随机推荐
- H5_0013:CSS特色样式集
按比例变化,同时又限制最大宽高 ".start-wrap {", " width:40%;", " top: 83.21%;", " ...
- 小白的java学习之路 "类的无参方法"
Java注释: //:单行注释 /**/:多行注释 /** */:JavaDoc注释语法: 访问修饰符 返回值类型 方法名(){ 方法体 } 举例: public void run(){ System ...
- react-native构建基本页面6---打包发布
签名打包发布Release版本的apk安装包 请参考以下两篇文章: ReactNative之Android打包APK方法(趟坑过程) React Native发布APP之签名打包APK 如何发布一个a ...
- PHP常见数组函数总结
一.数组的一些关于键名和值的基础操作函数 1.获取数组所有的键或值:array_keys() array_values() $arr_keys = array_keys($array); $arr_v ...
- C语言 sizeof()用法介绍
本文 转自https://www.cnblogs.com/huolong-blog/p/7587711.html 1. 定义 sizeof是一个操作符(operator). 其作用是返回 ...
- UVa 12050 - Palindrome Numbers (回文数)
A palindrome is a word, number, or phrase that reads the same forwards as backwards. For example, th ...
- Wannafly Camp 2020 Day 3E 棋技哥 - 贪心,前缀和
#include <bits/stdc++.h> using namespace std; char c[505][505]; int n,m,t,a[505][505],s[505][5 ...
- Eclipse中配置Tomcat容器
Tomcat 安装与配置 Tomcat是Apache 软件基金会(Apache Software Foundation)核心项目之一,支持最新的Servlet 和JSP 规范.因为Tomcat 技术先 ...
- JS实现“隐藏与显示”功能(多种方法)
1,通过按钮实现隐藏与显示: 这个是通过按钮点击实现的隐藏与显示,具体代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- COS上传图片和显示图片
写这篇文章之前,我也是刚刚实现COS上传和显示图片.我百度了好多相关文章,COS上传图片成功的文章不少,上传后显示图片的文章几乎没有.于是写一篇记录下. COS上传图片推荐链接:https://blo ...