言
推荐这个项目是因为使用手册部署手册非常完善，项目也有开发教程视频对小白非常贴心，接私活可以直接拿去二开非常舒服

开源说明

• 系统100%开源
• 模块化开发模式，铭飞所开发的模块都发布到了maven中央库。可以通过pom.xml文件的方式拉取源代码

<dependency>
	<groupId>net.mingsoft</groupId>
	<artifactId>模块</artifactId>
	<version>版本号</version>
	<classifier>sources</classifier>
	<scope>provided</scope>
</dependency>

商用

基于MIT开源协议，可直接商用无需授权，但请尊重开源精神不要去掉代码中铭飞的注释和版权信息

特点

• 免费完整开源：基于MIT协议，源代码完全开源，无商业限制,MS开发团队承诺将MCMS内容系统永久完整开源；关注Java项目分享
• 标签化建站：不需要专业的后台开发技能，只要使用系统提供的标签，就能轻松建设网站；
• html静态化：系统支持全站静态化；
• 跨终端：站点同时支持PC与移动端访问，同时会自动根据访问的终端切换到对应的界面，数据由系统统一管理；
• 海量模版：铭飞通过MStore（MS商城）分享更多免费、精美的企业网站模版，降低建站成本；关注Java项目分享
• 丰富插件：为了让MCms适应更多的业务场景，在MStore用户可以下载对应的插件，如：站群插件、微信插件、商城插件等；
• 每月更新：铭飞团队承诺每月28日为系统升级日，分享更多好用等模版与插件；
• 文档丰富：为了让用户更快速的使用MCms系统进行开发，铭飞团队持续更新开发相关文档，如标签文档、使用文档、视频教程等；

面向对象

• 企 业：帮助创立初期的公司或团队快速搭建产品的技术平台，加快公司项目开发进度；
• 开发者：帮助开发者快速完成承接外包的项目，避免从零搭建系统；
• 学习者：初学JAVA的同学可以下载源代码来进行学习交流；

开发环境

建议开发者使用以下环境，这样避免版本带来的问题

• Windows、Linux
• Eclipse、Idea
• Mysql≧5.7
• JDK≧8
• Tomcat≧8

1. MCms内容插件手册

MCms内容插件提供最基本的菜单、权限、角色、栏目、内容、静态化、等常用功能。
视频教程：内容插件视频教程 配合代码生成器使用快速提升开发效率：代码生成器在线视频教程、代码生成器使用文档

1.1. Apache Maven依赖

1.1.1. 当前版本

<!-- ms-mcms 内容模块插件 -->
<dependency>
    <groupId>net.mingsoft</groupId>
    <artifactId>ms-mcms</artifactId>
    <version>当前版本</version>
</dependency>
<!-- ms-mcms 内容模块源码 -->
<dependency>
    <groupId>net.mingsoft</groupId>
    <artifactId>ms-mcms</artifactId>
    <version>当前版本</version>
    <classifier>sources</classifier>
</dependency>Copy

1.2. 接口

项目访问路径/swagger-ui.html#/

系统部署手册

1. jar部署

1.1. 打包方式1

懒人做法，将所有的资源打成一个jar包，维护资源不方便，不推荐

mvn clean package
java -jar ms-mcms.jarCopy

1.2. 打包方式2（推荐）

打包指令增加参数 -f bin-xml ,执行完成会在target目录会生成 “ 项目-bin ” 发布文件夹

mvn clean package -f bin-xml
Copy

1.2.1. 目录结构

config：配置文件

html：静态化自动生成的目录(自动生成)

static：静态资源文件

templets：(必须)模版目录，需要复制一份

upload：(必须)上传的文件夹

WEB-INF：ftl视图文件

mcms.log：自动生成的日志文件

*.sh：linux启动、停止脚本

*.bat：window启动、停止脚本

技术选型

后端框架

前端框架

软件截图

铭飞平台

做开源我们是业余的，写代码我们是认真的。研发产品的路上我们一直在探索、一直在学习、一直在用心投入，希望能给更多的企业与开发者提供一些更有价值的服务。

项目管理

代码生成器

源码资料获取方式：关注小编+转发文章+私信【 666 】免费获取
八股文面试资料获取方式：关注小编+转发文章+私信【 13 】免费获取
重要的事情说三遍，转发+转发+转发，一定要记得点赞转发哦!!!

