Web前端
文章平均质量分 82
Three_ST
学习者
展开
-
前端知识之angular组件库之NG-ZORRO-ANTD结构窥探(二)components
ng-zorro-andt 结构原创 2023-02-16 22:49:35 · 961 阅读 · 0 评论 -
前端知识之angular组件库之NG-ZORRO-ANTD结构窥探(一)components
ng-zorr-antd,components 点击.fade-header content内容就会展开。其中使用到了angular中的cdk/coercion。里面封装了框架中使用到的共用组件和方法。ng-zorro-ant中使用的动画。项目组件中的公共方法集合地。存放组件以及命令的目录。内置了几种常用的颜色。原创 2023-02-12 15:00:39 · 760 阅读 · 0 评论 -
数据可视化之echart.js-vue实现3d 地理图绘制(飞线图,立柱图)
尝试echart能够实现的功能下载感兴趣的数据在页面中引用创建飞线创建立柱完整代码https://blog.csdn.net/hadry123/article/details/102456263 ↩︎原创 2022-07-12 21:25:00 · 1348 阅读 · 7 评论 -
JavaScript进阶之事件处理-Eventloop(微任务,宏任务,promise,async,await)
Javascript 之 Event Loop1^在JavaScript中,任务被分为两种,一种宏任务(MacroTask)也叫Task,一种叫微任务(MicroTask)。事件流事件流描述的是从页面中接受事件的顺序,事件 捕获阶段 处于目标阶段 事件冒泡阶段 addeventListener 最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。1、事件捕获阶段:实际目标div在捕获阶段不会接受事件,也就是在捕获阶段,事件从docum转载 2022-05-02 09:53:59 · 232 阅读 · 0 评论 -
JavaScript之可能会用到的二十个小技巧
1.一句代码实现多维数组扁平化const arr = [1, 2, 3, [4, [5, 6, [7,8]]]];// 方式1:console.log(arr.flat(Infinity));// 方式2:console.log(arr.join().split(','));// 方式3:console.log(arr.toString().split(','));// 在查阅资料中,博主发现原来join()、toString()函数式可以跨越层级的,于是便有了方式2、 3参考链接ht原创 2021-10-29 22:31:30 · 635 阅读 · 0 评论 -
浏览器工作原理与实践|16:WebApi setTimeout是怎么实现的
浏览器页面是由消息队列和事件循环系统来驱动的。过setTimeout和XMLHttpRequest这两个 WebAPI 来介绍事件循环的应用。这两个 WebAPI 是两种不同类型的应用,比较典型,并且在JavaScript 中的使用频率非常高。setTimeout它就是一个定时器,用来指定某个函数在多少毫秒之后执行。它会返回一个整数,表示定时器的编号,同时你还可以通过该编号来取消这个定时器。function showName(){ console.log("极客时间")}var timerID转载 2021-10-26 21:34:17 · 169 阅读 · 0 评论 -
web前端之浏览器V8垃圾回收机制
Chrome V8 & JavaScript垃圾回收机制垃圾数据回收分为手动回收和自动回收两种策略。何时分配内存、何时销毁内存都是由代码控制的//在堆中分配内存char* p =(char*)malloc(2048);//在堆空间中分配2048字节的空间,并将分配后的引用地址保存//使用p指向的内存{ //....}//使用结束后,销毁这段内存free(p);p = NULL;从上面这段 C 代码可以看出来,要使用堆中的一块空间,我们需要先调用 mallco 函数分配内存原创 2021-07-12 21:40:14 · 126 阅读 · 0 评论 -
web前端之HTML5 在桌面端实现拍照功能一 video (typescript)
前言关于在桌面端通过调用摄像头拍照的需求,可能没有那么主流,因为现在大多数都通过移动端(手机,平板)完成,但是如果有需求就要想办法实现,通过查阅资料了解到目前浏览器摄像头拍照有几种实现方式:1.利用浏览器提供的MedieStream2.利用flash(这个已经快被淘汰了)因此没有采用...原创 2021-06-30 22:40:08 · 906 阅读 · 0 评论 -
前端基础知识学习之-ShadowDOM&LightDOM
DOMDOM和SAXW3C制定了一套书写XML分析器的标准接口规范——DOM。除此以外,XML_DEV邮件列表中的成员根据应用的需求也自发地定义了一套对XML文档进行操作的接口规范——SAX。这两种接口规范各有侧重,互有长短,应用都比较广泛。应用程序开发过程中,应用程序不是直接对XML文档进行操作的,而是首先由XML分析器对XML文档进行分析。然后,应用程序通过XML分析器所提供的DOM接口或SAX接口对分析结果进行操作,从而间接地实现了对XML文档的访问。DOM介绍 优缺点分析DOM: D原创 2021-05-30 14:31:37 · 1079 阅读 · 2 评论 -
前端基础知识之SVG&Canvas之间的区别与简单应用
::: tipcanvas常用APIfillRect(x,y,width,height)实心矩形strokeRect(x,y,width,height)空心矩形fillText(“Hello world”,200,200);实心文字strokeText(“Hello world”,200,300)空心文字canvas和svg的区别svg绘制出来的图片有独立dom节点,可以绑定事件,是矢量图,放大图片不会有锯齿。canvas绘制出来的图片是一个画布,等于就是一张图,放大会产生锯齿。:原创 2021-04-29 22:26:33 · 693 阅读 · 0 评论 -
前端基础知识之清除浮动的几种方式
清除浮动现象:不清除浮动会发生高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)clear清除浮动(添加空div法)在浮动元素下方添加空div,并给该元素写css样式:{clear:both;height:0;overflow:hidden;}给浮动元素父级设置高度;<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/heigh原创 2021-04-25 21:33:42 · 582 阅读 · 0 评论 -
前端知识Angular之ng-template,ng-content,ng-container和* ngTemplateOutlet
您需要了解有关Angular中的ng-template,ng-content,ng-container和* ngTemplateOutlet的所有信息普拉泰克·米什拉(Prateek Mishra)那是我忙于为Office项目开发新功能的日子之一。突然间,一些事情引起了我的注意:最终在Angular中渲染的DOM在检查DOM时,我看到ngcontentAngular将其应用于元素。嗯……如果它们包含最终DOM中的元素,那么有什么用<ng-container>?那时我&l翻译 2021-02-19 22:13:12 · 832 阅读 · 1 评论 -
前端基础知识之水平居中/垂直居中/水平垂直居中
本文来自于个人前端基础知识积累项目《菜鸟进阶》水平居中行内元素使用text-align:center 实现行内元素水平居中块级元素,设置margin:0 auto;.parent { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto;}flex布局 display:flex; justify-content:center;//原创 2020-12-26 22:38:01 · 207 阅读 · 0 评论 -
web前端基础知识之浏览器内核与页面渲染流程
浏览器内核浏览器/RunTime|:内核(渲染引擎)|JavaScript 引擎–:|:–|:–Chrome |Blink(28~) Webkit(Chrome 27) |V8FireFox |Gecko | SpiderMonkeySafari |Webkit| JavaScriptCoreEdge |EdgeHTML |Chakra(for JavaScript)IE |Trident |Chakra(for JScript)PhantomJS |Webkit |JavaScriptCo原创 2020-12-23 21:13:33 · 129 阅读 · 0 评论 -
前端基础知识之浏览器重绘与回流
回流与重绘回流: 部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算,表现为重新生成布局,重新排列元素重绘: 由于节点的几何属性发生改变或者由于样式发生改变,例如改变元素背景色时,屏幕上的部分内容需要更新,表现为某些元素的外观被改变单单改变元素的外观,肯定不会引起网页重新生成布局,但当浏览器完成回流之后,将会重新绘制受到此次回流影响的部分回流和重绘代价是高昂的,它们会破坏用户体验,并且让 UI 展示非常迟缓,而相比之下回流的性能影响更大,在两者无法避免的情况下,一般我们宁可选择代价原创 2020-12-17 21:16:32 · 156 阅读 · 0 评论 -
JavaScript学习之webWorker知识学习
WebWOrker::: tip概述Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worker 线程完成计算任务,再把结果返回给主线程。这样的好处是,一些计算密集型或高延迟的任务,被 Worker 线程负担了,主线程(通常负责 UI 交互)就会很流畅,不会被阻塞或拖慢。Worker 线程一旦新建成功,就会始终运行,不会被主线程上的活动(比如原创 2020-11-28 21:50:26 · 243 阅读 · 0 评论 -
JavaScript学习之ES6-proxy知识学习二(has/this/ownKeys)
本文主要来自 阮一峰《ECMAScript6 入门》has()has()方法用来拦截 HasProperty 操作,即判断对象是否具有某个属性时,这个方法会生效。典型的操作就是 in 运算符。has()方法可以接受两个参数,分别是目标对象、需查询的属性名。使用 has()方法隐藏某些属性,不被 in 运算符发现。var handler = { has(target, key) { if (key[0] === "_") { return false; } r转载 2020-11-24 22:24:58 · 655 阅读 · 0 评论 -
JavaScript学习之ES6-proxy知识学习一(get/set/apply)
proxy主要参考 阮一峰大神的《ECMAScript6 入门》概述Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。var obj = new Proxy( {原创 2020-11-23 22:49:45 · 773 阅读 · 0 评论 -
JavaScript学习之ES6-genertor知识学习(特性与用法)
Generator看一个例子function* foo(){ yield 'result1' yield 'result2' yield 'result3'}const gen = foo()console.log(gen.next().value) // result1console.log(gen.next().value) // result2console.log(gen.next().value) // result3ES5下如何实现generator原创 2020-11-16 22:17:41 · 1202 阅读 · 0 评论 -
JavaScript学习之ES6-async/await学习
async/awaitES2017 提出的async 函数,终于让 JavaScript 对于异步操作有了终极解决方案。No more callback hell。async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示,在函数内部使用 await 来表示异步。想较于 Generator,Async 函数的改进在于下面四点:内置执行器。Generator 函数的执行必须依靠执行器,而 Aysnc 函数自带执行器,调用方式跟普通函数的调用一样;更好的语义。a原创 2020-11-15 20:09:34 · 80 阅读 · 0 评论 -
前端基础知识学习之-CSS Flex布局
FlexCSS 弹性盒子布局是 CSS 的模块之一,定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中,弹性容器的子元素可以在任何方向上排布,也可以“弹性伸缩”其尺寸,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框(水平框在垂直框内,或垂直框在水平框内)可以在两个维度上构建布局。基本概念轴在 flex 布局中有个主轴和交叉轴的概念 flex-direction* row -->* row-转载 2020-09-11 19:34:17 · 318 阅读 · 0 评论 -
nestjs+mongodb项目 centos服务器部署踩坑
项目服务器部署nestjs打包由于nestjs在本地打包运行是没有问题的,但是按照正常的npm run build 发布到服务器的时候就会报组件不存在的问题,尝试了调整组件位置等方法,主要是由于打包后的文件指向的是相对本机的目录,但是服务器上面环境和本机不一样,于是想到在服务器上面打包项目,#在项目目录执行npm run build# 然后在dist目录执行以下命令node main更好的方式是使用pm2 管理node.js项目mongodb设置database.provider.ts原创 2020-08-31 21:51:07 · 888 阅读 · 0 评论 -
前端基础知识学习-flex布局(一)基本概念
FlexCSS 弹性盒子布局是 CSS 的模块之一,定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中,弹性容器的子元素可以在任何方向上排布,也可以“弹性伸缩”其尺寸,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框(水平框在垂直框内,或垂直框在水平框内)可以在两个维度上构建布局。基本概念轴在 flex 布局中有个主轴和交叉轴的概念 flex-direction* row -->* row-转载 2020-08-08 17:37:59 · 291 阅读 · 0 评论 -
JavaScript数据结构-Array 数组-基本用法二
2.7 JavaScript 的数组方法参考在 JavaScript 里,数组是可修改的对象,这意味着创建的每个数组都有一些可用的方法方法名描 述concat连接 2 个或更多数组,并返回结果every对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回 truefilter对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组forEach对数组中的每一项运行给定函数。这个方法没有返回值join将所有的数组元素原创 2020-07-27 20:47:34 · 191 阅读 · 0 评论 -
JavaScript数据结构-Array 数组-基本用法一
数组 Array几乎所有的编程语言都原生支持数组类型,因为数组是最简单的内存数据结构,数组存储一系列同一种数据类型的值。但在 JavaScript 里,也可以在数组中保存不同类型的值。但要遵守最佳实践,别这么做创建和初始化数组var daysOfWeek = new Array(); //{1}var daysOfWeek = new Array(7); //{2}var daysOfWeek = new Array( "Sunday", "Monday", "Tuesday",原创 2020-07-23 22:08:07 · 172 阅读 · 0 评论 -
前端基础-隐藏HTML页面滚动条的方法
隐藏滚动条第三方库在以前使用jQuery的时候有一个第三方工具 JQuery-nicescroll,引入设置就能影藏滚动条,同时还可以实现滚动现在也有了angular版本下的nicescrollJavaScript// 禁止鼠标滑过滚动条滚动document.body.onmousewheel = function () {return false;}// 恢复鼠标滑过滚动条滚动document.body.onmousewheel = function () {return true;}原创 2020-07-25 17:12:19 · 1122 阅读 · 0 评论 -
vue基础知识之-virtual dom 原理实现
virtual dom 原理实现创建dom树树的diff,同层对比,输出patches(listDiff/diffChilder/diffProps)没有新节点,返回新的节点tagName与key不变,对比props,继续递归遍历子树对比属性(对比新旧属性列表)旧属性是否存在与新属性列表中都存在的是否有变化是否出现旧列表中没有的新属性tagName和key值变化了,则直接替换成新节点渲染差异遍历patches,把需要更改的节点取出来局部更新dom转载 2020-07-15 21:49:29 · 209 阅读 · 0 评论 -
JavaScript相关操作方法-数组扁平化
数组扁平化var inputArr = [1,2,3,[4,5,[6,7,[8,9,[10,11,[12]]]]]];function flatten(arr){ var res = []; for(let i=0;i<arr.length;i++){ if(Array.isArray(arr[i])){ res = res.co...原创 2020-04-29 23:36:20 · 94 阅读 · 0 评论 -
GIT ERR/报错 Pull is not possible because you have unmerged files
GIT ERR/报错 Pull is not possible because you have unmerged files把本地项目推送到远程git仓库时出现此错误> git rev-parse --show-toplevel> git rev-parse --git-dirOpen repository: g:\PrivateFile\CV\Press> git ...原创 2020-04-26 22:48:09 · 384 阅读 · 0 评论 -
bootstrap-table文件导出(无法导出,已解决)
Bootstrap-table 文件导出bootstrap-table 在文件导出的时候存在文件之间的依赖,因此需要选择合适的版本导出文件,经过多方尝试,使用了如下的文件成功导出。方案一 来自bootstrap-table官方<!DOCTYPE html><html lang="en"><head> <meta charset="UT...原创 2020-04-16 20:34:29 · 2366 阅读 · 0 评论 -
JavaScript学习之ES6-async\await 异步
async/awaitES2017 提出的async 函数,终于让 JavaScript 对于异步操作有了终极解决方案。No more callback hell。async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示,在函数内部使用 await 来表示异步。想较于 Generator,Async 函数的改进在于下面四点:内置执行器。Generato...原创 2020-03-31 23:13:18 · 148 阅读 · 0 评论 -
JavaScript学习之事件循环-eventloop
Event Loop1^ eventloop在JavaScript中,任务被分为两种,一种宏任务(MacroTask)也叫Task,一种叫微任务(MicroTask)。事件流事件流描述的是从页面中接受事件的顺序,事件 捕获阶段 处于目标阶段 事件冒泡阶段 addeventListener 最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用...转载 2020-03-31 20:55:20 · 173 阅读 · 0 评论 -
JavaScript学习之ES6-Promise学习
Promise实现原理ECMAScript6入门Promise all() race() allSettled()1.基本结构::: tipnew Promise((resolve,reject)=>{ setTimeout(()=>{ resolve('FULLFILLED’) },1000)})构造函数Promise必须接受一个函数...原创 2020-03-26 22:05:01 · 148 阅读 · 0 评论 -
JavaScript Error - maximum call stack size exceeded 未知异常
使用echart.js编写代码的过程中出现了 位置异常,看报错信息是递归次数太多导致了溢出在这个情况下检查代码,在setinterval和promise中循环嵌套,把以前代码删除后,问题得到解决...原创 2020-06-28 19:44:25 · 274 阅读 · 0 评论 -
JavaScript高级程序设计-基本概念(语法、数据类型、语句、函数)
3 基本概念语法数据类型流控制语句函数任何语言的核心都必然会描述这门语言最基本的工作原理。而描述的内容通常都要涉及这门语言的语法、操作符、数据类型、内置功能等用于构建复杂解决方案的基本概念。3.1 语法3.1.1 区分大小写ECMAScript 中的一切(变量、函数名和操作符)都区分大小写3.1.2 标识符所谓标识符,就是指变量、函数、属性的名字,或者函数的参数。第一个...原创 2020-02-20 21:35:54 · 205 阅读 · 0 评论 -
JavaScript高级程序设计- 第四章 变量、作用域和内存问题
4 变量、作用域和内存问题理解基本类型和引用类型理解执行环境理解垃圾收集变量的值及其数据类型可以在脚本的生命周期内改变。4.1基本类型和引用类型基本类型值指的是简单的数据段,而引用类型值指那些可能由多个值构成的对象。ES5中 5 种基本数据类型: Undefined、 Null、 Boolean、 Number 和 String。这 5 种基本数据类型是按值访问的,因为可以操作保...原创 2020-02-16 17:16:39 · 145 阅读 · 0 评论 -
JavaScript高级程序设计-引用类型(二)Function、基本包装类型(Number,String,Boolean)
文章目录5.5 Function类型5.5.1 没有重载5.5.2 函数声明与函数表达式5.5.3 作为值的函数5.5.4 函数内部属性5.5.5 函数属性和方法5.6 基本包装类型5.6.1 Boolean 类型5.6.2 Number类型5.6.3 String类型5.7单体内置对象5.7.15.7.2 Math对象5.8 小结5.5 Function类型函数实际上是对象。每个函数都是 F...原创 2020-02-07 19:34:16 · 480 阅读 · 0 评论 -
JavaScript高级程序设计-引用类型(一)object、Array、Date、RegExp
文章目录5 引用类型5.1 Object类型5.2 Array类型5.2.1 检测数组5.2.2 转换方法5.2.3 栈方法5.2.4 队列方法5.2.5 重排序方法5.2.6 操作方法5.2.7 位置方法5.2.8 迭代方法5.2.9归并方法5.3 Date类型5.3.1 继承的方法5.3.2 日期格式化方法5.3.3 日期/时间组件方法5.4 RegExp类型5.4.1 RegExp实例属性5...原创 2020-02-07 19:33:02 · 222 阅读 · 0 评论 -
JavaScript高级程序设计-函数表达式(function expression)
7. 函数表达式函数表达式是 JavaScript 中的一个既强大又容易令人困惑的特性。定义函数的方式有两种:一种是函数声明,另一种就是函数表达式。函数声明的语法是这样的。function functionName(arg0, arg1, arg2) {//函数体}关于函数声明,它的一个重要特征就是函数声明提升(function declaration hoisting),意思是在执行...原创 2020-02-02 22:54:54 · 852 阅读 · 1 评论 -
JavaScript高级程序设计-面向对象编程(二)-继承(inheritance)
文章目录6.3 继承的方式6.3.1 原型链6.3.2 借用构造函数6.3.3 组合继承6.3.4 原型式继承6.3.5 寄生式继承6.3.6 寄生组合式继承6.4 小结本文续上一节6.3 继承的方式继承是 OO 语言中的一个最为人津津乐道的概念。许多 OO 语言都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。如前所述,由于函数没有签名,在 ECM...原创 2020-01-28 15:58:02 · 219 阅读 · 0 评论