2018年底ms

最新推荐文章于 2022-05-08 11:52:56 发布

July_ing

最新推荐文章于 2022-05-08 11:52:56 发布

阅读量310

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/July_ing/article/details/85614935

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.定宽+自适应

<div class="contain">
    <div class="left">
        dadssda
    </div>
    <div class="right">
        <p>哈哈哈</p>
        <p>哈哈哈</p>
        <p>哈哈哈</p>
    </div>
</div>

.left { float: left; width: 200px;} .right { width: 100%; }
.left { float: left; width: 200px;} .right { margin-left: 200px; }
.contain { display: flex; } .left { width: 200px; } .right { flex: 1; } // flex有3个值 : 扩张比被移除溢出量比弹性盒伸缩基准值
.left { width: 200px; float: left; } .right: { float: left; width: calc(100vw - 200px);} // 100vw屏幕宽，100vh屏幕高

2. == :当操作数有boolean类型时，先转换成1 0。

[] == flase ✅ if([]) 是true
{} == false / {} == true 直接打会报错(因为被当作空的代码块了，flase == {} 反过来或者加括号就不会报错)在if里写是都是false, if({})是true
[] == [] ❌
[1] == [1] ❌

3. js执行机制：

分为宏任务：I/O setTimeout setInterval setImmediate requestAnimationFrame 。微任务： promise.then process.nextTick catch finally。
基本原理就是顺序执行，同步直接执行（同步中包括方法的注册比如new Promise），然后执行nextTick，然后执行then, 然后执行setTimeout调用的函数。
通俗点：第一次运行先通通过一遍，不能执行的先在对应的队列里边存好，然后先执行微任务，nextTick先于promise，完了执行宏任务先执行setTimeout再执行其产生的微任务，完了再执行setImmediate再执行其产生的微任务，一次只执行一轮，比如setTimeout产生的setTimeout在下一轮回执行。

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

答案：1，7，6，8 / 2，4，3，5 / 9，11，10，12。执行了三轮。

4.简易双向绑定类似vue主要使用es5的defineproperty:

首先介绍defineProperty: 给对象添加属性的方法，有三个参数，都必须选：目标对象，属性名，该属性所拥有的特性。
其次介绍第三个属性descriptor:
- value: 属性的值
- writable：可写/只读，默认false
- configurable：控制开关，false时则该属性不能再设置，默认false
- enumerable：是否可枚举（for...in / Object.keys），默认false
- get ：取值function
- set：设值function
get(set)和writable以及value冲突，同时出现会报错。

极简双向绑定：

const obj = {};
Object.defineProperty(obj, 'text', {
    get: function() {
        console.log('这里用不到');
    }
    set: function(newValue) {
        document.getElementById('input').value = newValue;
        document.getElementById('show').innerHTML = newValue;
    }
});
const input = document.getElementById('input');
input.addEventListener('keyup', function(e){
    obj.text = e.target.value;
});

更复杂没看：https://www.jianshu.com/p/2df6dcddb0d7

用proxy:

const input = document.getElementById('input');
const p = document.getElementById('p');
const obj = {};

const newObj = new Proxy(obj, {
    get: function(target, key, receiver) {
        console.log(`getting ${key}`);
        return Reflect.get(target, key, receiver);
    },
    set: function(target, key, value, receiver) {
        console.log(target, key, value, receiver);    
        if(key === 'text') {
            input.value = value;
            p.innerHTML = value;
        }
        return Reflect.set(target, key, value, receiver);
    }
});

input.addEventListener('keyup', function(e) {
    newObj.text = e.target.value;
});

貌似对比起defineProperty是在新对象上改动？没有数组值的困扰？如果属性值也是对象不需要深度遍历，劫持了一个完整的对象？

5.截图工具：带可移动窗口带蒙版的样式

6.秒杀系统

7.react性能优化高阶函数

8.洗牌算法

9.css优化