面试官：Spring 和 Spring Boot 的区别是什么？

概述

对于 Spring和 SpringBoot到底有什么区别，我听到了很多答案，刚开始迈入学习 SpringBoot的我当时也是一头雾水，随着经验的积累、我慢慢理解了这两个框架到底有什么区别，相信对于用了 SpringBoot很久的同学来说，还不是很理解 SpringBoot到底和 Spring有什么区别，看完文章中的比较，或许你有了不同的答案和看法！

什么是Spring

作为 Java开发人员，大家都 Spring都不陌生，简而言之， Spring框架为开发 Java应用程序提供了全面的基础架构支持。它包含一些很好的功能，如依赖注入和开箱即用的模块，如：

SpringJDBC、SpringMVC、SpringSecurity、SpringAOP、SpringORM、SpringTest，这些模块缩短应用程序的开发时间，提高了应用开发的效率例如，在 JavaWeb开发的早期阶段，我们需要编写大量的代码来将记录插入到数据库中。但是通过使用 SpringJDBC模块的 JDBCTemplate，我们可以将操作简化为几行代码。

什么是Spring Boot

SpringBoot基本上是 Spring框架的扩展，它消除了设置 Spring应用程序所需的 XML配置，为更快，更高效的开发生态系统铺平了道路。

SpringBoot中的一些特征：

1、创建独立的 Spring应用。
2、嵌入式 Tomcat、 Jetty、 Undertow容器（无需部署war文件）。
3、提供的 starters 简化构建配置
4、尽可能自动配置 spring应用。
5、提供生产指标,例如指标、健壮检查和外部化配置
6、完全没有代码生成和 XML配置要求

从配置分析

Maven依赖

首先，让我们看一下使用Spring创建Web应用程序所需的最小依赖项

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-web</artifactId>
    <version>5.1.0.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>5.1.0.RELEASE</version>
</dependency>

与Spring不同，Spring Boot只需要一个依赖项来启动和运行Web应用程序：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
    <version>2.0.6.RELEASE</version>
</dependency>

在进行构建期间，所有其他依赖项将自动添加到项目中。

另一个很好的例子就是测试库。我们通常使用 SpringTest， JUnit， Hamcrest和 Mockito库。在 Spring项目中，我们应该将所有这些库添加为依赖项。但是在 SpringBoot中，我们只需要添加 spring-boot-starter-test依赖项来自动包含这些库。

Spring Boot为不同的Spring模块提供了许多依赖项。一些最常用的是：

spring-boot-starter-data-jpaspring-boot-starter-securityspring-boot-starter-testspring-boot-starter-webspring-boot-starter-thymeleaf

有关 starter的完整列表，请查看Spring文档。

MVC配置

让我们来看一下 Spring和 SpringBoot创建 JSPWeb应用程序所需的配置。

Spring需要定义调度程序 servlet，映射和其他支持配置。我们可以使用 web.xml 文件或 Initializer类来完成此操作：

public class MyWebAppInitializer implements WebApplicationInitializer {
    @Override
    public void onStartup(ServletContext container) {
        AnnotationConfigWebApplicationContext context = new AnnotationConfigWebApplicationContext();
        context.setConfigLocation("com.pingfangushi");
          container.addListener(new ContextLoaderListener(context));
          ServletRegistration.Dynamic dispatcher = container
          .addServlet("dispatcher", new DispatcherServlet(context));
        dispatcher.setLoadOnStartup(1);
        dispatcher.addMapping("/");
    }
}

还需要将 @EnableWebMvc注释添加到 @Configuration类，并定义一个视图解析器来解析从控制器返回的视图：

@EnableWebMvc
@Configuration
public class ClientWebConfig implements WebMvcConfigurer { 
   @Bean
   public ViewResolver viewResolver() {
      InternalResourceViewResolver bean
        = new InternalResourceViewResolver();
      bean.setViewClass(JstlView.class);
      bean.setPrefix("/WEB-INF/view/");
      bean.setSuffix(".jsp");
      return bean;
   }
}

再来看 SpringBoot一旦我们添加了 Web启动程序， SpringBoot只需要在 application配置文件中配置几个属性来完成如上操作：

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

