DingMing

丁大铭的个人空间，用来分享一些前端小技巧，默默成长吧，哈哈

61
文章
27
分类
33
标签

electron基础

进程和线程

  • electron 和 chrome 是采用多进程的模式

好处是这样各个模块之间没有联系，一处崩溃不会影响其他地方

坏处就是会导致内存消耗比较大

主进程 - Main Process

  • 可以使用和系统对接的Electron API -创建菜单，上传文件 等等
  • 创建渲染进程 -Renderer Process
  • 全面支持 Node
  • 只有一个，作为整个程序的入口点

渲染进程 - Renderer Process

  • 可以有多个，每个对应一个窗口
  • 每个都是一个单独的进程
  • 全面支持 node 和 DOM API
  • 可以使用部分Electron提供的API

进程之间的通讯方式

  • Electron使用IPC在进程之间进行通讯
  • remote 渲染进程直接可以使用主进程API

JS与native交互方式

原生和H5 的交互方式

在 原生开发 Hybrid App 的时候，前端和原生通信，需要jsBridge进行交互，在此总结下和原生一些交互的方式

需要说明App内嵌的H5都是基于原生WebView来实现的，为h5展示提供了容器

JS && OC

ios的WebView有两种，分别 是UIWebView 、WKWebView

Read More

ios-input键盘弹起收回BUG解决方式

js

方案1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<input class="ipt" @focus="focus" @blur='done' type="text" placeholder="请输入名字" v-model="addressDetail.userName">

  methods: {
    focus() {
      document.body.scrollTop = 0;
      
    },
    done() {
      document.body.scrollTop = document.body.scrollHeight;
      
    },
}

// 获得焦点时让页面滚动0
// 失去焦点时让页面滚动当前页面高度

方案2

1
2
3
4
5
6
setInterval(() => {
       window.scrollTo(0, document.body.scrollTop + 1);
       document.body.scrollTop >= 1
        && window.scrollTo(0, document.body.scrollTop - 1);
}, 300);
// 效果很好，但不推荐使用

方案3

1
2
3
4
5
6
document.body.addEventListener('focusin', () => { // 软键盘弹起事件
  console.log('键盘弹起');
});
document.body.addEventListener('focusout', () => { // 软键盘关闭事件
  console.log('键盘收起');
});

html

<input type=”text” placeholder=”联系人的手机号/QQ/微信” v-model=”contact” class=”ipt” **@blur=’done’**/>

js

done() {
   document.body.scrollTop = document.body.scrollHeight;
}

*这样在 失去焦点 的时候触发 done方法 页面滚动下 就好了

ios-音乐自动播放问题

js

ios

方法一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//第一步：首先加载一个微信JS-SDK
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
//第2步：写一些配置
<script>
function autoPlayAudio() {
        wx.config({
            // 配置信息, 即使不正确也能使用 wx.ready
            debug: false,
            appId: '',
            timestamp: 1,
            nonceStr: '',
            signature: '',
            jsApiList: []
        });
        wx.ready(function() {
            var globalAudio=document.getElementById("audio标签id");
            globalAudio.play();
        });
};
// 解决ios音乐不自动播放的问题
autoPlayAudio();
</script>

Read More

event-loop

js 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

new Promise((resolve) => {
    console.log('Promise')
    resolve()
}).then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');
// script start => Promise => script end => promise1 => promise2 => setTimeout

  • 以上代码虽然 setTimeout 写在 Promise 之前，但是因为 Promise 属于微任务而 setTimeout属于宏任务，所以会有以上的打印。
  • 微任务包括 process.nextTick ，promise ，Object.observe，MutationObserver
  • 宏任务包括 script ， setTimeout ，setInterval，setImmediate ，I/O ，UI renderin

很多人有个误区，认为微任务快于宏任务，其实是错误的。因为宏任务中包括了 script ，浏览器会先执行一个宏任务，接下来有异步代码的话就先执行微任务

所以正确的一次 Event loop 顺序是这样的

  • 执行同步代码，这属于宏任务
  • 执行栈为空，查询是否有微任务需要执行
  • 执行所有微任务
  • 必要的话渲染 UI
  • 然后开始下一轮 Event loop，执行宏任务中的异步代码

