溜溜的阿溜-优快云博客

原创 CSS常见知识点总结1

CSS常见知识点1问题列表：重排和重绘css实现绘制三角形行内元素、块元素盒子模型选择器块级格式化上下文flex布局伪类、伪元素bem方法命名规范@media 媒体查询bem方法命名规范Q1：重排和重绘？原文链接：https://blog.youkuaiyun.com/qq_27674439/article/details/98957581浏览器的运行机制：布局1、构建DOM树（parse）渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）

2021-07-08 10:55:50 350

原创常见JS手写代码系列总结2

JS手写系列2JS常见手写代码题（一）JS常见手写代码题（二）32个手写JS_单眼皮的小熊-优快云博客promise、promise.all、promise.raceinstanceof手写一个ajax闭包cache浅拷贝、深拷贝字符串转驼峰图片懒加载滚动加载一、手写一个Promise完整解析：https://zhuanlan.zhihu.com/p/103651968function Promise(executor) {let self = thisthis.st

2021-07-08 10:52:59 441

原创常见JS手写代码系列总结1

JS手写系列1参考文章：JS常见手写代码题（一）【javascript】手写call,apply,bind函数以下为一些常见的js手写代码系列callapplybindnew数组扁平化数组去重原型继承一、JS实现一个call方法或函数fun.call(obj, 参数1，参数2，…)，第一个值是改变this指向到obj，后面是参数队列，调用call立即执行方法funcall的定义和用法// call方法第一个参数指的是this的指向；接受一个参数列表;方法立即执行// Fu

2021-07-08 10:51:37 642

原创 JS基础知识点总结2（深浅拷贝、set\map、内存泄露）

JS小知识点2（深浅拷贝、set\map、内存等）这里总结了一些JS中的基础概念深拷贝、浅拷贝Set 和 Map 数据结构内层泄露一、深拷贝、浅拷贝js浅拷贝与深拷贝的区别和实现方式简单理解：JS中，基础数据类型存放在栈中，引用数据类型存放在堆中，而栈中存放的只是指向堆中的值的指针；如果我们复制一个引用数据类型，只是复制了指针，其实指向的是同一个值，那么通过一个指针改变值，另一个也会跟着改变。深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟

2021-07-08 10:49:58 1032

原创 JS基础知识点总结1（闭包、冒泡、call、for in、变量函数提升）

JS小知识点1（闭包、冒泡、call、for in、变量函数提升）这里总结了一些JS中的基础概念，包括闭包、冒泡等等，面试常常问到的闭包与作用域事件冒泡call、apply、bindfor in和for of的区别和用法变量声明提升、函数提升一、闭包与作用域1、说明:在js作用域环境中访问变量的权利是由内向外的，在外层作用域下无法获取内层作用域下的变量闭包有3个特性：①函数嵌套函数②函数内部可以引用函数外部的参数和变量③参数和变量不会被垃圾回收机制回收好处①保护

2021-07-08 10:47:21 217

原创正则基本用法总结

正则正则表达式(Regular Expression)是一种文本模式，包括普通字符元字符，用于字符串操作，比如查找、匹配等基础用法、各符号的意义，不再赘述，看文章即可：正则 · 语雀一、表达形式：//构造函数var reg = new RegExp('along','img')console.log(reg) --> /along/gim//字面量方式var reg = /a/ console.log(reg) --> /along/gim//工厂模式var

2021-07-08 10:43:43 269

原创 CSS常见知识点1

2021-07-08 10:41:07 216

转载事件循环（栈与堆、宏任务、微任务）

事件循环（栈与堆、宏任务、微任务）参考资料：44.理解事件循环一(浅析) · Issue #47 · ccforward/cc45.理解事件循环二(macrotask和microtask) · Issue #48 · ccforward/cc一、理解事件循环1、栈stack与当我们调用一个函数，它的地址、参数、局部变量都会压入到一个 stack 中2、heap(堆)当函数执行完毕后本地变量会从 stack 中弹出，这只有在使用 numbers string boolean 这种基本数据类型时

2021-07-08 10:40:20 375

原创了解JS函数式编程

了解JS函数式编程参考文章：函数式编程 · 语雀js函数式编程函数式编程入门教程一、一些概念我们在设计方案解决问题时，应当做到如下设计原则可扩展性----我们是否需要不断的重构代码去支持额外功能，或者功能调整时不好修改易模块化----如果我们修改了一个文件，另一个文件是否也会受到影响可重用性----是否有很多的重复代码可测性 ----是否可添加单元测试易推理性----写的代码是否结构性非常差，难以阅读范畴论函数式编程起源于范畴论，彼此之间存在某种关系的概念、事物、对象等等，都

