- 博客(73)
- 收藏
- 关注
RSS订阅
原创 vue源码解析之mustache模板引擎
数据变为视图的方法纯Dom方法：非常笨拙，没有实战价值 数据join法：曾今流行 ES6反引号法：`${}`语法糖 模板引擎：解决数据变为视图最优雅的方法
2021-05-28 16:01:10
223
2
原创 码元和码点（字符串截取截取得是码元，汉字有一些偏僻字占据两个码元，字符的函数往往不是我们期待）
字符串截取截取得是码元，汉字有一些偏僻字占据两个码元，字符的函数往往不是我们期待
2022-12-05 14:56:59
487
1
转载 面试啦，被问到排序算法了，该学习学习排序的那些算法了
算法概述算法分类十种常见排序算法可以分为两大类：非线性时间比较类排序：通过比较来决定元素间的相对次序，由于其时间复杂度不能突破O(nlogn)，因此称为非线性时间比较类排序。线性时间非比较类排序：不通过比较来决定元素间的相对次序，它可以突破基于比较排序的时间下界，以线性时间运行，因此称为线性时间非比较类排序。算法复杂度相关概念稳定：如果a原本在b前面，而a=b，排序之后a仍然在b的前面。不稳定：如果a原本在b的前面，而a=b，排序之后 a 可能会出现在 b 的后面。
2021-01-11 14:14:32
181
原创 vue原理解析
1.kvue.jsclass KVue{ constructor(options){ this.$options=options this.$data = options.data observe(options.data) proxy(this,'$data') //创建编译器 new Compile(options.el,this) }}class Observe{ co.
2020-12-07 17:11:04
366
原创 vue-router实现原理
1.k-vue-router实现//k-vue-router.js实现import Link from './krouter-link'import View from './krouter-view'let Vue;// 1.实现一个插件：挂载$routerclass KVueRouter { constructor(options) { this.$options = options // 利用Vue提供的defineReactive做响应化 // 创建响应式的
2020-09-28 13:57:11
163
原创 vuex原理
let Vue;class Store { constructor(options) { this._mutations = options.mutations; this._actions = options.actions; this.getters = {} this._wrappedGetters = options.getters const computed ={} const store = this // getters处理.
2020-09-28 13:49:03
190
原创 职责链模式
//职责链模式let order500 = function(orderType,pay,stock){ if(orderType===1&&pay===true){ console.log('500定金预购，得到100优惠券') }else{ return 'nextOrder' }}let order200 = function(orderType,pay,stock){ if(orderType===2&&.
2020-07-08 09:23:35
195
原创 模式之模板方法
class Beverage { //定义饮料类 boilWater(){ console.log('将水煮沸') } brew(){ throw new Error('子类需重写brew方法') } pourInCup(){ throw new Error('子类需重写brew方法') } addCondiments(){ throw new Error('子类需重写brew方法').
2020-07-06 14:07:53
101
原创 组合模式（文件夹的扫描）
class Folder { constructor(name){ this.name = name; this.files = []; this.parent= null;//添加父类 } add(file){ file.parent = this;//设置父对象 this.files.push(file) } scan(){ console.log('开始扫描文件夹：.
2020-07-02 09:33:01
257
转载 命令模式
菜鸟教程中代理模式总结）1.定义：将请求以命令的形式包裹在对象中，并传给调用对象。调用对象寻找可以处理该命令的合适的对象，并把该命令传给相应的对象，该对象执行命令。2.主要解决：行为请求者与行为实现者通常是一种紧耦合的关系，为了消除这种耦合关系3.何时使用：命令执行过程较为复杂且可能存在变化，需要对执行命令动作本身进行额外操作，此时可以考虑使用命令模式4.如何解决：通过调用者调用接受者执行命令，顺序：调用者→接受者→命令。5.关键代码：定义三个角色：1、received 真正的命令执行对象
2020-07-01 09:21:52
1346
原创 订阅模式初探（2）【复杂应用-命名空间与先发布再订阅】
var Event = (function(){ var global = this, Event, _default = 'default'; Event = function(){ var _listen, _trigger, _remove, _slice = Array.prototype.slice, _shift = Array.prototype.shift, _u.
2020-06-29 10:53:11
120
原创 订阅模式初探（1）
class Event{ constructor(){ this.clientList={} } listen(key,fn){ if(!this.clientList[key]){ this.clientList[key]=[] } this.clie...
2020-06-24 09:30:21
121
原创 代理函数的运用以及给自己的一些话
注意事项：代理与本地接口的一致性（代理对象与本地对象需要有对外一致的接口）应用场景一（图片预加载）var myImage =(function(){ var imgNode = document.createElement('img') document.body.appendChild(imgNode) return { setSrc(src){ imgNode.src = src } }})()var
2020-06-23 10:26:10
262
原创 函数的应用（数据节流，分时函数）
1.数据节流关于数据节流的代码实现有很多种，下面throttle函数的原理是，将即将被执行的函数用setTimeout延迟一段时间执行。如果该次延迟执行还没有完成，则忽略接下来调用该函数的请求。throttle函数接受两个参数，第一个参数为需要被延迟执行的函数，第二个参数为延迟执行的时间。代码如下：var throttle = function(fn,interval){ var timer, // 定时器 firstTime=true // 是否是第一次调用 return
2020-06-17 14:57:59
325
原创 Node+TS+Koa+vue 商城全栈开发1(node部分-fs)
//文件系统模块fsconst fs = require('fs')// console.log(fs)//write// 写入数据到文件// fs.writeFile(file,data[,options],callback) (文件路径,内容,可选配置项容,回调函数)// input/output => i/o操作 =>流 二进制 =>buffer//创建文件...
2019-12-23 13:52:24
271
原创 Node+TS+Koa+vue 商城全栈开发1(node部分-buffer)
//Buffer类,缓冲//buffer对象类似于数组，他的元素都是16进制的两位数，即0~255的数值,给元素的赋值如果小于0，就将该值逐次加256，直到得到一个0255之间的整数，如果得到赋值大于255，就逐次减256，直到得到0255区间内的数值。如果是小数，则舍弃小数部分，只保留整数部分。//process.stdin.on('data',(e)=>{//...
2019-12-20 14:51:09
245
原创 Node+TS+Koa+vue 商城全栈开发1(node部分-process)
// 线程 console.log(process)//argv:用来获取当前运行node程序的相关参数 console.log(process.argv) if(process.argv.includes('-v')){ console.log('v1.0.0') } console.log(process.env)//当前系统环境变量 if(process...
2019-12-20 11:49:41
217
转载 Node+TS+Koa+vue 商城全栈开发1(Node部分-event loop)
微任务、宏任务首先，JavaScript是一个单线程的脚本语言。所以就是说在一行代码执行的过程中，必然不会存在同时执行的另一行代码，就像使用alert()以后进行疯狂console.log，如果没有关闭弹框，控制台是不会显示出一条log信息的。亦或者有些代码执行了大量计算，比方说在前端暴力破解密码之类的鬼操作，这就会导致后续代码一直在等待，页面处于假死状态，因为前边的代码并没有执行完。...
2019-12-16 14:51:05
163
原创 Node+TS+Koa+vue 商城全栈开发1(es6部分-class)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
2019-12-11 15:47:01
138
转载 Node+TS+Koa+vue 商城全栈开发1(es6部分-set,weakSet)
SetES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。基本用法Set本身是一个构造函数，用来生成 Set 数据结构(即set方法返回的就是set数据)。跟foreach搭配可以去重const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); // add()方...
2019-12-10 09:59:56
144
原创 Node+TS+Koa+vue 商城全栈开发1(es6部分-对象的方法)
Object.assignObject.assign方法用来将源对象（source）的所有可枚举属性，复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象 let obj1={a:1,b:2} let obj2={c:3} Object.assign(obj1,obj2) console.log(obj1)//{a: 1, b: ...
2019-12-03 22:19:33
137
原创 Node+TS+Koa+vue 商城全栈开发1(es6部分-数组的方法)
includesvararr=[1,2,3]console.log(arr.includes(1))//trueforEach var arr= [1,2,3] arr.forEach(function(val,index,arrays){ console.log(val,index,arrays,this) // 1 ,0, ...
2019-12-02 21:49:28
100
原创 函数防抖
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
2019-11-29 13:51:46
76
原创 Node+TS+Koa+vue 商城全栈开发1(es6部分-迭代器)
使用迭代器遍历对象获取key,value值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
2019-11-28 21:05:18
104
原创 块元素内行内块元素的一些间隔问题
块元素内存在多个行内块元素时,行内块元素存在间距原因:元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当...
2019-11-27 09:35:23
1817
转载 Node+TS+Koa+vue 商城全栈开发2(es6部分-字符串、数字与对象扩展)
字符串的扩展str.includes(str1, n)返回布尔值，表示是否找到了参数字符串 params： 第一个参数str1 必选， 要匹配的字符 第二个参数n 可选 表示开始搜索的索引位置 第n个开始搜索到结束let str = 'hello world'let str1 = 'hello'console.log(str.includes(str1)); ...
2019-11-20 09:47:56
152
1
原创 Node+TS+Koa+vue 商城全栈开发2(es6部分-结构赋值)
定义: 允许按照一定模式，从数组和对象中提取值，并对变量进行赋值，这被称为解构赋值letarr=[1,2,3];let[a,b,c]=arr;//需要一一对应console.log(a,b,c);//1,2,3等同于leta=arr[0];letb=arr[1];letc=arr[2];对象结构赋值let{b...
2019-11-19 09:40:56
140
原创 Node+TS+Koa+vue 商城全栈开发1(es6部分-symbol)
Javascript主要有如下9种数据类型：String、Number、Boolean、Array、Object、Function、Null、Undefined、Symbol基本类型：string、number、boolean、undefined、null 引用类型：array、object、function(函数本身即对象) es6新增：symbol (也是基本类型)1.理解和使用ES...
2019-11-15 22:20:03
160
原创 Node+TS+Koa+vue 商城全栈（前后端）开发学习记录(前篇)
一直局限于自己目前已知的知识范畴,找不到系统提升的道路,下定决心沉下心来准备系统的学一点东西,结合自己目前所用的技术栈,,对整个项目的架构,代码结构以及前后端交互做一个系统的学习和提高,以后每天学习一点记录下来,也督促自己写点东西,不在三天打鱼两天晒网.如果哪位朋友浏览到这需要我的学习资料的,可以留言联系我,我发给你们.一起加油,进阶吧...
2019-11-15 13:58:58
586
1
原创 let 命令
1.let命令ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。{ var a = 1 let b = 2}a // 1b // b is not defindvar命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。let命令改变了语法行为，它所声明的变量一定要在声明后使...
2019-08-28 09:05:29
347
原创 provide与inject的使用
在父组件中，在provide中提供变量name='parentData''在子组件中通过inject接收d页面显示结果如果需要出入当前组件内数据，则需要写成一下方式需要注意的是当前传入的是对象是才能完成父子组件的值的双向绑定。展现结果点击后变为22222...
2019-07-02 14:13:59
2167
原创 记录显示解析数字字符串函数parseInt
1.解析与转换的区别var a='42'var b='42px'Number(a) //42Number(b) //NaNparseInt(a) //42parseInt(b) //42解析允许字符串中允许含有非数字字符串，按照自左往右的解析顺序，若遇到非数字字符停止。而转换不允许出现非数字字符，否则会返回NaN2.解析非字符串可能会遇到的坑我们先更深入了解一下pars...
2019-05-31 14:26:09
233
原创 前端性能优化总结（2）（（本文参考高性能javascript）
1.DOM操作1.访问DOM是有代价得，修改元素则更为昂贵，因为它会导致浏览器重新计算页面得几何变化。看以下代码function innerHTMLLoop(){ for(var count = 0;count<15000;count++){ document.getElementById('here').innerHTML+='a'; }}...
2019-05-08 09:45:31
142
原创 前端性能优化总结（1）（（本文参考高性能javascript）
1.加载与执行将脚本放在底部（尽管脚本下载会阻塞另一个脚本，但是页面得大部分内容已经下载完成并显示给了用户，因此页面下载不会显得太慢） 减少页面包含得<script>标签数量，不要把内嵌脚本放在<link>标签后面 逐步加载javaScript文件，即使用无阻塞脚本(尽管单个较大得javaScript文件只产生一次HTTP请求，却会锁死浏览器一大段时间)延迟脚本（...
2019-05-07 10:03:26
103
原创 for循环优化（本文摘自高性能javaScript）
即使是循环中最快的代码，累计迭代上千次也会慢下来。此外，循环体运行时也会带来小性能开销，不仅仅是增加了总体运行时间。减少迭代次数能获得更加显著的性能提升，最广为人知的一种限制循环迭代次数的模式被称为“达夫设备（Duff's Device）”。Duff's Device是一种循环体展开技术，它使得一次迭代中实际执行了多次迭代的操作。一个典型的实现如下：var iterations = Ma...
2019-05-07 09:26:24
199
转载 JS实现继承的几种方式(本文转载自https://www.cnblogs.com/humin/p/4556820.html)
前言JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。JS继承的实现方式既然要实现继承，那么首先我们得有一个父类，代码如下：// 定义一个动物类function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = f...
2019-04-29 15:46:57
150
原创 属性设置和屏蔽
在了解属性设置和屏蔽之前我们理解一下ES5中Object.create()这个方法Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。Object.create(...)是ES5中新增的函数，所以在ES5之前的环境中如果要支持这个功能的话就需要一段简单的polyfill代码。它部分实现了Object.create(...)的功能...
2019-04-29 12:11:40
341
2
原创 prototype、__proto__与constructor
虽然在JavaScript里一切皆对象，但为了理解原型链系统，我们需要将JavaScript的对象分为对象和函数两大类。在此基础上，JavaScript的原型链逻辑遵从以下通用规则：对象有__proto__属性，函数有prototype属性； 对象由函数生成; 生成对象时，对象的__proto__属性指向函数的prototype属性。...
2019-04-29 10:12:29
130
原创 this的绑定形式（this指向问题）
1.默认绑定看代码function foo(){ console.log(this.a);}var a=2;foo();//2在代码中，this.a被解析成全局变量（以前很容易搞混，认为js函数是对象的一种表现形式，会误以为函数内部的this指向函数本身，其实函数内部的this指向取决于函数的执行环境，有些人可能又会存在疑惑，当我建立一个构造函数，并用new对该构造函数...
2019-04-28 10:59:56
494
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人