- 博客(6)
- 收藏
- 关注
RSS订阅原创 快速了解浏览器事件循环Event Loop
背景首先我们知道JS是单线程运行的，也就是每次只能执行一个任务。那么为了协调事件，用户交互，脚本，渲染，网络任务等，必须使用事件循环进行协调事件循环机制有浏览器和Node两种实现，这里暂不讨论Node部分基础知识栈 是一种先进后出的数据结构队列 是一种先进先出的数据结构JS运行机制首先任务一个一个地进入主线程执行，形成一个执行栈(stack)同步任务会立刻执行，异步任务会记录下，等待回调函数执行的时机当回调函数需要触发了，就把回调函数放进任务队列(queue)当执行栈里的任务全部执
2021-06-28 14:05:27
128
原创 Angular实现一个Collapse折叠面板组件
简单分析折叠面板由头部和内容组成，点击头部的时候，内容有一个展开和收缩的效果，如下图实现过程collapse.component.html没什么说的直接上代码。结构很简单，分成头部和面板内容两个部分，使用<ng-content>把面板内容投射到组件内部，expanded变量控制组件的展开/收缩状态。点击头部的时候切换expanded的值，显示不同的箭头图标，切换class<div class="collapse-wrapper" [class.collapsed]="!ex
2021-06-17 10:43:47
1237
原创 AngularJS/ui.router返回上一页
最近在做老项目优化，发现原本“返回上一页”的功能，非常凌乱、可读性很差。具体的场景是这样的A、B、C等多个页面都可以进入到D页面，D页面里有一个“返回上一页”功能，由于D页面里有iframe每次加载都会添加浏览记录，导致history.go(-1)不能返回想要的上一页。于是全部通过一个historyUrlService管理，在ABC页面跳转到D之前，保存来源，在D页面返回上一页的时候读取这个来源，然后手动进行跳转。这个实现问题非常大，可能写的人熟悉业务觉得没问题，反正我看的时候全局搜索看了半天，如果
2021-05-17 16:12:54
1000
原创 css实现固定宽高比例的div
使用padding实现这个方法的原理是，padding和margin的百分比值无论是水平方向还是垂直方向都是相对于宽度计算的。利用这个原理，可以通过设置padding-top / padding-bottom的百分比值，获得固定宽高比例的元素。固定宽高的元素是画出来了，但是具体使用的时候还要往里面添加子元素，需要让子元素绝对定位，占满空间。使用的例子如下<style> .wrap { width: 200px; } .box { background-co
2021-04-25 15:22:39
2901
原创 angular自定义管道：秒转换成时分秒格式
管道管道可以理解成angular.js 1.x里的filter，用法也很类似都是通过|代码import { Pipe, PipeTransform } from '@angular/core';@Pipe({ name: 'formatSecond'})export class FormatSecondPipe implements PipeTransform { transform(value: number): string { const h = Math.floor(
2021-04-16 17:02:03
470
原创 angular动态绑定HTML片段
绑定html片段，可以使用<div [innerHTML]="htmlCode"></div>但是由于安全策略，行内样式会被过滤掉，需要使用DomSanitizer转化。this.htmlCode = this.sanitizer.bypassSecurityTrustHtml(this.source);除了行内样式，我还写了一些针对这段html的样式在当前组件的scss文件里，结果并没有生效，检查后发现，是因为angular给样式加了属性选择器，比如.info[_ngco
2021-04-16 15:51:13
843
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人