2021-07-08 10:34:23 210

原创一只程序猿的初级理财———稳健版

一只程序猿的初级理财———稳健版程序员一直被认为是高收入人群，这种认知并不是误解，因为 1、程序员的平均工资水平确实要比其他大部分工种要高 2、程序员普遍都忙，没有时间花钱对于一个工作2-3年，普普通通的程序员，基本都有一定的积蓄。对于处在这种财富积累初级阶段的我们，理财的方向主要还是以稳健为主。毕竟这个阶段的我们，有很多大头的必要支出—— 结婚、买房、装修下面以基金、定期存款、记账几个小方面简单介绍一下：一、基金对于不买股票的人来说，大家一般买卖基金用的最多的的平台就是支付宝了，一般平时用什

2021-03-16 14:44:14 935

原创 Vue大型表单数据导致el-input输入卡顿解决方案

Vue大型表单数据导致el-input输入卡顿解决方案说明在我们的日常开发中，可能会遇到一个大型的表单页面包含非常多个el-select及el-input组件的情况。如：对于这样大型的表单数据，尤其一些下拉选项非常多甚至还要从接口获取时，会容易出现两个问题：1、el-select组件操作卡顿2、el-input组件输入延迟卡顿，即在输入框里输入、删除一些字符，会有明显的延迟对于第一个问题，网上有很多解决办法，通常是：下拉数据动态获取、减少数据量此处主要讲第二个问题的解决方案：问题的出现大

2021-03-05 16:12:18 12600 1

原创前端项目工程化流程--从开发到发布

前端项目工程化流程–从开发到发布一般来说，一家成熟的公司，早就把项目打包部署、测试、预发及线上发布都实现了自动化或一键操作。因此，对大多数前端开发工程师来说，基本涉及不到这些工程化的事情。但作为一个所谓的前端开发工程师，必然需要对工程化，或者简单来说，我们项目的部署上线流程，有一个清晰的认知。以供我们在面对项目需要迁移、服务器升级、线上节点挂掉等频率虽低但影响很大的一些问题时，能迅速定位并协助后端、运维同学解决问题。&n

2021-02-20 11:03:18 3642 1

原创 js函数节流与防抖

