技术
文章平均质量分 80
qq_42036203
个人网站:https://www.mysden.com
展开
-
uni-app开发小程序实用技巧
uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。......原创 2022-07-26 11:16:14 · 1336 阅读 · 0 评论 -
配置vue3项目的eslint,Git提交时校验
配置eslint及git push是检验原创 2022-07-26 11:12:55 · 1450 阅读 · 0 评论 -
虚拟列表(附带动态加载)原理及实现
在前端的业务中,存在以下几种情况需要用到虚拟列表,旨在解决数据量庞大时浏览器渲染性能瓶颈原创 2022-07-26 11:11:16 · 4473 阅读 · 0 评论 -
GIT特殊场景
工作中一些特殊git操作原创 2022-07-26 11:07:47 · 126 阅读 · 0 评论 -
hooks中一些常见用法
hooks的一些常见用法原创 2022-07-06 12:00:44 · 962 阅读 · 0 评论 -
rollup配置工具库开发环境
使用rollup配置ts打包前端工具库,类似lodash,dayjs之类的函数工具库,丰富函数编程的生态。Git仓库我配置好的仓库地址放在github的:https://github.com/mySkey/myskey一、生成package.json我们可以使用以下命令创建一个默认的package.json:npm init -y生成以下内容:{ "name": "ktools", "version": "1.0.0", "description": "", "main"原创 2021-02-06 11:25:40 · 399 阅读 · 1 评论 -
git使用经验
git使用经验从工作到现在都一直使用git作为代码管理工具,总结一下工作中常用的场景和它们相关的命令,还有自己的一些见解!一、相关平台以下平台都是使用git作为代码管理工具的,并且各有自己特色,我4种都有使用,都算稳定可靠!gitlab通常自建代码托管,都首选gitlab,搭建公司自己的代码管理平台,能保证数据安全性,稳定性嘛就看公司人咋样了码云码云是开源中国 Git 代码托管平台,也支持svn,带宽都高,非常放心托管codingcoding以前只提供给个人5个免费仓库,被腾讯原创 2021-01-23 21:18:19 · 209 阅读 · 0 评论 -
基于百度翻译API的node插件
基于百度翻译API的node插件背景做过国际化的项目就明白要把每处的文案翻译成不同的语言版本,如果只是一点点,自己去百度上翻译成对应语言版本,copy过来就ok了,但是如果这个项目文案特别多的话,自己去翻译,可能会烦死umijs如果构建国际化,会有一个locals的目录,里面存放前端项目中不需要存进数据库的各种语言版本文件,我就想实现只写中文的,其他版本通过nodejs+百度翻译api直接生成一、百度API文档地址需要注册开发者(使用时需要开发者的appid+密钥),并开通通用翻译API,每原创 2021-01-23 21:13:02 · 1246 阅读 · 0 评论 -
Fiddler抓包工具
Fiddler抓包工具Fiddler是一款免费的windows系统的抓包工具,可以将网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作。我是在项目中需要代理项目的前端打包文件时接触到的,目前都在使用,为了防止忘记了一些功能,还是记录下来。一、下载安装https://www.telerik.com/download/fiddler官网下载的话要翻墙,还是在国内找资源吧,还是很多地方都有链接的!二、原理Fiddler是位于客户端和服务器端之间的HTTP代理, 它能够记录客户端和服务器之间的所原创 2021-01-23 21:10:22 · 267 阅读 · 0 评论 -
盘点ES6之后每次版本更新
盘点平常使用频繁,对开发者有重大意义的变更,无感的基本就没写,感兴趣的可以参考这篇 ES3到ES11都增加了什么ES61、let 和 const新的申明变量的方式和变量的作用域区别1:var声明的变量会挂载在window上,而let和const声明的变量不会区别2:var声明的变量存在变量提升,而let和const不存在变量提升区别3:let和const声明形成快作用域区别4:同一作用域下的let和const不能声明同名变量,而var可以2、字符串方法和模板字符串// 模板字符串原创 2020-12-12 14:57:50 · 533 阅读 · 0 评论 -
将闲置电脑搭建成私有云盘,使用ipv6外网使用
最近买了一台台式电脑,然后想安装photoshop cc最新版,在找到资源下载时,需要百度网盘下载,非会员的我欲哭无泪,100kb的下载速度,等它下完要什么时候去了,只能开了几个小时的会员。虽然将它存在了自己的硬盘上,但是要是我到其他地方又想安装这个,不可能随时带个硬盘上吧,反正我这个台式机平时低频使用,就把它利用起来,搭建一个自己的私有云盘吧,云盘平台还存在数据丢失的风险!然后构思了方案:1、利用开源云盘程序部署在电脑开启服务->2、使用内网穿透将服务暴露到外网->3、使用向日葵远程关机电脑原创 2020-12-12 14:37:46 · 20074 阅读 · 10 评论 -
内网、外网、内网穿透、端口映射、IPV4、IPV6场景探讨
先附上各自概念,概念性的东西对于我们有一个大概的认识,那么实际使用与生活中又有哪些场景,来一一列举一些,了解下互联网的魅力!一、内网内网也叫局域网(Local Area Network,LAN),是在一个局部的地理范围内(如bai一个学校、工厂和机关内),一般是方圆几千米以内,将各种计算机,外部设备和数据库等互相联接起来组成的计算机通信网。如何形成内网1、最常见的通过路由器内网通信路由器只需一个外网IP就可以供下面的N多电脑联网,基于ipv4协议分配给每台连接的终端一个内网ip,关闭防火墙的原创 2020-12-12 14:36:53 · 10280 阅读 · 2 评论 -
Chrome控制台使用技巧
一、常用功能1、查看BOM,变量,简单计算2、copy和saving你可以通过全局的方法 copy() 在 console 里复制任何能拿到的资源,比如一些嵌套层级深的数据结构,使用copy可以直接拿到假如你在 console 中打印了一堆数据 (例如你在 App 中计算出来的一个数组) ,然后想对数据做额外的操作,比如刚刚说的 copy (在不影响它原来值的情况下) 。 那就可以将它转换成一个全局变量,只需要 右击 它,并选择 “ Store as global variable ”原创 2020-07-01 22:41:08 · 1546 阅读 · 0 评论 -
前端体验优化
一、UED用户体验设计(英语:User Experience Design),是以用户为中心的一种设计手段,以用户需求为目标而进行的设计。设计过程注重以用户为中心,用户体验的概念从开发的最早期就开始进入整个流程,并贯穿始终。其目的就是保证:1、对用户体验有正确的预估2、认识用户的真实期望和目的3、在功能核心还能够以低廉成本加以修改的时候对设计进行修正4、保证功能核心同人机界面之间的协调工作,减少BUG。二、视觉体验前端出现的BUG基本上在测试阶段就能被发现,然后得到更正,实在没发现的,也无法从原创 2020-07-01 22:39:57 · 995 阅读 · 0 评论 -
前端性能优化
浏览器渲染机制Html解析成DOM树,Css解析成CSS树,将DOM树与CSSDOM规则树合并在一起生成Render树,遍历渲染树开始布局,计算每个节点的位置大小信息,将渲染树每个节点绘制到屏幕阻塞渲染当浏览器遇到一个script标记时,DOM构建将暂停,直至脚本完成执行,然后继续构建DOM。每次去执行JavaScript脚本都会严重的阻塞DOM树的构建,如果JavaScript脚本还操作了CSSOM,而正好这个CSSOM还没下载和构建,浏览器甚至会延迟脚本执行和构建DOM,直至完成其CSSOM原创 2020-07-01 22:39:13 · 876 阅读 · 0 评论 -
网页 SEO 优化(搜索引擎优化)
网页 SEO 优化什么是 SEO?全称:Search English Optimization,搜索引擎优化利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是:为网站提供生态式的自我营销解决方案,让其在行业内占据领先地位,获得品牌收益;SEO 包含站外 SEO 和站内 SEO 两方面;为了从搜索引擎中获得更多的免费流量,从网站结构、内容建设方案、用户互动传播、页面等角度进行合理...原创 2020-03-15 22:16:53 · 2990 阅读 · 0 评论 -
react 拖拽排序组件
react 拖拽排序组件git 仓库源码基于 html5 的 dragable 属性,可以自己封装个拖拽组件,react 相关的拖拽组件都非常的难以使用。只要掌握拖拽的原理,那么封装个这样的组件也不是难事,我最开始的难点就是,只能知道拖拽后在哪一个 element 上,但是并不知道放在哪个位置上去。最后观察拖拽组件,发现这个放置的位置是跟现在拖拽的元素和最后停留的元素位置上有关系的。安装n...原创 2020-03-15 18:51:04 · 3785 阅读 · 7 评论 -
前端图片裁剪组件
前端图片裁剪组件前端图片裁剪已经是很常见的需求了,在 react 的项目中推荐使用 react-image-crop 库,能勾勒出裁剪区域、宽高比例限制等等,但是还是有很多东西需要我们来做的,比如以下问题:react-image-cropreact-image-crop 的基本使用import ReactCrop from "react-image-crop";import "react...原创 2020-03-15 17:47:13 · 1870 阅读 · 0 评论 -
前端项目相关规范
前端项目相关规范为什么要规范项目?阅读体验差接手过别人代码的人都深有体会,有的代码动不动 3-5 千行,有的 aa,bb,,cc 的变量命名,还有 a1,a2,a3 的命名,还有换行、空格各种各样的,甚至不换行、不空格的。哎,说多了都是泪,所以这严重影响工作效率和团队协作。简单来说,太过随意的代码会让强迫症患者难以容忍,难以阅读理解的代码有时甚至不如推倒重来。低质量的代码产生 BUG...原创 2019-12-19 10:13:44 · 1480 阅读 · 0 评论 -
ECharts 在省份地图上定制自定义图标
ECharts 在省份地图上定制自定义图标原型上有个生态分布的板块,就像是每个国家想把国旗插到月球啊,北极,南极之类的,然后点击右侧的 lenged 能够打开关闭相应的部分。具体情况如下:要想实现这个功能需要以下几个步骤:引入 echartsnpm install --save echarts然后在文件中引入import echarts from "echarts";注册该省份...原创 2019-12-13 16:26:12 · 11071 阅读 · 2 评论 -
前端图片裁剪 react-image-crop
前端图片裁剪 react-image-crop前端图片裁剪已经是很常见的需求了,在 react 的项目中推荐使用 react-image-crop 库,能勾勒出裁剪区域、宽高比例限制等等,但是还是有很多东西需要我们来做的,比如以下问题:react-image-cropreact-image-crop 的基本使用import ReactCrop from "react-image-crop"...原创 2019-11-26 11:08:29 · 3889 阅读 · 0 评论 -
Quill 富文本编辑器二次封装
Quill 富文本编辑器二次封装Quill 是一个很流行的富文本编辑器,github 上 star 大约 21k。但是很少项目中使用时直接使用它,都要对其进行二次封装,你作为一个页面仔是挡不住有想法的产品经理的。安装 quill 库原生应用中使用<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="style...原创 2019-11-26 10:32:30 · 2185 阅读 · 0 评论 -
EventLoop
EventLoopeventLoop 是由 JS 的宿主环境(浏览器)来实现的;事件循环可以简单的描述为以下四个步骤:/*1. 函数入栈,当Stack中执行到异步任务的时候,就将他丢给WebAPIs,接着执行同步任务,直到Stack为空;2. 此期间WebAPIs完成这个事件,把回调函数放入队列中等待执行(微任务放到微任务队列,宏任务放到宏任务队列)3. 执行栈为空时,Event Loo...原创 2019-10-30 14:24:03 · 1451 阅读 · 0 评论 -
如何编写一个d.ts文件
如何编写一个d.ts文件.d.ts文件是ts模块,变量一系列的申明文件。比如要使用react,就需要安装"@types/react",之后还会有提示。自定义全局声明文件,往往在根目录新建一个typings.d.ts文件全局类型变量有一个全局变量,那对应的d.ts文件里面这样写。如果一个.ts、.d.ts文件如果没有用到import或者export语法的话,那么最顶层声明的变量就是全局变...原创 2019-08-08 09:54:46 · 4576 阅读 · 0 评论 -
网络安全与常见攻击形式
常见web安全攻防网站安全的重要性大家能达成一致意见,作为web作业人员必须的在设计和开发的过程中考虑安全问题,并且能有效防御。这篇文章主要的内容就是分析几种常见的攻击的类型以及防御的方法。服务器之前听说朋友公司服务器使用windows系统,我大吃一惊,因为windows是用户交互系统,图形界面就需要占很多内存,而且稳定性不足,你windows电脑要是一个月不关机重启一定卡的要死。所以以下几...原创 2019-08-20 11:32:07 · 3877 阅读 · 0 评论 -
git快速入门使用
git使用迷你书Git(读音为/gɪt/。)是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。 [1] Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件一、安装gitwindow上安装 – 前往git官网下载安装程序linux上安装 sudo apt-get install git...原创 2019-03-04 15:24:44 · 1542 阅读 · 0 评论 -
react相关技术总结
react相关技术总结react中文文档脚手架created-react-appCreate React App是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。它本身集成了Webpack,并配置了一系列内置的loader和默认的npm的脚本,可以很轻松的实现零配置就可以快速开发React的应用。基本上需要自己去搭建项目结构,许多东西都不包括。├...原创 2019-08-01 16:01:16 · 2490 阅读 · 0 评论 -
rem移动端相对单位
加入QQ群:864680898,一起学习进步!rem移动端相对单位移动端禁用用户缩放&amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0,user-scalable=no&quot;&amp;gt;什么是dpr?devicePixelRatio其实指的是window.devic原创 2019-03-04 15:51:50 · 1727 阅读 · 0 评论 -
搭建linux CentOs7.2的nodejs + mysql + nginx + git环境
加入QQ群:864680898,一起学习进步搭建linux CentOs7.2的nodejs + mysql + nginx + git环境使用集成环境如 lnmp 来安装的话,不适合个人用户,因为我们的服务器配置不高,安装了过多的依赖会影响性能,所以还是只安一些自己需要的一、 git的安装配置和ssh配置(为了安全,设置git用户不能登录)(1)安装gityum install...原创 2019-03-04 15:42:31 · 2007 阅读 · 0 评论 -
分享给大家一个搭建静态博客的工具--vuepress
使用vuePress来建设文档官方文档GIT仓库demo地址一、入门搭建1、 安装yarn,vuepress,使用npm安装vuepress的话会出现这种,当将 VuePress 安装到以 webpack 3.x 作为依赖项的已有项目中时,推荐使用Yarn 而不是 npm。因为在这种情况下,Npm 无法生成正确的依赖关系树。npm install -g yarnyarn glob...原创 2019-03-04 15:31:23 · 1563 阅读 · 0 评论 -
vuex使用,附带一个购物车例子
vue的 vuex 中央仓库vuex购物车示例git地址一、为什么要用vuex?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。小项目没必要使用vuex来做状态管理,引入它得到的收益与成本不成正比通过路由, 使用全局变量 global, 本地存储,及服务端存储就可以解决一般...原创 2019-03-04 15:29:31 · 2242 阅读 · 0 评论 -
es6速记手册
es6速记手册阮一峰es6入门什么是es6?ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。ECMAScript和JavaScript到底是什么关系?很多初学者会感到困惑,简单来说,ECMAScript是JavaScript语言的国际标准,JavaScr...原创 2019-03-04 15:27:19 · 1635 阅读 · 0 评论 -
dva的使用,附带一个Demo
加入QQ群:864680898,一起学习进步!点击群名可查看本人网站,有最新文章!dva的使用官方文档GIT仓库demo地址一、安装 dva-clinpm install dva-cli -g二、创建新应用dva new examplecd examplenpm start三、文件目录结构\mock mock的数据\pulic 存放index.h...原创 2019-03-06 16:57:48 · 3166 阅读 · 0 评论 -
redux + react-redux使用,附带一个Demo
加入QQ群:864680898,一起学习进步!点击群名可查看本人网站,有最新文章!redux + react-redux使用redux中文文档GIT仓库demo地址Why? 为什么要用redux?解决react组件间传值,并且要状态动态更新麻烦的问题。redux就是个中央仓库,将数据存在了一个地方,而且只能通过定义了的方法来更改,保证了数据的唯一性和稳定性一、安装npm ins...原创 2019-03-06 16:55:53 · 1808 阅读 · 0 评论 -
(五)Typescript的项目配置
加入QQ群:864680898,一起学习进步!点击群名可查看本人网站,有最新文章!(五)Typescript的项目配置一、使用tsconfig.json1、不带任何输入文件的情况下调用tsc,编译器会从当前目录开始去查找tsconfig.json文件,逐级向上搜索父目录。2、不带任何输入文件的情况下调用tsc,且使用命令行参数–project(或-p)指定一个包含tsconfig.jso...原创 2019-03-06 13:03:01 · 2086 阅读 · 0 评论 -
(四)Typescript中的泛型 T, 命名空间, 装饰器
加入QQ群:864680898,一起学习进步!点击群名可查看本人网站,有最新文章!(四)Typescript中的泛型 T, 命名空间, 装饰器一、泛型 T为什么要用泛型?可以在函数调用时自由化传入的值和返回的值let showInfo = <T>(val: T): T => val;let myName = showInfo<string>('mySk...原创 2019-03-06 13:01:09 · 2751 阅读 · 0 评论 -
(三)Typescript中的类
加入QQ群:864680898,一起学习进步!点击群名可查看本人网站,有最新文章!(三)Typescript中的类在ECMAScript 6中,JavaScript程序将可以使用这种基于类的面向对象方法。在ts中的话,就更接近与那些成熟的语言 Java, Phpextends 类的继承关键词class Father { surname: string = 'deng'; shape...原创 2019-03-06 13:00:14 · 1515 阅读 · 0 评论 -
(二)Typescript的核心Interface
加入QQ群:864680898,一起学习进步!点击群名可查看本人网站,有最新文章!(二)Typescript的核心Interface在日常开发中会遇到很多在数据类型上不一致导致的错误,接口的作用就是规范你的代码与第三方的类型统一函数形参类型限制函数的形参限制其实就是它的原理let add = (a: number, b: number):number=>a+b;add(1, 1)...原创 2019-03-06 12:16:05 · 1519 阅读 · 0 评论 -
less使用迷你书
加入QQ群:864680898,一起学习进步!less使用迷你书 官方文档什么是less,less做什么Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展Less 可以运行在 Node 或浏览器端我理解它的用途是将css复用性提高less的安装和配置1、 demo练习模式// 1. 全局安...原创 2019-03-04 15:55:55 · 1605 阅读 · 0 评论 -
浅析jquery原理,自己来封装个jQuery使用
加入QQ群:864680898,一起学习进步!点击群名可查看本人网站,有最新文章!自己来封装个jQuery使用相信很多人都是用过jquery,想我当初使用的时候也觉得非常好用,再也不用获取个dom就写那么长。而且我以前每次都会把document打错,编辑器还没得那些检查错误的插件,找个错都找不到。。。不说伤心事了。封装一个函数的时候,我们可以有两条路来:1、我们已经知道调用的时候是什么样...原创 2019-03-07 17:35:08 · 2239 阅读 · 0 评论