上面的所有Spring配置都是通过一个名为auto-configuration的过程添加 Bootweb starter来自动包含的。

这意味着 SpringBoot将查看应用程序中存在的依赖项，属性和 bean，并根据这些依赖项，对属性和 bean进行配置。当然，如果我们想要添加自己的自定义配置，那么 SpringBoot自动配置将会退回。

配置模板引擎

现在我们来看下如何在Spring和Spring Boot中配置Thymeleaf模板引擎。

在 Spring中，我们需要为视图解析器添加 thymeleaf-spring5依赖项和一些配置：

@Configuration
@EnableWebMvc
public class MvcWebConfig implements WebMvcConfigurer {
    @Autowired
    private ApplicationContext applicationContext;
    @Bean
    public SpringResourceTemplateResolver templateResolver() {
        SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
        templateResolver.setApplicationContext(applicationContext);
        templateResolver.setPrefix("/WEB-INF/views/");
        templateResolver.setSuffix(".html");
        return templateResolver;
    }
    @Bean
    public SpringTemplateEngine templateEngine() {
        SpringTemplateEngine templateEngine = new SpringTemplateEngine();
        templateEngine.setTemplateResolver(templateResolver());
        templateEngine.setEnableSpringELCompiler(true);
        return templateEngine;
    }
    @Override
    public void configureViewResolvers(ViewResolverRegistry registry) {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(templateEngine());
        registry.viewResolver(resolver);
    }
}

SpringBoot1X只需要 spring-boot-starter-thymeleaf的依赖项来启用 Web应用程序中的 Thymeleaf支持。   但是由于 Thymeleaf3.0中的新功能，我们必须将 thymeleaf-layout-dialect 添加为 SpringBoot2XWeb应用程序中的依赖项。配置好依赖，我们就可以将模板添加到 src/main/resources/templates文件夹中， SpringBoot将自动显示它们。

Spring Security 配置

为简单起见，我们使用框架默认的 HTTPBasic身份验证。让我们首先看一下使用 Spring启用 Security所需的依赖关系和配置。

Spring首先需要依赖 spring-security-web和 spring-security-config 模块。接下来， 我们需要添加一个扩展 WebSecurityConfigurerAdapter的类，并使用 @EnableWebSecurity注解：

@Configuration
@EnableWebSecurity
public class CustomWebSecurityConfigurerAdapter extends WebSecurityConfigurerAdapter {
    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
        auth.inMemoryAuthentication()
          .withUser("admin")
            .password(passwordEncoder()
            .encode("password"))
          .authorities("ROLE_ADMIN");
    }
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
          .anyRequest().authenticated()
          .and()
          .httpBasic();
    }
    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

这里我们使用 inMemoryAuthentication来设置身份验证。同样， SpringBoot也需要这些依赖项才能使其工作。但是我们只需要定义 spring-boot-starter-security的依赖关系，因为这会自动将所有相关的依赖项添加到类路径中。

SpringBoot中的安全配置与上面的相同 。

应用程序启动引导配置

Spring和 SpringBoot中应用程序引导的基本区别在于 servlet。Spring使用 web.xml 或 SpringServletContainerInitializer作为其引导入口点。SpringBoot仅使用 Servlet3功能来引导应用程序，下面让我们详细来了解下

Spring 引导配置

Spring支持传统的 web.xml引导方式以及最新的 Servlet3+方法。

配置 web.xml方法启动的步骤

Servlet容器（服务器）读取 web.xml

web.xml中定义的 DispatcherServlet由容器实例化

DispatcherServlet通过读取 WEB-INF/{servletName}-servlet.xml来创建 WebApplicationContext。最后， DispatcherServlet注册在应用程序上下文中定义的 bean

使用 Servlet3+方法的 Spring启动步骤

容器搜索实现 ServletContainerInitializer的类并执行 SpringServletContainerInitializer找到实现所有类 WebApplicationInitializer``WebApplicationInitializer创建具有XML或上下文 @Configuration类 WebApplicationInitializer创建 DispatcherServlet与先前创建的上下文。

SpringBoot 引导配置

Spring Boot应用程序的入口点是使用@SpringBootApplication注释的类

@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

