EcmaScript 2015

简称ES6，ES2015。是是JavaScript语言的下一代标准。ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现。主流浏览器基本都兼容ES2015，通常开发环境用ES2015，借助Babel将ES2015编译成ES5部署在生产环境。
ES2105有很多新特性：let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments。

解构赋值

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

//数组解构赋值
let [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

//对象解构赋值
let o={a:1,b:'b1',c:{ci:'cii'}}
let {a1,c}=o
console.log(a1);//undefined
console.log(c);//{ ci: 'cii' }

import()函数

import函数的参数specifier，指定所要加载的模块的位置。import命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载。
import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。
ES6 import()返回一个 Promise 对象。

简洁对象定义

//简洁对象定义
let a = 'foo', b = 42, c = {};
let o = {a, b, c};
console.log(o);//{ a: 'foo', b: 42, c: {} }

//简洁函数定义
let f={
  fun1(){
  }
}
console.log(f);//{ fun1: [Function: fun1] }

对象属性动态定义

let lable='lable1'
let od={
  [lable]:6378
}
console.log(od);//{ lable1: 6378 }

扩展运算符

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected. rest 参数的逆运算。

let to={'a':'av','b':'bv'}
let ta=['1','2','3']
console.log([...ta,'4']);//[ '1', '2', '3', '4' ]
console.log({...to,'c':'cv');//es2018 下{'a':'av','b':'bv','c':'cv'}

地图前端现状

Openlayers

Openlayer目前最新为5.2.0，地图操作有比较全面，目前openlayer整合三维前端框架ol-cesium。目前有适用于Vue的Vuelayers。

Leaflet

Leaflet目前最新为1.3.4，轻量级，适合用于移动端。

Vue

vue-router

静态路由若无redirect选项，刷新后，路由末尾后会自动加斜线，导致后退前进失败，例如

/resource/show会变为/resource/show/

通过addRoutes的动态路由无此问题

vue-x

state：保存数据
getters：进行类似map操作，store的computed属性。
mutations：commit，改变state数据，同步。
actions：dispatch，业务代码，调用多个mutations，异步。

axios

linqjs

font-awesome

echarts

rx

lodash

moment

IDEA 配置

语法高亮

支持Vue语法高亮：安装vuejs插件
HTML标签高亮与自动补全：File | Settings | Editor | FileTypes | HTML 添加 *.vue

添加模板

File | Settings | Editor | File and Code Templates 添加下面为Vue创建模板：

<template lang="html">
</template>

<script>
    export default {
        data() {
            return {}
        },
        methods: {},
        mounted() {

        },
        computed: {}
    }
</script>

<style lang="css">
</style>

SCSS语法提示错误

在IDEA中，style标签中添加 type="text/scss" 属性
在VS Code其他等，style标签中添加 rel="stylesheet/scss" 属性
为支持两者，标签如下：

1	<style rel="stylesheet/scss" lang="scss" type="text/scss">

Webpack alias支持

一般前端开发为适应多种场景，工程根目录不存在webpack.config.json，因此要在
File | Settings | Languages & Frameworks | JavaScript | Webpack
指定实际的webpack配置文件。

一般不设置webpack.dev.conf.js，设置webpack.base.conf.js，如果仍然显示Module is not installed，重启IDEA即可。

前端问题

空子div的高度完全填充父div剩余部分

html结构为

<div id="main">
    <div id="nav">nav</div>
    <div id="content">content</div>
</div>

css为：

/*方法1*/
html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#main {
    background-color: #999;
    height: 100%;
}
#nav {
    background-color: #85d989;
    width: 100%;
    height: 50px;
}
#content {
    background-color: #cc85d9;
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0px;
}
/*方法2（省略与上相同部分）*/
#content {
    background-color: #cc85d9;
    width: 100%;
    height: calc(100vh -   50px);/*该方法的减号前后必须要有空格*/
}
/*方法3（省略与上相同部分）*/
#nav {
    background-color: #85d989;
    width: 100%;
    height: 50px;
    float: left;
}
#content {
    background-color: #cc85d9;
    height:100%;
}

一本码簿

Frontend