Fork me on GitHub

发表于

12月06日更新版本

父级元素内内容：

父级元素内内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<template>
    <div class="page2-wrap">
      <h2>vue使用iframe</h2>
       <iframe width="600" height="600" ref="iframe" src="../../../static/child.html" @load="loaded">            </iframe>
    </div>
</template>
<script type="text/javascript">
  export default {
    name: 'page2',
    data() {
      return {
        dialogVisible: false,
        word: [
                        {
                            name: "板栗",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#229aff'
                                }
                            }
                        },
                        {
                            name: "枣",
                            value: 20,
                            itemStyle: {
                               normal: {
                                    color: '#3daf1f'
                                }
                            }
                        },
                        {
                            name: "葡萄",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#3daf1f'
                                }
                            }
                        },
                        {
                            name: "山楂",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#229aff'
                                }
                            }
                        },
                        {
                            name: "香菇",
                          
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#3daf1f'
                                      
                                }
                            }
                        },
                        {
                            name: "苹果",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#229aff'
                                }
                            }
                        },
                        {
                            name: "核桃",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#3daf1f'
                                }
                            }
                        },
                        {
                            name: "马铃薯",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#229aff'
                                }
                            }
                        },
                        {
                            name: "南瓜",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#3daf1f'
                                }
                            }
                        },
                        {
                            name: "葫芦",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#3daf1f'
                                }
                            }
                        },
                        {
                            name: "西红柿",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#229aff'
                                }
                            }
                        },
                        {
                            name: "萝卜",
                            value: 20,
                            itemStyle: {
                                normal: {
                                    color: '#229aff'
                                }
                            }
                        }
                    ]
      };
    },
    mounted(){
     
    },
    methods: {
        loaded(){
          //console.log(this.$refs.iframe.contentWindow.keyWords)
  //父元素调用子元素的方法
          var sss = this.$refs.iframe.contentWindow.keyWords;
           sss(this.word)
           console.log(this.word)
        }
    }
  }
</script>
<style lang="scss" scoped>
  @import "~assets/css/variable";
  @import "~assets/css/mixin";
  #app{
    width: 100%;
    height: 100%;
  }
  .page2-wrap{
    width: 100%;
    height: 100%;
  }
</style>

子级元素内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键词云</title>
    <style>
        #myChart{width:540px;height:310px;}
    </style>
    <script src="echarts-all-2.js"></script>
</head>
<body>
<div id="myChart"></div>
<script type="text/javascript" src="./vue.min.js"></script>
<script>
window.vm = new Vue({
    name:'child',
    
});
    function keyWords(datas){
        console.log(datas)
        var arr = [];
        datas.forEach(function(v,i){
            arr.push({
                itemStyle:v.itemStyle,
                name: v.name,
                value:v.value
            });
        });
        var myChart = echarts.init(document.getElementById('myChart'));
            myChart.setOption({
                        tooltip: {
                            show: true
                        },
                        series: [{
                            name: 'Google Trends',
                            type: 'wordCloud',
                            size: ['100%', '100%'],
                            textRotation : [0, 0, 0, 0],
                            textPadding:15,
                            autoSize:{
                                "enable": true,
                                "minSize": 14
                            },
                            data: arr
                        }] 
            });
    }
</script>
</body>
</html>

主要参考点：

1
<iframe width="600" height="600" ref="iframe" src="../../../static/child.html" @load="loaded">

1、父级使用iframe，需要使用@load绑定加载完毕要执行的函数

2、父元素获取iframe的内容

iframe.contentWindow//获取iframe的window对象
iframe.contentWindow.document//获取iframe的document
iframe.contentWindow.documentElement//获取iframe的html
iframe.contentWindow.head//获取head
iframe.contentWindow.body//获取body
iframe.contentWindow.方法名//获取iframe子页面定义的全局方法

如上述例子所示

方法一（子元素不用vue）

父元素获取子元素方法

1
2
var sss = this.$refs.iframe.contentWindow.keyWords;
       sss(this.word)

子元素声明一个函数

function keyWords（datas）{}

方法二

父元素获取子元素方法

var sss = this.$refs.iframe.contentWindow.vm.keyWords;
sss(this.word)

子元素声明一个函数(子元素用vue)

window.vm = new Vue({
name:’child’,
methods:{
keyWords(){
}
}

});

发表于

12月16日更新版本

最近遇到很多项目要求兼容在ie，很多伙伴们喜欢的一些css3的动画效果不能实现（话说ie9不支持transition真是一个让人烦心的事）,抽个空闲时间，分装了一个原生的动画效果和大家分享一下。

这是在vue中的使用实例，如果不是用vue，你可以把代码抠出来~~~我直接上代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<template>
    <div class="ContactUs-wrap">
        <div class="content">
            <div class="content-item">
                <div class="item">
                    <div class="img">
                        <img src="../../assets/img/biaozhun.jpg" alt="">
                        <div class="text-mask">
                            <span class="text">标准信用等级</span>
                        </div>
                    </div>
                    <div class="mask" id="mask1" @mouseenter="showMask" @mouseleave="hideMask">
                        <span class="words">对行为主体的信用状况及逆行充分展示，并按照严格的赋分标准出具相应的信用等级。</span>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>
