- 博客(37)
- 收藏
- 关注
RSS订阅原创 今天我们来聊聊 UI 组件库推广一年有余遇到的困境吧
大事记2020.1.21 是值得纪念的一年，这天我们内部组件库出了一个 MVP ~2021.2.03 团队复盘落地组件库一年的心酸历程与 UI 设计团队 battle2020 尝试设计师/产品经理 逐步形成组件化概念灌输设计组件化的概念推广 sketch 的使用更换切图仔生产力工具：蓝湖–> 摹客开发者从业务中梳理出组件库，提供 MVP 给设计参考2021 复盘为了更好的协作，解放双方双手目前问题组件库是开发想象出来的，但设计没有定义组件库的真实
2021-02-03 15:22:35
249
原创 懒加载核心实现之intersectionobserver 交叉观察器踩坑
懒加载核心实现之intersectionobserver 交叉观察器踩坑前言浏览器的兼容情况你可能会遇到的兼容性问题再来看看主流库的实现也想尝鲜 IntersectionObserver？问答环节先天条件不足，那只能放弃吗？结论为什么写此文题外话前言懒加载是一种对网页性能优化的方式，它的原理是除了首屏资源，部分资源在浏览器滚动时出现在可视区域内的再惰性加载，而不一次性加载所有。这样做对网页性能以及用户体验都有提升。如果你的懒加载方案是基于 intersectionobserver API ，出现懒加
2020-11-10 09:42:02
2647
原创 浅谈从在浏览器输入URL到前端性能优化
文章目录一、前言：从浏览器中输入URL到页面加载的发生了什么二、性能优化1、DNS解析优化1-1、DNS缓存1-2、 DNS预解析2、减少HTTP请求与连接时间2-1、TCP 连接优化1）TCP 长连接：2）采用 HTTP/22-2、HTTP 请求优化1）减少http请求次数2）单次请求所花的时间2-3、缓存3、浏览器渲染优化2-1、js执行优化2-2、css样式渲染优化2-3、布局优化2-4、绘...
2019-01-29 15:58:36
745
原创 h5隐藏video控制按钮controls（腾讯云点播禁用video音量全屏等按钮）
前言昨天app的同事（ios跟安卓）发现webview的video全屏按钮有问题，他们想禁用掉全屏、音量控制的按钮，前端同事A在根据api设置disable_full_screen=1（pc端falsh平台生效），但全屏按钮依旧存在，觉得腾讯api没做好坚持要换掉一直在用的腾讯云点播。个人觉得移动端采用video浏览器控件，换哪个云点播都一样，故帮忙解决禁用隐藏video内部controls功能...
2018-12-27 12:23:26
10852
1
原创 e.target与e.currentTarget区别
e.target 指向触发事件监听的对象。e.currentTarget 指向添加监听事件的对象
2018-02-28 17:36:14
629
1
原创 npm切换下载url（nrm切换镜像源）
1镜像使用方法1通过config命令2命令行指定3编辑 npmrc 加入下面内容2nrm切换镜像方法1查看当前使用镜像registry1、镜像使用方法 （三种办法任意一种都能解决问题，建议使用第三种，将配置写死，下次用的时候配置还在）:1)通过config命令npm config set registry http://registry.cnpmjs.orgnpm info und
2017-12-21 11:14:46
2233
原创 eslint语法检测规则
1、常用规则 规则值 "off"或者0 //关闭规则关闭"warn"或者1 //在打开的规则作为警告（不影响退出代码）"error"或者2 //把规则作为一个错误（退出代码触发时为1） 规则 "no-alert": 0,//禁止使用alert confirm prompt"no-array-constructor": 2,//禁止
2017-12-20 11:35:28
1691
原创 markdown日常使用，有这个就够了
1. - 列表2. 单行代码块：``3. ``` 多行代码块` ``4. 显著标题 ： > 你要说的话5. 网页链接标签： [百度](www.baidu.com)6、[toc] 根据你的#标题，会自动生成目录结构
2017-12-15 15:31:04
214
原创 在Ubuntu和Windows下用命令行升级NodeJS和npm的版本
1.在Windows系统下：查看版本的命令和Ubuntu下一样。 不同的是Windows下不能使用“n”包管理器来对NodeJS进行管理，在这里我们使用一种叫“gnvm”的工具来管理（相关链接：https://github.com/Kenshin/gnvm） 将下载好的gnvm.exe放在NodeJS的安装目录下在cmd下输入： gnvm version 出现gnvm的版本号即表示gnvm
2017-12-15 10:29:36
508
原创 cmd常用命令
1、清空屏幕 cls2、cmd 文件以及文件夹操作1、 dir (directory :目录) dir #显示当前目录中的文件和子目录 dir /a #显示当前目录中的文件和子目录，包括隐藏文件和系统文件 a = all dir c: /a:d #显示 C 盘当前目录中的目录 d = directory dir c: /a:-d #显示 C 盘根目录
2017-12-14 15:21:04
1264
原创 (解决qrcodejs二维码识别中文解码乱码问题)js ---str转utf8与utf-8转str
1、字符编码的原理http://blog.csdn.net/xiaolei1021/article/details/52093706 1、 // UCS-2和UTF8都是unicode的一种编码方式 // js代码中使用的是UCS-2编码 2、 3、str2utf8: 1)字符转USC-2，用charCodeAt() 2）如英文的话，直接返回字符str.charAt(i)
2017-08-11 17:30:51
9264
6
原创 使用webpack的plugins功能报错--configuration.module has an unknown property 'plugins'.
configuration.module has an unknown property ‘plugins1、问题原因：是webpack版本不同，webpack.config.js配置不一样2、解决方案：webpack.config.js（主要看plugins位置）//注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。var webpack = requir
2017-08-11 17:10:47
6834
转载 npm镜像使用方法
镜像使用方法（三种办法任意一种都能解决问题，建议使用第三种，将配置写死，下次用的时候配置还在）:1.通过config命令12npm config set registry http://registry.cnpmjs.orgnpm info underscore （如果上面配置正确这个命令会有字符串response）
2017-08-10 11:55:58
493
转载 什么是CSS hack？
http://www.toyean.com/post/59.html一、CSS HACK HACK概念：不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS
2017-04-26 11:44:23
340
原创 idea webStorm activation code 激活
activation code 激活（有效到2019-05）：http://idea.lanyus.com/2016.1 激活 http://www.iteblog.com/idea/key.php（已失效）2016.2 激活 http://idea.iteblog.com/key.php(已失效)
2017-04-26 09:57:15
1869
原创 欢迎使用CSDN-markdown编辑器
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
2016-12-15 09:18:11
218
原创 eclipse报错，而tomcat-apache找不到项目：解决方案一
1、eclipse报错：java.lang.ClassNotFoundException: org.jeecgframework.web.system.listener.Ini 2、而且tomcat-apache找不到项目3、解决方案1）步骤：在eclipse下找到 project下的clear2）原因：上一次没有关闭tomcat就关闭了eclipse
2016-11-22 08:54:41
834
原创 （tomcat一闪而过）localhost拒绝了我们的连接请求原因及解决方案
1、localhost拒绝了我们的连接请求的原因：tomcat启动不了。而且启动tomcat时，发现黑色命令行窗口一闪而过，且web服务并没有启动起来2、找出原因tomcat一闪而过：参考:http://jingyan.baidu.com/article/08b6a591cd69f314a80922e8.html1）首先要搞明白启动不起来的原因。方法
2016-11-09 16:54:12
65751
6
转载 Webstorm切换快捷键风格（Webstorm快捷键与eclipse对比介绍）
Webstorm常用快捷键原文地址：http://blog.csdn.net/quincylk/article/details/18256697常用webstrom快捷键快捷键配置点击“File”-> “settings” 或者 ctrl+alt+sWebstorm预置了其他编辑器的快捷键配置，可以点击Keymap中Keymaps下拉框切换快捷键的风格配置
2016-11-09 09:35:27
4455
原创 js-cookie
1、cookie 是什么？cookie：存储数据，当用户访问某个网页的时候，我们可以通过cookie来向访问者的电脑存储数据，这种存储是临时的：当浏览器关闭，cookie值夜被清空。1）不同浏览器存放cookie的位置是不一样的，不能通用2）cookie的存储是以域名形式进行区分的3）cookie的数据可以设置名字的4)一个域名下存放的cookie的个数是有限制的，不同的浏览器
2016-11-08 10:05:23
307
原创 js基础方法整理
1、getDate(); 获取当月的某一天，当天的“日” 用法：var d = new Date();//创建一个dateObjectdocument.write(d.getDate()) ;2、indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。语法：stringObject.indexOf(searchvalu
2016-11-08 09:13:05
243
原创 js window --浏览器对象模型
5、window.navigator 对象包含有关访问者浏览器的信息。例子：txt = "Browser CodeName: " + navigator.appCodeName + "";txt+= "Browser Name: " + navigator.appName + "";txt+= "Browser Version: " + navigator.appVersi
2016-11-07 16:57:42
201
原创 chrome技巧
1、chrome更改默认搜素引擎1：在地址栏输入 chrome://settings或者2、进去设置2、参考http://sanwen8.cn/p/2629SJy.html2-1调试工具接下来我们先简要介绍一下Chrome调试工具各个工具的作用。ElementElements板块你可以看到整个页面的Dom结构。你可以在这里编辑
2016-11-07 16:26:01
345
原创 $("tr:even")--even选择器：选中偶数index值元素
定义和用法:even 选择器选取每个带有偶数 index 值的元素（比如 2、4、6）。index 值从 0 开始，所有第一个元素是偶数 (0)。最常见的用法：与其他元素/选择器一起使用，来选择指定的组中偶数序号的元素（如上面的例子）。$("tr:even")
2016-11-04 09:10:37
571
原创 js数据类型typeof
1-1 js数据类型数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义1-2判断数据类型：typeof1-3-1 数字 number类型var i = 100;// alert( typeof i ); // number1-3-2字符串var s = ' miaov ';// alert( typeof s );
2016-10-21 17:16:16
238
原创 JS初级_自定义属性的应用：点击一次换图片2，再点击恢复为图片1
HTML>http-equiv="Content-Type" content="text/html; charset=utf-8">无标题文档li { list-style:none; width:114px; height:140px; background:url(img/normal.png); float:left; margin-right:20px; }window.
2016-10-20 16:57:48
1556
原创 JS初级cssText
HTML>http-equiv="Content-Type" content="text/html; charset=utf-8">无标题文档div { width:100px; height:100px; border:1px solid #333; }id="div1">123id="btn1" type="button" value="按钮" />var
2016-10-20 15:11:08
312
原创 JS初级给页面添加6000个按钮
lang="en"> charset="UTF-8"> Document window.onload = function () { var str = ''; for(var i =0 ;i6000;i++) { str +='';
2016-10-20 14:28:10
566
原创 JS初级循环
HTML>http-equiv="Content-Type" content="text/html; charset=utf-8">无标题文档li { height:30px; border-bottom:1px solid #333; }window.onload = function (){ var oUl = document.getElementById('list
2016-10-20 14:17:54
225
原创 JS初级获取元素的第二种方法
1-1 第一种获取元素的方法：静态方法#list {} var oUl = document.getElementById('list');1-2 第二种获取元素的方法：动态方法li {} document.getElementsByTagName('li');#list li {} var aLi = oUl.getElementsByTagName('li
2016-10-20 14:00:51
268
原创 JS初级图片轮播小实例
HTML>http-equiv="Content-Type" content="text/html; charset=utf-8">无标题文档p { margin:0; }body { text-align:center; }#box { width:400px; height:400px; border:10px solid #ccc; margin:50px auto 0; p
2016-10-20 13:51:44
222
原创 JS初级-属性值修改、替换添加
1、属性值的获取HTML>http-equiv="Content-Type" content="text/html; charset=utf-8">无标题文档/* HTML 的属性操作：读、写 属性名： 属性值： 读操作：获取、找到 元素.属性名 写操作：“添加”、替换、修改
2016-10-20 10:05:13
4602
原创 前端技术博客
http://www.haorooms.com/http://www.cnblogs.com/huansky/p/5990991.html百度前端技术学院http://ife.baidu.com/task/all
2016-09-30 23:00:44
299
原创 win10下apache服务的下载安装与配置
1、下载安装参照http://www.cnblogs.com/yerenyuan/p/5460336.html2、可能会遇到的错误及解决方案1)其中cmd需要以管理员的身份运行，不然会报错（如命令不可用）2）cmd安装apache最好使用的命令：httpd -k install -n apache2.23）碰到 服务无法启动 可以尝试 卸载apache：httpd
2016-09-29 16:30:13
4552
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人