- 博客(16)
- 收藏
- 关注
原创 compose组合函数实现
在函数式编程当中有一个很重要的概念就是函数组合,实际上就是把处理数据的函数像管道一样连接起来,然后让数据穿过管道得到最终的结果。 例如:const add1 = (x) => x + 1;const mul3 = (x) => x * 3;const div2 = (x) => x / 2;div2(mul3(add1(add1(0)))); //=>3 把上一个函数执行的结果,作为下一个函数执行的实参值,以此实现多函数共同处理需求!而这样的写法可读性明显太
2022-04-14 10:35:25
240
原创 手写promise 方法
Promise.resolvePromise.resolve用来生成一个直接处于FULFILLED状态的Promise。Promise.resolve = function(value) { return new MyPromise((resolve, reject) => { resolve(value); });};Promise.rejectPromise.reject用来生成一个直接处于REJECTED状态的Promise。Promise.reject
2022-04-13 15:46:44
135
原创 手写js内置 new 方法
<script> function myNew(func,...args) { // 1.创建一个空对象 // 2.使空对象的__proto__ 指向func的prototype,这两个可以合成一步 let obj = Object.create(func) // 3. 让普通函数执行 let res = func.apply(obj,args) // 4. 判断返回的类型,如果是引用类型就.
2022-01-19 18:38:11
535
原创 从零开始手写promise
// 原生的es6 是自己实现了promise 不需要考虑兼容// 1.promise是一个类 在使用的时候 需要new这个类 √// 2,在newPromise的时候 需要传入一个executor执行器 默认会立即被调用,而且参数有两个 resolve,reject √// 3.promise有三个状态 分别是 pendding 默认等待态 onfulfilled 成功态 onrejected 失败态// 我们的promise默认就是pendding 当用户调用resolve时会变成成.
2021-11-19 17:43:15
455
原创 移动端响应式适配
目前主流的适配方案有三种(1.媒体查询,2,通过js脚本,3,通过vw,vh)1.媒体查询通过媒体查询设定根元素的font-size,进入全局使用rem,达到移动端自适应设计稿是750px*1334px,我们设置的font-size是100px,则对应1rem。很好换算,除以100就可以了@media screen and (max-width:319px){ html{font-size:42.67px;}}@media screen and (min-width:320px) .
2021-11-11 22:57:54
1189
原创 手写promise race 方法
race方法:顾名思义,Promse.race就是赛跑的意思,意思就是说,Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。Promise.race = function (values) { return new Promise((resolve, reject) => { for (let i = 0; i < values.length; i++) { let p = values[i
2021-11-11 18:16:59
950
原创 generator生成器函数
什么是生成器函数:在函数后面添加*号,这个函数就变成了生成器函数,例如<script> function* gen() { let a = yield 10; let b = yield 20; let c = yield 30; } console.log(gen());</script>打印的结果:generator函数的执行顺序<script> function* gen() { l...
2021-11-11 14:06:52
754
1
原创 柯里化函数的应用场景
什么是柯里化函数:是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术方法一// 柯里化函数 每次的入参都是一个参数// 例子,计算求和function sum(a, b, c, d, e) { return a + b + c + d + e}function curring(fn, arr = []) { console.log(fn); let len = fn.length;
2021-11-09 16:26:58
858
原创 圣杯布局和双飞翼布局
作用:圣杯布局和双飞翼布局解决的问题是相同的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。区别:圣杯布局:为了让中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。双飞翼布局:为了让中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该div里用margin
2021-11-08 19:09:09
76
原创 手动实现react-createStore方法
function reducer(state={num:0}, action) { switch(action.type) { case "add": return { ...state, num:state.num+=5 } case "minus": return { ...state, num:state..
2021-11-08 18:59:39
457
原创 vue3.0 实现原理
<script> // let s = [11, 22, 33, 44, 44] // new Set(s) // console.log([...new Set(s)]); function update() { console.log("视图更新"); } let arr = [1, 2, 3] let proxy ...
2021-11-08 18:51:34
139
原创 vue2.0实现原理
<script> let obj = { count: 0 } let watch; let dep = [] function defindReactive(obj) { for (let key in obj) { let value = obj[key]; Object.defineProperty(obj, key, { .
2021-11-08 18:50:25
126
原创 解析async await实现原理
<script> function API(num) { return new Promise(resolve => { setTimeout(() => { resolve(num) }, 1000); }) } function asyncFun(generator) { const ite.
2021-11-08 18:47:58
116
原创 发布订阅模式和观察者模式
发布订阅模式const fs = require("fs");let eventObj = { arr: [], on(fn) { // 订阅 this.arr.push(fn) }, emit() { // 发布 this.arr.forEach(fn => fn()) }}eventObj.on(() => { if (Object.keys(obj).length ==
2021-11-08 18:42:06
223
原创 svg圆形进度条加载动画
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documen
2021-11-08 18:33:58
245
原创 伪数组转换成数组的方法
概念什么是伪数组?具有length属性,lenght-1,代表着有元素 无法调用数组的方法方法1:slice[].slice.call(arr1)利用调用slice()在构造函数原型上且返回数组,从而绑定调用的对象经过转化:发现他已经变成了数组同样 :Array.prototype.slice.call(arr)也能实现相同的效果同理Function.prototype.call.bind(Array.prototype.slice)也能实现相同的效果...
2021-10-11 15:59:12
116
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人