<script>
    export default {
        name: 'ContactUs',
        methods: {
            //mask透明度改变
            showMask(e){
                var event = e || window.event;
                console.log(event.srcElement.id)
                this.tomove(document.getElementById(event.srcElement.id),100,"opacity")
            },
            hideMask(e){
                var event = e || window.event;
                console.log(event.srcElement.classList[0])
                this.tomove(document.getElementById(event.srcElement.id),1,"opacity")
            },
            tomove(obj,target,style,callback){
                var that = this;
                clearInterval(obj.times)
                obj.times=setInterval(function(){
                    var eleStyle;
                    if(style=="opacity"){
                        eleStyle=parseFloat(that.getStyle(obj,style))*100;
                    }else{
                        eleStyle=parseInt(that.getStyle(obj,style));
                    }
                    var speed;
                    if(eleStyle<target){
                       speed=Math.ceil((target-eleStyle)/10);
                    }else{
                       speed=Math.floor((target-eleStyle)/10);
                    }
                    if(eleStyle==target){
                        clearInterval(obj.times)
                        if(callback){callback();}  
                    }else{
                        if(style=="opacity"){
                            obj.style.opacity=(eleStyle+speed)/100;
                        }else{
                            obj.style[style]=eleStyle+speed+"px";
                        }
                    }
                },30)
            },
            getStyle(obj,style){
                if(obj.currentStyle){
                   return obj.currentStyle[style];
                }else{
                   return getComputedStyle(obj,null)[style]
                }
            }
        }
    }
</script>

具体使用说明：

1、这是一个模仿淡入淡出的效果，我们在遮罩层mask上面添加 @mouseenter=”showMask” @mouseleave=”hideMask” 这两个方法

2、我们在showMask方法里面要获取道当前元素：var event = e || window.event;主要是兼容ie和谷歌火狐等浏览器；这块不理解的可以找度娘，不做详细介绍;

3、然后就是showMask方法调用我们分装好的tomove方法，可以看到要传四个参数，然后效果就出来了。参数参数说明如下：

obj：当前对象（滑进去的元素）

target：当前对象要达到的效果最终样式（比如透明度为1等等）

style：当前对象要改变的属性（比如宽、高、margin、left）

callback：当达到的效果要执行的回调函数

4、再来说一下getStyle，getStyle是用于获取元素属性值的一种兼容ie、谷歌等浏览器的方法，了解详细可以问度娘。

getStyle(obj,style){
                if(obj.currentStyle){
                   return obj.currentStyle[style];
                }else{
                   return getComputedStyle(obj,null)[style]
                }
            }

5、这个函数能实行的一些动画：淡入淡出（fade）、放大缩小(scale)、slideUp等等效果

6、可能功能还不完善，如果有不对的地方还请提上宝贵一间。

发表于

12月18日更新版本

使用vue已经一年多了,做了几个项目，总结点实战经验，巩固一下记忆。

1、插件在打包的时候，由于样式写在组件里面，导致打包后样式，被插件原来样式覆盖，因此必须提取出来，放在公共样式里面，或者新建一个专属的css文件。

2

问题：之前这样import echarts from ‘echarts’引用，版本升级后会报错

解决办法：import echarts from ‘echarts/dist/echarts’

3、组件中标签名不要用语义化标签，如header footer等 容易报错。

4、template中 只能有一个根div，否则也会报错如下：

1
2
3
4
5
6
7
8
9
ERROR in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-14b150ee","hasScoped":false,"transformToRequire":{"video":"src","source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0&bustCache!./src/App.vue
(Emitted value instead of an instance of Error) 
  Error compiling template:
  
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
  <div></div>

5、style 里引用mixin时 一定要声明

1
<style lang="scss" scoped>。

6、

问题：想在渲染出来的HTML元素上监听click事件怎么办？

方法：

1
<router-link v-on:click.native="doSomethingCool"to="/">Home</router-link>

7、:class=”变量？class名1:class名2”，处理页面tap切换等改变背景问题

8、v-if 和 v-show的区别

简单来说，v-if 的初始化较快，但切换代价高；v-show 初始化慢，但切换成本低

1.共同点：都是动态显示DOM元素

2.区别

手段：
v-if是动态的向DOM树内添加或者删除DOM元素，相当于jquery的append和remove方法；
v-show是通过设置DOM元素的display样式属性控制显隐,相当于display:none和display:block；
编译过程：
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的基于css切换；
编译条件：
v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
性能消耗：
v-if有更高的切换消耗；
v-show有更高的初始渲染消耗；
使用场景：
v-if适合运营条件不大可能改变；
v-show适合频繁切换。

9、加载闪动问题

使用v-cloak

1
2
3
4
<style type="text/css">
      [v-cloak] { display: none }
</style>
<div v-cloak>{{message}}</div>

10、axios的get,post方法

GET方法

1
2
3
4
5
6
7
axios.get(url, {
　　params: { 'key': 'value' }
}).then(function (response) {
　　alert(''.concat(response.data, '\r\n', response.status, '\r\n', response.statusText, '\r\n', response.headers, '\r\n', response.config));
}).catch(function (error) {
　　alert(error);
});

对应服务端获取数据

1
2
3
const urlModule = require('url');
let params = urlModule.parse(request.url, true).query;//解析数据 获得Json对象
let value = params.key;//通过参数名称获得参数值

POST方法

1
2
3
4
5
6
7
var params = new URLSearchParams();
params.append('key', 'value');
axios.post(url, params).then(function (response) {
　　alert(''.concat(response.data, '\r\n', response.status, '\r\n', response.statusText, '\r\n', response.headers, '\r\n', response.config));
}).catch(function (error) {
　　alert(error);
});

