![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
文章平均质量分 63
可怜的前端小程序员
前端开发小程序员一枚,各种学习中。随心记录一些工作中遇到的问题
展开
-
码元和码点(字符串截取截取得是码元,汉字有一些偏僻字占据两个码元,字符的函数往往不是我们期待)
字符串截取截取得是码元,汉字有一些偏僻字占据两个码元,字符的函数往往不是我们期待原创 2022-12-05 14:56:59 · 497 阅读 · 1 评论 -
vue源码解析之mustache模板引擎
数据变为视图的方法纯Dom方法:非常笨拙,没有实战价值 数据join法:曾今流行 ES6反引号法:`${}`语法糖 模板引擎:解决数据变为视图最优雅的方法原创 2021-05-28 16:01:10 · 224 阅读 · 2 评论 -
面试啦,被问到排序算法了,该学习学习排序的那些算法了
算法概述算法分类十种常见排序算法可以分为两大类:非线性时间比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn),因此称为非线性时间比较类排序。线性时间非比较类排序:不通过比较来决定元素间的相对次序,它可以突破基于比较排序的时间下界,以线性时间运行,因此称为线性时间非比较类排序。算法复杂度相关概念稳定:如果a原本在b前面,而a=b,排序之后a仍然在b的前面。不稳定:如果a原本在b的前面,而a=b,排序之后 a 可能会出现在 b 的后面。转载 2021-01-11 14:14:32 · 184 阅读 · 0 评论 -
职责链模式
//职责链模式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 · 199 阅读 · 0 评论 -
模式之模板方法
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 · 104 阅读 · 0 评论 -
组合模式(文件夹的扫描)
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 · 260 阅读 · 0 评论 -
命令模式
菜鸟教程中代理模式总结)1.定义:将请求以命令的形式包裹在对象中,并传给调用对象。调用对象寻找可以处理该命令的合适的对象,并把该命令传给相应的对象,该对象执行命令。2.主要解决:行为请求者与行为实现者通常是一种紧耦合的关系,为了消除这种耦合关系3.何时使用:命令执行过程较为复杂且可能存在变化,需要对执行命令动作本身进行额外操作,此时可以考虑使用命令模式4.如何解决:通过调用者调用接受者执行命令,顺序:调用者→接受者→命令。5.关键代码:定义三个角色:1、received 真正的命令执行对象转载 2020-07-01 09:21:52 · 1348 阅读 · 0 评论 -
订阅模式初探(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 · 121 阅读 · 0 评论 -
订阅模式初探(1)
class Event{ constructor(){ this.clientList={} } listen(key,fn){ if(!this.clientList[key]){ this.clientList[key]=[] } this.clie...原创 2020-06-24 09:30:21 · 125 阅读 · 0 评论 -
代理函数的运用以及给自己的一些话
注意事项:代理与本地接口的一致性(代理对象与本地对象需要有对外一致的接口)应用场景一(图片预加载)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 · 264 阅读 · 0 评论 -
函数的应用(数据节流,分时函数)
1.数据节流关于数据节流的代码实现有很多种,下面throttle函数的原理是,将即将被执行的函数用setTimeout延迟一段时间执行。如果该次延迟执行还没有完成,则忽略接下来调用该函数的请求。throttle函数接受两个参数,第一个参数为需要被延迟执行的函数,第二个参数为延迟执行的时间。代码如下:var throttle = function(fn,interval){ var timer, // 定时器 firstTime=true // 是否是第一次调用 return原创 2020-06-17 14:57:59 · 328 阅读 · 0 评论 -
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 · 276 阅读 · 0 评论 -
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 · 248 阅读 · 0 评论 -
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 · 221 阅读 · 0 评论 -
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 · 140 阅读 · 0 评论 -
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 · 138 阅读 · 0 评论 -
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 阅读 · 0 评论 -
函数防抖
<!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 · 77 阅读 · 0 评论 -
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 · 105 阅读 · 0 评论 -
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 · 142 阅读 · 0 评论 -
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 · 162 阅读 · 0 评论 -
Node+TS+Koa+vue 商城全栈(前后端)开发学习记录(前篇)
一直局限于自己目前已知的知识范畴,找不到系统提升的道路,下定决心沉下心来准备系统的学一点东西,结合自己目前所用的技术栈,,对整个项目的架构,代码结构以及前后端交互做一个系统的学习和提高,以后每天学习一点记录下来,也督促自己写点东西,不在三天打鱼两天晒网.如果哪位朋友浏览到这需要我的学习资料的,可以留言联系我,我发给你们.一起加油,进阶吧...原创 2019-11-15 13:58:58 · 588 阅读 · 1 评论 -
js柯里化的认识(本文转载自https://www.zhangxinxu.com/wordpress/2013/02/js-currying),觉得很有用就记下了
、柯里化和柯南的关系是?回答:如果我说“柯里化 == 柯南”呢?众人:博主,r u ok!? 是不是钓鱼钓久了脑袋秀逗了哈?柯里化可是函数式编程中的一个技巧,而柯南是到哪儿哪儿死人、10年不老的神话般的存在。八竿子都打不到的,怎会相等呢??回答:诸位,眼睛睁大点,是==, 不是===哦~众人:嗯哪,我眼睛已经瞪得灯泡大了,粑粑并没有变冰淇淋啊?回答:这不就结了嘛。我说的是弱等于==, ...转载 2019-04-28 09:26:48 · 279 阅读 · 0 评论 -
理解 es6 class 中 constructor 方法 和 super 的作用【转载】
本文转载自:https://www.jianshu.com/p/fc79756b1dc0首先,ES6 的 class 属于一种“语法糖”,所以只是写法更加优雅,更加像面对对象的编程,其思想和 ES5 是一致的。function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function(...转载 2019-04-23 10:21:56 · 206 阅读 · 0 评论 -
jq offset().top和js offsetTop的区别
offset().top是JQ的方法,当前绑定元素上边框相对于html上边界的偏移量。offsetTop是原生JS的方法,当前绑定元素上边框相对离自己最近且position属性为非static的元素的偏移量...原创 2019-04-18 11:23:15 · 1122 阅读 · 0 评论 -
谈谈对闭包理解
在我刚接触代码那段时间内,对于闭包的概念一直摸棱两可,对于闭包的应用也是不清楚,有的时候自己用到了也浑然不知。现在,终于对闭包有了一些小小的认识。1.什么是闭包我认为解释闭包应该从两个方面去入手,即javascript引擎垃圾处理机制和作用域:我们先来看看javascript引擎垃圾处理机制,我们先来申明一个函数function computed(){ var a=1;...原创 2019-04-26 16:06:41 · 147 阅读 · 1 评论 -
web worker的应用
在公司遇到一个需求,js要求60000多条数据进行对照,由于在云桌面上开发,处理器显的力不从心,经常卡死或者奔溃,这个时候我就想,如果js也能多线程就好了,于是,web worker应运而生了。1、简介HTML5则提出了web Worker标准,表示JavaScript允许有多个线程,但是子线程完全受主线程的控制,切子线程不能操作DOM,只有主线程可以操作DOM.2、Web Worke...原创 2019-04-26 15:14:19 · 253 阅读 · 0 评论 -
分享几个vue大数据表格插件,并分析其优缺点
一.vue-bigdata-table 插件介绍地址: https://juejin.im/post/5ad876a36fb9a045df1720b9 gitHub地址: https://github.com/lison16/vue-bigdata-table 优点:功能完善支持拖动修改列宽、固定列不横向滚动,固定表头、内置排序、编辑单元格、...原创 2019-04-11 17:56:05 · 18064 阅读 · 3 评论 -
分享一个好用的文本对比插件
/* * Compare str * @example var result = htmldiff.compare('oldStr1','newStr2'); * * */var htmldiff = { MODE_CHARACTER: 1,MODE_TAG: 2,MODE_WHITESPACE: 3, ACTION_EQUAL: 1,ACTION_DELETE: 2,ACT...转载 2019-03-07 15:49:56 · 3994 阅读 · 1 评论 -
mock.js入门级使用
本文转载至 https://segmentfault.com/a/1190000008839142,本人只是拿来看一下,做一下记录Mock.js 是一款前端开发中拦截Ajax请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.大概记录下使用过程, 详细使用可以参见Mock文档 Mock Wiki安装使用npm安装: npm inst...转载 2018-05-04 14:07:36 · 378 阅读 · 0 评论 -
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 · 499 阅读 · 1 评论 -
prototype、__proto__与constructor
虽然在JavaScript里一切皆对象,但为了理解原型链系统,我们需要将JavaScript的对象分为对象和函数两大类。在此基础上,JavaScript的原型链逻辑遵从以下通用规则:对象有__proto__属性,函数有prototype属性; 对象由函数生成; 生成对象时,对象的__proto__属性指向函数的prototype属性。...原创 2019-04-29 10:12:29 · 131 阅读 · 0 评论 -
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 · 356 阅读 · 0 评论 -
记录显示解析数字字符串函数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 · 237 阅读 · 0 评论 -
前端性能优化总结(1)((本文参考高性能javascript)
1.加载与执行将脚本放在底部(尽管脚本下载会阻塞另一个脚本,但是页面得大部分内容已经下载完成并显示给了用户,因此页面下载不会显得太慢) 减少页面包含得<script>标签数量,不要把内嵌脚本放在<link>标签后面 逐步加载javaScript文件,即使用无阻塞脚本(尽管单个较大得javaScript文件只产生一次HTTP请求,却会锁死浏览器一大段时间)延迟脚本(...原创 2019-05-07 10:03:26 · 105 阅读 · 0 评论 -
for循环优化(本文摘自高性能javaScript)
即使是循环中最快的代码,累计迭代上千次也会慢下来。此外,循环体运行时也会带来小性能开销,不仅仅是增加了总体运行时间。减少迭代次数能获得更加显著的性能提升,最广为人知的一种限制循环迭代次数的模式被称为“达夫设备(Duff's Device)”。Duff's Device是一种循环体展开技术,它使得一次迭代中实际执行了多次迭代的操作。一个典型的实现如下:var iterations = Ma...原创 2019-05-07 09:26:24 · 212 阅读 · 0 评论 -
前端性能优化总结(3)((本文参考高性能javascript)
原创 2019-05-09 16:44:20 · 79 阅读 · 0 评论 -
前端性能优化总结(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 · 145 阅读 · 0 评论 -
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 · 151 阅读 · 0 评论 -
属性设置和屏蔽
在了解属性设置和屏蔽之前我们理解一下ES5中Object.create()这个方法Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。Object.create(...)是ES5中新增的函数,所以在ES5之前的环境中如果要支持这个功能的话就需要一段简单的polyfill代码。它部分实现了Object.create(...)的功能...原创 2019-04-29 12:11:40 · 345 阅读 · 2 评论