H.F.T.-CSDN博客

原创 instanceof 实现

function new_instanceof (leftValue, rightValue) { let rightProto = rightValue.prototype leftValue = leftValue.__proto__ while(true) { if(leftValue == null) return false if(leftValue == rightProto) return true leftValue

2021-04-24 21:25:55 85

原创实现(5).add(3).minus(2)=6

主要原理是包装类，在原始值调用时属性或方法时会把原始值隐式转换成对应的对象，调用完方法或属性后，该对象自动销毁注意：转换成对象后，所调用的方法或属性都是该对象的，和原始值无关，不会对原始值进行任何操作代码：Number.prototype.add = function (val) { return this.valueOf() + val}Number.prototype.minus = function (val) { return this.valueOf() - val.

2021-04-18 01:17:30 109

原创 new的模拟

一、new的效果构造函数中如果return非对象实例，得到的结果是new的对象构造函数中如果return对象实例，得到的结果是return的对象二、实现function objectFactory () { let obj = new Object() let Constructor = [].shift.call(arguments) obj.__proto__ = Constructor.prototype let ret = Constructor.ap

2021-04-14 17:41:45 89

原创记录部分常用函数的实现(7)：下划线变驼峰命名

一、驼峰命名第一个单词首字母小写，剩余单词首字母大写二、实现：function UnderlineToHump (name) { name = name.toLowerCase() return name.replace(/^_+|_+([0-9A-Za-z$])?/g, function () { return arguments[1] ? arguments[1].toUpperCase() : '' })}^_+处理开头是_的情况：__aB_+(

2021-04-14 01:04:19 144

原创 bind的模拟实现

bind的特点：返回的是一个函数可以在绑定时传参，使用时继续传参返回函数继承绑定函数对返回函数使用new时，bind绑定的this无效，传参有效Function.prototype.bind = Function.prototype.bind || function (context) { if(typeof this !== 'function') { throw new Error('Function.prototype.bind - what is trying to be bou

2021-04-08 11:36:08 56

原创数组方法reduce实现map

一、代码Array.prototype.myMap = function (fn) { const res = [] const arr = this return arr.reduce((pre, cur, i, arr) => { pre.push(fn.call(this, cur, i, arr)) return pre }, res)}这里有个问题，reduce是不会处理空的数组元素的，map是会处理的（不会执行函数，只

2021-04-01 01:46:38 238

原创 commonjs与es6模块

一、es6export命令let firstName = '牛哄哄的柯南';let lastName = 'Keafmd';let year = 1958;export { firstName as f, //可以使用as关键字，重命名对外接口 lastName, year };上面代码是export命令的另外一种写法。在export命令后面，使用大括号指定所要输出的一组变量。它与前一种写法（直接放置在let语句前）是等价的，但是应该优先考虑使用这种写法

2021-03-31 23:12:15 117

原创 vue-router两种模式的实现

一、vue router我们先看一下vueRouter这一个类的定义export default class VueRouter { mode: string; // 传入的字符串参数，指示history类别 history: HashHistory | HTML5History | AbstractHistory; // 实际起作用的对象属性，必须是以上三个类的枚举 fallback: boolean; // 如浏览器不支持，'history'模式需回滚为'hash'模式 c

2021-03-31 00:19:06 1280

原创三栏布局

一、流式布局<style>.header, .footer { height: 50px; background-color: aqua;}.middle { overflow: hidden; /*设置为BFC，避免middle区域高度塌陷*/}.middle .left, .middle .right { width: 200px; height: 100px; background-color: blueviolet;}.mid

2021-03-29 00:28:02 76

原创 computed watch原理理解

一、new Vue()的执行过程1.1 数据劫持和初步渲染function Vue (options) { // 初始化 this._init(options) // 执行render函数 this.$mount()}Vue.prototype._init = function (options) { const vm = this // 把options挂载到this上 vm.$options = options if (options.data) { //

2021-03-28 16:41:25 413

原创 MVVM原理(5)：视图修改数据代理proxy

一、视图修改数据修改一下compileUtil：const compileUtil = { model (node, expr, vm) { const value = this.getVal(expr, vm) // 绑定更新函数，数据=>视图 new Watcher(vm, expr, (newVal) => { // 当数据变化时执行该回调函数修改对应的视图 this.updater.modelUpdater(

2021-03-27 14:08:33 211

原创 MVVM原理(4)：观察者Watcher 依赖收集器Dep

一、DepDep的作用是收集观察者以及当数据发生变动时通知观察者去更新每一个属性都有自身的dep，接着添加watcher，在每次数据变动时(即set)，通知自身的dep，dep通知其中watcher去完成视图更新class Dep { constructor () { this.subs = [] } // 收集观察者 addSub (watcher) { this.subs.push(watcher) } // 通知

2021-03-27 13:52:11 913 1

原创 MVVM原理(3)：数据监听器Observer

一、ObserverObserver的目的是利用Object.defineProperty()中的get和set，在数据变化时，可以通知Depclass Observer { constructor (data) { this.observe(data) } observe (data) { if(data && typeof data === 'object') { Object.keys(data).

2021-03-26 23:37:54 381

原创 MVVM原理(2)：指令解析器Compile

一、构建Compile类

2021-03-26 21:12:26 280

原创 MVVM原理(1)：数据劫持构建Vue类

一、数据劫持vue.js采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给dep，dep再通知对应的watcher触发相应的监听回调

2021-03-26 13:14:00 143

原创记录部分常用函数的实现(6)：实现模板引擎

一、实现模板引擎大致思路就是获取模板script标签里的内容然后进行转换，最终返回一个代码字符串，把代码字符串放到html中等候执行function tmpl (str) { var str = document.getElementById(str).innerHTML var fn = new Function ("obj", "var p = []; with(obj) {p.push('" + str.replace(/[\r\t\n]/g,

2021-03-25 23:17:18 39

原创记录部分常用函数的实现(5)：千位分割符判断一个数是否为素数

一、千位分隔符1.1 for循环逐个判断function numFormat (num) { num = num.toString().split('.') // 分割小数点 let arr = num[0].split('').reverse() // 整数部分变成数组并倒序 let len = arr.length let res = [] for(let i = 0; i < len; i++) { if(i % 3 === 0 &a

2021-03-25 20:02:34 97

原创记录部分常用函数的实现(4)：数组去重

一、数组去重1.1 for循环function unique (arr) { let res = [] let len = arr.length for(let i = 0; i < len; i++) { for(var j = 0, resLen = res.length; j < resLen; j++) { if(arr[i] === res[j]) break } if(j ==

2021-03-25 15:18:02 116

原创记录部分常用函数的实现(3)：防抖节流

一、防抖function debounce (func, wait, immediate) { let timeout, result let debounced = function () { let context = this let args = arguments clearTimeout(timeout) if(immediate) { let callNow = !timeout /

2021-03-25 13:36:57 55

原创记录部分常用函数的实现(2)：curry 大数相加 flat

一、curryconst curry = (fn, ...args) => args.length >= fn.length ? fn(...args) : (..._args) => curry(fn, ...args, ..._args)二、大数相加// 传入函数的参数是大数字符串// 在定义变量时如果超过js安全范围，会以科学计数法存储，获取的时候也是科学计数法形式，toString()也是科学计数法形式，因此参数得是大数字符串let a = '90071992547

2021-03-25 00:23:07 115

原创封装数组方法：concat join toString

一、concatconcat有拍平一层数组的作用Array.prototype.concat = function () { let len = this.length let res = [] for(let i = 0; i < len; i++) { res.push(this[i]) } len = arguments.length for(let i = 0; i < len; i++) { let item = argumen

2021-03-24 21:18:16 150

原创记录部分常用函数的实现(1)：trim deepClone

一、trim()function trim (str) { return str.replace(/^\s+/, '').replace(/\s+$/, '')}二、deepClone()//可继续遍历的数据类型const mapTag = '[Object Map]'const setTag = '[Object Set]'const arrayTag = '[Object Array]'const objectTag = '[Object Object]'const args

2021-03-24 17:18:49 88

qq_44852448的博客