对应服务端获取数据

1
2
3
4
5
6
7
const queryStringModule = require('querystring');
let postData = '';
request.on('data', function (chunk) {
　　postData += chunk;//接收数据
});
let params = queryStringModule.parse(postData);//解析数据 获得Json对象
let value = params.key;//通过参数名称获得参数值

11、axios的get,post方法

GET方法

1
2
3
4
5
6
7
axios.get(url, {
　　params: { 'key': 'value' }
}).then(function (response) {
　　alert(''.concat(response.data, '\r\n', response.status, '\r\n', response.statusText, '\r\n', response.headers, '\r\n', response.config));
}).catch(function (error) {
　　alert(error);
});

对应服务端获取数据

1
2
3
const urlModule = require('url');
let params = urlModule.parse(request.url, true).query;//解析数据 获得Json对象
let value = params.key;//通过参数名称获得参数值

POST方法

1
2
3
4
5
6
7
var params = new URLSearchParams();
params.append('key', 'value');
axios.post(url, params).then(function (response) {
　　alert(''.concat(response.data, '\r\n', response.status, '\r\n', response.statusText, '\r\n', response.headers, '\r\n', response.config));
}).catch(function (error) {
　　alert(error);
});

对应服务端获取数据

1
2
3
4
5
6
7
const queryStringModule = require('querystring');
let postData = '';
request.on('data', function (chunk) {
　　postData += chunk;//接收数据
});
let params = queryStringModule.parse(postData);//解析数据 获得Json对象
let value = params.key;//通过参数名称获得参数值

发表于

方法一：返回url所有参数

1
2
3
4
5
6
7
8
9
10
var queryUrlPar = function (url) { 
        url = url || window.location.href; 
        var reg = /([^?=&]+)=([^?=&]+)/g; 
        var obj = {}; 
        url.replace(reg, function () { 
            obj[arguments[1]] = arguments[2]; 
        }); 
        return obj; 
    } 