默认情况下， SpringBoot使用嵌入式容器来运行应用程序。在这种情况下， SpringBoot使用 publicstaticvoidmain入口点来启动嵌入式 Web服务器。此外，它还负责将 Servlet， Filter和 ServletContextInitializerbean从应用程序上下文绑定到嵌入式 servlet容器。SpringBoot的另一个特性是它会自动扫描同一个包中的所有类或 Main类的子包中的组件。

SpringBoot提供了将其部署到外部容器的方式。我们只需要扩展 SpringBootServletInitializer即可：

/**
 * War部署
 *
 * @author SanLi
 * Created by 2689170096@qq.com on 2018/4/15
 */
public class ServletInitializer extends SpringBootServletInitializer {
    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(Application.class);
    }
    @Override
    public void onStartup(ServletContext servletContext) throws ServletException {
        super.onStartup(servletContext);
        servletContext.addListener(new HttpSessionEventPublisher());
    }
}

这里外部 servlet容器查找在war包下的 META-INF文件夹下MANIFEST.MF文件中定义的 Main-class， SpringBootServletInitializer将负责绑定 Servlet， Filter和 ServletContextInitializer。

打包和部署

最后，让我们看看如何打包和部署应用程序。这两个框架都支持 Maven和 Gradle等通用包管理技术。但是在部署方面，这些框架差异很大。例如，Spring Boot Maven插件在 Maven中提供 SpringBoot支持。它还允许打包可执行 jar或 war包并 就地运行应用程序。

在部署环境中 SpringBoot 对比 Spring的一些优点包括：

1、提供嵌入式容器支持
2、使用命令java -jar独立运行jar
3、在外部容器中部署时，可以选择排除依赖关系以避免潜在的jar冲突
4、部署时灵活指定配置文件的选项
5、用于集成测试的随机端口生成

结论

简而言之，我们可以说 SpringBoot只是 Spring本身的扩展，使开发，测试和部署更加方便。

言

1. 这里的 "ES6" 泛指 ES5 之后的新语法
2. 这里的 "完全" 是指本文会不断更新
3. 这里的 "使用" 是指本文会展示很多 ES6 的使用场景
4. 这里的 "手册" 是指你可以参照本文将项目更多的重构为 ES6 语法

此外还要注意这里不一定就是正式进入规范的语法。

1. let 和 const

在我们开发的时候，可能认为应该默认使用 let 而不是 var，这种情况下，对于需要写保护的变量要使用 const。

然而另一种做法日益普及：默认使用 const，只有当确实需要改变变量的值的时候才使用 let。这是因为大部分的变量的值在初始化后不应再改变，而预料之外的变量的修改是很多 bug 的源头。

// 例子 1-1

// bad
var foo = 'bar';

// good
let foo = 'bar';

// better
const foo = 'bar';
复制代码

2. 模板字符串

1. 模板字符串

需要拼接字符串的时候尽量改成使用模板字符串:

// 例子 2-1

// bad
const foo = 'this is a' + example;

// good
const foo = `this is a ${example}`;
复制代码

2. 标签模板

可以借助标签模板优化书写方式:

// 例子 2-2

let url = oneLine `
    www.taobao.com/example/index.html
    ?foo=${foo}
    &bar=${bar}
`;

console.log(url); 
复制代码

oneLine 的源码可以参考 《ES6 系列之模板字符串》

https://github.com/mqyqingfeng/Blog/issues/109

3. 箭头函数

优先使用箭头函数，不过以下几种情况避免使用：

1. 使用箭头函数定义对象的方法

// 例子 3-1

// bad
let foo = {
  value: 1,
  getValue: () => console.log(this.value)
}

foo.getValue();  // undefined
复制代码

2. 定义原型方法

// 例子 3-2

// bad
function Foo() {
  this.value = 1
}

Foo.prototype.getValue = () => console.log(this.value)

let foo = new Foo()
foo.getValue();  // undefined
复制代码

3. 作为事件的回调函数

// 例子 3-3

// bad
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
    console.log(this === window); // => true
    this.innerHTML = 'Clicked button';
});
复制代码

4. Symbol

1. 唯一值

// 例子 4-1


// bad
// 1. 创建的属性会被 for-in 或 Object.keys() 枚举出来
// 2. 一些库可能在将来会使用同样的方式，这会与你的代码发生冲突
if (element.isMoving) {
  smoothAnimations(element);
}
element.isMoving = true;

