">温度 div id="main1" style="height:150px;">div> div>...div class="col-lg-12"> 压力 div id="main2" style="height:150px;">div> div> div class="col-lg-12">...id="main3" style="height:200px;">div> div> div class="col-lg-12"> div> div> div> var axisData = [ "8", "9"
两个Excel表格核对 excel表格中# DIV/0 核对两个表格的差异，合并运算VS高级筛选 1.两列顺序一样的数据核对 方法1：加一个辅助列，=B2=C2 结果为FALSE的就是不相同的...方法2：两列数据，按CTRL+\ 然后直接标记颜色就把不一样的找出来 2.两列顺序不一致的情况 方法1：用VLOOKUP来查找匹配的 方法2：两列数据全选中了，然后在开始选项卡下，点击条件格式，选择突出重复值...excel表格中# DIV/0 含义： 当公式被 0（零）除，即分母为0时，将会产生错误值#DIV/O 2种方法快速核对两个表格的差异，合并运算VS高级筛选 (测试发现：对数字列有效果，对文本的没有效果...点击确定，在新的工作表里生成了一张新的表格，在这个表格里，数字为0表示无差异，大于0的，则表示差异，而显示成“#DIV/O!”则表示这个编号只在其中一个表格里。...对比的两个表格，表头，在使用标准偏差功能时候，字段名称需要一致。否则会出现：多出来一列：全部是#DIV/0! Excel是根据表头名称一致来匹配的。
事件委派事件委派是当我们想要在一群子元素中，都加上同样的事件监听器时可以派上用场。当我们有许多相同元素，有相似的行为时，我们可以不用在每个元素都加上事件监听器，而是可以直接在父层加上监听器。...这种把监听器装在父层，然后委派给子元素，就是所谓的事件委派。这么做的好处是，我们不用在每个元素，例如每个按钮上都加上监听器，这可以减少内存消耗；这也让我们的架构更弹性，可以随时新增或移除元素。...也可以写比较少的代码，让可阅读性提升。举例来说 (编按： 此例子来自 MDN)，如果想要在一长串列表中的每一项，都加上事件监听，我们可以直接加在父层，不用每个子元素都加上，就算有上百上千个子元素也是。...，如果在一个按钮上添加点击事件监听器，当按钮被点击时， event.target 将始终指向该按钮元素event.currentTarget：指向当前正在处理事件的元素，即事件监听器所附加的元素在事件传播过程中...， event.currentTarget 的值可能会发生变化例如，如果在一个父元素上添加点击事件监听器，当其子元素被点击时，事件会冒泡到父元素，此时 event.currentTarget 将指向父元素根据具体的需求
说明：闭包的作用域链有明显的副作用——闭包总是获得外部函数变量的最终值。上面代码中，外部函数产生一个函数数组result并返回。函数数组中的每个元素都是一个函数，每个函数都返回 i变量。...原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制回收。...④ 闭包的缺点： (1) 需要维护额外的作用域。 (2) 过渡使用闭包会占用大量内存。 4、this对象 在闭包内使用this对象将产生一些复杂的行为。...一个内部函数是不能直接从外部函数访问到这两个变量的。可以通过将this对象存储在另一个变量中来解决这个问题。把外部作用域中的this对象保存在一个闭包能够访问到的变量里，就可以让闭包访问该对象了。...，而COM对象的垃圾收集机制采用的是引用计数策略，在基于引用计数策略的垃圾回收机制中，若两个对象之间形成了循环引用，则这两个对象都无法被回收。
网页( 单位 ) px：绝对单位，代表屏幕中每个「点」( pixel )。 em：相对单位，每个子元素通过「倍数」乘以父元素的px值。 rem：相对单位，每个元素通过「倍数」乘以根元素的px值。...%：相对单位，每个子元素通过「百分比」乘以父元素的px值。...02 示例展示 以下将展示四种不同单位的示例，为了直观简单，四个示例都套用预设的div格式，纯粹改变font-size看看有何不同，由于子元素若没有设定font-size，会自动继承父元素的font-size...em em是相对单位，为每个子元素通过「倍数」乘以父元素的px值，如果我们每一层div都使用1.2em，最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px...rem rem是相对单位，为每个元素通过「倍数」乘以根元素的px值，如果我们每一层div都使用1.2rem，最内层就会是16px x 1.2 = 19.2px。
; 二、案例分析 ---- 整体标准流布局 : 整个布局 是装在一个盒子模型中 , 先放置一个盒子模型 , 然后将该 块级元素 盒子 居中对齐 , 在浏览器中心位置显示 ; 整体 标准流 布局...作为父容器 , 内部放置 3 个浮动布局 , 前两个浮动布局是普通的 div> 块级元素 , 第三个浮动布局是 无序列表 ; 无序列表 是一个容器 , 内部的 默认是块级元素..., 每个列表项占用一行 , 设置成 浮动元素 后 , 该列表项的显示模式 变为 行内块元素 模式 , 以网格的形式排列 ; 列表项默认左侧带一个原点 , 使用下面的样式 , 去除默认的左侧原点...; li { list-style: none; } 尺寸精准测量 : 将图片拖到 PhotoShop 中 , 测量尺寸 ; 整体盒子模型 : 使用标尺将盒子内容包裹起来 , 盒子的尺寸...; 这样 无序列表 中每个列表项 左侧 和 底部 都有 10 像素外边距 ; 列表项 290 x 180 , 加上两个 10 像素间隔 , 宽度正好是 600 像素 ; 三、布局测量摆放 ----
这些实现细节被封装在组件内部，其他组件不应该知道这些细节。 隐藏内部结构的组件彼此之间的依赖性较小，而降低依赖度会带来松耦合的好处。 通信 细节隐藏是隔离组件的关键。...案例研究：封装修复 组件的实例和状态对象是封装在组件内部的实现细节。因此，将状态管理的父组件实例传递给子组件会破坏封装。 我们来研究一下这种情况。 一个简单的应用程序显示一个数字和两个按钮。...第一个问题是： 的封装被破坏，因为它的内部结构在应用中传递。 错误地允许 直接去修改其 state。...让我们改进两个组件的结构和属性，以便恢复封装。 只有组件本身应该知道它的状态结构。... 的状态管理应该从 （updateNumber()方法）移到正确的位置：即 组件中。
网格系统（CSS Grid）是CSS中最重要的特性之一。它能够以简单的方式将元素对齐到列和行中。CSS网格使得设计复杂且响应式的网页变得更加容易，无需使用浮动、表格或定位。...定义一个容器 要开始使用网格系统，你需要定义一个容器div或父级div，将所有子元素包裹在其中，如下所示： div class="container"> div class="child...4div> div> 当我们在CSS中将父级div的display属性设置为grid或inline-grid时，父级div将成为一个网格容器。...网格模板列（grid-template-columns） 属性grid-template-columns用于定义网格容器中的列数。它还可以帮助定义每个列的宽度。 假设你想在网格容器内定义3列。...你的任务是使其具有响应式布局，因此你决定在桌面上每列显示三个产品，在平板上每列显示两个产品，而在手机上每列只显示一个产品。
① 发送参数的位置不同 get的参数放在url中 post封装在body中 ② 参数长度限制 get请求参数因为放在url中，所以长度有限制 post请求参数长度没有限制 ③ 编码方式 GET请求只能进行...8、更新 npm 包版本时，常用的命令 //2.0.0 —> 2.0.1 npm version patch && git push --follow-tags && npm publish //2.0.0...表示 div 所属的父元素中，先筛选出子元素是 div 的集合， 然后根据 div 是在偶数位置的情况*/ #app div:nth-of-type(even) { color:blue...; } /*nth-child 表示 div 所属的父元素中，所有子元素且 div 是在偶数位置的情况*/ #app div:nth-child(even) { color...:red; } html： div id="app"> a div>bdiv> div>cdiv> div>ddiv> div>
下载之后，会得到一个安装包，我们只需要将安装包中的css font js 这三个文件夹放到项目目录即可 下载jquery:由于bootstrap这个框架里面的js代码使用的是一个js框架叫做jquery...2.栅格的组成部分： a.版心容器container（相当于html页面的container版心，相当于table表格） b.row(相当于html页面的父盒子模型,相当于table中的tr) c.col...:大栅格，这种栅格在屏幕宽度大于等于1200时可以排成一行，小于1200时每个栅格独占一行 md:中栅格,这种栅格在屏幕宽度大于等于992时可以排成一行，小于992时每个栅格独占一行 sm:小栅格,这种栅格在屏幕宽度大于等于...768时可以排成一行，小于768时每个栅格独占一行 xs:超小栅格,这种栅格所有屏幕宽度下都会排成一行 x(1-12之间的数字，尺寸比例)：bootstrap将水平方向分为12份，每一份表示row宽度的...1/12 ==col列需要写在行row标签中，每一行的栅格整体宽度占据12份，大于12份就会换行== 示例：（详细效果请参考下图与真实代码演示） col-设备类型-数字（宽度比例 1 = 屏幕 1/12
(RequestIdelCallback) 第七步的 RIC 事件不是每一帧结束都会执行，只有在一帧的 16ms 中做完了前面 6 件事儿且还有剩余时间，才会执行。...当浏览器引擎第一次遇到 JS 代码时，会产生一个全局执行上下文并将其压入执行栈，接下来每遇到一个函数调用，又会往栈中压入一个新的上下文。...时间分片（Time Slicing） 时间分片指的是一种将多个粒度小的任务放入一个时间切片（一帧）中执行的一种方案，在 React Fiber 中就是将多个任务放在了一个时间片中去执行。 4....在 React Fiber 机制中，它采用"化整为零"的战术，将调和阶段（Reconciler）递归遍历 VDOM 这个大任务分成若干小任务，每个任务只负责一个节点的处理。...生成器不仅让您在堆栈的中间让步，还必须把每个函数包装在一个生成器中。一方面增加了许多语法方面的开销，另外还增加了任何现有实现的运行时开销。性能上远没有链表的方式好，而且链表不需要考虑浏览器兼容性。
由于一个组件可以有多个子组件，但只有一个父组件，所以我把多个组件想象成一组盒子，一个盒子装在另一个盒子里。每个盒子都必须包含在一个更大的盒子中，并且里面可以有多个较小的盒子。 ?...用我的思维模型来讲：我想象函数是作为盒子中的盒子，每个较小的盒子都可以看到外部盒子或父级盒子的信息，但是大盒子却看不到较小盒子的信息。这就是我所能做的关于闭包的简单而准确的解释。 ?...函数只能访问自己和父级的信息 闭包很重要，因为可以利用它们来创建一些强大的机制，而 React 则充分利用了这一点。 React 中的闭包 每个 React 组件也是一个闭包。...为了找到数据的来源，我们通常需沿着树结构向上查找是哪个父级将其发送出去的。 一个很好的 React 中闭包的例子是通过子组件更新父级状态。你可能已经做了这件事，却没有意识到自己正在用闭包。...一旦在子级中调用了该函数，它仍存在于相同的闭包中。 这可能很难理解，所以我认为它是闭包之间的“隧道”。每个都有自己的作用域，但是我们可以创建一种将两者连接的通信隧道。
父子组件的访问方式 三、Slot 插槽（组件扩展性） 四、模板化概念 一、什么是组件化 类似微服务的软件架构，在前端开发中，一个页面的实现往往十分复杂，我们可以将一个页面划分为多个块，每个块负责相应的功能...// 父传子，其中Vue实例当作父 // props属性 div id="app"> div> 编译作用域 作用域插槽 父组件替换插槽的标签，但是内容由子组件来提供 // 组件中访问子组件的message值 中，进行维护，但这会造成类似全局变量同名、js文件的依赖等问题。...自定义模块化 将js封装在一个函数内，并定义一个变量，返回一个对象结果。每次调用时使用变量名.对象.函数/变量。
如下图，把每个组件的逻辑和样式，即JS和CSS封装在一起，方便在项目中复用整个组件： 项目有导航、侧边栏、表格、弹窗等组件，并且也会引入Element3组件库。...在Vue.js中，可以通过在子组件中触发一个自定义事件并传递数据来实现将子组件数据传递到父组件。父组件可以监听子组件的自定义事件，并在事件处理程序中接收传递的数据并更新父组件的数据。...-- 通过 v-bind，将父组件的 item 值传给子组件 --> 将父组件的 item 值传给子组件 --> 将父组件的 item 值传给子组件 --> <!
React 组件可以是函数式的，也可以是基于类的，可以定义实例方法、设置 refs、维护 state 或是使用生命周期方法。这些实现细节被封装在组件自身中，其他组件不应该窥见其中的任何细节。...案例学习：封装的恢复 组件实例和 state 对象都是封装在组件内部的实现。当把父组件实例传递给子组件，想籍此来管理 state 时，就百分之百的破坏了封装。 来看一个这样的情况。...这是个显示一个数字，以及“加”、“减”两个按钮的简单应用： div id="root">div> class App extends React.Component { ... }class...// 问题在于：使用了父组件的内部结构 class Controls extends Component { render() { return ( div className=...onIncrease 和 onDecrease 两个 prop 回调函数会在点击相应按钮时被调用，而这些回调函数中的实现细节， 不再需要了解，也本不应该知道。
)，弹性容器的每个子元素都称为弹性项目轴(Axis)，每个弹性框布局包含两个轴，弹性项目沿其依次排列的那根轴称为主轴 (main axis)，垂直于主轴的那根轴称为侧轴 (cross axis)flex-direction...，它们具体取决于弹性容器的主轴与侧轴中，由 writing-mode; 确立的方向（从左到右、从右到左，等等）order 属性，将元素与序号关联起来，以此决定哪些元素先出现。...>如果将 box 的属性改为#box { display: flex; align-items: center;}flex 属性display:flex; 设置在外层容器父级，表示该容器使用弹性盒布局方式...，默认值为 0flex-shrink:1;指定了 flex 元素的收缩规则，子项的收缩所占的份数，默认值为1 当所有子项相加的宽度大于父项的宽度，每个子项减少的多出的父项宽度的 1/n felx-basis...1，如果没有显示定义该属性，将会自动按照默认值 1 在所有子项宽度相加之后计算比率来进行空间收缩上面的例子中 c 定义了 flex-shrink，a 和 b 没有定义，但会根据默认值 1 来计算，可以看到总共将剩余空间分成了
完美的解决方案 第一种方法的缺点是：子组件虽然拿到数据后才开始渲染，但是数据请求的逻辑却放到了父组件上面，我们期望所有的逻辑都封装在子组件内部。...两个不完美的例子 为了让你更直观的看到完美方案的牛逼，我们先来看看前面讲的两个不够完美的例子。...父组件中请求数据的例子 下面这个是父组件中请求数据的例子，父组件的代码如下： div v-else...这样虽然实现了我们的需求但是将子组件获取user的逻辑放到了父组件中，我们期望将这些逻辑全部封装在子组件中，所以这个方案并不完美。...并且这个loading的显示逻辑不需要封装在子组件中，在“暂停”渲染期间自动就能显示出来。等到从服务端请求数据完成后才开始渲染子组件，并且自动的卸载掉loading页面。
li与嫡长子的左边距作用于浅红和深红之间的左边距， li嫡长子的右边距和下一个li嫡长子的左边距综合 构成了两个li之间的间距。...2. ul这次挑了大梁，针对内部的li使用column多栏布局，设置为三栏显示，且每一栏之间 3....设置每一行中单个元素的宽度： grid-template-columns，每个宽度值100px根据业务需要设置。 给三个设置了宽度就长这样了。 ? 3....设置每一列中单个元素的高度： grid-template-rows，每个高度值100px根据业务需要设置。 最后出现我们想要的效果： ?...好处：也是唯一能用来安慰自己的地方就是，不用table标签少了很多reset样式~ 关键点 1. 三行li，每个li里三列div（模拟表格的结构） 2.
跟 vue 中的 template 一样，它是不会渲染到页面的。... div> 运行效果如下： image.png 发现，父元素被压住了，里面元素 zIndex 值如何的高，都没有效果。 那这要怎么破？...> 第一个参数是显示的内容，每二个参数是确认的回调，第三个参数是取消的回调函数。...因为 Dialog 是封装在 modal 里面的。...总结 scopedClass 高阶函数的使用 传送门 portal 动态生成组件 闭包传 API 本组件为使用优化样式，如果有兴趣可以自行优化，本节源码已经上传至这里中的lib/dialog
这个问题我们将题目简化为两个问题。如何将元素设置水平居中 以及 如何将元素设置为垂直居中。...接下去我们看看垂直居中 如果是父块元素中的一行 内联元素/行内元素，比如 span 标签，我们直接将行高设置为父块元素的高度即可。...div> 可以看到，这次头部、左侧、中间、右侧、尾部变成了并列的兄弟元素，因为它们同在同一个网格中，我们将最外层的包裹div设置为grid布局，同时设置3行3列，每一行的高度都是32px，列则不一样，第一列和第三列是...在JavaScript中，每创建一个函数，闭包就会在函数创建的同时被创建出来。 19. 闭包产生的原因? 闭包产生的本质就是，当前环境中存在指向父级作用域的引用。...，所以我认为每个函数都是闭包的表现形式。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
