- 博客(33)
- 收藏
- 关注
RSS订阅原创 js封装 需要初始化变量，异步变量设置
constructor函数里不允许做异步操作。所以我们通过设置静态方法来执行异步操作，并在静态方法冲实例对象并返回,见方法initUnity()这种方式只能通过new并传入参数，初始化变量，有时候我们需要。js面向对象的开发方式会用到es6class模块。...
2022-07-19 15:06:15
709
原创 前端实现网页选区截图功能
先说说背景公司项目要实现一个网页截图，识别文字的功能思路很简单，前端实现截图，并把图片发送给后台，后台通过调用某度的ocr识别，识别出来文字，然后返回给前段展示。身为前端的我，技术点也就在实现截图了。先在网上查了查网页截图的插件。发现清一色推荐html2canvas原理就是通过canvas截图截全屏，再通过鼠标点击位置，移动距离，抬起位置，重新在新图片上，截图新的图片，并返回base64图片然后用了这个方法，历尽艰辛又解决了图片跨域问题，鼠标反向截图问题，以及新增一个可视化选框，最终返回一个ba
2021-07-01 14:33:22
3670
9
原创 gltf-pipeline压缩gltf大小不变等问题
最近在做web3d的项目，就是把web模型通过webGl展示到浏览器，关于模型制作的方法，模型动画的交互，模型导出gltf的方法，本文主要讲的就是gltf压缩问题，这样可以把gltf模型提及压缩的最小，web显示速度更快。GLTF介绍：首先说下gltf是什么，glTF 称为“ 3D 界的 JPEG”，使用了更优的数据结构，为应用程序实时渲染而生，特别适合web3d的展示。内存更小方便传输。glTF 导出格式有两种后缀格式可供选择：.gltf 和 .glb：.gltf 文件导出时一般会输出两种文件类
2021-06-18 10:45:09
5423
2
原创 mac下安装brew失败或速度很慢
打开命令行运行下面命令/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"
2020-11-20 15:36:36
123
原创 vue全局组件（方法）的封装（component，extend，mixins）区别和用途
组件化是vue非常实用的功能，可以大大提高代码的复用率。比如header组件写一个header.vue，然后在页面上通过import引入，然后在component里注册组件。最后通过标签的方式写在页面上。但是懒惰是一个优秀程序员的天性，我不想引入也不想注册。想直接通过标签就可以使用，甚至直接迪奥戈方法就可以生成一个弹框，这个时候就可以考虑引入全局引入,接下来讲讲他们的封装。需求分析：1.全局表格组件。（通过标签引入，并且可以回调函数）2.警告弹框组件。（通过调用方法直接弹出弹框并且有回调）3
2020-11-19 11:07:10
1334
原创 VSCode常用插件和通用配置
插件Auto Close TagAuto Rename TagBracket Pair ColorizerChinese LanguageEditorConfig for VS CodeeggjsGitLensImage PreviewMaterial Icon ThememinappMonokai ProNGINX Configurationnginx-formatteropen in browserPath IntellisensePret
2020-10-14 17:52:00
564
原创 vue组件样式穿透/deep/ ::v-deep ＞＞＞区别
在写一些vue项目时候，经常会引入一些组件。无论是自定义组件还是引入的外部组件。style标签上都有scoped属性。防止影响到其他页面上的样式。但是又是需要在父组件更改自组件的样式。就要用到组件穿透（也叫深度修改css）。可用的方法有 /deep/ ::v-deep >>>>>>如果项目使用的是css 原生样式,那么你可以直接使用 >>> 穿透修改<style scoped>/*编译前*/.a >>>
2020-09-23 10:55:45
6112
原创 vue项目table插件，集成增删改查，分页。plug-table-zwb
非常好用的table插件。集成增删改查功能，集成翻页筛选等功能。您只需要引入组件，传必要的参数。就可以生成漂亮的表格。改组件基于elementUi 是它的再次封装。效果图引入npm install plug-table-zwb --save引用//main.jsimport wbtable from 'plug-table-zwb';Vue.use(wbtable);使用//组件引入<wbtable ref="wbtable" //组件名称，方便调
2020-09-15 16:10:02
989
原创 前端性能优化（performance）
1. 减少 HTTP请求数减少 HTTP请求数的主要途径包括：(1). 从设计实现层面简化页面(2). 合理设置 HTTP缓存怎样才算合理设置 ?原则很简单，能缓存越多越好，能缓存越久越好。(3). 资源合并与压缩尽可能的将外部的脚本、样式进行合并，多个合为一个。另外， CSS、 Javascript、Image 都可以用相应的工具进行压缩，压缩后往往能省下不少空间。(4). CSS Sprites合并 CSS图片，减少请求数的又一个好办法。(5). Inline Images使用 da
2020-09-08 16:56:55
727
原创 通过css修改滚动条样式
通过css修改滚动条样式//滚动条背景颜色::-webkit-scrollbar-track-piece { background-color: #6b7bf5;}滚动条的宽度::-webkit-scrollbar { width: 4px; height: 4px;}滚动条颜色::-webkit-scrollbar-thumb { background-color: red; background-clip: padding-box; min-height: 28p
2020-09-08 14:09:22
196
原创 vue项目打包是生成的js文件非hash，而是0，1，3，4，5.js这样的问题
之前在公司做的一个vue-cli3的项目打包出来的js文件一直都是0，1，2，3，4.js 这样的文件 而不是生成的hash数值。后来经过调查发现NODE_ENV的值是undefined。因为这个项目配置的多环境 所以在根目录定义了很多环境的.env文件。例如.env.pro .env.test。但是没有在当前文件中声明是开发环境还是打包环境。所以声明下 就可以了。.env.pro 文件头部声明NODE_ENV = 'production'另外说下NODE_ENV的作用node中有全局变量pr
2020-09-01 12:31:40
5488
4
原创 通过修改属性解决Chrome浏览器跨域问题（mac和win）
Mac：先新建好一个空的文件夹 记住路径：比如/Users/zhangweibo/Documents/chrome打开终端输入以下命令open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/zhangweibo/Documents/chromewindows先新建好一个空的文件夹 记住路径例如：C:\MyChromeDevUserData右键浏览器打开属性
2020-08-26 16:40:36
1825
原创 vue对$nextTick()的理解和应用
vue是依靠数据驱动视图更新的，该更新的过程是异步的。使用$nextTick(callback)。这里的回调函数（callback）将在数据更新完成，视图更新完毕之后被调用。
2020-08-18 13:39:06
153
原创 用canvas去掉图片周围的透明区域（去白边）
//bitmap 包含关于img的各种参数信息export function getImageBoundRect(bitmap: annie.Bitmap | any, threshold: number=0) { let img = bitmap.bitmapData; let canvas: HTMLCanvasElement = document.createElement("canvas"); canvas.width = bitmap.width; canvas.
2020-07-10 13:51:14
3448
1
原创 git log根据作者统计根据文件名不同的页面统计代码量
根据文件名或目录名，列出所有作者的代码量git log --format='%aN' | sort -u | while read name; do echo -en "$name\t"; git log --author="$name" --pretty=tformat: --numstat | grep 这里是文件名或者目录名 | awk '{ add += $1; subs += $2; loc += $1 - $2 } END { printf "added lines: %s, removed
2020-07-07 00:52:03
632
原创 前端跨域简单的解决方案
1.什么是跨域？当我们看到控制台出现这么的错误的时候，就知道这个是跨域了。Access to XMLHttpRequest at。。。。。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。所谓同源是指，域名，协议，端口均相同。说的简单点就是，就是浏览器不能执行其他网站的脚本。什么情况下会出现跨域呢？举个例子：http://www.domain.com/a.jshttp://www.domain.com/b.js 同一域名，不同文件或路径 允许
2020-06-21 03:41:39
333
原创 package.json版本号~和^的区别
~会匹配最近的小版本依赖包，比如~1.2.3会匹配所有1.2.x版本，但是不包括1.3.0^会匹配最新的大版本依赖包，比如^1.2.3会匹配所有1.x.x的包，包括1.3.0，但是不包括2.0.0注如果前面什么都不写 入 1.0.0 可以固定版本但是需要注意^版本更新可能比较大，会造成项目代码错误，所以建议使用~来标记版本号，这样可以保证项目不会出现大的问题，也能保证包中的小bug可以得到修复。版本号写*，这意味着安装最新版本的依赖包，但缺点同上，可能会造成版本不兼容。...
2020-06-08 14:23:17
642
原创 Typescript错误忽略（慎用）
Typescript错误忽略单行忽略// @ts-ignore忽略全文// @ts-nocheck取消忽略全文// @ts-check
2020-05-27 09:56:33
4741
原创 windows下生成目录树，markdown文件使用
windows下生成目录树，markdown文件使用1.windows提供了一个tree命令可供我们使用,打开windows内置的cmd2.cd到所需生成树的目录中3.查看粗略型的目录tree /a查看详细的目录树tree /a4.生成详细的目录树到tree.txt中tree /f > tree.txt 5，打开txt大概就是上面的结构啦，复制txt的内容。然后粘贴...
2020-05-06 18:50:47
2988
1
原创 使用ESLint+Prettier来统一前端代码风格
使用ESLint+Prettier来统一前端代码风格良好的代码规范，不仅能够让代码简洁清晰，还可以减少 bug 的出现，更能够让看代码的人赏心悦目，避免一些潜在的问题，减少团队开发中的代码冲突。目标：无论有多少人共同参与同一项目，一定要确保每一行代码都像是唯一个人编写的前端代码规范包括html，css（包括预处理语言），以及 javascript （包括typescript）Airbnb ...
2020-05-05 10:57:04
404
原创 常用的git命令（持续更新）
Git push推送代码到远程分支Git pull从远程分支拉取代码Git status查看当前代码状态Git checkout branchName切换到branchName分支Git checkout -b branchname新建本地分支并切换到 branchnameGit branch查看本地分支Git branch -a查看远程分支和本地分支Git branc...
2020-04-10 00:36:54
114
原创 break return continue三者区别
Break跳出当然循环体。方法继续执行Return结束当前方法，可返回内容Continue跳出本次循环，继续执行下次循环
2020-04-10 00:26:51
143
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人