07 2020 档案

前端开发中一些好用的软件包。
摘要：原文 https://github.com/linxiaowu66/nodejs-useful-packages#%E5%89%8D%E8%A8%80 前言 1、日志 pino: 性能极好的nodejs日志器。它还包括一个shell界面以更好地打印它的日志文件 winston: 一款多传送异步日志库 阅读全文
posted @ 2020-07-17 15:28 jaiodfjiaodf 阅读(779) 评论(0) 推荐(0)
Web Api
摘要：所有的 web api，供以后查阅使用 获取 web api 的代码 <script> let names = Object.getOwnPropertyNames(window); function filterOut(names, props) { let set = new Set(); pr 阅读全文
posted @ 2020-07-10 16:17 jaiodfjiaodf 阅读(210) 评论(0) 推荐(0)
DOM viewport
摘要：今天学到了一个新的技巧，用鼠标点击 chrome dev tools 的 Elements 中的标签以后 ，使用 $0 就可以获取到鼠标所点击的 DOM 节点 然后总结一下 Dom Scroll 的 api。 常用的就是这几个。 $0.scrollBy(30, 30); $0.scrollTo(0, 阅读全文
posted @ 2020-07-10 14:16 jaiodfjiaodf 阅读(136) 评论(0) 推荐(0)
CSS OM
摘要：虽然放在 DOM 分类里面，但是 CSS OM 并不属于 DOM，而是并行的。仅为方便查找。 document.styleSheets <style title="hello"> a { color: red; } </style> <link rel="stylesheet" title="x" 阅读全文
posted @ 2020-07-10 12:31 jaiodfjiaodf 阅读(196) 评论(0) 推荐(0)
DOM Range Api
摘要：Range Api 1 （必要的 api） var range = new Range(); range.setStart(element, 9); range.setEnd(element, 4); var range = document.getSelection().getRangeAt(0) 阅读全文
posted @ 2020-07-10 11:33 jaiodfjiaodf 阅读(365) 评论(0) 推荐(0)
DOM 操作 2
摘要：题目 从一道面试题说起，给定下面的 html，如何把该 html 中 DOM 的 Children 逆序。 <div id="a"> <span>1</span> <p>2</p> <a>3</a> <div>4</div> </div> 解答一 该方法比较原始笨重，但是可以实现功能。思路大概就是获 阅读全文
posted @ 2020-07-10 09:43 jaiodfjiaodf 阅读(128) 评论(0) 推荐(0)
DOM Event
摘要：具体有很多的细节，网址在https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener react 的合成时间之前我也写过，翻翻博客就能看到。 Syntax // 仔细看，这个东西有三个参数 target.a 阅读全文
posted @ 2020-07-09 16:44 jaiodfjiaodf 阅读(148) 评论(0) 推荐(0)
JavaScript Closure 的第一次使用
摘要：今天在帮沈老司机调一个代码。 一开始的代码是通过写一个定时器然后通过 document.getElementById('')来获取 div 的高度，然后设置了一个计时器来动态更新高度的。 开始大概是这个样子的 setInterval(() => { let x = document.getEleme 阅读全文
posted @ 2020-07-09 16:05 jaiodfjiaodf 阅读(152) 评论(0) 推荐(0)
DOM 操作
摘要：要知道一点，所有的 DOM 元素，都只能有一个父元素，它不能被两次插入到DOM 树中 如果我们把一个 DOM 节点插入到 document 的 a 位置，然后又把 DOM 节点插入到 document 的 b 位置，那么，它会默认把 a 位置的 DOM 节点 remove，再插入到 b 位置。 我们 阅读全文
posted @ 2020-07-09 15:22 jaiodfjiaodf 阅读(160) 评论(0) 推荐(0)
DOM 总览 （Browser Api）
摘要：![](https://img2020.cnblogs.com/blog/1735070/202007/1735070-20200709125102145-801700493.png) 阅读全文
posted @ 2020-07-09 12:51 jaiodfjiaodf 阅读(169) 评论(0) 推荐(0)
DOM Node 概览
摘要：![](https://img2020.cnblogs.com/blog/1735070/202007/1735070-20200709120435958-1367460797.png) 阅读全文
posted @ 2020-07-09 12:05 jaiodfjiaodf 阅读(95) 评论(0) 推荐(0)
React useEffect
摘要：今早来又莫名其妙的遇到了 bug，排查了一下是 useEffect 导致的。今天就再来详细的学习一下 react useEffect。 为什么要？ 我们知道，react 的函数组件里面没有生命周期的，也没有 state，没有 state 可以用 useState 来替代，那么生命周期呢？ useEf 阅读全文
posted @ 2020-07-09 10:36 jaiodfjiaodf 阅读(2612) 评论(0) 推荐(0)
HTML 语义化
摘要：今天跟了一下 winter 老师的课程，学了下语义化。 在我们的日常工作开发中，用的最多的就是 div 还有 span，可能其他用的稍微多一点的也就还有 p 标签，ul标签， li 标签。其实在日常工作开发中，用vue、react 框架的时候，基本上 div 标签 和 span 标签就能够满足我们的 阅读全文
posted @ 2020-07-08 21:24 jaiodfjiaodf 阅读(132) 评论(0) 推荐(0)
HTML 元信息类标签
摘要：1. 是什么？ 所谓元信息，是指描述自身的信息。元信息类标签，就是 HTML 用于描述文档自身的一类标签。通常出现在 head 标签中，一般来说都不会被页面显示出来。（与此相对应的是，其他的标签，比如语义类标签，描述的是业务）。 元信息多数情况下是给浏览器、搜索引擎来阅读的，而不是给我们人类阅读的（ 阅读全文
posted @ 2020-07-08 13:10 jaiodfjiaodf 阅读(835) 评论(0) 推荐(0)
HTML entity （记忆）
摘要：HTML entity （记忆） 要记住的三个 HTML entity 用于平时来写HTML、JavaScript 都会用得到 1. quot 双引号 &quot; 2. amp 连接符号 &amp; 3. lt 小于 &lt; 4. gt 大于 &gt; 阅读全文
posted @ 2020-07-07 16:44 jaiodfjiaodf 阅读(333) 评论(0) 推荐(0)
HTML &nbsp
摘要：HTML &nbsp 今天进入 HTML 的学习了。 今天学到的一点就是，以后不能再用 &nbsp 来替换空格了。 以前在刚开始学的时候，不知道是从哪里弄来的骚操作，反正网上是这么流传的。 空格 &nbsp，然而实际上，&nbsp，顾名思义，叫做 none break space，这是不会 brea 阅读全文
posted @ 2020-07-07 16:18 jaiodfjiaodf 阅读(375) 评论(0) 推荐(0)
CSS position
摘要：1. position property static relative fixed absolute sticky 2. static static 是 position 属性的默认值。如果省略 position，默认就是 static。 static 的元素处于网页正常流里面正常的位置。 这个时 阅读全文
posted @ 2020-07-07 15:49 jaiodfjiaodf 阅读(189) 评论(0) 推荐(0)
CSS property
摘要：// 获取 body 的所有 style属性 getComputedStyle(document.body) CSS 动效 动画 animation animationDelay animationDirection animationDuration animationFillMode anima 阅读全文
posted @ 2020-07-07 10:15 jaiodfjiaodf 阅读(524) 评论(0) 推荐(0)
CSS animation
摘要：Animation @keyframes 定义 关键帧 @keyframes mykf { 0% {top: 0; transition: top ease} 50% {top: 30px; transition: top ease-in} 75% {top: 10px; transition: t 阅读全文
posted @ 2020-07-06 20:33 jaiodfjiaodf 阅读(173) 评论(0) 推荐(0)
React 嵌套渲染对象，内部对象会是 undefined 报错的解决办法。
摘要：出错的原因 render()一加载就会渲染，渲染的数据是初始state里的值 ，当setState会再次渲染 之前用 dva，由于 promise 能够对异步 request 请求非常方便的调用并对流程进行控制。 然而用原生 redux 的时候，经常会出现 undefined 错误。 之前的写法是使 阅读全文
posted @ 2020-07-06 16:18 jaiodfjiaodf 阅读(1460) 评论(0) 推荐(0)
flex 属性
摘要：遍历了一下 flex 的各个属性,还没完全记住啊，省得下次用的时候这里查那里查了。 flex 的实现也在前面的 toy-browser 里面了。 flex-direction: row | row-reverse | column | column-reverse flex-wrap: nowrap 阅读全文
posted @ 2020-07-06 13:01 jaiodfjiaodf 阅读(143) 评论(0) 推荐(0)
margin 折叠
摘要：只会发生在 bfc 里，不会发生在 ifc里。 这就意味着，边距折叠只会发生在竖直方向（不严谨，但是可以这么理解）。 我们来观察这段代码： <body style="background-color: lightgreen;"> <div style="width:100px;height:100p 阅读全文
posted @ 2020-07-03 16:19 jaiodfjiaodf 阅读(178) 评论(0) 推荐(0)
CSS经典布局——双飞翼布局
摘要：当然，圣杯在正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线变窄，「圣杯」将会「破碎」掉。如图，当 main 部分的宽小于 left 部分时就会发生布局混乱。我们一般都给个 container 的min-width，然后还有一点就是圣杯要清除浮动。 好的，我们来看看双飞翼 阅读全文
posted @ 2020-07-03 09:28 jaiodfjiaodf 阅读(601) 评论(0) 推荐(0)
CSS经典布局——圣杯布局
摘要：花了点力气，找到了圣杯布局的来源： https://alistapart.com/article/holygrail/ 1.代码 废话不多说，先上全部的代码 <div id="header"></div> <div id="container"> <div id="center" class="co 阅读全文
posted @ 2020-07-02 16:26 jaiodfjiaodf 阅读(300) 评论(0) 推荐(0)
CSS 正常流
摘要：正常流正常在哪里？ 很多人会问。 我觉得感性的理解是很正常的。。。只不过如果我们从严苛的 CSS 标准角度去理解正常流，规定排版的算法，就需要引入那些复杂的概念，就变得常人难以理解不正常了。 我们可以用一句话来描述正常流的排版行为，那就是：依次排列，排不下了换行。 float 就不说了，前面有文章写 阅读全文
posted @ 2020-07-02 14:42 jaiodfjiaodf 阅读(331) 评论(0) 推荐(0)
CSS selectors 选择器
摘要：CSS selectors 选择器 选择器的基本意义是：根据一些特征，选中元素树上的一批元素。 总览分类 简单选择器：针对某一特征判断是否选中元素。 复合选择器：连续写在一起的简单选择器，针对元素自身特征选择单个元素。 复杂选择器：由“（空格）”“ >”“ ~”“ +”“ ||”等符号连接的复合选择 阅读全文
posted @ 2020-07-02 10:47 jaiodfjiaodf 阅读(936) 评论(0) 推荐(0)
CSS function
摘要：按照 winter 老师「知识完备性」的思路，尝试整理了一下 CSS 函数。 Common CSS Functions url() attr() calc() lang() :not() CSS Custom Properties var() Color Functions rgb() and rg 阅读全文
posted @ 2020-07-02 09:55 jaiodfjiaodf 阅读(441) 评论(0) 推荐(0)
浏览器重绘与重排的区别？
摘要：今天接触到的新的名词 重绘 重排 重排: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素。 重绘：由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变。 单单改变元素的外观，肯定 阅读全文
posted @ 2020-07-01 17:22 jaiodfjiaodf 阅读(855) 评论(0) 推荐(0)
浮动 清除浮动 float clear
摘要：float clear 我们先来看看传说中的 float 1. 正常版本 首先是下面这段代码 <div> float: <div style="width: 200px;height:200px;background-color: aqua;"></div> 文本文本文本文本文本文本文本文本文本文本 阅读全文
posted @ 2020-07-01 16:56 jaiodfjiaodf 阅读(187) 评论(0) 推荐(0)