```

方法二：指定需要的参数名和url

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var href= location.href="file:///C:/Users/Administrator/Desktop/demo.html?channel=12";
    console.log(getQuery('channel',href));
function getQuery(key, url) {
        url = url || window.location.href + '';
        if (url.indexOf('#') !== -1) {
            url = url.substring(0, url.indexOf('#'));
        }
        var rts = [], rt;
        var queryReg = new RegExp('(^|\\?|&)' + key + '=([^&]*)(?=&|#|$)', 'g');
        while ((rt = queryReg.exec(url)) != null) {
            rts.push(decodeURIComponent(rt[2]));
        }
        if (rts.length == 0) return null;
        if (rts.length == 1) return rts[0];
        return rts;
    }

发表于

目前两大主流移动平台为 iOS 和 Android，有不少带 -webkit- 前辍的 CSS 私有属性以及一些 iOS only 属性，当中好些属性在日常需求中经常应用到。

WebKit CSS 属性中的一部分已经被包含在 CSS 规范草案中，并且可能成为最后的推荐标准，但目前仍然是试验性的属性，还有一些属性是不规范的属性，它们没有出现在跟踪规范中。

1
2
3
4
5
6
7
8
9
-webkit-scrollbar
-webkit-scrollbar 是-webkit-私有的伪元素，用于对拥有overflow属性的区域 自定义滚动条的样式。
譬如，为了隐藏滚动条，你可以这么做：
.scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

除了对整个滚动条的控制外，Webkit还提供了控制对滚动条各组成部分的表现渲染的伪元素，甚至具体到滚动条的各种状态行为的伪类。

滚动条各块组成表现渲染的伪元素

一般而言，滚动条的主要组成部分包括：

滚动按钮 — 滚动按钮的夹角则被称为滚动角(corner)。

轨道 — 轨道(track)可以进一步分为轨枕(track pieces) 和滑块(thumb)。

Webkit则根据滚动条各组成部分，提供了不同的伪元素来自定义样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer   
             { /* 7 */ }
下图则是各伪元素对应的滚动条各部分：
scrollbarparts.png
::-webkit-scrollbar：滚动条整体部分。可设置width、height、background、border等。
::-webkit-scrollbar-button：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track：轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track-piece：轨枕，也就是除去滚动滑块的部分。
::-webkit-scrollbar-thumb：滚动滑块，也就是滚动条里面可以拖动的那部分。
::-webkit-scrollbar-corner：滚动按钮的夹角则被称为滚动角。
::-webkit-resizer：用于定义右下角拖动块的样式。

需要注意的是：若是水平滚动条，则width属性不起作用，height属性用来控制滚动条相应部分竖直方向高度；若是竖直滚动条，则height属性不起作用，width属性用来控制相应部分的宽度。

滚动条各块组成的伪元素

下面的伪类可以应用到上面的伪元素中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
:horizontal：选择水平方向的滚动条。
:vertical：选择垂直方向的滚动条。
:decrement：适用于滚动按钮和轨枕。选择能够使得视窗位置递减状态(例如，垂直滚动条向上滚动，水平滚动条向左滚动。)的滚动按钮或轨枕。
:increment：适用于滚动按钮和轨枕。选择能够使得视窗位置递增状态(例如，垂直滚动条向下滚动，水平滚动条向右滚动。)的滚动按钮或轨枕。
:start：适用于滚动按钮和轨枕。选择位于滚动滑块前边的滚动按钮和轨枕。
:end：适用于滚动按钮和轨枕。选择位于滚动滑块后边的滚动按钮和轨枕。
:double-button：适用于滚动按钮和轨枕。选中紧挨着一对按钮的轨枕以及位于滚动条某一端的一对按钮中的其中一个滚动按钮。
:single-button：适用于滚动按钮和轨枕。选中紧挨着仅一个按钮的轨枕以及位于滚动条某一端的仅它本身一个的滚动按钮。
:no-button：适用于轨枕。选中轨道结束位置没有按钮的轨枕。
:corner-present：适用于选中滚动角不存在的滚动条。
:window-inactive：适用于所有滚动条，选中焦点不在该视窗的滚动区域。
另外，:enabled、:disabled、:hover、和:active等伪类同样在滚动条中适用。
为了更好地理解，以下是几个伪元素组合伪类的应用例子：
::-webkit-scrollbar-track-piece:start {
 /\*滚动条上半边或左半边\*/
}
::-webkit-scrollbar-thumb:window-inactive {
 /\*当焦点不在当前区域滑块的状态\*/
::-webkit-scrollbar-button:horizontal:decrement:hover {
 /\*当鼠标在水平滚动条下面的按钮上的状态\*/
或者，读者可以去阅读官方例子
参考资料：
Webkit-Styling Scrollbars
自定义浏览器滚动条的样式，打造属于你的滚动条风格
-webkit-touch-callout
-webkit-touch-callout 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单，这个属性可以让你禁用系统默认菜单。

属性值

1
2
3
4
5
6
7
none：系统默认菜单被禁用
inherit：系统默认菜单不被禁用
兼容性
iOS 2.0及更高版本的 Safari 浏览器可用
Android 尚不明确
-webkit-tap-highlight-color
-webkit-tap-highlight-color 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

在 iOS Safari 上，当用户点击链接或具有 JavaScript 可点击脚本的元素，系统会为这些被点击元素加上一个默认的透明色值，该属性可以覆盖该透明值。

属性值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<color>：颜色值
兼容性
iOS 1.1.1及更高版本的Safari浏览器可用
大部分安卓手机
-webkit-overflow-scrolling
定义在具 overflow:scroll 属性的元素内是否采用原生样式滚动行为
属性值
auto：默认值，单手滚动，滚动没有惯性效果
touch：原生样式滚动，应用此属性值会产生层叠上下文（会影响定位参照物的属性，类似 opacity、masks、transforms属性，影响到 position 的效果，甚至影响到 position:fixed 的定位参照物，）
兼容性
iOS 5.0 及更高版本
大部分安卓机
-webkit-line-clamp
-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。 ## 为了实现该效果，它需要组合其他外来的WebKit属性。

常见结合属性：

1
2
3
4
5
6
7
8
9
10
11
display: -webkit-box：必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient：必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow：可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。
属性值
<number>：块元素显示的文本的行数
兼容性
iOS
Andriod
-webkit-appearance
-webkit-appearance 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

改变按钮和其他控件的外观，使其类似于原生控件。

属性值

1
2
3
4
5
none：去除系统默认 appearance 的样式，常用于 iOS 下移除原生样式
button：渲染成 button 的风格
checkbox：渲染成 input checkbox 样式的复选框按钮
radio：渲染成 radio 的风格
…

更多属性值参考 mozilla：-webkit-appearance 属性

兼容性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
iOS 2.0及更高版本的Safari浏览器可用
Android 尚不明确
-webkit-font-smoothing
字体平滑，该属性定义文本的平滑属性，但要注意以下说明：
非标准属性，不建议用于网页上，这个属性不能保证所有用户都能看到相同效果，这会使网站的字体渲染造成不一致，而此属性的渲染行为日后也有可能会改变
属性值
none：去掉字体平滑效果，使字体带锯齿
antialiased：使字体在像素级别更平滑更轻细
subpixel-antialiased：在多数非 Retina 显示设备中字体将会更锐利。
注意：以上属性在 Retina 设备上会有明显的效果，在非 Retina 设备上看不出差异
兼容性
部分高清设备，如 Retina Mac
-webkit-backface-visibility
backface-visibility 在 W3文档 有定义描述
定义转换元素的背面是否显示
属性值
visible：显示（默认值）
hidden：隐藏
兼容性
iOS 2.0 及更高版本的 Safari 浏览器可用
大部分 Android
-webkit-mask
定义多样的蒙板效果属性（缩写属性，类似 margin）
使用语法
<mask-image> [<mask-repeat> || <mask-attachment> || <mask-position> || <mask-origin> || <mask-clip> || <mask-composite>]*
where
<mask-position> = [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top  | center | bottom ]?
默认值：
-webkit-mask: none repeat scroll 0% 0% padding border add;
属性值
<mask-image>：为元素设置蒙板图片，蒙板图片会根据图片的透明区域对元素可视部分进行裁剪
<uri>：图片链接作为蒙板图片
<gradient>：渐变函数 -webkit-gradient 作为蒙板图片
none：去掉蒙板图片
<mask-repeat>：定义蒙板图片是否平铺或平铺的方式
repeat：默认值，水平和垂直方向平铺
repeat-x：水平方向平铺
repeat-y：垂直方向平铺
no-repeat：不平铺
<mask-attachment>：如果 -webkit-mask-image 属性有设置，attachment 决定该图片是否相对视窗固定或随着其容器滚动
scroll：默认值，随容器滚动
fixed：相地视窗固定
<mask-position>：定义蒙板图片的初始位置，书写格式类似 background-position—-<mask-position>[， <mask-position>]*
<percentage>
<length>
left
right
center
<mask-origin>：定义蒙板图片定位相对起点，与 webkit-mask-position 属性相关。当 -webkit-mask-attachment:fixed 的时候，该属性不生效。
padding：默认值，蒙板定位相对边距
border：蒙板定位相对边框
content：蒙板定位相对元素盒子内容
<mask-clip>：如果 -webkit-mask-image 属性有设置，-webkit-mask-clip 将定义蒙板图片的裁剪区域
border：默认值，蒙板图片延伸到容器的边框
padding：蒙板图片延伸到容器的边距
content：蒙板图片裁剪到元素盒子内容范围
text：蒙板图片裁剪到元素文本范围
<mask-composite>：定义蒙板图片重合的裁剪显示方式
add：默认值，图片重合不裁剪
subtract：去掉层级低的图形以及图片重合部分图形，只留层级高非重合部分图形
intersect：只留重合部分图形
exclude：只去掉重合部分图形
有关属性更详细描述请参考：
w3 - css-masking
MDN - -webkit-mask
携程 UED - -webkit-mask
兼容性
Safari 4.0 及更高版本
iOS 4.0 及更高版本
Android 2.1 及更高版本
-webkit-user-select
定义用户是否能选中元素内容
属性值
auto：可选中元素内容
none：不能选中任何内容
text：可选中元素内的文本
兼容性
iOS 3.0 及更高版本的 Safari
大部分安卓手机
-webkit-user-modify
定义用户是否可编辑元素内容
属性值
read-only：只读
read-write：可读可写，粘贴内容会保留富文本格式（ Android 机不保留富文本格式 ）
read-write-plaintext-only：可读可写，粘贴内容所有富文本格式都会丢失
注意：使用这个属性的时候，请不要出现 -webkit-user-select: none，文本无法选中的情况下，在 Safari 该属性不生效，不过在 Chrome 依然生效
兼容性
iOS 5.0 及更高版本
Safari 3.0 及更高版本
大部分安卓手机
-webkit-text-stroke
定义文本描边，可以设计描边的宽和颜色，一般与文本填充属性 -webkit-text-fill-color 共用。
属性值
<length>：长度单位
<color>：颜色值
兼容性
iOS 2.0 及更高版本
Safari 3.0 及更高版本
安卓尚不明确
-webkit-text-fill-color
定义文本填充，一般与文本描边属性 -webkit-text-stroke 共用。
属性值
<color>：颜色值
currentcolor：元素 color 属性值
-webkit-activelink：链接被点击时系统的默认颜色
更多属性值参考：Safari CSS Reference -webkit-text-fill-color
兼容性
iOS 2.0 及更高版本
Safari 3.0 及更高版本
安卓尚不明确
-webkit-text-size-adjust
定义 iOS Safari 网页文本大小调整属性
属性值
<percentage>：百分比值，字体显示调整值
auto：字体自动调整
none：字体不能自动调整
兼容性
iOS 1.0 及更高版本
Safari on iOS only
安卓尚不明确
-webkit-marquee
定义滚动文本内容属性（缩写属性，类似margin）。
使用语法
-webkit-marquee: direction increment repetition style speed
属性值
<direction>：滚动方向
ahead：从下到上滚动
auto：默认滚动方向
backwards：从右到左滚动
down：从上到下滚动
forwards：从左到右滚动
left：从右到左滚动
reverse：从上到下滚动
right：从左到右滚动
up：从下到上滚动
<increment>：每次移动的距离
[<percentage> | <length>]
large：距离常量
medium：距离常量
small：距离常量
<repetition>：文字滚动的重复次数
非负整数
infinite：无限次
<style>：文字滚动的方式
alternate：重复滚动
none：停止滚动
scroll：在定义方向上滚动
slide：定义方向上滚动，内容显示完毕或者内容滚动到滚动区域另一端边框时候都会停止下来
<speed>：滚动或滑动的速度
非负整数（毫秒单位）或带时间单位的非负整数
fast
normal
slow
兼容性
iOS 1.0 及更高版本
Safari 3.0 及更高版本
大部分安卓手机
-webkit-filter
滤镜属性可以让元素本身内容（文本、背景等）及其子元素加上滤镜效果
属性值
blur(<length>)：模糊，原始效果值为 0px，不接受负值
brightness([ <number> | <percentage> ])：亮度，原始效果值为 1 或 100%，不接受负值
contrast([ <number> | <percentage> ])：对比度，原始效果值为 1 或 100%，不接受负值
drop-shadow( <length>{2，4} <color>?)：投影，原始效果值为所有长度值为 0，长度值至少2个，最多4个，
grayscale([ <number> | <percentage> ] )：灰度，原始效果值为 0，最大值为 1 或 100%，不接受负值
hue-rotate( <angle>)：相位，原始效果值为 0deg
invert( [ <number> | <percentage> ])：反相，原始效果值为 0，最大值为 1 或 100%，不接受负值
opacity([ <number> | <percentage> ] )：透明度，原始效果值为 1，最大值为 1 或 100%，不接受负值
saturate([ <number> | <percentage> ])：饱和度，原始效果值为 1，不接受负值
sepia([ <number> | <percentage> ])：乌贼墨，原始效果值为 0，最大值为 1 或 100%，不接受负值
关于 -webkit-filter 与 -webkit-backdrop-filter 的属性对比可以参考：
What’s New in Safari 9.0 - backdrop-filter
兼容性
iOS 8.0 及更高版本
Safari 8.0 及更高版本
Android 4.4 及更高版本
-webkit-backdrop-filter
背景滤镜属性可以让元素的背景或元素层级以下的元素加上滤镜效果
属性值
blur(<length>)：模糊，原始效果值为 0px，不接受负值
brightness([ <number> | <percentage> ])：亮度，原始效果值为 1 或 100%，不接受负值
contrast([ <number> | <percentage> ])：对比度，原始效果值为 1 或 100%，不接受负值
drop-shadow( <length>{2，3} <color>?)：投影，原始效果值为所有长度值为 0，长度值至少2个，最多3个，注意：不支持投影扩展值和混合投影
grayscale([ <number> | <percentage> ] )：灰度，原始效果值为 0，最大值为 1 或 100%，不接受负值
hue-rotate( <angle>)：相位，原始效果值为 0deg
invert( [ <number> | <percentage> ])：反相，原始效果值为 0，最大值为 1 或 100%，不接受负值
opacity([ <number> | <percentage> ] )：透明度，原始效果值为 1，最大值为 1 或 100%，不接受负值
saturate([ <number> | <percentage> ])：饱和度，原始效果值为 1，不接受负值
sepia([ <number> | <percentage> ])：乌贼墨，原始效果值为 0，最大值为 1 或 100%，不接受负值
关于 -webkit-filter 与 -webkit-backdrop-filter 的属性对比可以参考：
What’s New in Safari 9.0
兼容性
iOS 9.0 及更高版本
Safari 9.0 及更高版本
安卓尚未明确
position:-webkit-sticky
可以使得元素在页面没有滚动的情况下表现得像relative，在滚动条滚到该元素区域的时候根据top值的设置使元素固定离顶部的距离，表现像 position:fixed，也就是常见的吸顶需求效果。
特性
依赖父级元素滚动区域
定位参考物始终是 viewport，transform 等可以改变 position:fixed 定位参考物的属性也没办法改变 position:-webkit-sticky 的定位参考物
position:-webkit-sticky 属性的元素固定区域只依赖其父元素的可滚动高度，如果其父元素高度小于元素本身的高度，fixed效果失效。
兼容性
iOS 6.1 及更高版本
iOS only
-apple-system
苹果操作系统会从两种不同外观和大小的字体进行自动转换去调节系统新字体 “San Francisco”，可以通过 CSS 规则
font-family: -apple-system , sans-serif;
让系统智能选择适配操作系统的字体，添加 -apple-system 可以使字体变得更圆润锐利。
关于 -apple-system 更详细的介绍可以参考：
What’s New in Safari 9.0
兼容性
iOS 9.0 及更高版本
Safari 9.0 及更高版本
iOS / OS X only
更多 WebKit CSS 属性
更多 -webkit- CSS 属性介绍请参考：
MDN文档 - Webkit Extensions
携程 UED - webkitcss

发表于

去除数组中重复对象 思路 ：给一个空对象，遍历数组，给空对象赋值，对象的键是数组每项的对象，然后值随便，这样重复的键，赋值同样的值，只会显示一个，达到排重的作用，最后使用Object.keys（）方法提取对象的键反到一个数组中

1
2
3
4
5
6
7
8
9
10
11
12
function newArr(arr){
    console.log(arr)
    var unique = {};
    arr.forEach(function(a){ 
        console.log(JSON.stringify(a))
        unique[ JSON.stringify(a) ] = 1 
    });
    console.log( unique )
    console.log(Object.keys(unique))
    arr= Object.keys(unique).map(function(u){return JSON.parse(u) });
    return arr;
}

去除空对象

1
2
3
4
5
6
7
8
let newArr=[];
for(let j in arr){
  for(let prop in arr[j]){
      if(prop!=''||arr[j][prop]!=''){
          newArr.push(arr[j]);
      }
  }
};

数组排序

1
2
3
4
5
6
7
8
9
10
var arr = [{name: "zlw", age: 24}, {name: "wlz", age: 25},{name: "alz", age: 20}];
function compare(property){
    return function(a,b){
        console.log(a,b)
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
    }
  }            
console.log(arr.sort(compare("age")));

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

● 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。

● 若 a 等于 b，则返回 0。

● 若 a 大于 b，则返回一个大于 0 的值。

发表于

一、相关背景介绍

我们现在大多数人用的语法javascript 其实版本是ecmscript5,也是就es5。这个版本己经很多年了，且完美被各大浏览器所支持。所以很多学js的朋友可以一直分不清楚es5和javscript的关系。javascript是一门编程语言，那么它就会有版本，es5还是es6 就就是它的版本号。最新版es7己经在紧锣密布的进行中，它最新的语法会让我们写代码更新的行云流水。

二、babel 一个es6的解析器

在我们正式讲解ES6语法之前，我们得先了解下Babel。

Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。大家可以选择自己习惯的工具来使用使用Babel,我最喜欢的构建工具就是webpack。具体过程可直接在Babel官网查看：

三、语法

最常用的ES6特性

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
这些是ES6最常用的几个语法，基本上学会它们，我们就可以走遍天下都不怕啦！我会用最通俗易懂的语言和例子来讲解它们，保证一看就懂，一学就会。

1. let, const

这两个的用途与var类似，都是用来声明变量的，但在实际运用中他俩都有各自的特殊用途。
首先来看下面这个例子：

1
2
3
4
5
6
7
8
9
var name = 'zach'
while (true) {
    var name = 'obama'
    console.log(name)  //obama
    break
}
console.log(name)  //obama

使用var 两次输出都是obama，这是因为ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。第一种场景就是你现在看到的内层变量覆盖外层变量。而let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。

另外一个var带来的不合理场景就是用来计数的循环变量泄露为全局变量，看下面的例子：

1
2
3
4
5
6
7
var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面代码中，变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值。而使用let则不会出现这个问题。

var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a6; // 6

再来看一个更常见的例子，了解下如果不用ES6，而用闭包如何解决这个问题。

var clickBoxs = document.querySelectorAll(‘.clickBox’)
for (var i = 0; i < clickBoxs.length; i++){
clickBoxs[i].onclick = function(){
console.log(i)
}
}

我们本来希望的是点击不同的clickBox，显示不同的i，但事实是无论我们点击哪个clickBox，输出的都是5。下面我们来看下，如何用闭包搞定它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function iteratorFactory(i){
    var onclick = function(e){
        console.log(i)
    }
    return onclick;
}
var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
    clickBoxs[i].onclick = iteratorFactory(i)
}
const也用来声明变量，但是声明的是常量。一旦声明，常量的值就不能改变。
const PI = Math.PI
PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

当我们尝试去改变用const声明的常量时，浏览器就会报错。
const有一个很好的应用场景，就是当我们引用第三方库的时声明的变量，用const来声明可以避免未来不小心重命名而导致出现bug：

const monent = require(‘moment’)

2. class, extends, super

这三个特性涉及了ES5中最令人头疼的的几个部分：原型、构造函数，继承…你还在为它们复杂难懂的语法而烦恼吗？你还在为指针到底指向哪里而纠结万分吗？

有了ES6我们不再烦恼！

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        console.log(this.type + ' says ' + say)
    }
}
let animal = new Animal()
animal.says('hello') //animal says hello
class Cat extends Animal {
    constructor(){
        super()
        this.type = 'cat'
    }
}
let cat = new Cat()
cat.says('hello') //cat says hello

上面代码首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的。

Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。

super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。

P.S 如果你写react的话，就会发现以上三个东西在最新版React中出现得很多。创建的每个component都是一个继承React.Component的类。详见react文档

3. arrow function

这个恐怕是ES6最最常用的一个新特性了，用它来写function比原来的写法要简洁清晰很多:

function(i){ return i + 1; } //ES5
(i) => i + 1 //ES6
简直是简单的不像话对吧…
如果方程比较复杂，则需要用{}把代码包起来：

1
2
3
4
5
6
function(x, y) {
    x++;
    y--;
    return x + y;
}
(x, y) => {x++; y--; return x+y}

除了看上去更简洁以外，arrow function还有一项超级无敌的功能！
长期以来，JavaScript语言的this对象一直是一个令人头痛的问题，在对象方法中使用this，必须非常小心。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout(function(){
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
 var animal = new Animal()
 animal.says('hi')  //undefined says hi

运行上面的代码会报错，这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行，传统的解决方法有两种：

第一种是将this传给self,再用self来指代this

1
2
3
4
5
says(say){
      var self = this;
      setTimeout(function(){
          console.log(self.type + ' says ' + say)
      }, 1000)

第二种方法是用bind(this),即

1
2
3
4
says(say){
    setTimeout(function(){
        console.log(this.type + ' says ' + say)
    }.bind(this), 1000)

但现在我们有了箭头函数，就不需要这么麻烦了：

1
2
3
4
5
6
7
8
9
10
11
12
class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
 var animal = new Animal()
 animal.says('hi')  //animal says hi

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

4. template string

这个东西也是非常有用，当我们要插入大段的html内容到文档中时，传统的写法非常麻烦，所以之前我们通常会引用一些模板工具库，比如mustache等等。

大家可以先看下面一段代码：

1
2
3
4
5
6
$("#result").append(
  "There are <b>" + basket.count + "</b> " +
  "items in your basket, " +
  "<em>" + basket.onSale +
  "</em> are on sale!"
);

我们要用一堆的’+’号来连接文本与变量，而使用ES6的新特性模板字符串``后，我们可以直接这么来写：

$(“#result”).append(`
There are ${basket.count} items
in your basket, ${basket.onSale}
are on sale!
);

