- 博客(22)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 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
152
原创 实现(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
161
原创 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
143
原创 记录部分常用函数的实现(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
221
原创 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
115
原创 数组方法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
321
原创 commonjs与es6模块
一、es6 export命令 let firstName = '牛哄哄的柯南'; let lastName = 'Keafmd'; let year = 1958; export { firstName as f, //可以使用as关键字，重命名对外接口 lastName, year }; 上面代码是export命令的另外一种写法。 在export命令后面，使用大括号指定所要输出的一组变量。它与前一种写法（直接放置在let语句前）是等价的，但是应该优先考虑使用这种写法
2021-03-31 23:12:15
177
原创 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
1430
原创 三栏布局
一、流式布局 <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
121
原创 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
525
原创 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
279
原创 MVVM原理(4)：观察者Watcher 依赖收集器Dep
一、Dep Dep的作用是收集观察者以及当数据发生变动时通知观察者去更新 每一个属性都有自身的dep，接着添加watcher，在每次数据变动时(即set)，通知自身的dep，dep通知其中watcher去完成视图更新 class Dep { constructor () { this.subs = [] } // 收集观察者 addSub (watcher) { this.subs.push(watcher) } // 通知
2021-03-27 13:52:11
1012
1
原创 MVVM原理(3)：数据监听器Observer
一、Observer Observer的目的是利用Object.defineProperty()中的get和set，在数据变化时，可以通知Dep class Observer { constructor (data) { this.observe(data) } observe (data) { if(data && typeof data === 'object') { Object.keys(data).
2021-03-26 23:37:54
514
原创 MVVM原理(1)：数据劫持 构建Vue类
一、数据劫持 vue.js采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给dep，dep再通知对应的watcher触发相应的监听回调
2021-03-26 13:14:00
203
原创 记录部分常用函数的实现(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
76
原创 记录部分常用函数的实现(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
150
原创 记录部分常用函数的实现(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
173
原创 记录部分常用函数的实现(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
99
原创 记录部分常用函数的实现(2)：curry 大数相加 flat
一、curry const 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
168
原创 封装数组方法：concat join toString
一、concat concat有拍平一层数组的作用 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
227
原创 记录部分常用函数的实现(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
123
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人