- 博客(56)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 将闲置电脑搭建成私有云盘，使用ipv6外网使用
最近买了一台台式电脑，然后想安装photoshop cc最新版，在找到资源下载时，需要百度网盘下载，非会员的我欲哭无泪，100kb的下载速度，等它下完要什么时候去了，只能开了几个小时的会员。虽然将它存在了自己的硬盘上，但是要是我到其他地方又想安装这个，不可能随时带个硬盘上吧，反正我这个台式机平时低频使用，就把它利用起来，搭建一个自己的私有云盘吧，云盘平台还存在数据丢失的风险！然后构思了方案：1、利用开源云盘程序部署在电脑开启服务->2、使用内网穿透将服务暴露到外网->3、使用向日葵远程关机电脑
2020-12-12 14:37:46
23528
11
原创 umijs 服务端渲染（SSR） 指南
Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。Umi 是蚂蚁集团的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。
2024-06-06 12:00:56
1285
原创 如何向开源项目提交PR（pull rquest）
Pull Request（PR）是 GitHub 上用于请求将代码合并到主分支的机制。就是在 GitHub 上提交代码，然后向开源项目发起请求，让开源项目将代码合并到主分支。
2024-06-05 14:35:49
998
原创 Echarts-丝带图
丝带图是Power BI中独有额可视化视觉对象，它的工具提示能展示指标当期与下期的数据以及排名。需求：使用丝带图展示"2022年点播订单表"不同月份不同点播套餐对应订单数据。
2024-04-19 17:42:51
1355
原创 uni-app开发小程序实用技巧
uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。......
2022-07-26 11:16:14
1430
原创 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
469
1
原创 git使用经验
git使用经验从工作到现在都一直使用git作为代码管理工具，总结一下工作中常用的场景和它们相关的命令，还有自己的一些见解！一、相关平台以下平台都是使用git作为代码管理工具的，并且各有自己特色，我4种都有使用，都算稳定可靠！gitlab通常自建代码托管，都首选gitlab，搭建公司自己的代码管理平台，能保证数据安全性，稳定性嘛就看公司人咋样了码云码云是开源中国 Git 代码托管平台，也支持svn，带宽都高，非常放心托管codingcoding以前只提供给个人5个免费仓库，被腾讯
2021-01-23 21:18:19
281
原创 基于百度翻译API的node插件
基于百度翻译API的node插件背景做过国际化的项目就明白要把每处的文案翻译成不同的语言版本，如果只是一点点，自己去百度上翻译成对应语言版本，copy过来就ok了，但是如果这个项目文案特别多的话，自己去翻译，可能会烦死umijs如果构建国际化，会有一个locals的目录，里面存放前端项目中不需要存进数据库的各种语言版本文件，我就想实现只写中文的，其他版本通过nodejs+百度翻译api直接生成一、百度API文档地址需要注册开发者（使用时需要开发者的appid+密钥），并开通通用翻译API，每
2021-01-23 21:13:02
1540
原创 Fiddler抓包工具
Fiddler抓包工具Fiddler是一款免费的windows系统的抓包工具，可以将网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作。我是在项目中需要代理项目的前端打包文件时接触到的，目前都在使用，为了防止忘记了一些功能，还是记录下来。一、下载安装https://www.telerik.com/download/fiddler官网下载的话要翻墙，还是在国内找资源吧，还是很多地方都有链接的！二、原理Fiddler是位于客户端和服务器端之间的HTTP代理， 它能够记录客户端和服务器之间的所
2021-01-23 21:10:22
380
原创 盘点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
604
原创 内网、外网、内网穿透、端口映射、IPV4、IPV6场景探讨
先附上各自概念，概念性的东西对于我们有一个大概的认识，那么实际使用与生活中又有哪些场景，来一一列举一些，了解下互联网的魅力！一、内网内网也叫局域网（Local Area Network，LAN），是在一个局部的地理范围内（如bai一个学校、工厂和机关内），一般是方圆几千米以内，将各种计算机，外部设备和数据库等互相联接起来组成的计算机通信网。如何形成内网1、最常见的通过路由器内网通信路由器只需一个外网IP就可以供下面的N多电脑联网，基于ipv4协议分配给每台连接的终端一个内网ip，关闭防火墙的
2020-12-12 14:36:53
11381
2
原创 Chrome控制台使用技巧
一、常用功能1、查看BOM，变量，简单计算2、copy和saving你可以通过全局的方法 copy() 在 console 里复制任何能拿到的资源，比如一些嵌套层级深的数据结构，使用copy可以直接拿到假如你在 console 中打印了一堆数据 (例如你在 App 中计算出来的一个数组) ，然后想对数据做额外的操作，比如刚刚说的 copy (在不影响它原来值的情况下) 。 那就可以将它转换成一个全局变量，只需要 右击 它，并选择 “ Store as global variable ”
2020-07-01 22:41:08
1791
原创 前端体验优化
一、UED用户体验设计（英语：User Experience Design），是以用户为中心的一种设计手段，以用户需求为目标而进行的设计。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。其目的就是保证：1、对用户体验有正确的预估2、认识用户的真实期望和目的3、在功能核心还能够以低廉成本加以修改的时候对设计进行修正4、保证功能核心同人机界面之间的协调工作，减少BUG。二、视觉体验前端出现的BUG基本上在测试阶段就能被发现，然后得到更正，实在没发现的，也无法从
2020-07-01 22:39:57
1192
原创 前端性能优化
浏览器渲染机制Html解析成DOM树，Css解析成CSS树，将DOM树与CSSDOM规则树合并在一起生成Render树，遍历渲染树开始布局，计算每个节点的位置大小信息，将渲染树每个节点绘制到屏幕阻塞渲染当浏览器遇到一个script标记时，DOM构建将暂停，直至脚本完成执行，然后继续构建DOM。每次去执行JavaScript脚本都会严重的阻塞DOM树的构建，如果JavaScript脚本还操作了CSSOM，而正好这个CSSOM还没下载和构建，浏览器甚至会延迟脚本执行和构建DOM，直至完成其CSSOM
2020-07-01 22:39:13
962
原创 网页 SEO 优化（搜索引擎优化）
网页 SEO 优化什么是 SEO？全称：Search English Optimization，搜索引擎优化利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益；SEO 包含站外 SEO 和站内 SEO 两方面；为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理...
2020-03-15 22:16:53
3983
原创 react 拖拽排序组件
react 拖拽排序组件git 仓库源码基于 html5 的 dragable 属性，可以自己封装个拖拽组件，react 相关的拖拽组件都非常的难以使用。只要掌握拖拽的原理，那么封装个这样的组件也不是难事，我最开始的难点就是，只能知道拖拽后在哪一个 element 上，但是并不知道放在哪个位置上去。最后观察拖拽组件，发现这个放置的位置是跟现在拖拽的元素和最后停留的元素位置上有关系的。安装n...
2020-03-15 18:51:04
3912
7
原创 前端图片裁剪组件
前端图片裁剪组件前端图片裁剪已经是很常见的需求了，在 react 的项目中推荐使用 react-image-crop 库，能勾勒出裁剪区域、宽高比例限制等等，但是还是有很多东西需要我们来做的，比如以下问题：react-image-cropreact-image-crop 的基本使用import ReactCrop from "react-image-crop";import "react...
2020-03-15 17:47:13
1921
原创 前端项目相关规范
前端项目相关规范为什么要规范项目？阅读体验差接手过别人代码的人都深有体会，有的代码动不动 3-5 千行，有的 aa，bb，，cc 的变量命名，还有 a1，a2，a3 的命名，还有换行、空格各种各样的，甚至不换行、不空格的。哎，说多了都是泪，所以这严重影响工作效率和团队协作。简单来说，太过随意的代码会让强迫症患者难以容忍，难以阅读理解的代码有时甚至不如推倒重来。低质量的代码产生 BUG...
2019-12-19 10:13:44
1514
原创 ECharts 在省份地图上定制自定义图标
ECharts 在省份地图上定制自定义图标原型上有个生态分布的板块，就像是每个国家想把国旗插到月球啊，北极，南极之类的，然后点击右侧的 lenged 能够打开关闭相应的部分。具体情况如下：要想实现这个功能需要以下几个步骤：引入 echartsnpm install --save echarts然后在文件中引入import echarts from "echarts";注册该省份...
2019-12-13 16:26:12
11323
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
4063
原创 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
2352
原创 EventLoop
EventLoopeventLoop 是由 JS 的宿主环境（浏览器）来实现的；事件循环可以简单的描述为以下四个步骤:/*1. 函数入栈，当Stack中执行到异步任务的时候，就将他丢给WebAPIs,接着执行同步任务,直到Stack为空；2. 此期间WebAPIs完成这个事件，把回调函数放入队列中等待执行（微任务放到微任务队列，宏任务放到宏任务队列）3. 执行栈为空时，Event Loo...
2019-10-30 14:24:03
1565
原创 网络安全与常见攻击形式
常见web安全攻防网站安全的重要性大家能达成一致意见，作为web作业人员必须的在设计和开发的过程中考虑安全问题，并且能有效防御。这篇文章主要的内容就是分析几种常见的攻击的类型以及防御的方法。服务器之前听说朋友公司服务器使用windows系统，我大吃一惊，因为windows是用户交互系统，图形界面就需要占很多内存，而且稳定性不足，你windows电脑要是一个月不关机重启一定卡的要死。所以以下几...
2019-08-20 11:32:07
4069
原创 如何编写一个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
4757
原创 react相关技术总结
react相关技术总结react中文文档脚手架created-react-appCreate React App是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。它本身集成了Webpack，并配置了一系列内置的loader和默认的npm的脚本，可以很轻松的实现零配置就可以快速开发React的应用。基本上需要自己去搭建项目结构，许多东西都不包括。├...
2019-08-01 16:01:16
2552
原创 Sequelize 操作数据库--nodejs的ORM框架
Sequelize 操作数据库的ORM框架一般在操作数据库时，并不会直接使用sql语句来操作，而是使用ORM框架与数据库建立映射关系，Sequelize就是nodejs服务中常用的一个orm库，orm框架具备以下特点：优点1、只需要面向对象编程, 不需要面向数据库编写代码： 对数据库的操作都转化成对类属性和方法的操作，不用编写各种数据库的sql语句2、实现了数据模型与数据库的解耦，屏蔽...
2019-06-28 15:12:39
4799
原创 npm操作与发布npm包
npm操作什么是npm?npm是javascript的包管理工具，是前端模块化下的一个标志性产物。在项目中，会使用npm下载很多库和包，如果自己造轮子可能会赶不上项目的预期npm安装安装nodejs就会附带上npm包管理工具了使用 -v 查看下版本号npm -v切换npm源国内使用淘宝镜像能下载包的时候比较快，因为npm是国外服务器，速度缓慢，我们一般都是配置成淘宝镜像，方法有...
2019-06-06 15:36:19
1218
原创 基于threejs + CSS3DRenderer的3D全景
基于threejs + CSS3DRenderer的3D全景可以理解为将相机置放在一个立方体内，调整相机的位置可以拍摄到场景中不同内容。本篇是通过CSS3DRenderer来实现全景浏览，分别铺满一个立方体盒子的六个面来实现。下面分别就是左、右、上、下、后、前六个面使用代码实现：<!DOCTYPE html><html lang="en"><...
2019-05-24 17:18:32
6308
10
原创 canvas与傅里叶变换
canvas与傅里叶变换如果看了此文你还不懂傅里叶变换，那就过来掐死我吧【完整版】看到下面这幅图，我就想着用canvas来将它画出来。画圆function createDisc(r,color,x,y){ ctx.beginPath() ctx.arc(x||0,y||0,r,0,Math.PI*2,true) ctx.strokeStyle = color || '#0...
2019-05-22 23:23:08
1734
原创 Canvas使用
Canvas使用canvas是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)。像echarts、antv就是使用canvas来绘制图表的标签首先要有一个canvas标签存在于html中<canvas id="charts" width="150" height="150">&l...
2019-05-22 14:54:01
2739
原创 使用Mockjs来创造虚拟数据
加入QQ群：864680898，一起学习进步！点击群名可查看本人网站，有最新文章！使用Mockjs来创造虚拟数据安装<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>如果你是后端nodejs项目中使用， 使用npm来安装npm install --save...
2019-05-13 16:01:52
1908
原创 Javascript数据结构
加入QQ群：864680898，一起学习进步！点击群名可查看本人网站，有最新文章！Javascript数据结构数据结构是指相互之间存在着一种或多种关系的数据元素的集合和该集合中数据元素之间的关系组成。记为：Data_Structure=(D,R)，其中D是数据元素的集合，R是该集合中所有元素之间的关系的有限集合数组数组存储一系列同一种数据类型的值。但在JavaScript里，也可以在数组...
2019-05-05 14:12:26
2054
原创 Javascript设计模式
加入QQ群：864680898，一起学习进步！点击群名可查看本人网站，有最新文章！前端设计模式设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖石一样。项目中合理地运用设计模式...
2019-04-25 17:23:36
1815
原创 Javascript原型 与 this
加入QQ群：864680898，一起学习进步！点击群名可查看本人网站，有最新文章！Javascript原型 与 this在javascript中万物皆对象call 和 applycall() call(thisObj，Object)定义：调用一个对象的一个方法，以另一个对象替换当前对象。apply() apply(thisObj，[argArray])定义：应用某一对象的一个方...
2019-04-08 11:00:18
1488
全国省市区的名称、经纬度、等级的JSON文件
2019-11-11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人