React Router从第1.0.3版开始也使用ES6语法了，比如这个例子：

{taco.name}

5. destructuring

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

看下面的例子：

1
2
3
4
let cat = 'ken'
let dog = 'lili'
let zoo = {cat: cat, dog: dog}
console.log(zoo)  //Object {cat: "ken", dog: "lili"}

用ES6完全可以像下面这么写：

let cat = ‘ken’
let dog = ‘lili’
let zoo = {cat, dog}
console.log(zoo) //Object {cat: “ken”, dog: “lili”}

反过来可以这么写：

let dog = {type: ‘animal’, many: 2}
let { type, many} = dog
console.log(type, many) //animal 2

6. default, rest

default很简单，意思就是默认值。大家可以看下面的例子，调用animal()方法时忘了传参数，传统的做法就是加上这一句type = type || ‘cat’ 来指定默认值。

1
2
3
4
5
function animal(type){
    type = type || 'cat'
    console.log(type)
}
animal()

如果用ES6我们而已直接这么写：

1
2
3
4
function animal(type = 'cat'){
    console.log(type)
}
animal()

最后一个rest语法也很简单，直接看例子：

1
2
3
4
function animals(...types){
    console.log(types)
}
animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

而如果不用ES6的话，我们则得使用ES5的arguments。