// good
if (element.__$jorendorff_animation_library$PLEASE_DO_NOT_USE_THIS_PROPERTY$isMoving__) {
  smoothAnimations(element);
}
element.__$jorendorff_animation_library$PLEASE_DO_NOT_USE_THIS_PROPERTY$isMoving__ = true;

// better
var isMoving = Symbol("isMoving");

...

if (element[isMoving]) {
  smoothAnimations(element);
}
element[isMoving] = true;
复制代码

2. 魔术字符串

魔术字符串指的是在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。

魔术字符串不利于修改和维护，风格良好的代码，应该尽量消除魔术字符串，改由含义清晰的变量代替。

// 例子 4-1

// bad
const TYPE_AUDIO = 'AUDIO'
const TYPE_VIDEO = 'VIDEO'
const TYPE_IMAGE = 'IMAGE'

// good
const TYPE_AUDIO = Symbol()
const TYPE_VIDEO = Symbol()
const TYPE_IMAGE = Symbol()

function handleFileResource(resource) {
  switch(resource.type) {
    case TYPE_AUDIO:
      playAudio(resource)
      break
    case TYPE_VIDEO:
      playVideo(resource)
      break
    case TYPE_IMAGE:
      previewImage(resource)
      break
    default:
      throw new Error('Unknown type of resource')
  }
}
复制代码

3. 私有变量

Symbol 也可以用于私有变量的实现。

// 例子 4-3

const Example = (function() {
    var _private = Symbol('private');

    class Example {
        constructor() {
          this[_private] = 'private';
        }
        getName() {
          return this[_private];
        }
    }

    return Example;
})();

var ex = new Example();

console.log(ex.getName()); // private
console.log(ex.name); // undefined
复制代码

5. Set 和 Map

1. 数组去重

// 例子 5-1

[...new Set(array)]
复制代码

2. 条件语句的优化

// 例子 5-2
// 根据颜色找出对应的水果

// bad
function test(color) {
  switch (color) {
    case 'red':
      return ['apple', 'strawberry'];
    case 'yellow':
      return ['banana', 'pineapple'];
    case 'purple':
      return ['grape', 'plum'];
    default:
      return [];
  }
}

test('yellow'); // ['banana', 'pineapple']
复制代码

// good
const fruitColor = {
  red: ['apple', 'strawberry'],
  yellow: ['banana', 'pineapple'],
  purple: ['grape', 'plum']
};

function test(color) {
  return fruitColor[color] || [];
}
复制代码

// better
const fruitColor = new Map()
  .set('red', ['apple', 'strawberry'])
  .set('yellow', ['banana', 'pineapple'])
  .set('purple', ['grape', 'plum']);

function test(color) {
  return fruitColor.get(color) || [];
}
复制代码

6. for of

1. 遍历范围

for...of 循环可以使用的范围包括：

1. 数组
2. Set
3. Map
4. 类数组对象，如 arguments 对象、DOM NodeList 对象
5. Generator 对象
6. 字符串

2. 优势

ES2015 引入了 for..of 循环，它结合了 forEach 的简洁性和中断循环的能力：

// 例子 6-1

for (const v of ['a', 'b', 'c']) {
  console.log(v);
}
// a b c

for (const [i, v] of ['a', 'b', 'c'].entries()) {
  console.log(i, v);
}
// 0 "a"
// 1 "b"
// 2 "c"
复制代码

3. 遍历 Map

// 例子 6-2

let map = new Map(arr);

// 遍历 key 值
for (let key of map.keys()) {
  console.log(key);
}

// 遍历 value 值
for (let value of map.values()) {
  console.log(value);
}

// 遍历 key 和 value 值(一)
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}

// 遍历 key 和 value 值(二)
for (let [key, value] of data) {
  console.log(key)
}
复制代码

7. Promise

1. 基本示例

// 例子 7-1

// bad
request(url, function(err, res, body) {
    if (err) handleError(err);
    fs.writeFile('1.txt', body, function(err) {
        request(url2, function(err, res, body) {
            if (err) handleError(err)
        })
    })
});

// good
request(url)
.then(function(result) {
    return writeFileAsynv('1.txt', result)
})
.then(function(result) {
    return request(url2)
})
.catch(function(e){
    handleError(e)
});
复制代码

