ES6

ES6模块化如何使用，开发环境如何打包

  1. 基本语法
1
2
3
4
5
6
7
export default {
	a: 100
}

export function fn1(){
	return 1;
}
  1. 开发环境配置(babel转换)

npm install –save-dev babel-core babel-prest-es2015 babel-preset-latest 创建.babelrc文件

1
2
3
4
5
6
7
8
{
  "presets": [
    "es2015"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

打包 webpack

npm install webpack babel-loder

vdom

snabbdom

vdom为什么使用diff算法

  • dom操作是“昂贵”的，尽量减少dom操作
  • 找出dom必须跟新的节点来跟新，其他不跟新
  • 这个“找出”的过程，需要diff

vdom是什么？为什么使用vdom

  • virtual dom,虚拟DOM
  • 用JS模拟DOM结构
  • 讲Dom对比操作放在js层，提高效率

vdom如何应用核心api是什么

  • vdom中应用diff算法为了找出需要跟新的节点

  • snabbdom

  • 核心API： h函数、patch函数

介绍下diff算法

linux diff差异化

组件化的理解

  • 组件的封装：封装视图、数据、变化逻辑
  • 组件的复用：props传递、复用

判断是否手机端

1
2
3
4
5
6
7
8
9
10
11
12
13
if ((navigator.userAgent.match(/(iPhone|iPad|Android|Windows Phone|baidu Transcoder|BlackBerry)/i))) {
    var sToMatch = String(window.document.location.href);
    var reEs = /http(.*?):\/\/(.*?).xxxxxx\/(.*)/;

    var wapDomain;
    if (reEs.test(sToMatch)) {
        wapDomain = sToMatch.match(reEs)[3];
        if (wapDomain == "")
            wapDomain = sToMatch.match(reEs)[1];
    }
    if (wapDomain != "")
        location.replace("//xxxxxxxxxx/" + wapDomain);
}

pc浏览器判断

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
(function($, window, document,undefined){
  if(!window.browser){
      
    var userAgent = navigator.userAgent.toLowerCase(),uaMatch;
    window.browser = {}
      
    /**
     * 判断是否为ie
     */
    function isIE(){
      return ("ActiveXObject" in window);
    }
    /**
     * 判断是否为谷歌浏览器
     */
    if(!uaMatch){
      uaMatch = userAgent.match(/chrome\/([\d.]+)/);
      if(uaMatch!=null){
        window.browser['name'] = 'chrome';
        window.browser['version'] = uaMatch[1];
      }
    }
    /**
     * 判断是否为火狐浏览器
     */
    if(!uaMatch){
      uaMatch = userAgent.match(/firefox\/([\d.]+)/);
      if(uaMatch!=null){
        window.browser['name'] = 'firefox';
        window.browser['version'] = uaMatch[1];
      }
    }
    /**
     * 判断是否为opera浏览器
     */
    if(!uaMatch){
      uaMatch = userAgent.match(/opera.([\d.]+)/);
      if(uaMatch!=null){
        window.browser['name'] = 'opera';
        window.browser['version'] = uaMatch[1];
      }
    }
    /**
     * 判断是否为Safari浏览器
     */
    if(!uaMatch){
      uaMatch = userAgent.match(/safari\/([\d.]+)/);
      if(uaMatch!=null){
        window.browser['name'] = 'safari';
        window.browser['version'] = uaMatch[1];
      }
    }
    /**
     * 最后判断是否为IE
     */
    if(!uaMatch){
      if(userAgent.match(/msie ([\d.]+)/)!=null){
        uaMatch = userAgent.match(/msie ([\d.]+)/);
        window.browser['name'] = 'ie';
        window.browser['version'] = uaMatch[1];
      }else{
        /**
         * IE10
         */
        if(isIE() && !!document.attachEvent && (function(){"use strict";return !this;}())){
          window.browser['name'] = 'ie';
          window.browser['version'] = '10';
        }
        /**
         * IE11
         */
        if(isIE() && !document.attachEvent){
          window.browser['name'] = 'ie';
          window.browser['version'] = '11';
        }
      }
    }
  
    /**
     * 注册判断方法
     */
    if(!$.isIE){
      $.extend({
        isIE:function(){
          return (window.browser.name == 'ie');
        }
      });
    }
    if(!$.isChrome){
      $.extend({
        isChrome:function(){
          return (window.browser.name == 'chrome');
        }
      });
    }
    if(!$.isFirefox){
      $.extend({
        isFirefox:function(){
          return (window.browser.name == 'firefox');
        }
      });
    }
    if(!$.isOpera){
      $.extend({
        isOpera:function(){
          return (window.browser.name == 'opera');
        }
      });
    }
    if(!$.isSafari){
      $.extend({
        isSafari:function(){
          return (window.browser.name == 'safari');
        }
      });
    }
  }
})(jQuery, window, document);

算法

  • 快速排序
  • 选择排序
  • 希尔排序
  • 堆栈
  • 队列
  • 链表
  • 递归