炉火纯青个人页面-阿里云开发者社区

Spring Boot 集成Swagger

Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。总体目标是使客户端和文件系统作为服务器以同样的速度来更新。文件的方法，参数和模型紧密集成到服务器端的代码，允许API来始终保持同步。Swagger 让部署管理和使用功能强大的API从未如此简单。更多关于Swagger的作用，相信大家百度一下能了解的更全面，本文以SpringBoot中集成Swagger为例做介绍说明。一、修改pom.xml，添加maven依赖  <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <version>2.6.1</version> </dependency> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger-ui</artifactId> <version>2.6.1</version> </dependency> 二、添加Swagger配置类 package com.example.swaggerdemo; import static com.google.common.base.Predicates.or; import static springfox.documentation.builders.PathSelectors.regex; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.context.request.async.DeferredResult; import springfox.documentation.service.ApiInfo; import springfox.documentation.spi.DocumentationType; import springfox.documentation.spring.web.plugins.Docket; import springfox.documentation.swagger2.annotations.EnableSwagger2; /** * SwaggerConfig */ @Configuration @EnableSwagger2 public class SwaggerConfig { /** * SpringBoot默认已经将classpath:/META-INF/resources/和classpath:/META-INF/resources/webjars/映射 * 所以该方法不需要重写，如果在SpringMVC中，可能需要重写定义（我没有尝试） * 重写该方法需要 extends WebMvcConfigurerAdapter * */ // @Override // public void addResourceHandlers(ResourceHandlerRegistry registry) { // registry.addResourceHandler("swagger-ui.html") // .addResourceLocations("classpath:/META-INF/resources/"); // // registry.addResourceHandler("/webjars/**") // .addResourceLocations("classpath:/META-INF/resources/webjars/"); // } /** * 可以定义多个组，比如本类中定义把test和demo区分开了 * （访问页面就可以看到效果了） * */ @Bean public Docket testApi() { return new Docket(DocumentationType.SWAGGER_2) .groupName("test") .genericModelSubstitutes(DeferredResult.class) // .genericModelSubstitutes(ResponseEntity.class) .useDefaultResponseMessages(false) .forCodeGeneration(true) .pathMapping("/")// base，最终调用接口后会和paths拼接在一起 .select() .paths(or(regex("/api/.*")))//过滤的接口 .build() .apiInfo(testApiInfo()); } @Bean public Docket demoApi() { return new Docket(DocumentationType.SWAGGER_2) .groupName("demo") .genericModelSubstitutes(DeferredResult.class) // .genericModelSubstitutes(ResponseEntity.class) .useDefaultResponseMessages(false) .forCodeGeneration(false) .pathMapping("/") .select() .paths(or(regex("/demo/.*")))//过滤的接口 .build() .apiInfo(demoApiInfo()); } private ApiInfo testApiInfo() { return new ApiInfoBuilder() .title("Electronic Health Record(EHR) Platform API")//大标题 .description("EHR Platform's REST API, all the applications could access the Object model data via JSON.")//详细描述 .version("1.0")//版本 .termsOfServiceUrl("NO terms of service") .contact(new Contact("小单", "http://blog.csdn.net/catoop", "365384722@qq.com"))//作者 .license("The Apache License, Version 2.0") .licenseUrl("http://www.apache.org/licenses/LICENSE-2.0.html") .build(); } private ApiInfo demoApiInfo() { return new ApiInfoBuilder() .title("Electronic Health Record(EHR) Platform API")//大标题 .description("EHR Platform's REST API, all the applications could access the Object model data via JSON.")//详细描述 .version("1.0")//版本 .termsOfServiceUrl("NO terms of service") .contact(new Contact("小单", "http://blog.csdn.net/catoop", "365384722@qq.com"))//作者 .license("The Apache License, Version 2.0") .licenseUrl("http://www.apache.org/licenses/LICENSE-2.0.html") .build(); return apiInfo; } } 经过这2步配置后，我们启动服务后，访问：http://localhost:8080/swagger-ui.html 就完成了集成。 Swagger会默认把所有Controller中的RequestMapping方法都生成API出来，实际上我们一般只需要标准接口的（像返回页面的那种Controller方法我们并不需要），所有你可以按下面的方法来设定要生成API的方法的要求。如下我针对RestController注解的类和ResponseBody注解的方法才生成Swaager的API，并且排除了特定的类，代码如下： @Configuration @EnableSwagger2 // 启用 Swagger public class SwaggerConfig { @Bean public Docket createRestApi() { Predicate<RequestHandler> predicate = new Predicate<RequestHandler>() { @Override public boolean apply(RequestHandler input) { Class<?> declaringClass = input.declaringClass(); if (declaringClass == BasicErrorController.class)// 排除 return false; if(declaringClass.isAnnotationPresent(RestController.class)) // 被注解的类 return true; if(input.isAnnotatedWith(ResponseBody.class)) // 被注解的方法 return true; return false; } }; return new Docket(DocumentationType.SWAGGER_2) .apiInfo(apiInfo()) .useDefaultResponseMessages(false) .select() .apis(predicate) .build(); } private ApiInfo apiInfo() { return new ApiInfoBuilder() .title("包含媒体、咨询、搜索引擎关键字、广告等类型接口的服务")//大标题 .version("1.0")//版本 .build(); } 三、常见swagger注解一览与使用最常用的5个注解 @Api：修饰整个类，描述Controller的作用 @ApiOperation：描述一个类的一个方法，或者说一个接口 @ApiParam：单个参数描述 @ApiModel：用对象来接收参数 @ApiProperty：用对象接收参数时，描述对象的一个字段其它若干 @ApiResponse：HTTP响应其中1个描述 @ApiResponses：HTTP响应整体描述 @ApiIgnore：使用该注解忽略这个API @ApiClass @ApiError @ApiErrors @ApiParamImplicit @ApiParamsImplicit 下面创建2个Controller来测试： 1、TestController.java @Controller @RequestMapping("/api/test") public class TestController { @ResponseBody @RequestMapping(value = "/show", method=RequestMethod.POST, produces=MediaType.APPLICATION_JSON_VALUE)// 这里指定RequestMethod，如果不指定Swagger会把所有RequestMethod都输出，在实际应用中，具体指定请求类型也使接口更为严谨。 @ApiOperation(value="测试接口", notes="测试接口详细描述") public String show( @ApiParam(required=true, name="name", value="姓名") @RequestParam(name = "name", required=true) String stuName){ return "success"; } } 2、DemoController.java /** * DemoController * */ @Controller @RequestMapping(value = "/demo") public class DemoController { private Logger logger = LoggerFactory.getLogger(DemoController.class); /** * 可以直接使用@ResponseBody响应JSON * * @param request * @param response * @return */ @ResponseBody @RequestMapping(value = "/getcount", method = RequestMethod.POST) @ApiOperation(value="测试-getCount", notes="getCount更多说明") public ModelMap getCount(HttpServletRequest request, HttpServletResponse response) { logger.info(">>>>>>>> begin getCount >>>>>>>>"); ModelMap map = new ModelMap(); map.addAttribute("count", 158); // 后台获取的国际化信息 map.addAttribute("xstest", "测试"); return map; } /** * 可以直接使用@ResponseBody响应JSON * * @param request * @param response * @return */ @ApiIgnore//使用该注解忽略这个API @ResponseBody @RequestMapping(value = "/jsonTest1", method = RequestMethod.POST) public ModelMap jsonTest(HttpServletRequest request, HttpServletResponse response) { ModelMap map = new ModelMap(); map.addAttribute("hello", "你好"); map.addAttribute("veryGood", "很好"); return map; } /** * 可以直接使用@ResponseBody响应JSON * * @param request * @param response * @return */ @ResponseBody @RequestMapping(value = "/jsonTest3", method = RequestMethod.POST) public List<String> jsonTest3(HttpServletRequest request, HttpServletResponse response) { List<String> list = new ArrayList<String>(); list.add("hello"); list.add("你好"); return list; } /** * JSON请求一个对象<br/> * （Ajax Post Data：{"name":"名称","content":"内容"}） * * @param version * @return */ @ResponseBody @RequestMapping(value = "/jsonTest2", method = RequestMethod.POST) public ModelMap jsonTest2(@RequestBody Demo demo) { logger.info("demoName：" + demo.getName()); logger.info("demoContent：" + demo.getContent()); ModelMap map = new ModelMap(); map.addAttribute("result", "ok"); return map; } /** * 直接读取URL参数值<br/> * /demo/jsonTest6.do?name=Hello&content=World * * @param demoName * @param content * @return */ @ResponseBody @RequestMapping(value = "/jsonTest6", method = RequestMethod.POST) public ModelMap jsonTest6(@RequestParam("name") String demoName, @RequestParam String content) { logger.info("demoName：" + demoName); ModelMap map = new ModelMap(); map.addAttribute("name",demoName + "AAA"); map.addAttribute("content",content + "BBB"); map.addAttribute("date",new java.util.Date()); return map; } /** * JSON请求一个对象，将RequestBody自动转换为JSONObject对象<br/> * （Ajax Post Data：{"name":"名称","content":"内容"}） * * 使用JSONObject请添加依赖 * <dependency> * <groupId>net.sf.json-lib</groupId> * <artifactId>json-lib</artifactId> * <version>2.4</version> *  * <classifier>jdk15</classifier> * </dependency> * * @param version * @return */ @ResponseBody @RequestMapping(value = "/jsonTest5", method = RequestMethod.POST) public ModelMap jsonTest5(@RequestBody JSONObject jsonObject) { String name = jsonObject.getString("name"); logger.info("demoName：" + name); ModelMap map = new ModelMap(); map.addAttribute("demoName",name); return map; } /** * 输入和输出为JSON格式的数据的方式 HttpEntity<?> ResponseEntity<?> * * @param u * @return */ @ResponseBody @RequestMapping(value = "/jsonTest4", method = RequestMethod.POST) public ResponseEntity<String> jsonTest4(HttpEntity<Demo> demo, HttpServletRequest request, HttpSession session) { //获取Headers方法 HttpHeaders headers = demo.getHeaders(); // 获取内容 String demoContent = demo.getBody().getContent(); // 这里直接new一个对象（HttpHeaders headers = new HttpHeaders();） HttpHeaders responseHeaders = new HttpHeaders(); responseHeaders.add("MyHeaderName", "SHANHY"); ResponseEntity<String> responseResult = new ResponseEntity<String>( demoContent, responseHeaders, HttpStatus.OK); return responseResult; } } Swagger2默认将所有的Controller中的RequestMapping方法都会暴露，然而在实际开发中，我们并不一定需要把所有API都提现在文档中查看，这种情况下，使用注解@ApiIgnore来解决，如果应用在Controller范围上，则当前Controller中的所有方法都会被忽略，如果应用在方法上，则对应用的方法忽略暴露API。注解@ApiOperation和@ApiParam可以理解为API说明，多动手尝试就很容易理解了。如果我们不使用这样注解进行说明，Swagger2也是有默认值的，没什么可说的试试就知道了。在 http://localhost:8080/swagger-ui.html 显示页面的右上角有api_key ，springfox-swagger 2.2.2 版本并没有进行处理，我们可以自己添加拦截器拦截 /v2/api-docs 来处理我们API文档的访问权限，如果要更严格更灵活的控制，可能需要修改源码来实现了。相信 springfox-swagger 的后期版本应该会支持更全面的应用需求的。引自 http://blog.csdn.net/catoop/article/details/50668896

彻底搞清楚javascript中的require、import和export

为什么有模块概念理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，在es6以前，它是不支持”类”（class），所以也就没有”模块”（module）了。 require时代 Javascript社区做了很多努力，在现有的运行环境中，实现”模块”的效果。原始写法模块就是实现特定功能的一组方法。只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。 1 2 3 4 5 6 function m1(){ 　//... } function m2(){ 　//...　　 } 上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。这种做法的缺点很明显：”污染”了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。对象写法为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面 1 2 3 4 5 6 7 8 9 var module1 = new Object({ _count : 0, 　m1 : function (){ 　　//... 　}, 　m2 : function (){ 　　//... 　} }); 上面的函数m1()和m2(），都封装在module1对象里。使用的时候，就是调用这个对象的属性 1 module1.m1(); 这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。 1 module._count = 1; 立即执行函数写法使用”立即执行函数”（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var module = (function() { var _count = 0; var m1 = function() { alert(_count) } var m2 = function() { alert(_count + 1) } return { m1: m1, m2: m2 } })() 使用上面的写法，外部代码无法读取内部的_count变量。 1 　　console.info(module._count); //undefined module就是Javascript模块的基本写法。主流模块规范在es6以前，还没有提出一套官方的规范,从社区和框架推广程度而言,目前通行的javascript模块规范有两种：CommonJS 和 AMD CommonJS规范 2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程。这标志”Javascript模块化编程”正式诞生。前端的复杂程度有限，没有模块也是可以的，但是在服务器端，一定要有模块，与操作系统和其他应用程序互动，否则根本没法编程。 node编程中最重要的思想之一就是模块，而正是这个思想，让JavaScript的大规模工程成为可能。模块化编程在js界流行，也是基于此，随后在浏览器端，requirejs和seajs之类的工具包也出现了，可以说在对应规范下，require统治了ES6之前的所有模块化编程，即使现在，在ES6 module被完全实现之前，还是这样。在CommonJS中,暴露模块使用module.exports和exports，很多人不明白暴露对象为什么会有两个,后面会介绍区别在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。 1 var math = require('math'); 然后，就可以调用模块提供的方法： 1 2 　var math = require('math'); 　math.add(2,3); // 5 正是由于CommonJS 使用的require方式的推动，才有了后面的AMD、CMD 也采用的require方式来引用模块的风格 AMD规范有了服务器端模块以后，很自然地，大家就想要客户端模块。而且最好两者能够兼容，一个模块不用修改，在服务器和浏览器都可以运行。但是，由于一个重大的局限，使得CommonJS规范不适用于浏览器环境。还是上一节的代码，如果在浏览器中运行，会有一个很大的问题 1 2 var math = require('math'); math.add(2, 3); 第二行math.add(2, 3)，在第一行require(‘math’)之后运行，因此必须等math.js加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于”假死”状态。因此，浏览器端的模块，不能采用”同步加载”（synchronous），只能采用”异步加载”（asynchronous）。这就是AMD规范诞生的背景。 AMD是”Asynchronous Module Definition”的缩写，意思就是”异步模块定义”。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。模块必须采用特定的define()函数来定义。 1 define(id?, dependencies?, factory) id:字符串，模块名称(可选) dependencies: 是我们要载入的依赖模块(可选)，使用相对路径。,注意是数组格式 factory: 工厂方法，返回一个模块函数如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。 1 2 3 4 5 6 7 8 9 // math.js 　　define(function (){ 　　　　var add = function (x,y){ 　　　　　　return x+y; 　　　　}; 　　　　return { 　　　　　　add: add 　　　　}; 　　}); 如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。 1 2 3 4 5 6 7 8 define(['Lib'], function(Lib){ 　　　　function foo(){ 　　　　　　Lib.doSomething(); 　　　　} 　　　　return { 　　　　　　foo : foo 　　　　}; 　　}); 当require()函数加载上面这个模块的时候，就会先加载Lib.js文件。 AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数： 1 require([module], callback); 第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样： 1 2 3 require(['math'], function (math) { 　math.add(2, 3); }); math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。 CMD规范 CMD (Common Module Definition), 是seajs推崇的规范，CMD则是依赖就近，用的时候再require。它写起来是这样的： 1 2 3 4 define(function(require, exports, module) { var clock = require('clock'); clock.start(); }); CMD与AMD一样，也是采用特定的define()函数来定义,用require方式来引用模块 1 define(id?, dependencies?, factory) id:字符串，模块名称(可选) dependencies: 是我们要载入的依赖模块(可选)，使用相对路径。,注意是数组格式 factory: 工厂方法，返回一个模块函数 1 2 3 4 5 define('hello', ['jquery'], function(require, exports, module) { // 模块代码 }); 如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。 1 2 3 define(function(require, exports, module) { // 模块代码 }); 注意：带 id 和 dependencies 参数的 define 用法不属于 CMD 规范，而属于 Modules/Transport 规范。 CMD与AMD区别 AMD和CMD最大的区别是对依赖模块的执行时机处理不同，而不是加载的时机或者方式不同，二者皆为异步加载模块。 AMD依赖前置，js可以方便知道依赖模块是谁，立即加载；而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，这也是很多人诟病CMD的一点，牺牲性能来带来开发的便利性，实际上解析模块用的时间短到可以忽略。现阶段的标准 ES6标准发布后，module成为标准，标准使用是以export指令导出接口，以import引入模块，但是在我们一贯的node模块中，我们依然采用的是CommonJS规范，使用require引入模块，使用module.exports导出接口。 export导出模块 export语法声明用于导出函数、对象、指定文件（或模块）的原始值。注意：在node中使用的是exports,不要混淆了 export有两种模块导出方式：命名式导出（名称导出）和默认导出（定义式导出），命名式导出每个模块可以多个，而默认导出每个模块仅一个。 1 2 3 4 5 6 7 8 9 10 11 12 13 export { name1, name2, …, nameN }; export { variable1 as name1, variable2 as name2, …, nameN }; export let name1, name2, …, nameN; // also var export let name1 = …, name2 = …, …, nameN; // also var, const export default expression; export default function (…) { … } // also class, function* export default function name1(…) { … } // also class, function* export { name1 as default, … }; export * from …; export { name1, name2, …, nameN } from …; export { import1 as name1, import2 as name2, …, nameN } from …; name1… nameN－导出的“标识符”。导出后，可以通过这个“标识符”在另一个模块中使用import引用 default－设置模块的默认导出。设置后import不通过“标识符”而直接引用默认导入－继承模块并导出继承模块所有的方法和属性 as－重命名导出“标识符” from－从已经存在的模块、脚本文件…导出命名式导出模块可以通过export前缀关键词声明导出对象，导出对象可以是多个。这些导出对象用名称进行区分，称之为命名式导出。 1 2 export { myFunction }; // 导出一个已定义的函数 export const foo = Math.sqrt(2); // 导出一个常量我们可以使用*和from关键字来实现的模块的继承： 1 export * from 'article'; 模块导出时，可以指定模块的导出成员。导出成员可以认为是类中的公有对象，而非导出成员可以认为是类中的私有对象： 1 2 3 4 5 var name = 'IT笔录'; var domain = 'http://itbilu.com'; export {name, domain}; // 相当于导出 {name:name,domain:domain} 模块导出时，我们可以使用as关键字对导出成员进行重命名： 1 2 3 4 var name = 'IT笔录'; var domain = 'http://itbilu.com'; export {name as siteName, domain}; 注意，下面的语法有严重错误的情况： 1 2 3 4 5 // 错误演示 export 1; // 绝对不可以 var a = 100; export a; export在导出接口的时候，必须与模块内部的变量具有一一对应的关系。直接导出1没有任何意义，也不可能在import的时候有一个变量与之对应 export a虽然看上去成立，但是a的值是一个数字，根本无法完成解构，因此必须写成export {a}的形式。即使a被赋值为一个function，也是不允许的。而且，大部分风格都建议，模块中最好在末尾用一个export导出所有的接口，例如： 1 export {fun as default,a,b,c}; 默认导出默认导出也被称做定义式导出。命名式导出可以导出多个值，但在在import引用时，也要使用相同的名称来引用相应的值。而默认导出每个导出只有一个单一值，这个输出可以是一个函数、类或其它类型的值，这样在模块import导入时也会很容易引用。 1 2 export default function() {}; // 可以导出一个函数 export default class(){}; // 也可以出一个类命名式导出与默认导出默认导出可以理解为另一种形式的命名导出，默认导出可以认为是使用了default名称的命名导出。下面两种导出方式是等价的： 1 2 3 4 const D = 123; export default D; export { D as default }; export使用示例使用名称导出一个模块时： 1 2 3 4 5 6 // "my-module.js" 模块 export function cube(x) { return x * x * x; } const foo = Math.PI + Math.SQRT2; export { foo }; 在另一个模块（脚本文件）中，我们可以像下面这样引用： 1 2 3 import { cube, foo } from 'my-module'; console.log(cube(3)); // 27 console.log(foo); // 4.555806215962888 使用默认导出一个模块时： 1 2 3 4 // "my-module.js"模块 export default function (x) { return x * x * x; } 在另一个模块（脚本文件）中，我们可以像下面这样引用，相对名称导出来说使用更为简单： 1 2 3 // 引用 "my-module.js"模块 import cube from 'my-module'; console.log(cube(3)); // 27 import引入模块 import语法声明用于从已导出的模块、脚本中导入函数、对象、指定文件（或模块）的原始值。 import模块导入与export模块导出功能相对应，也存在两种模块导入方式：命名式导入（名称导入）和默认导入（定义式导入）。 import的语法跟require不同，而且import必须放在文件的最开始，且前面不允许有其他逻辑代码，这和其他所有编程语言风格一致。 1 2 3 4 5 6 7 8 9 import defaultMember from "module-name"; import * as name from "module-name"; import { member } from "module-name"; import { member as alias } from "module-name"; import { member1 , member2 } from "module-name"; import { member1 , member2 as alias2 , [...] } from "module-name"; import defaultMember, { member [ , [...] ] } from "module-name"; import defaultMember, * as name from "module-name"; import "module-name"; name－从将要导入模块中收到的导出值的名称 member, memberN－从导出模块，导入指定名称的多个成员 defaultMember－从导出模块，导入默认导出成员 alias, aliasN－别名，对指定导入成员进行的重命名 module-name－要导入的模块。是一个文件名 as－重命名导入成员名称（“标识符”） from－从已经存在的模块、脚本文件等导入命名式导入我们可以通过指定名称，就是将这些成员插入到当作用域中。导出时，可以导入单个成员或多个成员：注意，花括号里面的变量与export后面的变量一一对应 1 2 import {myMember} from "my-module"; import {foo, bar} from "my-module"; 通过*符号，我们可以导入模块中的全部属性和方法。当导入模块全部导出内容时，就是将导出模块（’my-module.js’）所有的导出绑定内容，插入到当前模块（’myModule’）的作用域中： 1 import * as myModule from "my-module"; 导入模块对象时，也可以使用as对导入成员重命名，以方便在当前模块内使用： 1 import {reallyReallyLongModuleMemberName as shortName} from "my-module"; 导入多个成员时，同样可以使用别名： 1 import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module"; 导入一个模块，但不进行任何绑定： 1 import "my-module"; 默认导入在模块导出时，可能会存在默认导出。同样的，在导入时可以使用import指令导出这些默认值。直接导入默认值： 1 import myDefault from "my-module"; 也可以在命名空间导入和名称导入中，同时使用默认导入： 1 2 3 4 import myDefault, * as myModule from "my-module"; // myModule 做为命名空间使用或 import myDefault, {foo, bar} from "my-module"; // 指定成员导入 import使用示例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // --file.js-- function getJSON(url, callback) { let xhr = new XMLHttpRequest(); xhr.onload = function () { callback(this.responseText) }; xhr.open("GET", url, true); xhr.send(); } export function getUsefulContents(url, callback) { getJSON(url, data => callback(JSON.parse(data))); } // --main.js-- import { getUsefulContents } from "file"; getUsefulContents("http://itbilu.com", data => { doSomethingUseful(data); }); default关键字 1 2 3 4 5 6 // d.js export default function() {} // 等效于： function a() {}; export {a as default}; 在import的时候，可以这样用： 1 2 3 4 import a from './d'; // 等效于，或者说就是下面这种写法的简写，是同一个意思 import {default as a} from './d'; 这个语法糖的好处就是import的时候，可以省去花括号{}。简单的说，如果import的时候，你发现某个变量没有花括号括起来（没有*号），那么你在脑海中应该把它还原成有花括号的as语法。所以，下面这种写法你也应该理解了吧： 1 import $,{each,map} from 'jquery'; import后面第一个$是{defalut as $}的替代写法。 as关键字 as简单的说就是取一个别名,export中可以用，import中其实可以用： 1 2 3 4 5 6 7 // a.js var a = function() {}; export {a as fun}; // b.js import {fun as a} from './a'; a(); 上面这段代码，export的时候，对外提供的接口是fun，它是a.js内部a这个函数的别名，但是在模块外面，认不到a，只能认到fun。 import中的as就很简单，就是你在使用模块里面的方法的时候，给这个方法取一个别名，好在当前的文件里面使用。之所以是这样，是因为有的时候不同的两个模块可能通过相同的接口，比如有一个c.js也通过了fun这个接口： 1 2 // c.js export function fun() {}; 如果在b.js中同时使用a和c这两个模块，就必须想办法解决接口重名的问题，as就解决了。 CommonJS中module.exports 与 exports的区别 Module.exports The module.exports object is created by the Module system. Sometimes this is not acceptable; many want their module to be an instance of some class. To do this, assign the desired export object to module.exports. Note that assigning the desired object to exports will simply rebind the local exports variable, which is probably not what you want to do. 译文：module.exports对象是由模块系统创建的。有时这是难以接受的；许多人希望他们的模块成为某个类的实例。为了实现这个，需要将期望导出的对象赋值给module.exports。注意，将期望的对象赋值给exports会简单地重新绑定到本地exports变量上，这可能不是你想要的。 Module.exports The exports variable is available within a module’s file-level scope, and is assigned the value of module.exports before the module is evaluated. It allows a shortcut, so that module.exports.f = … can be written more succinctly as exports.f = …. However, be aware that like any variable, if a new value is assigned to exports, it is no longer bound to module.exports: 译文：exports变量是在模块的文件级别作用域内有效的，它在模块被执行前被赋于 module.exports 的值。它有一个快捷方式，以便 module.exports.f = … 可以被更简洁地写成exports.f = …。注意，就像任何变量，如果一个新的值被赋值给exports，它就不再绑定到module.exports(其实是exports.属性会自动挂载到没有命名冲突的module.exports.属性) 从Api文档上面的可以看出，从require导入方式去理解，关键有两个变量(全局变量module.exports，局部变量exports)、一个返回值(module.exports) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function require(...) { var module = { exports: {} }; ((module, exports) => { // 你的被引入代码 Start // var exports = module.exports = {}; (默认都有的) function some_func() {}; exports = some_func; // 此时，exports不再挂载到module.exports， // export将导出{}默认对象 module.exports = some_func; // 此时，这个模块将导出some_func对象，覆盖exports上的some_func // 你的被引入代码 End })(module, module.exports); // 不管是exports还是module.exports，最后返回的还是module.exports return module.exports; } demo.js: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 console.log(exports); // {} console.log(module.exports); // {} console.log(exports === module.exports); // true console.log(exports == module.exports); // true console.log(module); /** Module { id: '.', exports: {}, parent: null, filename: '/Users/larben/Desktop/demo.js', loaded: false, children: [], paths: [ '/Users/larben/Desktop/node_modules', '/Users/larben/node_modules', '/Users/node_modules', '/node_modules' ] } */ 注意每个js文件一创建，都有一个var exports = module.exports = {},使exports和module.exports都指向一个空对象。 module.exports和exports所指向的内存地址相同

炉火纯青个人页面-阿里云开发者社区

个人介绍

擅长的技术

机器学习资料大汇总

为 hexo NexT 添加 Gitment 评论插件

亚马逊AWS CentOS7(linux)改为用户名密码登录

Spring Boot 集成Swagger

彻底搞清楚javascript中的require、import和export

全面理解面向对象的 JavaScript

JAVA智能设备基于OpenGL的3D开发技术之AABB碰撞检测算法论述

七天学会NodeJS （原生NodeJS 学习资料来自淘宝技术团队）

高性能Web服务端 PHP vs Node.js vs Nginx-Lua 的对比分析

Android平台GPS系统的应用开发

Android平台相机接口的应用

Windows下安装并设置Redis

在AngularJS应用中实现认证授权

WebGL 入门-WebGL简介与3D图形学

Nodejs开发框架Express3.0开发手记–从零开始

六款值得推荐的android（安卓）开源框架简介

10款实用Android UI 开发框架

Android利用V4包中的SwipeRefreshLayout实现上拉加载

Windows Azure免费空间如何搭建PHP网站/数据库、域名绑定

Windows 8 IIS配置PHP运行环境

IIS 安装 pydio

Windows环境配置Apache+Mysql+PHP

Azure 云平台用 SQOOP 将 SQL server 2012 数据表导入 HIVE / HBASE

sql server 导出数据到 Azure Hbase / Hive 详细步骤

微软Azure云平台Hbase 的使用

炉火纯青个人页面-阿里云开发者社区

个人介绍

擅长的技术

机器学习资料大汇总

为 hexo NexT 添加 Gitment 评论插件

亚马逊AWS CentOS7(linux)改为用户名密码登录

Spring Boot 集成Swagger

彻底搞清楚javascript中的require、import和export

全面理解面向对象的 JavaScript

JAVA智能设备基于OpenGL的3D开发技术 之AABB碰撞检测算法论述

七天学会NodeJS （原生NodeJS 学习资料 来自淘宝技术团队）

高性能Web服务端 PHP vs Node.js vs Nginx-Lua 的对比分析

Android平台GPS系统的应用开发

Android平台相机接口的应用

Windows下安装并设置Redis

在AngularJS应用中实现认证授权

WebGL 入门-WebGL简介与3D图形学

Nodejs开发框架Express3.0开发手记–从零开始

六款值得推荐的android（安卓）开源框架简介

10款实用Android UI 开发框架

Android利用V4包中的SwipeRefreshLayout实现上拉加载

Windows Azure免费空间如何搭建PHP网站/数据库、域名绑定

Windows 8 IIS配置PHP运行环境

IIS 安装 pydio

Windows环境配置Apache+Mysql+PHP

Azure 云平台用 SQOOP 将 SQL server 2012 数据表导入 HIVE / HBASE

sql server 导出数据到 Azure Hbase / Hive 详细步骤

微软Azure云平台Hbase 的使用

JAVA智能设备基于OpenGL的3D开发技术之AABB碰撞检测算法论述

七天学会NodeJS （原生NodeJS 学习资料来自淘宝技术团队）