7. import export

这两个家伙对应的就是es6自己的module功能。

我们之前写的Javascript一直都没有模块化的体系，无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程，再用一种简单的方法把这些小工程连接在一起。

这有可能导致两个问题：

一方面js代码变得很臃肿，难以维护;
另一方面我们常常得很注意每个script标签在html中的位置，因为它们通常有依赖关系，顺序错了可能就会出bug;
在es6之前为解决上面提到的问题，我们得利用第三方提供的一些方案，主要有两种CommonJS(服务器端)和AMD（浏览器端，如require.js）。
如果想了解更多AMD，尤其是require.js，可以参看这个教程
why modules on the web are useful and the mechanisms that can be used on the web today to enable them

而现在我们有了es6的module功能，它实现非常简单，可以成为服务器和浏览器通用的模块解决方案。

ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。
上面的设计思想看不懂也没关系，咱先学会怎么用，等以后用多了、熟练了再去研究它背后的设计思想也不迟！好，那我们就上代码…

传统的写法
首先我们回顾下require.js的写法。假设我们有两个js文件: index.js和content.js,现在我们想要在index.js中使用content.js返回的结果，我们要怎么做呢？

首先定义:

//content.js
define(‘content.js’, function(){
return ‘A cat’;
})
然后require:

//index.js
require([‘./content.js’], function(animal){
console.log(animal); //A cat
})
那CommonJS是怎么写的呢？

