- 博客(91)
- 收藏
- 关注
RSS订阅转载 ssh信任
在shell脚本中，需要使用scp命令将本地的文件复制到另一台机器中备份。但通常执行scp命令后都需要输入用户密码，这样在定时自动执行的shell脚本中就不适用了。在两台机器的两个用户之间建立安全的信任关系后，可实现执行scp命令时不需要输入用户密码。(该方法对ssh也适用)第一部分：ssh信任关系的建立，即公钥的交换执行scp命令的机器称为A，scp命令操作的远端机器称为B。以下是在机器A的root和机器B的root之间建立安全信任关系的步骤：1. 在机器A上root用户执行ssh-keyg.
2021-01-11 15:05:40
520
原创 webgl浅析和纹理绘制
前言主要参考webgl编程指南和webglfundamentals进行学习基础概念WebGL只关心两件事：裁剪空间中的坐标值和颜色值。使用WebGL只需要给它提供这两个东西。顶点着色器（vertex-shader）// 一个属性值，将会从缓冲中获取数据attribute vec4 a_position; // 所有着色器都有一个main方法void main() { //...
2020-04-16 12:42:09
642
原创 shadow DOM理解
custom DOM首先要知道custom DOM (文档对象模型) ，它是不同的元素节点、文本节点连接而成的一个树状结构，应用于标记文档中（例如 web文档中经常用到的HTML文档）。可以简单理解为html页面Shadow DOMShadow DOM允许将隐藏的DOM树添加到常规的DOM树中——它以shadow root为起始根节点，在这个根节点的下方，可以是任意元素，和普通的DOM元素...
2019-10-28 17:40:16
340
原创 js valueOf 和 toString
想要弄清楚他们的区别，先思考几个问题JS 中对象类型如何转换为基本类型为什么不少代码规范中，禁止使用 ==JS 中基础类型之间是如何转换的JS 中 ==运算是如何操作的对象如果需要转换为基本类型，需要调用对象自己的转换为基本类型的方法valueOf 和 toString只在隐式转换时调用在 ES5 之前，会首先调用 valueOf 方法，如果没有这个方法，会调用 toStrin...
2019-08-07 15:40:22
215
原创 js 类型判断
javascript的数据类型可以分为两大类：原始类型和引用类型.原始类型(基本数据类型)包括Undefined、Null、Boolean、Number和String五种，及es6中的symbol引用类型也称为复杂类型，在Javascript中是Object。如何进行类型判断typeof 操作符typeof 2 // numbertypeof ...
2019-07-14 18:00:07
169
原创 深入理解Promise及其链式调用原理
最近一次面试被问到Promise链式调用原理，然而自己对promise的理解还是很浅显的，只了解其使用方法和api，对其实现原理一无所知前言静下心来分析。因为本人js稍弱，分析过程加深我对作用域、闭包的理解。也非常幸运，能找到这篇由浅至深分析的博客https://mengera88.github.io/2017/05/18/Promise%E5%8E%9F%E7%90%86%E8%A7%...
2019-07-11 18:30:31
5313
原创 深入了解flex
flex布局大家应该比较熟悉了，但感觉自己对flex的具体计算过程还不是很了解，故写此文flex属性flex 是 flex-grow、flex-shrink、flex-basis的缩写flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。flex-basis 规定的是子元素的基准值。所以是否溢出的计算与此属性息息相关。...
2019-06-06 17:16:57
377
原创 css溢出文本省略总结
溢出文本省略cssoverflow: hidden;white-space: nowrap;text-overflow: ellipsis;
2019-06-06 13:03:45
287
原创 h5 图片资源的引用和使用注意事项总结
写在前面的话最近做的项目有很多图片资源，引发了自己对图片的渲染和使用等进行了深入的思考，如何优化性能？如何提高体验？背后的原因是怎样的？等等等，故记此文。图片渲染的过程一些必要的题外话。页面的渲染过程解析HTML —> 构建DOM树加载样式 —> 解析样式 —> 构建样式规则树加载javascript —> 执行javascript代码...
2019-04-28 16:48:06
2036
原创 重新认识相对定位和绝对定位
相对定位相对自身定位定位不脱离文档流绝对定位相对position 不为 static 的父元素定位脱离文档流如果父元素全部为static则相对视窗定位绝对定位的元素可以通过指定top和bottom ，保留height未指定（即auto），来填充可用的垂直空间。它们同样可以通过指定left 和 right并将width 指定为auto来填充可用的水平空间。left、right...
2019-03-19 21:07:23
234
原创 美团点评前端面试
前言第一次面试还是非常紧张的，是在boss直聘上找的。面试题一个div实现旋转的太极图面试时没有答出来，之后想出来了http://liulu666.cn/taiji.html垂直水平居中这个基础，我在自己博客也有总结https://liu354.github.io/2018/02/10/css居中总结/animationtransformpositionflex布局的几个...
2019-03-09 14:54:50
6080
1
原创 git ssh配置
自己简单的配置了下，发现每次ssh clone时都需要密码，非常不爽，故记此文生成密钥，一路回车、用默认选项ssh-keygen -t rsa复制到粘贴板cat ~/.ssh/id_rsa.pub | clip # Windowscat ~/.ssh/id_rsa.pub | pbcopy # MacOS添加密钥到ssh-agent（重要）这个如果你没添加的话，每次c...
2019-01-24 15:07:02
165
原创 从0到1徒手撸一个简单的glup插件
参考http://www.alloyteam.com/2016/01/9918/#comments但这位大兄弟的代码跑不起呀、自己简单修改了下http://nodejs.cn/api/fs.html node官网https://www.gulpjs.com.cn/docs/api/ glup官网结合以上思考对理解glup的思想更有帮助目的将最终生成的资源文件／地址注入到HTML中...
2019-01-15 17:43:43
359
原创 小米web前端实习面经
前言小米非常重视数据结构，我同学面试后端同样也问了很多数据结构，但自己在这方面的学习还不够。。。一上午完成两轮面试面试题闭包问的很细，还要求写代码举例继承同上面向对象编程、面向对象的三大特征这个之前自己了解比较少，三大特性是指 封装、继承、多态https://segmentfault.com/a/1190000008321085setTimeoutes6的 let、con...
2018-11-08 15:13:50
1091
原创 浏览器渲染页面的过程
打开一个网页发生了什么？输入一个网址，打开一个网页DNS 查询TCP 连接HTTP 请求即响应服务器响应客户端渲染浏览器对内容的渲染便发生在第五步。客户端渲染具体过程处理 HTML 标记并构建 DOM 树。处理 CSS 标记并构建 CSSOM 树。将 DOM 与 CSSOM 合并成一个渲染树。根据渲染树来布局，以计算每个节点的几何信息。（Layout）将各个节点绘制...
2018-11-01 15:44:27
472
原创 BFC浅析
BFC到底使什么？BFC概括：可以在心中记住这么一个概念———所谓的BFC就是css布局的一个概念，是一块区域，一个环境。BFC布局规则关于这些不同 box，下文会解释，别慌~内部的Box（Block-level box）会在垂直方向，一个接一个地放置。内部的Box（Block-level box）垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box（Block-leve...
2018-10-31 11:15:09
249
原创 js 实现链表和树的结构
最近在学习es6所以代码主要使用了es6的一些东西链表的设计我们设计链表包含两个类，一个是 Node 类用来表示节点，另一个事 LinkedList 类提供插入节点、删除节点等一些操作。 /** * 一般的语言实现链表都需要指针来实现 * 而js的引用类型本来就是按值引用的 * 变量中保存的实质上是一个指向其对应对象的一个...
2018-10-28 15:22:28
3533
1
原创 js 继承和深浅拷贝问题
继承function A(){}function B(){}两个构造函数，让B继承A直接通过 new A()B.prototype=new A();这种方式有一个弊端，会额外执行一次A的构造函数，增加开销，甚至可能会造成内存泄漏。通过Object.create()B.prototype=Object.create(A.prototype)Object.create 是ES5中...
2018-10-26 20:41:56
357
转载 js 构造函数的返回值
在传统语言中，构造函数不应该有返回值，实际执行的返回值就是此构造函数的实例化对象。而在js中构造函数可以有返回值也可以没有。没有返回值则按照其他语言一样返回实例化对象。若有返回值则检查其返回值是否为引用类型。如果是非引用类型，如基本类型（string,number,boolean,null,undefined）则与无返回值相同，实际返回其实例化对象。若返回值是引用类型，则实际返...
2018-10-26 19:54:20
1809
原创 vue 中使用引用类型的注意事项
前言js 中对象Object、数组Array都是引用类型。引用类型var a={name:'tom'};var b=a;a={};console.log(b.name) //tom当用变量声明一个引用类型时，实际上这个变量不是引用类型本身，而是一个指向这个引用类型的指针。Vue 不能检测以下变动的数组：当你利用索引直接设置一个项时，例如：vm.items[indexOfI...
2018-10-16 15:16:33
2371
原创 web端重构微信小程序 图片上传
注意一般情况上传照片有两种方式：本地图片转换成base64，然后通过普通的post请求发送到服务端。 操作简单，适合小图，以及如果想兼容低版本的ie没办法用此方法 使用通过form表单提交。form表单提交图片会刷新页面，可以实现无刷新提交数据。可以把form绑定到一个隐藏的iframe上，提交表单。或者使用FormData，FormData对象用以将数据编译成键值对关于For...
2018-10-06 13:26:11
412
原创 React使用next.js实现服务器端渲染
什么是服务端渲染及优势服务端渲染（Server side rendering）,是指通过服务器执行React页面的渲染和生成，并返回给客户端静态的HTML页面。服务端渲染主要优势： SEO首屏渲染友好速度相对快使用React编写出来的程序是单页的应用程序，前端请求会都是一个html模板，对于信息分发类或者公众网站来说致命，SEO无法优化，搜索引擎无法找到网站想要分发出去的东西。...
2018-09-03 15:06:42
1895
原创 HTML5应用程序缓存Application Cache
浏览器本身的缓存机制浏览器会对静态文件(html csss js 图片等)进行自动缓存下一次访问该网页，会读取缓存读取缓存之前进行判断， 第一判断缓存时间和服务器上文件的最后一次修改时间如果缓存时间大于最后一次修改时间， 证明缓存之后，服务器上没有对文件进行修改，此时，浏览器会直接读取缓存的文件如果缓存时间小于最后一次修改时间，证明缓存后服务器又对文件进行了修改，此时，浏览器会重新下...
2018-08-24 12:28:19
363
原创 原生js实现简单的文件预览上传
FileReader对象事件处理 FileReader.onabort 处理abort事件。该事件在读取操作被中断时触发。 FileReader.onerror 处理error事件。该事件在读取操作发生错误时触发。 FileReader.onload 处理load事件。该事件在读取操作完成时触发。 FileReader.onloadstart 处...
2018-07-30 15:03:28
4038
原创 原生js实现移动端touch事件，解决穿透问题
四种touch事件touchstart: //手指放到屏幕上时触发touchmove: //手指在屏幕上滑动式触发touchend: //手指离开屏幕时触发touchcancel: //系统取消touch事件的时候触发 每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表touches: //当前屏幕...
2018-07-30 14:41:59
9239
原创 JS前端创建html浏览器导出下载
HTML与文件下载主要用的html5的download属性和BlobURL.createObjectURL URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.objectURL = URL.createObjectURL(blob...
2018-03-16 19:25:25
2136
原创 offsetLeft,Left,clientLeft详解
背景最近写了一个滑动条，发现自己的对offsetLeft,Left,clientLeft这几个的概念还不是很清楚，于是决定细细研究下。分类client部分 clientHeight:内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度(不含边框，也不包含滚动条等边线，会随窗口的显示大小改变) clientLeft,clientTop: 这两个返回的是元素周围...
2018-03-15 22:32:24
2217
原创 jq实现查看预览图
功能鼠标移到缩略图上会显示该图的大图，并且大图跟随鼠标移动；或是移动到提示文字上，也可以显示图片。并且含有方向判别功能，具体来说就是如果缩略图在页面的左半部分，则大图显示在鼠标的右侧，如果缩略图在页面的右半部分，则预览的大图在鼠标的左侧显示。思路分析html结构<a href="xx.jpg">缩略图</a>当鼠标覆盖到<a></a...
2018-03-08 22:31:01
2408
转载 JavaScript移除绑定在元素上的匿名事件处理函数
问题用addEventListener()和attachEvent()给一个DOM元素绑定事件处理程序时，如果传入一个匿名函数，那么用相应的removeEventListener()和detachEvent()是无法将这个匿名的处理程序解除绑定的。所以我们用的时候应该传入一个函数表达式。那么，如果我就是想使用匿名函数进行绑定和解绑，怎么解决？思路这两个函数都不接受匿名函数进行解...
2018-03-06 21:09:35
2134
原创 js刷题记录
3、一个数组 par 中存放有多个人员的信息，每个人员的信息由年龄 age 和姓名 name 组成，如{age: 2, name: 'xx'}。请写一段 JS 程序，对这个数组按年龄从小到大进行排序。优化：function parSort(par) { return par.sort(function(arr1, arr2) { return arr1.age &...
2018-02-09 19:07:20
1471
1
原创 解决vuex在页面刷新后数据被清除的问题
1.原因2.解决方法localStorage没有时间期限，除非将它移除，sessionStorage即会话，当浏览器关闭时会话结束，有时间期限，具有自行百度我这里使用sessionStorage，这里需要注意的是vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionStorage就不会了，页面
2018-02-07 00:34:27
37270
5
原创 javascript-闭包是什么
闭包在讲闭包前先要知道javascript定义函数的方式有两种： 一种是函数声明，其语法是这样的function functionName(){ //函数体}第二种创建函数的方式是使用函数表达式。函数表达式有几种，下面是最常见的一种var functionName=function (){ //函数体}这种形式看起来好像是常规的变量赋值语句，即创建一个函数并将它赋值给变量fun
2017-12-20 13:28:51
162
转载 position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
这是寒冬大神提出的一个题目，刚开始看到这题的时候完全不知道从什么地方回答起好，题目内容比较广泛，找不到针对点。后来我觉得这个题目应该能拆成几个点来回答：1、'display'、'position' 和 'float' 的相互关系；2、position跟display、overflow、float下的margin collapse。一、'display'、'position' 和 'float'
2017-10-05 20:34:23
1105
原创 负margin对元素高度的影响
情况一margin-bottom为负值不会产生位移，会减少自身的供css读取的高度 I dont have the height .container{ margin:100px auto; width: 500px; border
2017-09-21 21:23:04
408
转载 负margin可以改变块状元素的宽度
html>head>meta http-equiv="Content-type" content="text/html; charset=utf-8">title>CSS负边距测试title>style type="text/css"> #test-width, #test-width2 { text-align: center; margin-ri
2017-09-19 23:17:47
456
转载 jq使用on时的注意事项
当用on去绑定一个事件时，如.on('mouseenter','a',function(e){}e.target不一定为a，可能的元素是可以冒泡到a的子元素，需要判断才行
2017-09-17 22:41:30
412
转载 CSS3box-shadow属性的使用
一、语法： E {box-shadow: inset x-offset y-offset blur-radius spread-radius color}; E {box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色};也可同时写多组，如box-shadow: 0 -10px #fff ,0 2px #fff,0 3px #
2017-09-12 21:54:39
226
转载 HTML5之HSLA colors
语法： || || || 取值： ：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色； ：Saturation(饱和度)。 取值为0%到100%之间的值； ：Lightness(亮度)。 取值为0%到100%之间的值； ：alpha(透明度)。 取值在0到1之间；说明：HSL色彩模式
2017-09-12 17:42:03
442
转载 CSS3background-size背景图片尺寸属性
background-size语法w3c对background-size的语法规定如下：属性名:background-size属性值:* 其中bg-size = [ | | auto ]{1,2} | cover | contain初始值:auto auto应用于:所有元素继承性:无百分比:
2017-09-12 17:32:08
605
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人