2. finally

// 例子 7-2

fetch('file.json')
.then(data => data.json())
.catch(error => console.error(error))
.finally(() => console.log('finished'));
复制代码

8. Async

1. 代码更加简洁

// 例子 8-1

// good
function fetch() {
  return (
    fetchData()
    .then(() => {
      return "done"
    });
  )
}

// better
async function fetch() {
  await fetchData()
  return "done"
};
复制代码

// 例子 8-2

// good
function fetch() {
  return fetchData()
  .then(data => {
    if (data.moreData) {
        return fetchAnotherData(data)
        .then(moreData => {
          return moreData
        })
    } else {
      return data
    }
  });
}

// better
async function fetch() {
  const data = await fetchData()
  if (data.moreData) {
    const moreData = await fetchAnotherData(data);
    return moreData
  } else {
    return data
  }
};
复制代码

// 例子 8-3

// good
function fetch() {
  return (
    fetchData()
    .then(value1 => {
      return fetchMoreData(value1)
    })
    .then(value2 => {
      return fetchMoreData2(value2)
    })
  )
}

// better
async function fetch() {
  const value1 = await fetchData()
  const value2 = await fetchMoreData(value1)
  return fetchMoreData2(value2)
};
复制代码

2. 错误处理

// 例子 8-4

// good
function fetch() {
  try {
    fetchData()
      .then(result => {
        const data = JSON.parse(result)
      })
      .catch((err) => {
        console.log(err)
      })
  } catch (err) {
    console.log(err)
  }
}

// better
async function fetch() {
  try {
    const data = JSON.parse(await fetchData())
  } catch (err) {
    console.log(err)
  }
};
复制代码

3. "async 地狱"

// 例子 8-5

// bad
(async () => {
  const getList = await getList();
  const getAnotherList = await getAnotherList();
})();

// good
(async () => {
  const listPromise = getList();
  const anotherListPromise = getAnotherList();
  await listPromise;
  await anotherListPromise;
})();

// good
(async () => {
  Promise.all([getList(), getAnotherList()]).then(...);
})();
复制代码

9. Class

构造函数尽可能使用 Class 的形式

// 例子 9-1

class Foo {
  static bar () {
    this.baz();
  }
  static baz () {
    console.log('hello');
  }
  baz () {
    console.log('world');
  }
}

Foo.bar(); // hello
复制代码

// 例子 9-2

class Shape {
  constructor(width, height) {
    this._width = width;
    this._height = height;
  }
  get area() {
    return this._width * this._height;
  }
}

const square = new Shape(10, 10);
console.log(square.area);    // 100
console.log(square._width);  // 10
复制代码

10.Decorator

1. log

// 例子 10-1

class Math {
  @log
  add(a, b) {
    return a + b;
  }
}
复制代码

log 的实现可以参考 《ES6 系列之我们来聊聊装饰器》

2. autobind

// 例子 10-2

class Toggle extends React.Component {

  @autobind
  handleClick() {
    console.log(this)
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        button
      </button>
    );
  }
}
复制代码

autobind 的实现可以参考 《ES6 系列之我们来聊聊装饰器》

3. debounce

// 例子 10-3

class Toggle extends React.Component {

  @debounce(500, true)
  handleClick() {
    console.log('toggle')
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        button
      </button>
    );
  }
}
复制代码

debounce 的实现可以参考 《ES6 系列之我们来聊聊装饰器》

4. React 与 Redux

// 例子 10-4

// good
class MyReactComponent extends React.Component {}

export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

// better
@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {};
复制代码

11. 函数

1. 默认值

// 例子 11-1

// bad
function test(quantity) {
  const q = quantity || 1;
}

// good
function test(quantity = 1) {
  ...
}

复制代码

// 例子 11-2

doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });

// bad
function doSomething(config) {
  const foo = config.foo !== undefined ? config.foo : 'Hi';
  const bar = config.bar !== undefined ? config.bar : 'Yo!';
  const baz = config.baz !== undefined ? config.baz : 13;
}

// good
function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) {
  ...
}

// better
function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {
  ...
}
复制代码

// 例子 11-3

// bad
const Button = ({className}) => {
	const classname = className || 'default-size';
	return <span className={classname}></span>
};