通过上述的 Event loop 顺序可知，如果宏任务中的异步代码有大量的计算并且需要操作 DOM 的话，为了更快的 界面响应，我们可以把操作 DOM 放入微任务中

文本框根据输入内容自适应高度

js 
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
<!DOCTYPE html>
<html>
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>文本框根据输入内容自适应高度</title>
    <style type="text/css">
        h2 {
            text-align: center;
            margin: 50px auto;
        }

        #textarea {
            display: block;
            margin: 0 auto;
            overflow: hidden;
            width: 60%;
            font-size: 14px;
            height: 18px;
            line-height: 24px;
            padding: 2px;
        }

        textarea {
            outline: 0 none;
            border-color: rgba(82, 168, 236, 0.8);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
        }
    </style>


</head>

<body>
<h2>文本框根据输入内容多少自适应高度</h2>
<textarea id="textarea" placeholder="回复内容"></textarea>
<script>
    /**
     * 文本框根据输入内容自适应高度
     * @param                {HTMLElement}        输入框元素
     * @param                {Number}                设置光标与输入框保持的距离(默认0)
     * @param                {Number}                设置最大高度(可选)
     */
    var autoTextarea = function(elem, extra, maxHeight) {
        extra = extra || 0;
        var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
                isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
                addEvent = function(type, callback) {
                    elem.addEventListener ?
                            elem.addEventListener(type, callback, false) :
                            elem.attachEvent('on' + type, callback);
                },
                getStyle = elem.currentStyle ? function(name) {
                    var val = elem.currentStyle[name];
                    if (name === 'height' && val.search(/px/i) !== 1) {
                        var rect = elem.getBoundingClientRect();
                        return rect.bottom - rect.top -
                                parseFloat(getStyle('paddingTop')) -
                                parseFloat(getStyle('paddingBottom')) + 'px';
                    };
                    return val;
                } : function(name) {
                    return getComputedStyle(elem, null)[name];
                },
                minHeight = parseFloat(getStyle('height'));
        elem.style.resize = 'none';
        var change = function() {
            var scrollTop, height,
                    padding = 0,
                    style = elem.style;
            if (elem._length === elem.value.length) return;
            elem._length = elem.value.length;
            if (!isFirefox && !isOpera) {
                padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
            };
            scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            elem.style.height = minHeight + 'px';
            if (elem.scrollHeight > minHeight) {
                if (maxHeight && elem.scrollHeight > maxHeight) {
                    height = maxHeight - padding;
                    style.overflowY = 'auto';
                } else {
                    height = elem.scrollHeight - padding;
                    style.overflowY = 'hidden';
                };
                style.height = height + extra + 'px';
                scrollTop += parseInt(style.height) - elem.currHeight;
                document.body.scrollTop = scrollTop;
                document.documentElement.scrollTop = scrollTop;
                elem.currHeight = parseInt(style.height);
            };
        };
        addEvent('propertychange', change);
        addEvent('input', change);
        addEvent('focus', change);
        change();
    };

    var text = document.getElementById("textarea");
    autoTextarea(text); // 调用
</script>
</body>

</html>

AntV-F2-折线图研究

js 
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="chart-name" content="雷达面积图">
    <title>F2 图表组件库 - AntV</title>
    <link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/YmDAMEQVbLJpVbKiRQVX.css" />
    <style>
        .mountNode {
            width: 400px;
            height: 300px;
        }

        .aws-tooltip {
            position: absolute;
            background: #ccc;
            font-size: 28px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-radius: 50%;
        }

        .aws-tooltip::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            background: #000;
        }
    </style>
    <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>

    <script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.0/f2.min.js"></script>
    
    <script src="https://gw.alipayobjects.com/os/antv/assets/lib/lodash-4.17.4.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
    <!-- 在 PC 上模拟 touch 事件 -->
    <script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>
</head>

