- 博客(85)
- 收藏
- 关注
RSS订阅原创 css module设置localIdent，样式失效，hash错误，webpack。getLocalIdent mismatch
今天做使用css modules的React项目的时候发现项目启动后样式错乱&丢失表现行为是：审查元素发现样式丢失，搜索相关样式发现，css存在，但是hash不一样。定位原因是：项目使用了babel-plugin-react-css-modules.babelrc中{ "plugins": [ ["react-css-modules", { "option": "value", exclude: 'node_modules', au
2022-04-26 18:21:03
872
1
原创 前端图片加载优化，懒加载，按需加载，webp格式兼容性处理
背景网页中存在很多存储于腾讯云的CDN形式的高清图，大多为PNG格式，大小从几百kb到几十M不等，张数由1张到上百张不等。由此导致页面的图片加载缓慢。前端解决方案:png格式转为webp格式（无损压缩）图片按需加载。针对以上两个方案需要注意的点如下：webp格式的兼容性图片按需加载的更优方案...
2022-03-04 14:08:30
3838
原创 js文件上传相关知识点：如何直接上传文件夹，如果获取上传文件的文件夹信息
最近在做项目的过程中遇到一个需求： 要求直接上传文件夹及其文件夹下的所有内容， 并且保留文件夹中相关的嵌套信息。做了一些调研，总结如下：如何直接上传文件夹？ 使用webkitdirectory属性，类似mutiple属性一样的。但这个属性没有官方规范，所以使用时需要注意一下。如何获取上传文件的文件夹信息？<body> <input type="file" id="file" webkitdirectory> <script>
2021-10-14 16:29:09
1578
原创 可能是最优雅的分割线实现方式CSS实现
前段时间在做项目迭代的时候遇到一个需求，其中包含一条分割线，大致大概长这样：然后我就看到项目之前实现分割线的方法，基本都是这样实现的：<div>物料下载(仅内网可下载)</div>div{ height: 40px; line-height: 40px; text-align: center; font-size: 12px; color: #ccc; position: relative; margin-bottom: 15px;
2021-02-19 22:18:49
1827
1
原创 如何将Blob类型转换为File类型
在复制粘贴图片自动上传时，发现企业微信浏览器会把file类型的文件识别为Blob类型，导致后端无法识别文件类型。查询以后发现将Blob文件转为File文件就能解决该问题。这是MDN中对Blob定义的截图：这是MDN中，构造一个File类型要的参数：这是我的实现方法：const Blob2ImageFileForWXBrowser = (obj: Blob) => new window.File([obj], `${(new Date).getTime()}.png` );...
2020-12-09 11:30:41
13241
原创 快速删除node_modules的方法
在windows下删除node_module真的是奇慢无比~分享一个几年前用过的库~ 因为太长时间没用还去搜了一下，记录在这里，免得以后又去找~npm install rimraf -grimraf node_module秒删~
2020-11-18 16:44:09
1432
原创 image请求资源403
网页中获取图片链接，得到403，但是单独打开图片链接显示却是正常的，这是因为有的图片服务器它会去检测请求的来源是不是本站，如果不是本站就返回403，而检测的来源在于发送请求时的自带的referrer~该referrer是可以通过设置<meta name="referrer" content="no-referrer" />这样请求的时候就可以不带上referrer的值啦~...
2020-11-18 14:40:30
250
原创 js控制video的播放器大小，以及poster兼容问题
前置条件：video标签承载视频。状态：在微信中点击播放按钮后，自动全屏播放。ios下video的封面并没有取到第一帧。pc端和android正常。期望：在微信中点击播放后，依然在当前页面，不要全屏。.所有设备下，取第一帧作为poster。解决方案：对于第一个问题，很简单，设置webkit-playsinline和playsinline属性就能实现。标签写法：<video src="https://vjs.zencdn.net/v/oceans.mp4" playsi
2020-11-17 15:10:27
3385
原创 在线视频图片测试链接
在线视频测试链接：http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4http://vjs.zencdn.net/v/oceans.mp4https://media.w3.org/2010/05/sintel/trailer.mp4http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4在线其它格式视频资源下载，MP4, flv, mkv, 3gp 等https://www
2020-11-16 15:16:58
3551
原创 Keyup与ESC使用时候的注意点
ESC有时候在某些浏览器的时候会关闭弹出的弹框。当弹框中存在input框之类的东西时，尽量不要用onKeyup之类的事件~因为esc会触发keyup,所以在监听了keyup事件，同时按了esc的时候，可能发生的事情与预期不符。所以可以使用keydown，keypress等行为来代替。...
2020-11-16 10:55:39
851
原创 mac/windows下查看端口号占用情况以及杀死端口进程
查看端口占用情况：netstat -ano查找某个端口的PID:netstat -ano|findstr '7000'杀死当前port进程：taskkill /T /F /PID 8784（端口对应的PID）
2020-09-10 16:41:27
507
原创 移动端开发选型
最近在做一个练手小项目，使用的框架是react native，以下就来谈谈我们小组在选型之初的一些调研。首先，没有选择原生开发是因为时间成本有限，开发成本高，很可能在短期内不会又很深的技术沉淀，只能"照猫画虎"做个表壳出来。所以我们考虑选择跨平台开发框架。我们可以先看看目前市面上的多端移动开发框架都有哪些：...
2020-08-16 11:07:04
390
原创 浅谈react hooks
浅谈react hooksReact hooks使用hook的动机使用hook的规则使用hook时需要注意的点自定义hookuseStateuseEffect最近在项目中使用了react hooks, 总结了一些相关的知识点可以有助于我们更好地了解和使用react hooks。React hooks首先，我们来看看react hooks是什么？其实很简单， 它就是`可以在函数中勾入React的state和生命周期等特性的函数``。拆解一下就是，它是个函数，只是在这个函数中可以勾入react的相关特性
2020-05-22 15:43:27
568
原创 git submodule使用
git submodule add git-repo-url //git-repo-url: 要创建为submodule的git地址。git clone --recurse-submodule main-repo-urlgit submodule initgit submodule update
2019-11-22 08:54:41
159
原创 ES6学习笔记
该博文参考ECMAScript6 入门，总结为自己的笔记以便查阅。let 和 const 命令1. let命令基本用法：let的用法类似与var, 但是let声明的变量只在它所在的代码块有效。例如for循环中的自增变量，如果使用var来声明，那它就是全局的, 全局只有一个变量i，每一次循环， 变量i的值都会发生改变。但如果是使用let声明， 则i只在本轮循环有效，所以每一次循环的i其实都...
2019-10-15 22:30:47
139
原创 NPM管理
使用npm管理工具， nrm。直接使用原始指令设置npm镜像-永久：npm config set registry XXX(要设置的镜像链接)直接使用原始指令设置npm镜像-临时：npm --registry XXX (要设置的镜像链接)...
2019-10-14 08:35:00
166
原创 javascript语言精萃-精读
编程是很困难的事情。绝不应该在懵懵懂懂的状态下开始你的工作。附加知识点：xey: 表示10的y次方x的值例如： 1e2 = 10的平方1 = 100检测一个属性是来自于该对象的成员还是来自原型链，可以使用obj.hasOwnProperty(attr)如果没有指定返回表达式，那么返回值是undefined。需要弄懂的点：函数式编程this指针...
2019-09-02 22:51:54
143
原创 js中的变量和类型
js中的变量和类型1. javascript规定了几种语言类型7种基本数据类型，分别是：1. String2. Number3. Boolean4. Null5. Undefine6. NAN7. Symbol2中引用类型，分别是：1. Object2. Function 2. Symbol类型在实际开发中的应用、可手动实现一个简单的Symbol首先来说说symbo...
2019-05-06 21:52:25
815
原创 box-shadow详解
box-shadow详解：我们可以看到box-shadow的属性如下/* offset-x | offset-y | blur-radius | spread-radius | color */box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);第一个值代表x轴的offset第二值代表y轴的offset第三个值是模糊半径: 这个值不能为负数...
2019-02-21 00:22:49
10080
3
原创 object-fit与background-size
今天看到一个背景图上有个属性：object-fit: cover当时看到效果与background-size设置这些属性是一致的， 好奇两者有什么区别。object-fit: fill || cover || conatin || none || sacle-downcontain被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽...
2019-02-15 16:00:27
2305
原创 ant-design彩蛋思考
今天ant-design由于在代码中隐藏了一个圣诞彩蛋，引发了广大人民群众的各种感官， 大多数都在叫骂。有人说屁大点小事，不值一提。有人说因为这个彩蛋涉及宗教色彩可能会引发一些重大影响。吃完饭去翻了翻repo的issue, 真的是什么人都有……对于我自己而言， 当前项目用的还是3.5.X, 所以没有什么影响。作者的行为是：首先提交，刻意隐藏了change log => 看到也...
2018-12-25 20:50:54
1895
2
原创 mac 安装了zsh后找不到指令
zsh找不到指令在公司的电脑装好了， 一切运行正常， 回家用自己的电脑就折腾了一个小时- -这里记录一下， 防止各位踩坑找不到的原因有：.zshrc 中没有 source .bash_profile没有.bash_profile.bash_profile中没有export path.bash_profile中export path的路径不包含执行指令路径……而我遇到这个问题的...
2018-12-18 22:25:37
7861
2
原创 js高级程序设计（第三版）第三章 基本概念
变量初始化变量的时候并不会标记该变量的类型，初始化的过程就是仅仅给变量附一个值，因此可以在修改变量值的同时修改值的类型。 例如： var msg = 'amy'; msg = 719; //有效但不推荐用var操作符定义的变量将成为定义该变量的作用域中的局部变量。当它退出该作用域的时候，其被销毁。在不使用var的时候声明变量相当于全局变量，但是不推荐这样做，比较...
2018-04-19 23:59:34
298
原创 react源码分析
react的核心内容为： 1. 虚拟dom对象（virtual Dom） 2. 虚拟dom差异化算法（diff algorithm） 3. 单项数据流渲染 （Data flow） 4. 组件声明周期 5. 事件处理
2018-04-19 22:14:57
345
原创 前端知识集合
计算机基础计算机组成 面向对象 数据结构(队列、堆栈、树、图) 基础算法(排序算法、矩阵算法、动态规划、图算法、NP) UML基本常识开发流程 测试 单元测试、冒烟测试、回归测试 and moreHTML了解html基本结构 熟悉常见标签及对应属性及其用法 熟悉常见的全局、表单、鼠标、键盘事件CSS了解css基本语法以及样式类型 熟悉常见的...
2018-04-19 10:48:33
465
原创 apply和call的应用
apply和call的存在，就是为了动态改变this而出现的。当一个Object没有某个方法，但是其他的object有，这个时候就可以借助apply和call用其他对象的方法来操作。举个栗子： var Amy = function(){ ame = 'amy'; age = 23; console.log("name:"+thi...
2018-04-18 18:31:29
628
原创 codeMirror在react中的使用
1.首先安装codeMirror. npm install react-codemirror --save2.在组件中导入引用 import CodeMirror from 'react-codemirror'; import 'codemirror/lib/codemirror.css'; 样式也可以在样式文件中引入。3.导入语言类型...
2018-04-13 12:13:45
15305
2
原创 JavaScript内存机制
JavaScript内存机制http://www.cnblogs.com/ys-ys/p/5300189.html 晚上补充……
2018-03-22 10:00:10
177
原创 css基础强化
css权重问题行内样式优先级最高#id +100.class +10e +1其他 +0;浏览器渲染DOM为从右往左的顺序（解析css,快速确定元素）权重值计算的时候，不进位选择器分类元素，伪元素（元素实际存在），类选择器，属性选择器，伪类选择器（元素的状态），id选择器，组合选择器，否定选择器，通用选择器（*）css盒模型基本概念：padding,ma...
2018-02-28 23:07:22
274
原创 html基础强化
Doctype的意义?以标准模式来渲染Dom,让浏览器知道元素的合法性。html,xhtml,html5之间的关系xhtml是html进行xml规范化的严格模式html5是独立的，html发展出的新一代规范html5的新特性都有什么?语义化元素表单增强（input的type之类的）新增API（离线，音视频，本地存储，实时通信）语义化的意义?对开发...
2018-02-28 23:06:09
162
原创 css3 @media媒体查询
meta name="viewport" content="width=device-width,initial-scale=1.0,maxmum-scale=1.0,user-scalable=no">语法格式： @media screen and (min-width: 1200px){ body{ css code }
2018-02-07 15:37:45
962
原创 react技术栈索引
react全家桶索引babel babel编译器原理（解析、转化、代码生成） babel插件开发react react源码结构 react启动流程 react动画 react组件生命周期 react-dom基本实现 react diff算法核心 主流虚拟dom diff算法对比 react渲染性能优化 react服务端渲染 react 16 新特...
2018-02-05 14:22:15
709
原创 页面布局与css盒子模型
六大方向： 页面布局 css盒模型 DOM事件 HTTP协议 面向对象 原型链难度提升：通信，安全（web安全，xss），算法页面布局：浮动，定位，flexBox , table-cell, 网格布局（grid）【兼容性不好】 关于浮动和定位很简单，就不写了。 html结构:section class="layout flex"> div cl
2018-01-23 21:06:11
1164
原创 设置float:left以后父容器的高度为0
设置float:left以后父容器的高度为0的解决方案： 1：去掉float:left样式，改为 display:inline-block;或者2: 给父容器添加样式， overflow:hidden
2018-01-13 14:31:40
2115
原创 chrome相关调试
sass的sourceMap映射在scss文件的最后写/*@ sourceMappingURL=XXX.css.map */然后，你需要启用“Experiments 实验”。地址栏输入 chrome://flags 启用“启用开发者工具实验”选项，点击页面底部“马上重启”按钮应用改变。在 Chrome 开发工具的右下角，点击齿轮按钮打开“设置”面板。点击“General 常规”标
2018-01-11 22:56:17
146
原创 create-react-app 在run eject后对antd和sass的配置
用create-react-app创建项目，但是需要自己配置很多东西的时候，run eject弹出配置项，不可逆操作$ yarn add babel-plugin-import --save-dev在webpack.config.dev.js中进行修改，修改如下：{ test: /\.(js|jsx)$/, include: paths.appSrc, loader:
2018-01-09 17:55:24
3727
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人