// good
const Button = ({className = 'default-size'}) => (
	<span className={classname}></span>
);

// better
const Button = ({className}) =>
	<span className={className}></span>
}

Button.defaultProps = {
	className: 'default-size'
}
复制代码

// 例子 11-4

const required = () => {throw new Error('Missing parameter')};

const add = (a = required(), b = required()) => a + b;

add(1, 2) // 3
add(1); // Error: Missing parameter.
复制代码

12. 拓展运算符

1. arguments 转数组

// 例子 12-1

// bad
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// good
const sortNumbers = (...numbers) => numbers.sort();
复制代码

2. 调用参数

// 例子 12-2

// bad
Math.max.apply(null, [14, 3, 77])

// good
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
复制代码

3. 构建对象

剔除部分属性，将剩下的属性构建一个新的对象

// 例子 12-3
let [a, b, ...arr] = [1, 2, 3, 4, 5];

const { a, b, ...others } = { a: 1, b: 2, c: 3, d: 4, e: 5 };
复制代码

有条件的构建对象

// 例子 12-4

// bad
function pick(data) {
  const { id, name, age} = data

  const res = { guid: id }

  if (name) {
    res.name = name
  }
  else if (age) {
    res.age = age
  }

  return res
}

// good
function pick({id, name, age}) {
  return {
    guid: id,
    ...(name && {name}),
    ...(age && {age})
  }
}
复制代码

合并对象

// 例子 12-5

let obj1 = { a: 1, b: 2,c: 3 }
let obj2 = { b: 4, c: 5, d: 6}
let merged = {...obj1, ...obj2};
复制代码

4. React

将对象全部传入组件

// 例子 12-6

const parmas =  {value1: 1, value2: 2, value3: 3}

<Test {...parmas} />
复制代码

13. 双冒号运算符

// 例子 13-1

foo::bar;
// 等同于
bar.bind(foo);

foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);
复制代码

如果双冒号左边为空，右边是一个对象的方法，则等于将该方法绑定在该对象上面。

// 例子 13-2

var method = obj::obj.foo;
// 等同于
var method = ::obj.foo;

let log = ::console.log;
// 等同于
var log = console.log.bind(console);
复制代码

14. 解构赋值

1. 对象的基本解构

// 例子 14-1

componentWillReceiveProps(newProps) {
	this.setState({
		active: newProps.active
	})
}

componentWillReceiveProps({active}) {
	this.setState({active})
}
复制代码

// 例子 14-2

// bad
handleEvent = () => {
  this.setState({
    data: this.state.data.set("key", "value")
  })
};

// good
handleEvent = () => {
  this.setState(({data}) => ({
    data: data.set("key", "value")
  }))
};
复制代码

// 例子 14-3

Promise.all([Promise.resolve(1), Promise.resolve(2)])
.then(([x, y]) => {
    console.log(x, y);
});
复制代码

2. 对象深度解构

// 例子 14-4

// bad
function test(fruit) {
  if (fruit && fruit.name)  {
    console.log (fruit.name);
  } else {
    console.log('unknown');
  }
}

// good
function test({name} = {}) {
  console.log (name || 'unknown');
}
复制代码

// 例子 14-5

let obj = {
    a: {
      b: {
        c: 1
      }
    }
};

const {a: {b: {c = ''} = ''} = ''} = obj;
复制代码

3. 数组解构

// 例子 14-6

// bad
const spliteLocale = locale.splite("-");
const language = spliteLocale[0];
const country = spliteLocale[1];

// good
const [language, country] = locale.splite('-');
复制代码

4. 变量重命名

// 例子 14-8

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
console.log(baz); // "aaa"
复制代码

5. 仅获取部分属性

// 例子 14-9

function test(input) {
  return [left, right, top, bottom];
}
const [left, __, top] = test(input);

function test(input) {
  return { left, right, top, bottom };
}
const { left, right } = test(input);
复制代码

15. 增强的对象字面量

// 例子 15-1

// bad
const something = 'y'
const x = {
  something: something
}

// good
const something = 'y'
const x = {
  something
};
复制代码

动态属性

// 例子 15-2

const x = {
  ['a' + '_' + 'b']: 'z'
}

console.log(x.a_b); // z
复制代码

16. 数组的拓展方法

1. keys