<body>


    <div class="content">
        <canvas id="mountNode" class="mountNode"></canvas>
        <div class="aws-tooltip">
            <span></span>
        </div>
    </div>
    <script>
        var canvasOffsetTop = $('#mountNode').position().top;
        var canvasOffsetLeft = $('#mountNode').position().left;
        console.log(canvasOffsetTop, canvasOffsetLeft);
        const _this = this;
        let list = [{
            text: '拔尖',
            num: 0,
        }, {
            text: '优秀',
            num: 22,
        }, {
            text: '高潜力',
            num: 16,
        }, {
            text: '中等',
            num: 26,
        }, {
            text: '不足',
            num: 12,
        }, {
            text: '待提高',
            num: 26,
        }]
        var chart = new F2.Chart({
            id: 'mountNode',
            pixelRatio: window.devicePixelRatio,
        });
        chart.source(list, { // 数据传出入
            num: {
                // ticks: [],
                tickCount: 5,
                min: 0,
            },
            text: {
                tickCount: 7,
                range: [0, 1],
            },

        });

        chart.axis('text', { // 底部样式
            line: // null,
            {
                strokeStyle: {
                    color: '#000'
                },
                lineWidth: '3',
                strokeOpacity: '0.8',
                shadowColor: '#04ca73',
                shadowBlur: '3',
            },
            tickLine: {
                lineWidth: 1,
                stroke: '#ccc',
                length: 5, // 刻度线长度
            },
            label: function label(text, index, total) {
                var cfg = {
                    textAlign: 'center',
                    fill: '#04ca73',
                    fontSize: 12,
                    fontWeight: 700,
                };
                return cfg;
            },
        });

        chart.axis('num', {
            label: {
                fill: '#000',
            },
            line: {
                stroke: '#9ec3b8',
            },
            // grid: {
            //   lineDash: null,
            //   stroke: '#54b858',
            // },
        });
        chart.tooltip({ // 提示消息
            showCrosshairs: false,
            custom: true, // 是否自定义 tooltip 提示框
            showTooltipMarker: true, // 是否显示 tooltipMarker
            tooltipMarkerStyle: { // 点的样式
                fill: {
                    color: '#000'
                }, // 设置 tooltipMarker 的样式
                stroke: '#1890ff',
                fillOpacity: 0.8,
                lineWidth: '3',
                shadowColor: '#04ca73',
                shadowBlur: '10',
            },
            onHide(obj) { // tooltip 隐藏时的回调函数
                // console.log('onHide', obj);
                // obj: { x, y, title, items }
            },
            onChange(obj) { // tooltip 内容发生改变时的回调函数
                // console.log('onChange', obj);
                // obj: { x, y, title, items }
                const tooltipEl = $('.aws-tooltip');
                const currentData = obj.items[0];
                const text = currentData.value;
                // console.log('onChange', currentData, text);
                tooltipEl.html([`<span>${text}</span>`].join(''));
                tooltipEl.css({
                    opacity: 1,
                    left: `${canvasOffsetLeft + currentData.x - parseInt(tooltipEl.css('width').replace('px', ''), 0) / 2.0}px`,
                    top: `${canvasOffsetTop + currentData.y - tooltipEl.height() - 15}px`,
                });
            },
        });

        // 线条的样式
        chart.line().position('text*num').color('l(0) 0:#1890FF 1:#f7f7f7').shape('smooth')
            .size(5)
            .style({
                shadowColor: '#04ca73',
                shadowBlur: '100',
            });
        // 下方渐变的样式
        chart.area().position('text*num').color('l(90) 0:#000 1:#f7f7f7').shape('smooth');
        // 点的样式
        // chart.point().position('text*num').color('#EED5FF').size(5);
        chart.render();
    </script>


</body>

</html>

在vs-code中开启本地服务器

方案1

1、vs code 有一个Go Live插件，可以直接起服务，比较推荐这个

方案2

1、点击“终端”，在里面直接输入

1
npm install -g live-server

2、在终端输入：live-server会出现下面的信息

直接就可以调试了

==-和-===的区别

js

常人理解是：

1
2
3
4
5
6
7
8
 == 是相等 值相等，返回true
=== 是全等 值相等 ， 类型也相等，返回就是 true
这个理解是错的  []== false   => true
[1]===[1] => false   推翻上面的理念
初级解释
真确的理解  
  == 是 相等 先转换再比较， 返回true
   ===  是 全等  不转化就比较 ， 返回true

初级进阶

