- 博客(140)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 npm 如何处理依赖与依赖冲突
视频通话技术背景视频通话是基于腾讯云的“实时音视频”产品，其根据业务复杂度提供三种版本的sdk：精简版（TRTC）、专业版（Professional）和企业版（Enterprise）。我们这里用的是精简版（TRTC） ，在精简版（TRTC）的基础上，它还提供了“实时语音通话”的场景实践相关的包TRTCCalling，v1.5中用到的就是TRTCCalling。结构图如下：前端代码业务逻辑背景呼叫需要传入参数userID和roomID：客户端当前登录的userID是唯一的（同一个人不同身份不能同时登
2021-09-14 10:30:11
4338
原创 Angular表单
文章目录一、[ngModelOptions]="{standalone: true}" 是什么意思？为什么在我们的项目中使用ngModel的时候需要用到？二、ng表单和表单验证 (https://angular.cn/guide/forms-overview)2.1 目前Angular中提供的内置验证器有2.2 创建自定义验证器2.3 如何将错误信息展示在模板中三、创建自定义表单组件需要用到Con...
2019-04-19 11:22:25
1996
原创 TS Tricks
TS大法好！ [TOC]TS Tricks巧用注释/** A cool guy. */interface Person { /** A cool name. */ name: string,}巧用 typeof我们一般先写类型，再使用：interface Opt { timeout: number}const defaultOp...
2018-08-01 10:51:07
433
原创 POST请求下载文件
今天帮同事看一个问题：后端由于种种原因（不想改接口或者说前端参数过大），只能接受用post去下载文件。正常情况下第一反应是用xhr对象去发送post请求，结果并没有触发浏览器的下载。看了一下responseHeader里已经设置了content-dispositon:attachment。很郁闷，于是试着window.open(URL.createObjectURL(new Blob(res)...
2018-06-06 13:56:37
22036
1
原创 HTTP2简介
1. HTTP1.X的现状1.1 过于庞大1.2 未能充分利用的TCP1.3 HTTP Pipelining2. 克服延迟做过的努力2.1 Spriting2.2 内联2.3 拼接（Concatenation）2.4 分片（Sharding）3. http23.1 起源3.2 http2特性3.3 二进制分帧3.3 多路复用3.4 优先级和依赖性3.5 头...
2018-06-06 13:55:57
4195
原创 Debounce&&Throttle
防抖（Debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似而又不同。实际上对于window的resize事件，实际需求大多为停止改变大小n毫秒后执行后续处理；而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了debounce和throttle两种解决办法debounce：把触发非常频繁的事件（比如按键）合并成一次执行。
2018-01-06 19:45:31
348
原创 translate元素中的Position: fixed
最近写奇葩的布局遇到了奇葩的问题，想给一个父元素加上translate3d来实现GPU加速，发现加上tranlate3d之后，fixed定位的自元素不是相对于viewport了，二是相对于有translate3d的父元素。查了查fixed的定义，按照标准定位确实是相对于viewport - https://www.w3.org/TR/css-position-3/#fixed-pos Fix
2017-09-05 20:24:12
2095
原创 理解文件上传
本地上传文件，可以通过event.target.files获取files集合， Files集合中包含一组Fils对象， 每个File对象都对应着一个文件，包含只读属性：name、size、type、lastMOdifiedDate。本地预览文件有很多种方式，可以用FileReader来读取异步本地文件， 也可以通过URL对象来指向保存在File或Blob中数据，createObjectURL(
2017-02-09 16:01:52
562
原创 prop 和 attr的区别
最近踩到一个坑，用jQuery的$('.ipt').attr('checked', true);来让checkbox变成checked状态，结果发现html上的值是改变了，但是ui层面，checked的状态并没有改变。结果才发现attribute和properties不是同一个东西。参考文献： 1. http://blog.jquery.com/2011/05/12/jquery-1-6-1-re
2016-12-15 17:14:34
606
原创 IFC(Inline formatting contexts)学习
翻译来自： https://www.w3.org/TR/CSS21/visuren.html#inline-formatting在IFC中，盒子依次水平排列，从它的包含块的最顶端开始。水平方向的margins、borders和paddin体现在这些盒子之间。这些盒子可以在垂直方向可以以不同的方式对齐：底部对齐、顶部对齐或者以内部文字的基线对齐。包含这些盒子的一行矩形区域成为行框。行框的宽度由包含
2016-10-17 17:48:37
1321
原创 css画空心箭头
<i class="u-arrow u-arrow-left "></i>.u-arrow { display: inline-block; width: 7px; height: 7px; border-top: 1px solid #999; border-right: 1px solid #999; }
2016-09-01 15:32:44
5445
原创 为什么说移动一个元素用Translate()比Pos:abs Top/Left好？
为什么说移动一个元素用Translate()比Pos:abs Top/Left好？整理来自：http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/Distraction: Pixel snapping 1. Animating with Top/Left： ht
2016-08-11 20:11:22
4247
3
原创 视差滚动Parallax
参考资料: 1.https://www.youtube.com/watch?v=STwoa-9jxi0 2.图片都来自 https://www.instagram.com/vsco/demo点这里： https://codepen.io/GitKou/pen/rLYvkA 主要几点： 1. background-attachment: fixed; 2. 改变 background-pos
2016-07-19 19:55:17
725
原创 纯CSS视差滚动
参考旭哥的：http://www.zhangxinxu.com/wordpress/2015/03/css-only-parallax-effect/<div class="box"> <img src="http://img.blog.csdn.net/20160714170115893" alt="" class="curtain"> <div class="comehere"></di
2016-07-19 19:23:27
2987
原创 Inline-block没有内容时，仍有高度
如下图，第二个line-block的span没有内容，但是div的高度是120px demo: https://codepen.io/GitKou/pen/qNxNxj<div> <span class="a">111</span> <span class="b"></span></div>div { font-size: 20px; line-height: 60px; b
2016-07-18 16:39:11
2389
3
原创 ng-style用法
我想给ng-style传一个controller里面的变量，折腾了半天，引号不能忘ng-style="{'background-color':'{{markColor}}'}"
2016-06-24 16:03:59
22279
1
原创 label包裹input，点击label，label响应两次
一、label和input合作的两种形式来自 W3C The label element represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either
2016-06-22 14:10:56
6574
转载 负margin用法权威指南
本文由陈陆扬根据John Imbong的《The Definitive Guide to Using Negative Margins》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-us
2016-06-12 15:29:59
735
原创 css可替换元素(replaced element)
MDN上 概述 CSS 里，可替换元素（replaced element）的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有 <img>、 <object>、 <video> 和 表单元素，如<textarea>、 <input> 。 某些元素只在一些特殊情况下表现为可替换元素，例如 <audio> 和 <canvas> 。 通过 CSS c
2016-06-12 14:47:59
2144
原创 z-index学习
看了z-index，写个总结； 这些资源： 1. 深入理解CSS中的层叠上下文和层叠顺序:http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/() 2. CSS深入理解之z-indexh ：ttp://www.imooc.com/learn/643 3. Wh
2016-06-08 16:42:56
477
原创 flexbox功能、兼容、原理
http://www.imooc.com/video/6048 [Flexible boxes更加优雅的Web布局] https://philipwalton.github.io/solved-by-flexbox/ [Solved by Flexbox] https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex [MDN-flex]
2016-06-07 15:31:00
1774
原创 <img>元素底部为何有空白
示例: http://codepen.io/GitKou/pen/NrGbXP 块级元素内部默认有行框，行框撑高了块级元素。img和其他块级元素并列的时候，由于img默认是display:inline-block，因此也会产生匿名块框包裹img，匿名块框内部生成了行框，多余了几个像素。取值 (行内(inline)元素)多数值是相对于父元素：baseline元素基线与父元素的基线对齐。一些 可
2016-06-07 10:50:28
859
转载 word-break:break-all和word-wrap:break-word的区别
最开始我们说了，word-wrap 是用来决定允不允许单词内断句的，如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句。而word-break:break-all则更变态，因为它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句。这也可以解释为什么说它的作用是决定用什么方式来断句的，那就是——用了word
2016-06-01 17:07:16
2216
原创 圆，半径自适应外层高度
效果可查看https://codepen.io/GitKou/pen/OXPggx HTML： <div class="m-edge" style="margin-top: 50px"> <div class="semicircle leftSemiCircle"></div> <div class="dashedLine"></div> <di
2016-06-01 15:32:46
626
原创 如何让touchmove之后不触发touchend的事件
<div class="m-action-container"> <a class="u-btn-focus" href="javascript:;" ontouchend="window.setTimeout(function(){twindowrackMail()},0);">当前快件追踪</a> </div>以前的项目上有很多这样的代码
2016-06-01 14:38:17
6684
1
转载 详解rotate3()
转自http://tympanus.net/codrops/css_reference/rotate3d/The rotate3d() function is a 3D transform function that is used to rotate an element in three-dimensional space.The element is rotated by
2016-05-26 10:44:28
3886
原创 html中的换行符也占空间，如何解决
如上图：parent的width：600px; child1和child2的width：300，display:inline-block; 我们希望它们并排显示，但为什么会换行呢？<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="styleshe
2016-05-26 10:06:52
4078
转载 jsbin-jsfiddle-or-codepen-which-one-to-use-and-why
There are lots of css – js playgrounds now in the market, and the most popular ones are JSbin (by Remy Sharp), JSfiddle (by Oskar Krawczyk), codepen (by Chris Coyier, Tim Sabat and Alex Vasquez). So
2016-05-25 15:46:57
727
原创 边长、边数可配置的旋转多面体
效果点击这里 https://jsbin.com/kakoxe/edit?html,css,js,output 或者看这里 http://codepen.io/GitKou/pen/GqKZGW (这里加了rotate3d(1,1,0,100deg)，使得沿对角线转)css3画出来的多面体，这个多面体的每个侧面都是正方形，底面是个边数可配置的多面体 buildPolyhedron(10, 300
2016-05-25 14:44:31
1068
原创 css垂直水平居中小技巧
1.https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/.Center-Container { position: relative;}.Absolute-Center { width: 50%; height: 50%; overflow: auto; marg
2016-05-24 17:07:07
497
原创 css实现正方形div的3种方式
1.CSS3 vw 单位 1vw = 1% viewport width<div class="vw">hello,viewport</div>.vw { width: 50%; height: 50vw; background: #ccc; }2.padding-bottom <div class="placeholder"></div
2016-05-24 16:33:51
32533
转载 Ruby环境SCSS编译中文出现Syntax error: Invalid GBK character
解决办法：找到Ruby的安装目录，里面也有sass模块，如这个路径：C:\Ruby21-x64\lib\ruby\gems\2.1.0\gems\sass-3.4.8\lib\sass 在该路文件里面 engine.rb，添加一行代码：require … require ‘sass/supports’Encoding.default_external = Encoding.find(‘utf-8
2016-05-24 14:08:18
806
原创 Js中的空值判断
var a= "";var b = 0;var c = false;a==b;//true,因为""和0在js中逻辑都是falsea==c;//trueb==c;//true
2016-05-23 18:43:06
1556
转载 AngularJs ng-repeat 必须注意的性能问题
转自 http://www.cnblogs.com/MigCoder/p/3930264.html?utm_source=tuicool&utm_medium=referralAngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素，但是使用不当也会有性能问题。在项目中我们使用 ng-repeat 加载完一个列表后，如果再次请求数据，然后过滤列表，代码
2016-05-17 09:56:14
5366
原创 在{{}}表达式中用Math
直接{{Math.floor(yourNum)}}这样是行不通的， 因为ng不认识Math， 要在js里面写$scope.Math = window.Math;
2016-05-13 15:52:13
1516
原创 多个数组求交集 js
如下，求profession对应的对象的数组的交集var profession = ["cat", "dog","pig","duck"];var a = { "cat": [1, 2, 3, "12", 4, 22, 11], "pig": [2, 3, "12"], "dog": [2, 4, 3, "12", 11], "duck":[2,11]};var jiaoji
2016-05-12 19:14:15
6081
原创 两个很好的angular调试工具-——batarang(stable)和ng-inspector
下面是batarang，选旧版本的安装，新版本没人维护，可以看scope层级关系，还有每个ng表达式的性能等等，支持划范围看scope 右边是ng-insepector，方便直观看scope
2016-05-06 13:23:47
9202
转载 html中常用到的转义字符，愿对大家有用
http://www.w3cfuns.com/notes/17462/2846fa9a634373902c9dccbdf81cbbcc转换字串中的字符.字符 实体名称 实体数字 描述♠ ♠ ♠ 黑桃♣ ♣ ♣ 梅花♥ ♥ ♥ 红桃，心♦ ♦ ♦ 方块牌◊ ◊ ◊ 菱形† † † 匕首
2016-05-04 21:20:18
3176
转载 input type="button"和button区别
转自 https://davidwalsh.name/html5-buttonsOne of the things I love about CSS is how easy it is to make one element look like another. In the example above, the first element is an anchor, the second
2016-05-04 15:40:05
1635
转载 CSS3圆角详解
作者： 阮一峰日期： 2010年12月 9日CSS3是样式表（style sheet）语言的最新版本，它的一大优点就是支持圆角。网页设计大师Nicholas Zakas的最新文章，清晰易懂地解释了CSS3圆角的各个方面，非常值得学习。以下就是我翻译的中文版。=========================================CSS3圆角
2016-05-04 10:59:48
359
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人