// 例子 16-1

var arr = ["a", , "c"];

var sparseKeys = Object.keys(arr);
console.log(sparseKeys); // ['0', '2']

var denseKeys = [...arr.keys()];
console.log(denseKeys);  // [0, 1, 2]
复制代码

2. entries

// 例子 16-2

var arr = ["a", "b", "c"];
var iterator = arr.entries();

for (let e of iterator) {
    console.log(e);
}
复制代码

3. values

// 例子 16-3

let arr = ['w', 'y', 'k', 'o', 'p'];
let eArr = arr.values();

for (let letter of eArr) {
  console.log(letter);
}
复制代码

4. includes

// 例子 16-4

// bad
function test(fruit) {
  if (fruit == 'apple' || fruit == 'strawberry') {
    console.log('red');
  }
}

// good
function test(fruit) {
  const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
  if (redFruits.includes(fruit)) {
    console.log('red');
  }
}
复制代码

5. find

// 例子 16-5

var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

function findCherries(fruit) {
    return fruit.name === 'cherries';
}

console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }
复制代码

6. findIndex

// 例子 16-6

function isPrime(element, index, array) {
  var start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2
复制代码

更多的就不列举了。

17. optional-chaining

举个例子：

// 例子 17-1

const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  },
};

const baz = obj?.foo?.bar?.baz; // 42
复制代码

同样支持函数：

// 例子 17-2

function test() {
  return 42;
}
test?.(); // 42

exists?.(); // undefined
复制代码

需要添加 @babel/plugin-proposal-optional-chaining 插件支持

18. logical-assignment-operators

// 例子 18-1

a ||= b;

obj.a.b ||= c;

a &&= b;

obj.a.b &&= c;
复制代码

Babel 编译为：

var _obj$a, _obj$a2;

a || (a = b);

(_obj$a = obj.a).b || (_obj$a.b = c);

a && (a = b);

(_obj$a2 = obj.a).b && (_obj$a2.b = c);
复制代码

出现的原因：

// 例子 18-2

function example(a = b) {
  // a 必须是 undefined
  if (!a) {
    a = b;
  }
}

function numeric(a = b) {
  // a 必须是 null 或者 undefined
  if (a == null) {
    a = b;
  }
}

// a 可以是任何 falsy 的值
function example(a = b) {
  // 可以，但是一定会触发 setter
  a = a || b;

  // 不会触发 setter，但可能会导致 lint error
  a || (a = b);

  // 就有人提出了这种写法：
  a ||= b;
}
复制代码

需要 @babel/plugin-proposal-logical-assignment-operators 插件支持

19. nullish-coalescing-operator

a ?? b

// 相当于

(a !== null && a !== void 0) ? a : b
复制代码

举个例子：

var foo = object.foo ?? "default";

// 相当于

var foo = (object.foo != null) ? object.foo : "default";
复制代码

需要 @babel/plugin-proposal-nullish-coalescing-operator 插件支持

20. pipeline-operator

const double = (n) => n * 2;
const increment = (n) => n + 1;

// 没有用管道操作符
double(increment(double(5))); // 22

// 用上管道操作符之后
5 |> double |> increment |> double; // 22
复制代码

其他

新开了 知乎专栏，大家可以在更多的平台上看到我的文章，欢迎关注哦~

参考

2. ES6 实践规范
3. babel 7 简单升级指南
4. 不得不知的 ES6 小技巧
5. 深入解析 ES6：Symbol
6. 什么时候你不能使用箭头函数？
7. 一些使 JavaScript 更加简洁的小技巧
8. 几分钟内提升技能的 8 个 JavaScript 方法
9. [译] 如何使用 JavaScript ES6 有条件地构造对象
10. 5 个技巧让你更好的编写 JavaScript(ES6) 中条件语句
11. ES6 带来的重大特性 – JavaScript 完全手册（2018版）

ES6 系列

ES6 系列目录地址：https://github.com/mqyqingfeng/Blog

ES6 系列预计写二十篇左右，旨在加深 ES6 部分知识点的理解，重点讲解块级作用域、标签模板、箭头函数、Symbol、Set、Map 以及 Promise 的模拟实现、模块加载方案、异步处理等内容。

如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。

原链接：https://juejin.im/post/5bfe05505188252098022400