//index.js
var animal = require(‘./content.js’)

//content.js
module.exports = ‘A cat’
ES6的写法

//index.js
import animal from ‘./content’

//content.js
export default ‘A cat’
以上我把三者都列出来了，妈妈再也不用担心我写混淆了…

8. ES6 module的其他高级用法

//content.js

export default ‘A cat’
export function say(){
return ‘Hello!’
}
export const type = ‘dog’
上面可以看出，export命令除了输出变量，还可以输出函数，甚至是类（react的模块基本都是输出类）

//index.js

import { say, type } from ‘./content’
let says = say()
console.log(The ${type} says ${says}) //The dog says Hello
这里输入的时候要注意：大括号里面的变量名，必须与被导入模块（content.js）对外接口的名称相同。

如果还希望输入content.js中输出的默认值(default), 可以写在大括号外面。

1
2
3
4
5
6
//index.js
import animal, { say, type } from './content'
let says = say()
console.log(`The ${type} says ${says} to ${animal}`)
//The dog says Hello to A cat

9. 修改变量名

此时我们不喜欢type这个变量名，因为它有可能重名，所以我们需要修改一下它的变量名。在es6中可以用as实现一键换名。

//index.js

import animal, { say, type as animalType } from ‘./content’
let says = say()
console.log(The ${animalType} says ${says} to ${animal})
//The dog says Hello to A cat

