- 博客(38)
- 收藏
- 关注
RSS订阅原创 cleancode思想-函数篇
下面是针对cleancode函数方面的分享1. 只做一件事应遵循单一职责原则一个函数只做一件事，且函数名能准确表达出这件事确保一个函数在同一个抽象层不能出现副作用eg:改进前（缺点：存在副作用，不只是做一件事，不在同一个抽象层）const viewModel = { userList: [], firstUser: {},}function getUserList () { return getUserListRequest().then(response =>
2021-07-17 16:25:03
209
1
转载 js实现继承的几种方式
转载自：https://www.cnblogs.com/humin/p/4556820.html前言JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。JS继承的实现方式既然要实现继承，那么首先我们得有一个父类，代码如下：// 定义一个动物类function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = func.
2021-05-14 17:08:28
121
转载 堆、栈、队列的区别以及使用场景
转载自：https://www.pianshen.com/article/54131761085/1. 堆和栈JavaScript中的变量分为基本类型和引用类型： 基本类型是保存在栈内存中的简单数据段，它们的值都有固定的大小，每种类型的数据占用的内存空间的大小是确定的，并由系统自动分配和自动释放，通过按值访问。 引用类型是保存在堆内存中的对象，值大小不固定，栈内存中存放的该对象的访问地址指向堆内存中的对象，JavaScript不允许直接访问堆内存中的位置，因此操作对象时，实际操.
2021-04-19 11:13:15
1887
原创 js拼接html时怎样使用vue组件？
问题因业务需要，需要使用js拼接html来绘制dom，但是发现js拼接组件标签时，不能把组件渲染出来如下面这种方式html：<div id="app"> <div id="container"></div></div>javascript：new Vue({ el: '#app', mounted() { let html = `<el-button>Button</el-button>` d
2021-04-16 16:20:14
1439
原创 vue实现滚动加载指令
滚动加载指令，附源码和使用案例，可直接使用。背景：因项目中需实现滚动分页，但是使用v-infinite-scroll渲染时会触发，所以自己实现滚动加载指令来替代前提条件：jquery.js：使用了jquery计算元素高度，可自行替代为原生JavaScriptlodash.js：使用lodash处理滚动节流，可自行取消节流、或替代为原生JavaScript实现实现思路：通过监听滚动事件，判断滚动到最底部时，触发加载事件如何判断是否滚动到最底部呢：这里我们通过判断：容器内的滚动距离是否
2021-04-15 16:24:21
499
原创 debugger for chrome的使用
1、安装debugger for chrome2、先把项目运行起来（要先运行项目）3、添加断点4、运行调试A（也可以使用快捷键f5进入）5、运行调试B然后就会出现以下\color{red}{然后就会出现以下}然后就会出现以下这是因为还没有配置launch.json\color{red}{这是因为还没有配置launch.json}这是因为还没有配置launch.json6、配置launch.json（这里视项目而定，我需要改端口和路径）7、再次进入调试8、正常进入断点调试总
2021-03-08 11:20:20
3706
转载 js事件轮询机制
转自：https://zhuanlan.zhihu.com/p/139210791一、js单线程我们都知道，js是单线程。也就是说js在同一时间只能做一件事。多线程有很多优点，为啥js不能和java一样做成多线程呢，毕竟他们的名字那么像。这是因为js可以操作DOM，试想一下如果js有多线程，其中一个线程要删除一个div，而另一个线程要给这个div添加子元素时，那到底要听哪个线程的呢？另外，虽然说像web worker等技术也赋予了js多线程的能力，但这种多线程还是有限制的，那就是不能操作DOM。一
2021-03-05 14:32:23
991
原创 使用递归实现斐波那契数列
遍历方式实现function fibonacci(n) { let arr = [1, 2] if (n < 3) return n for(let i = 3; i <= n; i++) { arr[i - 1] = arr[i - 3] + arr[i - 2] } return arr[n - 1]}递归方式实现function fibonacci(n) { if (n <= 2) return n return fibonacci(n
2021-03-04 17:10:20
548
1
原创 防抖节流的实现
下面以3个方式实现防抖节流通过vue的data实现利用vue的data属性可以被实例全局调用，并且不被销毁的特点实现防抖节流<!DOCTYPE html><html lang="en"><body> <div id="app"> <h3>vue 通过data属性实现防抖节流</h3> <input placeholder="输入以测试防抖" @input="onDebounce"> &l
2021-02-07 11:15:39
325
原创 简单实现call()/apply()
在实现之前，有必要弄清楚call()/apply()的定义：call():使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。apply() ：调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。相同点：指定this值(第一个参数)来执行一个函数，并且可以传参不同点：call()是单独传参，apply()是以数组形式传参通过上面两者的定义，我们知道传参的处理相对简单，难点在于如何指定this值。接下来看一下this指向规格：this指向最终
2020-11-03 10:21:25
211
原创 使用apply()，实现bind()
这里我们使用apply()，简单实现一下bind()；首先我们得了解bind()的定义：创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。所以最终返回的是一个function，并且需要用到apply()，以指定this。上代码Function.prototype.bind = function () { var self = this; var [ content, ...args
2020-11-02 14:44:28
532
原创 浅谈call、apply和bind
定义call() ：使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。apply() ：调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。bind()：创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。分析：先上栗子var module = { x: 42, getSite: function(y, z) { console.
2020-11-02 11:27:26
126
原创 get()与eq()的区别
get()通过jQuery对象获取一个对应的DOM元素。eq()获取当前链式操作中第N个jQuery对象，返回jQuery对象。简而言之eq()获取的是jquery对象，能够使用jquery方法。get()获取的是原生dom元素，只能使用原生方法，不能使用jquery方法。上个栗子<!DOCTYPE html><html lang="en"><body> <ul> <li>line 1</li>
2020-08-28 15:14:21
296
原创 什么是闭包(javaScript)
定义(出自《你不知道的JavaScript(上卷)》)：当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。词法作用域即静态作用域用一些代码来杰斯一下上面的定义function foo() { var a = 2; function bar() { console.log( a ); // 2 } b...
2020-03-12 10:15:36
153
原创 js多维数组扁平化处理并去重加排序
function renderArr(arr) { return Array.from(new Set(arr.toString().split(','))).sort(function(a,b){return a-b})}renderArr([2,3,1,2,3,4,[2,1,4,6],[2,1,4,23,12,[87,32,1,32]]])
2020-02-27 15:22:09
345
转载 js中的同步和异步
单线程的概念如果大家熟悉java，应该都知道，java是一门多线程语言，我们常常可以利用java的多线程处理各种各样的事，比如说文件上传，下载等，而JavaScript是否也可以支持多线程呢？答案是否定的，JavaScript是一门单线程语言，因此，JavaScript在同一个时间只能做一件事，单线程意味着，如果在同个时间有多个任务的话，这些任务就需要进行排队，前一个任务执行完，才会执行下一个...
2019-11-26 14:00:50
263
原创 关于javaScript事件轮询（Event Loop）
javaScript本身从来没有任何内建的异步概念让我们来做一个（也许是令人震惊的）声明：尽管明确地允许异步JS代码（就像我们刚看到的超时），但是实际上，直到最近（ES6）为止，JavaScript本身从来没有任何内建的异步概念。什么！？ 这听起来简直是疯了，对吧？事实上，它是真的。JS引擎本身除了在某个在被要求的时刻执行你程序的一个单独的代码块外，没有做过任何其他的事情。“被”谁“要求”？...
2019-11-25 20:34:09
371
原创 js异步控制台，console的机制
关于console.*方法如何工作，没有相应的语言规范或一组需求——它们不是JavaScript官方的一部分，而是由宿主环境添加到JS上的（见本丛书的类型与文法）。所以，不同的浏览器和JS环境各自为战，这有时会导致令人困惑的行为。特别地，有些浏览器和某些条件下，console.log(..)实际上不会立即输出它得到的东西。这个现象的主要原因可能是因为I/O处理很慢，而且是许多程序的阻...
2019-11-11 16:43:03
292
原创 js回调实现异步
function wait(opts, callback) { setTimeout(function () { callback(opts) },3000)};function submit() { var opts = 'print later...' console.log('start...') wait(opts, funct...
2019-11-11 10:39:35
295
转载 前端实现实时通讯
什么是websocket需求：前端展示类似待办todo-list每条记录的数量，初始值ajax获取接口返回，之后，后台数据库里记录数量改变，前端能够对其实时渲染解决方法：1轮询（缺点：需要服务器有很快的处理速度和资源） 2websockethttp协议是单工的, 只能由client发请求再由server返回请求结果, 在http协议中server是不能主动发请求到client的....
2019-09-25 14:31:36
367
转载 简单理解Vue中的nextTick
Vue中的nextTick涉及到Vue中DOM的异步更新，感觉很有意思，特意了解了一下。其中关于nextTick的源码涉及到不少知识，很多不太理解，暂且根据自己的一些感悟介绍下nextTick。一、示例先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。模板<div class="app"> <div ref="msgDiv">{...
2019-09-24 14:07:09
124
原创 JavaScript：初识setter与getter
对象文字语法getter是一个隐藏函数，会在获取属性值时调用。let obj = { get a(){ console.log('当a被get时执行') return 2; },}console.log(obj.a) //当a被get时执行 2setter也是一个隐藏函数，会在设置属性值时调用。let obj = {...
2019-08-29 10:31:01
183
1
原创 js回调函数callback传值与取值
1.简单的回调function demo(callback){ callback(1)}demo(function(e) { console.log(e) //1})2. 回调赋值function demo(callback){ var opts = { ids: [1,2,3,4], list: ['ho','ya...
2019-08-23 15:59:10
9674
1
原创 this绑定：bind(this)、var self = this与箭头函数。
下面用bind()，箭头函数，var self = this三种方式来绑定this。bind(this) （this机制）//bind()var demoObj = { demo: 2, fn: function(){ (function(){ console.log(this.demo) }).bind(this...
2019-08-23 11:59:28
745
转载 在VSCode中配置typescript
准备 VSCode NPM （包管理工具） 步骤打开命令行，键入npm i -g typescript全局安装TS 编写ts文件 继续在命令行环境下键入...
2019-06-09 19:56:02
1980
原创 css实现两列布局，一栏固定一栏自适应的5种方式。
1. float基本方式 固定端float，自适应端不设置width；2. css计算属性calc实现 固定端float，自适应端width为calc(100%-固定端width)3. table布局实现 父容器display:talble,两端都以display:table-cell，固定端设置width,自适应端不设置width4. 相对定位绝对定...
2019-06-03 10:11:39
1813
2
转载 巧用搜狗输入法输入英文单词
你是否遇到过这样的情形：想打一个英文单词，但是忘了具体拼写是什么，只是记了个大概?比如“竞争”，到底是competetion还是competition呢?又如“恭喜”，congra...tion?遇到上述情形，通常的做法是：查字典(或者打开翻译软件)，确认单词拼写之后再打(或者复制粘贴)。可是，当你查完拼写继续打字时，也许会发现——写作的思路中断了，又或者——别人已经打完整段文字了，可自己还差...
2019-03-06 09:30:10
3542
转载 12个非常实用的JavaScript小技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧。这些小技巧可能在你的实际工作中或许能帮助你解决一些问题。使用!!操作符转换布尔值有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值，如果存在就返回true值。为了做这样的验证，我们可以使用!!操作符来实现是非常的方便与简单。对于变量可以使用!!variable做检测，只要变量的值为:0、null、" "、und...
2019-02-27 14:11:02
101
原创 对数组与对象拷贝的简单理解
数组的普通引用这样改变arr2时arr1不改变当以索引的形式改变arr2的值时arr1也会随着改变，所以这样的赋值在实际开发中会出现引用问题。 数组的拷贝（这里我们通过concat()实现，当然concat只是其中一种解决方法），上代码完美复制，解决上图的引用问题 对象的普通引用赋值这样改变object2时object1不改变当以属性key值的...
2019-01-08 10:31:07
140
原创 数组之间的引用问题
直接 let arr2 = arr1时，这并不是单纯的赋值，而是将arr2作为arr1引用（这可能可能是因为指针，或者地址的原因），所有更改arr2的值arr1也会跟着改变我们可以通过concat来解决这个问题其实应该写成这样另外arr2 = [1,1,1]这样不调用下标索引去更改数组arr2时，arr1的值就不受影响参见https://www.cnblogs.com...
2019-01-07 14:39:04
489
原创 promise顺序执行和并行执行的简单示例。
Promise.resolve().then(() => { console.log(1111)}).then(() => { console.log(2222)}).then(() => { console.log(3333)})
2019-01-07 14:06:20
1395
原创 什么是事件冒泡
<div id="divOne" onclick="alert('我是最外层');"> <div id="divTwo" onclick="alert('我是中间层！')"> <a id="hr_three" href="http://www.baidu.com"
2018-10-18 16:23:17
1238
原创 小程序如何修改data中对象或数组的属性
data中定义变量data: { address:'', markers: [{ id: 1, latitude: '', longitude: '', name: 'T.I.T 创意园' }],给data中的数据赋值 onLoad: function (t) { var that = this;...
2018-09-29 13:21:43
1424
原创 小程序js如何获取html标签的属性
在现实开发中，我们经常用到每个button都绑定不同的id（或其他属性），通过点击botton，js捕获该button绑定的id（或其他属性），最后通过ajax post或get这个属性值，就可以请求相应的数据或操作。那么我们如何通过js获取html的属性值呢。有两种形式。1、在html中属性值是直接定义（非自定义）的HTML：<view id="1" bindtap="kcfl...
2018-09-28 14:24:02
7257
原创 关于css3中nth-of-type()的使用
nth-of-type(n)选择器用于匹配同类型中的第n个同级兄弟元素。n可以是一个数字，一个关键字，或者一个公式。（ps：n不能为判断语句）p:nth-of-type(n=2) ---------- 错误，不能为赋值语句p:nth-of-type(n==2)-------- 错误，不能为布尔型p:nth-of-type(2) ------------- 正确，选取第二个p元素p...
2018-07-24 17:11:00
1096
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人