1
2
3
4
5
6
7
1.如果有一个操作数是布尔值，则在比较前先将其转换为数值，true转换为1，false转换为0，例如false == 0，true == 1
2.如果一个操作数是字符串，另一个操作数是数值，先将字符串转换成数值，例如"1"==1,'' ==0
3.如果一个操作数是对象，另一个操作数不是，则调用对象的valueOf()方法，用得到的基本类型按照前面的规则进行比较。(解释不清楚)
4.null和undefined是相等的。
5.如果有一个数是NaN，则相等操作符返回false，而不想等操作符返回true。NaN == NaN返回为false，因为规则如此。
6.如果两个操作数是对象，则比较它们是不是同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回true，否则返回false。
例如：var obj = {a:1};foo = obj;bar = obj;foo==bar;foo==bar返回为true，因为他们指向同一个对象，obj

高级解释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[] == fasle => true
    == 有 强制转换的 作用
1. [] ==false => [] == 0
经过ToNumber(false)，false会被转换为0.
2. [] == 0 => ''==0
[].valueOf().toString() =>  []=> ''
3. '' == 0 => 0 == 0


[1] === [1]  =>false
再来看下===操作符，其中有句话可以完美解释[1]===[1]返回false，但是var obj = {a:1};foo = obj;bar = obj;foo===bar中foo===bar返回为true的原因。

由于[1]===[1]三等号左右的[1]，不是same Object，因此返回为false.

而foo===bar，三等号左右其实本质上都是指向obj这个对象，值相等更是必然，所以返回为true。我们由此可以举一反三，[1]==true返回true，而[1,2,3]==true返回false的原因也不足为奇了。

面试总结2017

前端模块化开发的理解 RequireJS CommonJS AMD CMD

CommonJS，因为在网页端没有模块化编程只是页面JavaScript逻辑复杂，但也可以工作下去，在服务器端却一定要有模块，所以虽然JavaScript在web端发展这么多年，第一个流行的模块化规范却由服务器端的JavaScript应用带来，CommonJS规范是由NodeJS发扬光大，这标志着JavaScript模块化编程正式登上舞台。

定义模块
    根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性
模块输出：
    模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象
加载模块：
    加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象

AMD即Asynchronous Module Definition，中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范
    由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，也就是大名鼎鼎RequireJS，实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出

requireJS主要解决两个问题
    多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
    js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长

页面优化

设计思路 观察者模式的理解

ajax的问题归总

status状态码的种类和http状态码相同 
url  是否能随便引用
    不能接口必须是相同端口

ajax请求 有几种callback 
Ajax请求总共有八种Callback
  • 　　onSuccess
  • 　　onFailure
  • 　　onUninitialized
  • 　　onLoading
  • 　　onLoaded
  • 　　onInteractive
  • 　　onComplete
  • 　　onException 跨端口导致跨域问题
      跨域不只是说跨不同的域，而是包括协议、主机ip、端口三个。 
  tomcat服务器不存在此类问题，tomcat服务器的cors设置了同ip不同port可以访问。 
  而我使用的django自带的开发服务器，没有设置cors。
    true代表异步false代表同步

TCP协议和UDP协议的区别是什么

TCP是美国国防部设计的两种传输协议之一，另一种是UDP。UDP是一种不可靠的网络服务，负载比较小，而TCP则是一种可靠的通信服务，负载相对而言比较大

JSONP原理与实现

通过 script的src引用
而且是动态产生script，请求回来的内容通过callback处理

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求（因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供 Web 页面的域上加载的），然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

通过动态添加script标签，然后指定callback函数，可以获取到传过来的json数据，这时候要自己写一个callback函数来处理数据；

es5 数组的新方法

forEach  循环遍历
map 映射 [].map();
filter 过滤，筛选
some 某些，指的是某些项合乎条件。于every算是好基友，every表示是否‘每一项’都要靠谱

回调是什么

react中的 props 和 state 的一些细节

state的作用
    state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致.
    React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化.

==setstate改变，不影响其他的state setState异步更新==

props的作用
    组件中的props是一种父级向子级传递数据的方式

props是不可变的；而state可以根据与用户交互来改变

React基于状态实现对DOM控制和渲染；组件状态分为两种；
    1：组件间的状态传递；（props） props从父组件到子组建的数据传递
    2:组件的内部状态； (state) state只能定义在组件内部；定义组件的自己的状态