一、节流(throttle)与防抖（debounce）的含义节流：指连续触发事件但是在 n 秒中只执行一次函数。即 2n 秒内执行 2 次，3n秒内执行3次… 。节流如字面意思，会稀释函数的执行频率。使用场景：dom元素拖拽，搜索联想等等防抖：连续的事件响应我们在n秒内只执行一次回调。如n秒内触发6次，只在最后一次再执行回调。使用场景：文本输入验证二、简单实现节流：function throttle(fn,wait){ // 首先获取调用throttle时的一个时间戳作为触发时时间，实现

2020-12-21 18:32:54 371

原创 lodash中的get方法

lodash中使用频率最高的，应该就是_.get()方法去根据路径获取对象的值了。他的使用方式非常简单:_.get(object, path, [defaultValue])// 根据 object对象的path路径获取值。如果解析 value 是 undefined 会以 defaultValue 取代。这样我们可以使用如：.get(object, ‘a[0].c’, ‘default’); 获取对象n级路径下的值，如果中间路径值为空，返回默认值，以免直接使用a[0].c时因a[0]为und.

2020-12-18 16:40:59 21733 1

翻译 [译]JavaScript 的面向切面编程

原文地址：Aspect-Oriented Programming in JavaScript原文作者：Fernando Doglio译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/gold-miner/blob/master/article/2020/aspect-oriented-programming-in-javascript.md译者：Liusq-Cindy校对者：Chorer、nia3yJavaScript 的面向切面编程我们都知道面向对..

2020-12-09 11:34:50 286

原创 Browser 对象实用基础

学习JS时，大家通常会对dom对象投入更多的精力，而容易忽略browser对象。确实Broswer对象的使用频率不高，但了解一些实用的基础是非常有必要的。window对象 —— 表示浏览器中打开的窗口navigator对象 —— 包含有关浏览器的信息screen对象 —— 包含有关客户端显示屏幕的信息history对象 —— 包含用户（在浏览器窗口中）访问过的 URLlocation对象 —— 包含有关当前 URL 的信息存储对象 —— sessionStorage、localStorage

2020-12-01 18:04:19 874

原创如何搭建自己的github-pages个人博客

相信大家都曾想过做一个自己的博客网站，上传一些自己的博文、作品等等，尤其是技术开发人员，就更想有一个属于自己的小天地了。但以往搭建博客网站的方案通常需要买云服务器、买域名等等，非常麻烦。对于需求不高，只想搭建一个静态网站的人来说，那些方案过于繁琐也没有时间维护。本文推荐的一个方案是，基于Github，建立一个自己的github静态网站，过程非常简单，只需要你申请一个github账号（相信开发人员一般是会有的，没有的话，直接去https://github.com注册一个）搭建github page.

2020-11-27 18:32:39 1516

原创微信小程序怎么跳转H5页面

微信小程序怎么跳转H5页面在微信小程序内要跳转至外部的H5页面，做法比较简单。可以看到微信官方文档中，微信小程序提供了承载网页的容器： web-view，通过这个容器，其实可以实现在小程序内打开一个H5页面。也就是可以在小程序中设置一个空白页面，专门用于打开此类外部H5页面。具体做法如下：1、在小程序内新建一个空白页面，内置web-view容器，用于承载网页index.wxml 文件：<view class="page-body"> <web-view src="{{tar

2020-11-27 16:07:01 10933 3

原创 CSS规范化及解决方案

CSS规范化及解决方案说到规范，我们会较容易联想到git分支命名及合并规范、发布规范、js编写规范等等，比较容易忽略CSS规范，通常一些大型公司中成熟的前端团队，对css代码编写也会有一套自己的简单规范。规范不必过于苛刻，目的在于提升开发效率、降低维护成本。一、定义一套合理的规范（css命名+属性书写顺序）1、css命名—-BEM规范?在业界之前比较流行的css编写规范是BEM规范【块（block）、元素（element）、修饰符（modifier）】，实际也可根据团队情况制定推动更符合业务场景需要

2020-11-04 16:29:34 445

原创如何将前端代码写的优雅？

前言作为一个前端工程师，令我最头疼的两件事，一个是逻辑混乱且没有注释的js代码，还有一个就是污染严重、命名奇葩的css样式了。在项目开发中，扎实的基础和高超的技术水平固然重要，但是良好的编码风格也是不可或缺的一部分。开发一个业务或许只需要几天或者几个月的的时间，但项目在线上运行和迭代可能有几年甚至十几年。高质量的代码不仅能提升自己的编码风格、方便错误检查，对后续迭代优化的作用是非常显著的。如果不想让几个月后的自己看不懂自己的代码，或者不想让后续开发的小伙伴对着你的git提交记录捶胸顿足的话，请尽可能的

2020-10-19 20:24:57 1598

原创 html2canvas插件在ios13.4中不执行问题解决方案

用html2canvas插件将dom转为canvas在iphone11(ios 13.4.1)，微信环境里不执行也不报错，一直进不去.then()后面的逻辑，解决方案如下：具体将页面转为img图片,实现微信长按保存图片的步骤可见笔记：https://blog.youkuaiyun.com/cindy647/article/details/109123014方案一搜索到一个解决办法是降低html2canvas的版本，退回到4即可："html2canvas": "1.0.0-rc.4",亲测可行，但不确定.

2020-10-16 19:28:11 1818

原创如何生成动态海报--将页面元素转为图片html2canvas

项目需求生成动态海报：比如背景图固定，一些文案和头像等需要动态生成，可以使用html2canvas插件：基础用法handleCanvas () {// 用法：html2canvas(dom,{options}).then(canvas => {})html2canvas(this.$refs.extendCapture, { allowTaint: true, useCORS: true }).then(canvas => { .

2020-10-16 19:24:54 568

原创前端开发必备mac快捷键

对前端开发人员来说，窗口切换、编辑器输入比较频繁，掌握一些快捷键操作，虽然一开始可能要记一记，但熟悉了之后，能大大提高我们的开发效率。前端开发用mac的比较多，这里以mac为例，结合自身开发罗列了一些快捷键操作。我个人对快捷键的态度是，记住最有效和最常用的，其他很冷门很难记的就算了，效率为上。以下从几个方面来罗列一下最常用的mac开发快捷键一、电脑文件窗口前端开发人员常常需要切换窗口，创建文件，打开浏览器等等，一般切换窗口，mac的多指滑屏就很好用，而其他一些快捷键如下：(如command.

2020-09-29 14:56:30 967

原创 js执行shell命令的几种方式（Node）

在做一个客户端基建项目的时候，多处需要用到JS调取命令行执行shell脚本，这里对shell命令、JS执行shell命令做一个简单的介绍和总结。前言一般在纯前端静态页面的项目中，是不需要JS调命令行操作的，通常在Node项目，或者在Electron客户端项目中，可能会有这样的需求。（electron这个客户端框架本身就内置了node的很多方法）。因此下文针对的是有node层的项目如何执行shell。先来了解一下shell是什么？Linux/Unix中的shell，翻译是’壳’的意思；shell.

2020-09-27 16:30:15 45047

原创 Nginx安装及简单配置

nginx代理本地静态文件nginx官网nginx中文文档简单来说，nginx是一个代理服务器，他可以帮助我们实现http代理、反向代理（客户端向服务端发起请求是正向代理，服务端处理请求返回给客户端就是反向代理）、负载均衡等，prd项目用它来代理到服务端的本地文件。1、nginx 安装及启动（mac为例）nginx原理和机制可见：nginx机制介绍（有点晦涩，界面不好看）、nginx入门介绍-简书系列文章（言简意赅）nginx下载安装，分为mac和windows。mac可见：mac下安装

2020-09-14 15:14:21 124

原创基于javascript的数据结构基础

数据结构作为一个基础学科，并不仅仅是后端开发人员需要了解的知识。作为前端开发工程师，用javascript作为开发语言，同样需要了解一些数据结构的内容。这里推荐一本书《js数据结构与算法》，以下也基于这本书提炼出来一些js数据结构的基础知识。常见的数据结构下面介绍几种最常见的数据结构数组栈队列链表集合二叉树数组数组是最简单的内存数据结构，通常用来保存同一数据类型的值js中的数组可保存不同类型的数据，在js中，提供了数组这一基本的数据结构，我们通常以[1,2,3,'.

2020-09-14 14:57:38 179

原创 gitlab-ci自动化部署npm build报错:React Hook useEffect has a missing dependency

针对react项目通过gitlab-ci自动打包部署出现的错误及解决办法，特此记录1、问题描述项目部署在服务器上，通过在gitlab上绑定Gitlab-runner，项目中配置gitlab-ci文件实现当master分支更新时，自动化打包部署等操作，但是CI模式下执行 npm run build时编译失败错误信息如下react-app-rewired buildCreating an optimized production build...Browserslist: caniuse-li

2020-09-11 16:11:57 5639

原创 el-table反复报错：ResizeObserver loop limit exceeded 解决办法

最近在一个老项目中发现一个问题，el-table使用时，不断触发元素重绘，系统的错误监听系统监听到无数个ResizeObserver loop limit exceeded 错误这个错误是在监听系统中看到的，可能浏览器console不会报错，如果要在本地开发中调试定位这个问题，可以在项目代码里加入一个方法，打印window错误：window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumber, error) {.

2020-06-03 14:13:45 35523 13

原创 js编写四种基础排序（冒泡排序、选择排序、插入排序、快速排序）

讲到算法，不可避免的会提到排序算法；在排序算法中，冒泡排序、选择排序和插入排序等是最常被问到的几种基本的排序算法。下面用js来实现这几个简单的排序。1、冒泡排序概念从序列的最右边开始比较相邻两个数字的大小，再根据结果交换两个数字的位置，重复这一操作，实现所有数字从小到大或从大到小排列的算法即冒泡排序。步骤外层循环，n长的数组需要比较n趟，每次找到一个最小值内层循环，每一趟之后需要比较的个数减1；从序列的末尾开始比较相邻两个数字的大小；如果比较的数据比左边相邻的数据小，则左移当前比较的数据.

2020-05-27 15:37:05 505

原创 npm中package-lock的resolevd冲突

前言上次讲到用package-lock锁版本来保证项目的一致性和稳定性。但在使用过程中，发现同一项目的不同开发，在install安装依赖之后，package-lock.json文件会出现冲突，下面将针对这些问题进行探究和解决。一、合分支时由于版本不同造成的冲突简而言之，就是两个开发人员安装了不同版本的新npm包，lock文件不同，从而导致的冲突。这类都属于应有的冲突，只要由merge人员核对版本号，选择正确的版本，统一项目的lock版本即可。二、package-lock中的resolve字段被不同

2020-05-25 15:02:14 5749

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

node.js入门学习demo练习（基于菜鸟教程）

基于原生JS写的一款网页小游戏

JS实现网页3D旋转轮播图的源代码

JS制作网页特效-学习笔记

JS基本功DOM学习笔记

Javascript学习笔记（传智播客视频学习笔记+代码）

仿京东主页Web开发源代码（html+css)）

空空如也