10. 模块的整体加载

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

//index.js

import animal, as content from ‘./content’
let says = content.say()
console.log(The ${content.type} says ${says} to ${animal})
//The dog says Hello to A cat
通常星号结合as一起使用比较合适。

终极秘籍
考虑下面的场景：
上面的content.js一共输出了三个变量（default, say, type）,假如我们的实际项目当中只需要用到type这一个变量，其余两个我们暂时不需要。我们可以只输入一个变量：

import { type } from ‘./content’

由于其他两个变量没有被使用，我们希望代码打包的时候也忽略它们，抛弃它们，这样在大项目中可以显著减少文件的体积。

ES6帮我们实现了！

不过，目前无论是webpack还是browserify都还不支持这一功能…

如果你现在就想实现这一功能的话，可以尝试使用rollup.js

他们把这个功能叫做Tree-shaking，哈哈哈，意思就是打包前让整个文档树抖一抖，把那些并未被依赖或使用的东西统统抖落下去。。。

发表于

针对中文,演示Markdown的各种语法

大标题

大标题一般显示工程名,类似html的\

你只要在标题下面跟上=====即可

中标题

中标题一般显示重点项,类似html的\

你只要在标题下面输入——即可

小标题

小标题类似html的\

小标题的格式如下 ### 小标题

注意#和标题字符中间要有空格

注意!!!下面所有语法的提示我都先用小标题提醒了!!!

单行文本框

这是一个单行的文本框,只要两个Tab再输入文字即可

多行文本框

这是一个有多行的文本框
你可以写入代码等,每行文字只要输入两个Tab再输入文字即可
这里你可以输入一段代码

比如我们可以在多行文本框里输入一段代码,来一个Java版本的HelloWorld吧

public class HelloWorld {

  /**
  * @param args
    */
    public static void main(String[] args) {
        System.out.println("HelloWorld!");

    }

}

链接

1.点击这里你可以链接到www.google.com

2.点击这里我你可以链接到我的博客

###只是显示图片
github

###想点击某个图片进入一个网页,比如我想点击github的icorn然后再进入www.github.com
image

文字被些字符包围

文字被些字符包围

只要再文字前面加上>空格即可

如果你要换行的话,新起一行,输入>空格即可,后面不接文字
但> 只能放在行首才有效

文字被些字符包围,多重包围

文字被些字符包围开始

只要再文字前面加上>空格即可

如果你要换行的话,新起一行,输入>空格即可,后面不接文字

但> 只能放在行首才有效

特殊字符处理

有一些特殊字符如<,#等,只要在特殊字符前面加上转义字符\即可

你想换行的话其实可以直接用html标签\