React中的数据流是单向的；只会从父组件传递到子组件；属于props;
    属性props是父子组件间进行状态传递的接口；React会向下遍历整个组件树；并从新渲染使用这个属性的组件；

props传值是怎么来的，通过父级，父子的值是怎么来的，是通过页面设置传进来的

this的指向

es6的箭头函数this的作用域指向自己本身

es6 let const的好处说明

DOCTYPE的作用，写出几个文档类型

前端的一些算法

回文  冒泡排序/快排  二叉树的理解  数组去重  选出出现最多的字符  在不创建变量的情况下A B 变量互换

ev.stopPropagation()

阻止冒泡

一个页面从URL到加载显示完成，都发生了什么？

  • ①通过DNS将该地址解析成IP地址；
  • ②发起网络连接，进行http协议会话：客户端发送报头（请求报头），服务端回馈报头（响应报头）
  • ③返回一个页面（根据页面上的外链的URL重新发送请求获取）
  • ④接收文件完毕，对加载到的资源进行语法解析，以及相应的内部数据结构（网页渲染）

  • 前端安全方面有没有了解？XSS和CSRF如何攻防？

CSRF（Cross-site request forgery）是跨站请求伪造。XSS利用站点内的信任用户，而CSRF则通过伪装来自受信任用户的请求来利用受信任的网站。其实就是攻击者盗用了你的身份，以你的名义发送恶意请求。

XSS(Cross Site Scripting)是跨站脚本攻击，为了区分CSS，所以缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。

CSRF的防御
1.在表单里增加Hash值，以认证这确实是用户发送的请求，然后在服务器端进行Hash值验证。

2.验证码：每次的用户提交都需要用户在表单中填写一个图片上的随机字符串。

XSS漏洞修复
1.将重要的cookies标记为HTTP ONLY。

2.只允许用户输入我们期望的数据。如年龄框只能输入数字。

3.对数据进行HTTP Encode处理。

4.过滤或者移除特殊的HTML标签。

5.过滤JS事件的标签。

es6的箭头函数

webpack是什么

简单的说就是 web 打包工具；也是前端模块化的工具
有以下四个特点

  • 代码拆分 按需加载相应的静态资源，实现单页应用
  • Loader 对一些文件进行进一步的解释和翻译，如 对css的lass
  • 智能解析 会自动的形成依赖树
  • 插件系统 自身有丰富的插件系统

webpack的核心概念

入口起点（entry points）
输出（output）
加载器（loaders）
插件（plugins）

react+webpack+express

是干啥的 为啥这么用

react路由的实现

静态还是动态的

前端缓存

页面怎么渲染的

dom树
css树
合成render树
再加载js
js会阻塞加载

引用数据类型

隐式原型__proto__
显示原型 prototype 只有fn有

href src的区别

做过兼容性

微信公众号开发

熟练掌握Web以及Mobile Web开发相关技术

引用数据类型

性能优化

减少CPU计算，减少网络请求
多实用内存，缓存

加载页面和静态页面

静态资源的合并和压缩
静态资源缓存
使用CDN让资源加载更快
使用SSR后端渲染

css放前面，js放后面
懒加载
减少dom查询
减少dom操作
事件节流
DOMContentLoaded

post是如何传职的

异步是什么

哪几个标签可以进行异步

前端的存储方式

页面是如何渲染的 细节

前端express的用处

为什么使用node，哪些场景使用

前后端分离是什么，有什么好处

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
webpack 优化 
git 命令
vue 原理
promise 原理

守护进程
ts
map 和 set 
bff
Csrf安全
上线流程
性能问题
中台
Cors  请求头
New 的过程
页面调试
png jpg
节流
Call  优先级
forEach  不能打断  可使用 every和some
行内元素    Padding有效  margin 上下无效左右有效
计算属性参数
Map和  forEach区别
Chunk 代码块
路由 leave的下个页面的data
热更新 原理
Prostion. 属性 状态值4种：pending fulfilled rejected  settled
promise.then 问题  状态
观察者模式

Egreet  cocos2d引擎

