如何看待前端框架选型 ?

防抖和节流

babel转码的原理

h5 css3的新特性

1.用于绘画的 canvas 元素 以及SVG
2.用于媒介回放的 video 和 audio 元素
3.拖拽(Drag 和 drop) 地理定位(Geolocation)
4.对本地离线存储的更好的支持
5.新的特殊内容元素,比如 article、footer、header、nav、section
6.新的表单控件,比如 calendar、date、time、email、url、search

动画优化
css3方面
动画中尽量少使用能触发layout和paint的CSS属性,使用更低耗的transform、opacity等属性
尽量减少或者固定层的数量,不要在动画过程中创建层,强迫浏览器创建图层,很多开发者使用translateZ(0)或者translate3d(0,0,0)去使浏览器创建图层。这种方式可以消除在动画开始之前的图层创建时间,使得动画尽快开始(创建图层和绘制图层还是比较慢的),而且不会随着抗锯齿而导出突变。不过这种方法需要节制,否则会因为创建过多的图层导致崩溃
尽量减少层的更新(paint)次数

js方面
至少要给用户一个选择可以禁用动画效果。
设置动画元素为absolute或fixed。
position: static或position: relative元素应用动画效果会造成频繁的reflow。
position: absolute或position: fixed的元素应用动画效果只需要repaint

css常见的模型,对盒子模型的理解

flex布局

对继承的理解,最喜欢哪种方式

  1. 原型链继承

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function Parent () {
    this.name = 'kevin';
    }

    Parent.prototype.getName = function () {
    console.log(this.name);
    }

    function Child () {

    }

    Child.prototype = new Parent();

    var child1 = new Child();

    console.log(child1.getName()) // kevin
  2. 借用构造函数(经典继承)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function Parent () {
    this.names = ['kevin', 'daisy'];
    }

    function Child () {
    Parent.call(this);
    }

    var child1 = new Child();

    child1.names.push('yayu');

    console.log(child1.names); // ["kevin", "daisy", "yayu"]

    var child2 = new Child();

    console.log(child2.names); // ["kevin", "daisy"]
  3. 组合继承

    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
    function Parent (name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
    }

    Parent.prototype.getName = function () {
    console.log(this.name)
    }

    function Child (name, age) {
    Parent.call(this, name);
    this.age = age;
    }

    Child.prototype = new Parent();
    Child.prototype.constructor = Child;

    var child1 = new Child('kevin', '18');

    child1.colors.push('black');

    console.log(child1.name); // kevin
    console.log(child1.age); // 18
    console.log(child1.colors); // ["red", "blue", "green", "black"]

    var child2 = new Child('daisy', '20');

    console.log(child2.name); // daisy
    console.log(child2.age); // 20
    console.log(child2.colors); // ["red", "blue", "green"]

css3效果

this

ajax

自己实现angular,vue的双向绑定

手写快速排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var quickSort=function(arr){
if(arr.length<=1){
return arr;
}
var pivotIndex=Math.floor(arr.length/2);
var pivot=arr.splice(pivotIndex,1)[0];
var left=[];
var right=[];
for (var i=0;i
if(arr[i]>pivot){
left.push(arr[i]);
}else{
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot],quickSort(right))
}
quickSort([2,1,3,4,7,6])

http vs https

网站的性能优化

javascript统计数组中重复最多的字符串

1
2


angularjs

angular的directive怎么写

1
2
3
4
5
6
7
8
myModule.directive('hello', function(){
return {
restrict: 'EACM',
templateUrl:'hello_Angular.html',
/*template : '

Hello Angular

',*/

replace: true
}
})

restrict:是指令的类型,有四种取值:

①   E:以元素的方式出现 (element)

②   A:以属性的方式出现 (attributes)

③   C:以类的方式出现(用的比较少) (class)

④   M:以注释的方式(用的少) (注释)

angular的脏检查(双向绑定)是如何实现的

依赖注入如何实现
scope如何实现
$parse模块如何实现(主要自己写了一个类似的库)
react
react在setState后发生了什么,请结合源码说说你的理解。
flux解释。
说说你对React框架的理解。
requirejs

amd和cmd区别,怎么了解到这些区别的,是否是去看了规范。

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
类似的还有 CommonJS Modules/2.0 规范,是 BravoJS 在推广过程中对模块定义的规范化产出。
还有不少⋯⋯
这些规范的目的都是为了 JavaScript 的模块化开发,特别是在浏览器端的。
目前这些规范的实现都能达成浏览器端模块化开发的目的。
requirejs那些经常用的方法,然后对其进行解释。
区别:

  1. 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible.
  2. CMD 推崇依赖就近,AMD 推崇依赖前置。看代码:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // CMD
    define(function(require, exports, module) {
    var a = require('./a')
    a.doSomething()
    // 此处略去 100 行
    var b = require('./b') // 依赖可以就近书写
    b.doSomething()
    // ...
    })
    // AMD 默认推荐的是
    define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
    a.doSomething()
    // 此处略去 100 行
    b.doSomething()
    ...
    })

虽然 AMD 也支持 CMD 的写法,同时还支持将 require 作为依赖项传递,但 RequireJS 的作者默认是最喜欢上面的写法,也是官方文档里默认的模块定义写法。

  1. AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,没有全局 require,而是根据模块系统的完备性,提供 seajs.use 来实现模块系统的加载启动。CMD 里,每个 API 都简单纯粹。

前端工程化方面做了哪些东西,怎么做。

前端异常监测如何实现。

节流

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function throttle(fn,gapTime){
let lastTime=null;
return function(){
let nowTime= new Date().getTime();
if(!lastTime||nowTime-lastTime>gapTime){
fn();
lastTime=nowTime;
}
}
}
let fn=()=>{
console.log("1")
}
setInterval(throttle(fn,2000),1)

纯CSS实现自适应浏览器宽度的正方形有以下三种方法

CSS3 vw 单位
CSS3 中新增了一组相对于可视区域百分比的长度单位vw、vh、vmin、vmax。其中vw是相对于视口宽度百分比的单位,1vw = 1% viewport width,vh是相对于视口高度百分比的单位,1vh = 1% viewport height;vmin是相对当前视口宽高中较小的一个的百分比单位,同理 vmax是相对当前视口宽高中较大的一个的百分比单位。

1
2
3
4
5
#square{
width:30%;
height:30vw;
background:red;
}

转载请保持原始链接

原始链接: https://ru23.com/note/fd1af4a9.html