- 博客(32)
- 收藏
- 关注
RSS订阅原创 vue中mixin用法
mixins出现的原因？我们在开发组件的过程中，常常会遇到一些具有相同逻辑和功能的组件，如果每个组件各写一套方法会导致代码冗余，后期更改的时候也要一个个的改非常的浪费时间和精力，所以需要将这些多个相同的逻辑抽离出来，各个组件只需要引入，就能实现一次写代码，多组件复用，由此mixin便来了。mixins是什么？混入 (mixin) 提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。m.
2021-08-29 15:05:34
790
原创 深入浅出Vue3 Composition API
参考网址：https://mp.weixin.qq.com/s/QvEzoQqZG6db7nK_BYK89Ahttps://mp.weixin.qq.com/s/wBlFwfLjOEWljevoRWToaAhttps://www.vue3js.cn/docs/zh/api/composition-api.html#setup（vue3官方文档）
2021-08-26 19:16:14
566
原创 浅谈sketch插件开发（三）
sketch是什么？sketch是一款用来制作矢量绘图的软件，矢量绘图也是进行网页，图标以及界面设计的最好方式。但除了矢量编辑的功能之外，sketch同样添加了一些基本的位图工具，比如模糊和色彩校正。是Mac系统才有的软件，可以理解为精简版的PS ，比PS更适合UI设计。该软件的特点是容易理解，上手简单，对于有设计经验的设计师来说，入门门槛很低。sketch是用Objective-C构建的，是一套原生Objective-C开发的软件。Objective-C类通过Bridge (CocoaScript.
2021-08-13 18:28:43
2400
1
原创 浅谈Vue3 Composition API ref
什么是Composition ApiVue3.0带来了一个全新的特性(Composition API)，字面意思就是“组合 API”，它是为了实现基于函数的逻辑复用机制而产生的。Vue2中的Option API在了解Composition Api之前，首先回顾下我们在Vue2中使用Option Api遇到的问题，我们在Vue2中常常会需要在特定的区域（data，methods，watch，computed…）编写负责相同功能的代码。我们通过下面这张图看下option apioption ap
2021-08-11 16:58:13
385
原创 浅谈Vue3响应式原理
实现响应式思路响应式的思路一般都是这样一个模型定义某个数据为响应式数据，它会拥有收集访问它的函数的能力定义观察函数，在这个函数内部去访问响应式数据，访问到响应式数据的某个key的时候，会建立一个依赖关系key -> reaction观察函数检测到响应式数据的key的值更新的时候，会去重新执行一遍它所收集的所有reaction观察函数我们看个例子：// 响应式数据const state = reactive({ count: 0, age: 18})// 观察函数co
2021-08-10 21:12:11
534
原创 浅谈sketch插件二
sketch是什么？Sketch是 Mac系统才有的软件，可以理解为精简版的PS ，比PS更适合 UI设计，Sketch 插件开发的语言是类Javascript ，而 Sketchup是一款三维建模软件，一般用于建筑设计、景观设计还有游戏场景设计等，插件开发是用的 ruby语言。完成 sketch的插件开发指南这个系列，我也会开始写Sketchup插件开发指南sketch的主要对象所有的关于 sketch对象的操作，都是通过 context 来的。context 的document 对象，oc 对
2021-07-22 14:51:23
675
1
原创 浅谈微前端
什么是微前端简单来说就是系统要模块化，通过不同的模块组合构建我们的应用，不同的模块迁移成子应用，最终构建成整个大的应用项目。微前端适合一些巨石应用的项目。官方一些来说就是微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。一个完整应用划分成一个主应用和一个或多个微应用，应用间相互独立，可相互通信微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用。微前端是一种架构模式，用于构建可扩展的 Web 应用程序，该应用程序随着您的开发团队的发展而增长，
2021-07-21 17:21:08
385
原创 sketch插件开发
运行脚本使用sketch内置脚本编辑器运行脚本创建插件安装// 全局安装skpm脚手架cnpm install -g skpm// 查看使用说明以查看所有可用的命令skpm --help创建插件模版cd 文件夹skpm create my-plugin// skpm将自动将一个符号链接添加到Sketch插件安装文件夹，使插件立即在Sketch中可用插件模版目录.├── README.md├── assets│ └── icon.png├── my-plugi
2021-07-20 18:59:55
881
原创 初识shell脚本
shell是什么？Shell是一个用C语言编写的程序，它是用户使用Linux的桥梁;Shell既是一种命令语言，又是一种程序设计语言;Shell是指一种应用程序，这个应用程序提供了一个界面，用户通过这个界面访问 Linux 内核的服务shell脚本有sh、bash、ksh、csh、zsh等等，不同的shell脚本有自己的特点，但用法基本上是差不多的，Mac自带shell,可以用cat /etc/shells去查看，文章主要围绕bash展开。shell脚本一般文件后缀是.sh形式的。哪些人需
2021-07-07 11:57:47
125
原创 git submodule
什么是git submodule?有种情况我们经常会遇到：某个工作中的项目需要包含并使用另一个项目。 也许是第三方库，或者你独立开发的，用于多个父项目的库。 现在问题来了：你想要把它们当做两个独立的项目，同时又想在一个项目中使用另一个。Git通过子模块来解决这个问题。 子模块允许你将一个Git仓库作为另一个Git仓库的子目录。 它能让你将另一个仓库克隆到自己的项目中，同时还保持提交的独立。如何使用常见命令git submodule add xxxxxxx.git shares-folder，
2021-07-05 18:30:42
3070
原创 前端持续集成部署CI/CD
什么是持续集成/持续部署（CI/CD）？简单理解就是把代码测试、打包、发布等工作交给一些工具来自动完成。这样可以提高效率，减少失误，开发人员只需要关心开发和提交代码到git就可以了。CI/CDCI，Continuous Integration，为持续集成。即在代码构建过程中持续地进行代码的集成、构建、以及自动化测试等；有了 CI 工具，我们可以在代码提交的过程中通过单元测试等尽早地发现引入的错误；CD，Continuous Deployment，为持续交付。在代码构建完毕后，可以方便地将新版本部署
2021-07-05 14:12:37
1324
原创 Linux常用命令
Linux常用命令文件管理ls使用最高的频率的命令之一参数描述-a显示所有文件及目录（包括以 . 开头的隐藏文件）-l使用长格式列出文件及目录-r将文件以相反次序显示（默认按照英文字母次序）-t根据最后的修改时间排序-A同 -a，但是不列出 .（当前目录）以及 …（父级目录）-S根据文件大小排序-R递归列出所有子目录ls -l加option -l它展示了权限，属主，属组，大小，时间，文件名称drwx------@ 3
2021-07-01 13:22:17
283
原创 浅谈js内存泄露和垃圾回收机制
什么是GC?GC是Garbage Collection的缩写，表示垃圾回收。在程序工作过程中，会产生很多’垃圾’，这些垃圾是程序不用的内存空间。GC就是负责收走垃圾的，由于GC工作在JavaScript引擎内部，因此对前端开发者来说，GC在“一定程度上”是悄无声息工作的，是不可见的。GC主要做什么？找到内存空间中的垃圾回收垃圾，让程序员能再次利用这部分空间所有语言都有GC吗？不是所有语言都有GC，相对来说，高级语言里面一般有GC，比如Java、JavaScript、Python，没有GC的话
2020-10-30 11:43:51
202
原创 webpack初识
本文主要讨论webpack4的基础配置信息。webpack是什么？webpack可识别ES6 module模块引入方式(import引入语句)、CommonJs模块或者AMD、CMD等，即是一个模块打包工具，可以识别任何模块引入的语法，是基于node.js开发的模块打包工具，本质上是由node实现的。本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency gr
2020-09-17 20:22:30
186
原创 webRTC入门概览
什么是webRTCWebRTC（Web Real-Time Communications）是由谷歌开源并推进纳入W3C标准的一项音视频技术，旨在通过点对点的方式，在不借助中间媒介的情况下，实现浏览器之间的实时音视频通信。与Web经典的B/S架构(即浏览器和服务器架构模式)最大的不同是WebRTC的通信不经过服务器，而直接与客户端连接，在节省服务器资源的同时，提高通信效率。信令服务器信令(signaling)服务器，是一个帮助双方通信建立连接的中间人，WebRTC并没有规定信令服务器的标准，即开发
2020-08-20 16:46:35
440
1
原创 浅谈监控静态资源加载错误
如何监控前端静态资源加载情况？正常情况下，html页面中主要包含的静态资源有：js、css、图片文件，这些文件加载失败将直接对页面造成影响甚至瘫痪，所有我们需要把他们统计出来。我们只统计资源加载出错的情况。资源加载错误的捕获方法资源加载错误通常是找不到文件或者是文件加载超时造成的。回调方法onerror(Object.onerror)：该方法在静态资源跨域加载时是无法获取报错信息的。var img=document.getElementById('#img');img.onerror = f
2020-07-16 20:48:56
3809
原创 我理解的函数节流和防抖
为什么需要函数防抖和函数节流？在浏览器中某些计算和处理要比其他的昂贵很多。例如DOM操作比起非DOM交互需要更多的内存和CPU占用时间。连续进行过多的DOM操作可能会导致浏览器挂起，甚至崩溃；例如当调整浏览器大小的时候，resize事件会连续触发；如果在resize事件内部进行DOM操作，高频率的更改可能会导致浏览器崩溃；为了解决上面的问题，就有了函数节流和防抖。什么是函数防抖和函数节流？防抖(debounce)和节流(throttle)都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似
2020-07-03 10:55:42
122
原创 websocket初识
为什么需要 WebSocket？我们已经有HTTP协议了，为什么还需要另一个协议？它能给我们带来什么好处呢？原因是：HTTP协议有一个缺陷：通信只能由客户端发起，做不到服务器主动向客户端推送信息。这种单向请求的特点意味着如果服务器有连续的状态变化，客户端获取就会变的非常麻烦，只能使用轮询的方法获取，其中最典型的就是聊天场景了。而websocket是服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话。短轮询（Polling）短轮询的实现思路是浏览器端每隔几秒钟向服务
2020-05-28 16:37:23
144
原创 浅谈Node的异步I/O
本文章是通过阅读深入浅出Node.js这本书写的总结，有什么问题，欢迎大家指出。为什么要异步 I/O异步I/O为何在Node里这么重要，这和Node面向网络设计有关。现如今Web应用已不再是单台服务器就能胜任的时代了，在跨网络的结构下，并发已经是现代编程中的标准配备了。具体到实处，可从用户体验和资源分配这两个方面说起。用户体验在现如今跨网络的结构下，并发已经是现代编程中的标配了；在浏览器中JavaScript在单线程上执行，而且它还与UI渲染共用一个线程。这意味着JavaScript在执行的时候
2020-05-27 16:39:05
249
原创 浅谈javascript深拷贝和浅拷贝
深浅拷贝在我们平常开发中也会经常用到，下来我们来具体谈谈深浅拷贝。深浅拷贝初步认识我们知道javascript中一般有按值传递和按引用传递两种复制方式:按值传递的是基本数据类型Number,String,Boolean,Null,Undefined,Symbol，一般存放于内存中的栈区，存取速度快，存放量小；按引用传递的是引用类型Object,Array,Function，一般存放与内存中的堆区，存取速度慢，存放量大，其引用指针存于栈区，并指向引用本身。我们经常说的深浅拷贝是针对引用类
2020-05-25 20:19:08
323
原创 NodeJs中内存机制
node对内存泄露十分敏感，因为一旦我们线上有成千上万的大流量，即使是一个字节的内存泄露也会造成堆积，垃圾回收过程中会耗费很多时间进行对象扫描，导致我们的应用响应缓慢，直到进程内存溢出，整个应用崩溃。一般情况下日常开发中我们应该不会遇到上述这种情况，不过一旦遇到的话还是需要引起我们的特别关注。v8的内存机制内存的限制node不像其他后端语言，对内存的使用没有大小限制。在node中使用内存，其实只能使用到系统的一部分内存，这是因为node使用了本来运行在浏览中的v8引擎。64位系统 1.4GB3
2020-05-24 19:14:36
1248
原创 图片水平、垂直翻转
最近有个需求需要实现图片的水平、垂直翻转功能，开发完之后感觉挺有意思的，就来总结一下css实现图片翻转功能利用css动画属性rotate旋转来实现：水平翻转：transform: rotateY(180deg); /* 水平镜像翻转 */垂直翻转：transform: rotateX(180deg); /* 垂直镜像翻转 */这里rotateY(180deg) 表示元素...
2020-04-12 20:03:55
2356
原创 vue通过自定义指令实现拖拽功能
vue拖拽自定义指令在实现拖拽功能之前，首先需要理解鼠标事件的这几个属性clientY、pageY、screenY、layerY、offsetY怎么用，以及彼此之间有什么区别clientY 指的是鼠标相对于浏览器视口左上角的偏移(即距离可视页面左上角的距离，clientY在页面无滚动条的情况下值等同于pageY)pageY 指的是鼠标相对于页面左上角的偏移 (其值不会受滚动条的响)IE9之...
2020-04-11 19:42:11
1606
原创 canvas实现涂鸦功能
本文主要实现了canvas涂鸦功能，包括涂鸦，前进后退、清除画布以及画笔大小修改。实现思路主要是监听鼠标按下、移动、松开事件，将鼠标按下的值赋值给moveTo的x和y值，作为起始位置。在移动事件中，将鼠标距离可视区x和y值赋给lineTo，再将路径闭合即可。canvas 涂鸦API及属性ctx.beginPath(): 开始一条路径，或重置当前的路径ctx.moveTo(x,y): 把...
2020-03-24 22:19:50
1104
原创 javascript数组去重
数组去重在面试和工作中都是比较容易见到的问题，在这里我们介绍一些数组去重的方法，和大家一起分享一下，如果有的地方不对，大家可以指出来，共同学习。方法一：使用双重for循环这个方法是非常经典的一个数组去重方式，使用比较方式，用数组的第一位和后一位进行比较，如果相等，则用splice方法删除掉当前一位;该方法虽然在大型数组去重的性能上面有一定缺陷，但是这个方法容易理解和应用，所以使用的人还是蛮多的...
2019-10-27 17:31:25
131
原创 我理解的promise
什么是Promise?Promise是JS异步编程中的重要概念，异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一.常见异步编程方案回调函数事件监听发布/订阅Promise对象回调函数我们看下回调函数解决方案，对于回调函数，我们用ajax获取数据时 都是以回调函数方式获取的数据；我们来看个例子：$.get(url, (res) => { ...
2019-10-26 18:05:52
143
原创 浅谈async/await
背景ES7提出的async/await是JavaScript为了解决异步问题而提出的一种解决方案，没有更多的回调，许多人将其称为异步的终极解决方案。async函数是Generator函数的语法糖。使用关键字async表示，在函数内部使用await表示异步。JavaScript的发展也经历了回调、Promise、async/await三个阶段，该文章写了我自己对于async/await的理解。不...
2019-10-19 18:59:20
252
转载 新手小白如何在window把自己的项目上传到github
作为一个开发者，写博客，上传项目到github好像是不可不会的技能，很多有经验的老司机都会这么建议你。本宝宝第一次要把项目传到github的时候，确实有点蒙蔽，什么鬼，传个东西有必要这么难吗？git 是有gui的，但是网上一搜，一大堆，这里宝宝介绍一个比较好用也是使用人数比较多的gui，叫做Source Tree，大家自己去网上下载下很快的，今天宝宝要说的是用命令行上传代码，很高大上有木有
2017-07-16 08:03:34
356
原创 3.前端常见js问答题
一.进程和线程的区别1. 一个程序至少有一个进程,一个进程至少有一个线程2. 线程的划分尺度小于进程，使得多线程程序的并发性高3. 另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率4. 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应
2017-07-09 09:40:07
280
原创 2.前端常见面试编程题整理
1.输出字符串中出现次数最多的var str='fdadffddfdffj'; var obj={}; for(var i=0;i var cha=str.charAt(i);if(!obj.hasOwnProperty(cha)){ obj[cha]=0;}var num=obj[cha];obj[cha]=num+1; } var resul
2017-07-08 21:09:33
1171
原创 1.前端面试js经典题目
1. png24位的图片在iE6浏览器上出现背景解决方案：做成PNG8，也可以引用一段脚本处理.2. 浏览器默认的margin和padding不同解决方案：加一个全局的 *{margin:0;padding:0;} 来统一。3. IE6双边距bug：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。
2017-07-08 10:36:38
288
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人