// 节流
const throttle = (func, wait = 50) => {
  let lastTime = 0
  return function(...args) {
    let now = +new Date()
    if (now - lastTime > wait) {
      lastTime = now
      func.apply(this, args)
    }
  }
}
setInterval(
  throttle(() => {
    console.log(1)
  }, 500),
  1
)

防抖
// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
  // 缓存一个定时器id
  let timer = 0
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}

 // 柯里化
    function add(){
        let _arg = [...arguments]

        let _adder = function(){
            _arg.push(...arguments)
            return _adder
        }
        _adder.toString = function(){
            return _arg.reduce(function(a,b){
                return a+b
            })
        }
        return _adder
    }

v // 深拷贝
    var deepCopy = function(obj){
        if(Array.isArray(obj)){
            let n = []
            obj.forEach((v,index)=>{
                n[index] = deepCopy(v)
            })
            return n 
        }else if(obj instanceof Object){
            let n = {}
            for(item in obj){
                n[item] = deepCopy(obj[item])
            }
            return n
        }else{
            return obj
        }
    }

 // 快排
    var quickSort=function(arr){
        if(!Array.isArray(arr)){
            return arr
        }
        let left = []
        let right = []
        let one = arr.splice(0,1)

        for(let i=0;i<arr;i++){
            if(arr[i]<one){
                left.push(arr[i])
            }else{
                right.push(arr[i])
            }
        }
        return quickSort(left).concat(one,quickSort(right))
    }

  //call实现原理
    Function.prototype.call2= function(fn){
        fn.fn = this || window
        let result = fn.fn()
        delete fn.fn
        return result
    }


/*
        新生成了一个对象
        链接到原型
        绑定 this
        返回新对象
    */ 
    function create() {
        // 创建一个空的对象
        let obj = new Object()
        // 获得构造函数
        let Con = [].shift.call(arguments)
        // 链接到原型
        obj.__proto__ = Con.prototype
        // 绑定 this，执行构造函数
        let result = Con.apply(obj, arguments)
        // 确保 new 出来的是个对象
        return typeof result === 'object' ? result : obj
    }


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
面试记录
计算机底层 
知识内容 
webpack
html
• 预 加 载 
• 懒 加 载 
• dns预解析
CSS
• css模块化处理
• position
•垂直居中
• bfc
•双飞翼圣杯区别和共同点
• flex
vue
• vue双向绑定原理（watcher是在什么时候执行的)
• Vue中是如何检测数组变化
• nextTick实现原理 
•虚拟dom
• vue render
• vue-router原理（不用hash模式服务端如何配置)
• vue3做了哪些优化
• vue-key
•父子组件生命周期的关系
• data为什么用return
• vuex核心概念
• vue动态组件 
•服务端渲染
JS
•函数柯理化
• promise的实现原理，如何实现的异步，promise.all和.race 
的实现
•微任务/宏任务 
•实现一个LazyMan
• Cordova与h5交互原理
• Async里面有多个await请求，可以怎么优化
• promise、generator、async/await 有什么区另IJ 
•异步有哪些场景，怎么解决异步
• eventLoop 原理 
•防抖截流
•实现bind，call, apply
• forEach和for的区别
• script标签的defer和async属性
• require 和 import 问题 
•日期的api
• jsonp原理
浏览器
•强缓存和协商缓存
•输入url到展示dom
•内容安全策略cps
•两个不同域的页面如何进行信息传递
•如何判断webp可用
• cookie有哪些属性，分别表示什么
webpack
• webpack如何优化
• webpack配置项都有哪些 
•其中loader和plugin有什么区别 
•有没有看过或者写过webpack的插件
http
• https加密流程
• 301和302区别
• httpl, 1.0, 2.0
•同时发起
• spdy协议
• dns缓存，查找顺序
websoket
• websoket稳定性如何提升
算法
•生成随机数组，洗牌算法 
•切割千分位
•找出非降序数列的个数输入：["cba"，"daf"，"ghi"]输出：1 
•找出绝对值最小的数字 
•一个正整数的所有质因数 
• js实现链表 
• 洗 牌 算 法
计算机基础

线程和进程的区别
观察者模式与发布订阅者模式区别
七层网络，https运行在哪一层
本站总访问量次 |