Html5

关于前端:前端面试每日-31-第733天

明天的知识点 (2021.04.18) —— 第733天 (我也要出题)[html] H5如何禁止旋转屏幕时的字体调整？[css] 用css画一把带刻度的尺寸[js] 说说你对hasOwnProperty的了解[软技能] 你认为开发人员和产品人员怎样才能做到更好的均衡？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信保持的力量！！！欢送在 Issues 和敌人们一起探讨学习！我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注前端剑解公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

关于html5:前端面试每日-31-第732天

明天的知识点 (2021.04.17) —— 第732天 (我也要出题)[html] H5如何反对弹性滚动？[css] 用css简画一个行走的人动画成果[js] 不同进制数字如何示意？[软技能] 说说你对冰山实践的了解《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信保持的力量！！！欢送在 Issues 和敌人们一起探讨学习！我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注前端剑解公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

关于css:前端面试每日-31-第731天

明天的知识点 (2021.04.16) —— 第731天 (我也要出题)[html] H5如何禁止滚动流传？[css] 写一个输入框聚焦时，边框不停地突变的动画成果[js] ~的操作符有什么作用？[软技能] 除了专业技能外，你感觉你还需具备什么样的软技能？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信保持的力量！！！欢送在 Issues 和敌人们一起探讨学习！我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注前端剑解公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

关于javascript:前端内练基础什么是BFC

前言：在前端的根底中，CSS的BFC是一个重要的概念，也是很多大厂考查前端根底比问的一个问题，很多时候咱们都是晓得这个概念，然而具体是什么作用，上面请大家耐着性子看完这篇文章置信会有一些播种的。在开始之前咱们先带着几个问题登程。什么是BFC？触发BFC的条件是什么BFC能干什么？什么场景须要应用BFC什么是BFC？BFC的全称为块格式化上下文（Block Formatting Context，BFC）在MDN中具体的阐明了BFC是Web页面中可视CSS渲染的一部分，是块盒子布局过程中产生区域，也是浮动元素与其余元素的交互区域。是不是有些不懂？文档是写的比拟官网。然而咱们齐全能够了解为所谓的BFC就是CSS布局的一个概念，是一个区域换句话说能够了解为一个黑盒子。BFC的外部元素布局与内部互不影响，通过一些条件来触发BFC，从而实现布局上的需要或者解决一些问题。触发BFC的条件是什么?说到触发的条件就不得不说道当初的文档流的模式，目前分为三大类：一般流其中一般流很好了解就是页面从上到下，从左到右进行排列展现，如果在块级格式化上下文中，他们是竖着排列的，反之在行内格式化上下文外面，他们是横着排列的。浮动流左浮动的元素尽量靠左、靠上，反之右浮动同理。定位流应用相对定位和浮动定位的话都会脱离文档流，然而不会影响惯例流的布局，同样也不会进行文档流占位。触发的条件：根元素（<html>）浮动元素（元素的 float 不是 none）相对定位元素（元素的 position 为 absolute 或 fixed）行内块元素（元素的 display 为 inline-block） overflow 计算值(Computed)不为 visible 的块元素display 值为 flow-root 的元素表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）表格题目（元素的 display 为 table-caption，HTML表格题目默认为该值）....详情：MDN巴拉巴拉一大推。最好把加粗的记住比拟适合。触发的作用：属于同一个BFC的两个相邻的容器高低的margin会重叠。且会取间距最大的值。(敲黑板，是不是面试中遇到过？)代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title></head><style> .box{ width: 100px; height: 100px; background: red; margin-bottom: 10px; } .box1{ width: 100px; height: 100px; background: blue; margin-top: 60px; } .box1-1{ /*overflow: hidden;*/ /*display:flow-root;*/ }</style><body> <div class="box"></div> <div class="box1"> <div class="box1-1"></div> </div> <script> </script></body></html> ...

关于前端:vue项目两种方式实现竖向表格思路分析

问题形容在咱们做我的项目中，常见的是横向表格，然而偶然的需要，也会做竖向的表格。比方下图这样的竖向表格：咱们看到这样的效果图，第一工夫想到的是应用UI框架，改一改搞定。然而饿了么UI并没有间接提供这样的案例，局部同学会想着应用饿了么UI中的el-table的合并行、合并列的形式去实现，其实如果这样去做的话，反而做麻烦了。比方上面的合并行合并列：相似于这样的效果图，其实并不一定非得应用UI组件，有的时候应用原生的形式去做。反而会更不便。本文介绍两种形式去实现这样的简略的竖向表格。理论场景中可能会更加简单，然而还是那句话，只有有思路，就不是大问题。做编程，要害是思路：形式一（原生形式）不太举荐思路就是：表格款式本人画，应用浮动从左往右顺次排开 <template> <div id="app"> <ul class="proWrap"> <template v-for="(item, index) in data"> <li class="proItem" :key="index"> <span>{{ item.title }}</span> <span>{{ item.value == "" ? "待欠缺" : item.value }}</span> </li> </template> </ul> </div></template><script>export default { data() { return { data: [ { title: "重要级别", value: "666", }, { title: "售前状态", value: "666", }, { title: "配合状态", value: "", }, { title: "售前状态", value: "", }, { title: "技术协定状态", value: "", }, { title: "中标厂家", value: "", }, { title: "配合状态", value: "", }, { title: "配合反馈工夫", value: "", }, ], }; }, methods: {},};</script><style lang="less" scoped>#app { width: 100%; min-height: 100vh; box-sizing: border-box; padding: 50px; .proWrap { width: 100%; border: 1px solid #e9e9e9; border-right: 0; border-bottom: 0; // 每行放几组，这里就除于几 .proItem { width: 100% / 3; float: left; // 向左浮动， span { display: inline-block; width: calc(50% - 2px); height: 50px; line-height: 50px; text-align: center; border-right: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; } span:nth-child(1) { background: #fafafa; } } // 革除浮动，不革除会导致最左侧的边框隐没 &::after { content: ""; display: block; clear: both; } }}// 去掉li的默认款式li { list-style-type: none;}</style>形式二（应用栅格布局组件）举荐应用饿了么自带的栅格零碎会不便一些，咱们能够如果通过管制el-col的:span属性来设置每行呈现几组，多了就主动换行。至于表格的款式，咱们本人设置即可。这种形式很简略。代码附上： ...

关于html5:HTML元素水平垂直居中实现方式每天一个知识点

在前端页面开发中，HTML元素程度垂直居中是须要常常解决的问题，明天咱们就来零碎的学习一下如何在HTML实现程度垂直居中，通过对支流程度垂直居中实现形式的实际，来找到适宜特定状况下的布局实现形式，并逐渐达到灵活运用的程度。程度居中形式一： text-aligin:center(仅限行内元素)text-align属性定义行内元素（例如文字）如何绝对它的块父元素对齐。当其值为center时能够领行内元素居中对齐。 <style> .box1{ width: 200px; height: 200px; background-color: orange; text-align: center; }</style><div class="box1"> 一段用于演示的文字</div> 形式二：margin:0 automargin用来设置一个块元素的偏移量，其值有四个参数，别离代表：上、右、下、左四个方向的偏移量（顺时针）。其值能够简写为两个，第一个值代表高低两侧的偏移量，第二个值代表左右两侧的偏移量，当咱们给左右两侧的偏移量设置为auto时，代表咱们让浏览器本人抉择一个适合的偏移量，这样就能实现左右程度居中。 <style>.box2{ width: 75%; background-color: lime; margin:0 auto; }</style> <div class="box2"> 一段用于演示的文字 </div>形式三：基于relative布局实现程度居中咱们能够通过将一个元素设置为浮动元素，而后将其定位设置为relative，将其子元素的定位也设置为relative。而后将父元素的left值设置为50%，将其向右挪动50%的间隔，接着咱们给子元素设定left值为-50%使其向反向向挪动本身地位的50%，这样同样能够实现居中成果。 <style> .box3 { float: left; position: relative; left: 50%; } .box4 { position: relative; left: -50%; }</style><div class="box3"> <div class="box4"> 一段用于演示的文字 </div></div>形式四：基于Flex实现程度居中（挪动端首选）基于flex实现程度居中很简略，只须要将justify-content属性设定为center即可。因为flex是一个响应式布局，是挪动端跨端页面开发的首选，因而十分倡议挪动端开发的小伙伴以这种形式实现程度布局。 <div class="box5"> 一段用于演示的文字</div> .box5{ display: flex; justify-content: center;}形式五：父元素开启绝对定位，子元素开启相对定位咱们还能够通过给父元素开启绝对定位，并给子元素开启相对定位，来实现程度居中，具体实现形式如下： <div class="box6"> <div class="box7"> 一段用于演示的文字 </div></div> .box6{ position: relative;}.box7{ width: 80%; position: absolute; background-color: pink; left:0; right: 0; margin:0 auto;} 垂直居中形式一：单行文字实现程度居中单行文字实现程度居中是咱们在前端页面开发中经常遇到的一种状况，这种状况比拟非凡，这里咱们首先介绍。在一个块元素中，如果只有一行文字，咱们只需将line-height参数设置为与以后容器的高度一致即可，代码如下： ...

关于javascript:html5图像旋转缩放并上传

一般 css 的旋转缩放只是款式产生旋转，图片实质上还是没有旋转缩放的，想要图片实质旋转或者缩放，须要借助 canvas 的图像生成能力以图像旋转 90 度并且缩放 0.5 倍为例思路获取图片元素(对象)，这里也能够解决视频(video)构建画布，画布的宽高别离为图像或者视频的实在高宽挪动画布原点为原图的(高度,0)旋转画布 90 度缩放画布 0.5 倍将原图画到画布上将画布转成 Blob 对象传到服务器代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <img id="img" src="kek.jpg" alt="" /> <canvas id="canvas"></canvas> <button onclick="handle()">ok</button> </body> <script> function handle() { // 1. 获取图片元素(对象)，这里也能够解决视频(video) const img = document.getElementById("img"); // 2. 构建画布，画布的`宽高`别离为图像或者视频的实在`高宽` const canvas = document.getElementById("canvas"); // 如果是视频则video.videoWidth和videoHeight canvas.width = img.naturalHeight * 0.5; // 乘以0.5是为了缩放 canvas.height = img.naturalWidth * 0.5; const ctx = canvas.getContext("2d"); // 3. 挪动画布原点为原图的(高度,0) ctx.translate(canvas.height, 0); // 4. 旋转画布90度 const angle = (90 * Math.PI) / 180; ctx.rotate(angle); // 5. 缩放画布0.5倍 ctx.scale(0.5, 0.5); // 6. 将原图画到画布上 ctx.drawImage(img, 0, 0); // 7. 将画布转成Blob对象传到服务器 const fd = new FormData(); canvas.toBlob(function (blob) { // img.src = URL.createObjectURL(blob) fd.append("img1", blob); // 上传接口 fetch("/api/up", { method: "POST", body: fd, }); }); } </script></html>

关于html5:两种纯CSS方式实现hover图片popout弹出效果

实现原理次要图形的组成元素由背景和前景图两个元素，以下示例代码中，背景元素应用伪元素 figure::before 示意，前景元素应用 figure img 示意，当鼠标hover悬浮至figure元素时，背景元素产生变大成果，前景元素产生变大并向上挪动成果，从而从视觉上实现弹出成果。背景元素 figure::before 前景元素 figure img 1. 应用 overflow: hidden 形式主体元素的 html 构造由一个 figure 元素包裹的 img 元素形成： <figure> <img src='./man.png' alt='Irma'></figure>在 css 中设置了两个变量 --hov 和 --not-hov 用于管制 hover 元素时的放大以及位移成果。并对 figure 元素增加 overflow: hidden，设置 padding-top: 5% 用于前景元素超出背景元素时不被截断（非必须：并应用了 clamp() 函数用来动静设定 border-radius 以动静响应页面缩放） figure { --hov: 0; --not-hov: calc(1 - var(--hov)); display: grid; place-self: center; margin: 0; padding-top: 5%; transform: scale(calc(1 - .1*var(--not-hov))); overflow: hidden; border-radius: 0 0 clamp(4em, 20vw, 15em) clamp(4em, 20vw, 15em);}figure::before, figure img { grid-area: 1/1; place-self: end center;}figure::before { content: ""; padding: clamp(4em, 20vw, 15em); border-radius: 50%; background: url('./bg.png') 50%/cover;}figure:hover { --hov: 1;}img { width: calc(2*clamp(4em, 20vw, 15em)); border-radius: clamp(4em, 20vw, 15em); transform: translateY(calc((1 - var(--hov))*10%)) scale(calc(1.25 + .05*var(--hov)));} ...

关于前端:HTML简介

HTML的概念 HTML是Hyper Text Markup Language的缩写，中文翻译是超文本标记语言，遵循W3C规范，是规范通用标记语言下的一个利用。HTML是一种标记语言，由一些标签组成，次要作用是用来制作网页，区别于编程语言，它不能实现一些的事务逻辑。超文本，顾名思义，不单单文字，还能把图片、链接、声音、影像等标记起来，用于排版展现，变得合适人类浏览。 HTML文件就是之前以HTTP和HTTPS在互联网上送来送去的文件包外面的内容。 HTML构造 HTML语言，次要分为两个局部，头部和主体： 1、头部次要提供网页的根本信息，比方：题目、编码、引入文件、关键词、形容等等； 2、主体局部提供网页的次要内容，也就是浏览器展现进去的内容，有能看见的，也有看不见的，蕴含文字、图片、视频、音频、动画、超链接、事件... 整体以<HTML>标签包裹，头部以<hend>标签来标记，主体以<body>标签来标记。<HTML>标签之前会有一句对文档的类型的申明，作用是通知浏览器本网页的HEML版本，以便以便正确的对HTML标识做出渲染。因为文档类型很多，XML、pdf、word，得通知浏览器，才有针对性。整体的构造如下： <!DOCTYPE html>  <html> <head>  <meta charset="utf-8" />  <title>什么是HTML，HTML的前世今生</title> <meta name="keywords" content="永前科技，畏缩不前">   <link></link> <script></script> </head>  <body>  次要内容 </body>  </html> HTML特点 1、简略，一种简略、通用的全置标记语言，大略是当今世界上最简略的语言了吧，它都算不上编程语言 2、HTML的标签成对呈现（个别标签除外），开始标记和结尾标记 3、标记的特点，造成了繁难性，HTML版本升级采纳超集形式，从而更加灵便不便 4、扩展性，HTML语言的广泛应用带来了增强性能，减少标识符等要求，HTML采取子类元素的形式，为零碎扩大带来保障。 5、平台无关性，兼职就是跨平台的榜样，间接免疫了，能够说这这方面真的是法力无边。PC端、挪动端、平板灯各种终端设备，MAC、Windows、Linux、IOS/Android等各种不同的零碎，谷歌、IE、火狐、360...各种不同的浏览器。 6、标记能够包裹嵌套 7、标签带属性，能带多个属性，还能自定义属性，（拜服，十分奇妙的设计）个别的不成对标签： <input /> //表单元素标签 <br/> //换行 <hr/> //水平线 <img /> //图片 <option/> //下拉菜单项 ...

关于前端:表格同时合并行和列在网上找了很久都找不到这种方法于是自己写了一个适用于elementui

需要：同时合并表格的行和列？自己在百度下面找了很久，貌似没有找到相干的合并办法，唯有本人写了一个，逻辑简略，很蠢笨，欢送大神来改良 <template> <div class=""> <el-table ref="mutipleTable" border highlight-current-row :height="400" resizable :data="tableData" :span-method="objectSpanMethod"> <el-table-column label="序号" type="index" width="60"></el-table-column> <el-table-column v-for="(item, index) in tableLabel" :key="index" :prop="item.prop" :sortable="item.sortable" :width="item.width" :label="item.label" :show-overflow-tooltip="item.showOverTooltip" > <template slot-scope="scope"> <span>{{ scope.row[scope.column.property] }}</span> </template> </el-table-column> </el-table> </div></template><script>export default { name: '', data() { return { kingObj1: {}, kingObj: {}, tableData: [], // 表头的数据 tableLabel: [ { label: '负责人', width: '122', prop: 'name1', showOverTooltip: true, sortable: false, sortNo: 1 }, { label: '预计指标', width: '122', prop: 'name2', showOverTooltip: true, sortable: false, sortNo: 3 }, { label: '理论指标', width: '122', prop: 'name3', showOverTooltip: true, sortable: false, sortNo: 4 }, { label: '累计达成率', width: '122', prop: 'name4', showOverTooltip: true, sortable: false, sortNo: 5 }, { label: '工夫进度', width: '122', prop: 'name5', showOverTooltip: true, sortable: false, sortNo: 6 } ] }; }, mounted() { this.getList(); }, updated() { this.$nextTick(() => { this.$refs.mutipleTable.doLayout(); }); }, methods: { getList() { let list = { detailList: [ { name1: '客户1', name2: '客户1', name3: '客户3', name4: '客户4', name5: '客户5' }, { name1: '客户1', name2: '客户1', name3: '客户3', name4: '客户4', name5: '客户5' }, { name1: '客户1', name2: '客户2', name3: '客户3', name4: '客户5', name5: '客户5' }, { name1: '客户1', name2: '客户2', name3: '客户3', name4: '客户4', name5: '客户5' }, { name1: '客户1', name2: '客户2', name3: '客户3', name4: '客户4', name5: '客户5' } ], total: { name1: '共计', name2: '共计', name3: '客户3', name4: '客户4', name5: '客户5' } }; let kingObj = {}; let kingObj1 = {}; list.detailList.forEach((item, index) => { /* * param:1和2是代表存在和不存在，这个能够自定义，用下合并的时候，判断1所在的行数须要合并，2所在的行数不须要合并 */ if (item.name1 == item.name2) { if (!kingObj[item.name1]) { kingObj[item.name1] = {}; kingObj[item.name1][item.name1 + '1'] = []; kingObj[item.name1][item.name1 + '2'] = []; kingObj[item.name1][item.name1 + '1'].push(index); } else { kingObj[item.name1][item.name1 + '2'].push(index); } } if (item.name4 == item.name5) { if (!kingObj1[item.name4]) { kingObj1[item.name4] = {}; kingObj1[item.name4][item.name4 + '1'] = []; kingObj1[item.name4][item.name4 + '2'] = []; kingObj1[item.name4][item.name4 + '1'].push(index); } else { kingObj1[item.name4][item.name4 + '2'].push(index); } } }); this.kingObj = kingObj; this.kingObj1 = kingObj1; list.detailList.push(list.total); this.tableData = list.detailList; }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { for (let key in this.kingObj) { // 如果rowIndex在须要合并的行中 if (this.kingObj[key][key + '1'].includes(rowIndex)) { /* *param:this.kingObj[key][key + '1']['length'] + this.kingObj[key][key + '2']['length']代表总共合并的行数 */ if (columnIndex === 1) { return [this.kingObj[key][key + '1']['length'] + this.kingObj[key][key + '2']['length'], 2]; } else if (columnIndex === 2) { return [0, 0]; } } else if (this.kingObj[key][key + '2'].includes(rowIndex)) { if (columnIndex === 1) { return [0, 0]; } else if (columnIndex === 2) { return [0, 0]; } } } for (let key in this.kingObj1) { // 如果rowIndex在须要合并的行中 if (this.kingObj1[key][key + '1'].includes(rowIndex)) { if (columnIndex === 4) { return [this.kingObj1[key][key + '1']['length'] + this.kingObj1[key][key + '2']['length'], 2]; } else if (columnIndex === 5) { return [0, 0]; } } else if (this.kingObj1[key][key + '2'].includes(rowIndex)) { if (columnIndex === 4) { return [0, 0]; } else if (columnIndex === 5) { return [0, 0]; } } } } }};</script><style></style>

关于html5:饿了么UI中的elicon图标不生效问题分析并解决

问题形容明天做我的项目的时候要做一个折叠左侧导航栏的性能。筹备应用这个饿了么UI自带的折叠图标。图标长这样的：然而引入了当前，发现图标不失效。在页面中没有显示进去。控制台审查一下元素发现，i标签倒是有，然而宽高为0（宽高为0就相当于没有），审查元素的图示如下：又回头看了一下官网，官网上是有的啊，然而为啥页面上没有呢？难道是没有引入过去？看了看本人的代码是好的，而后就想到会不会是版本的问题，版本更新了当前，有一些图标被弃用了？而后就看看package.json文件，发现我的elementui的版本号是2.4.11.如下图：如同版本是有点旧了。而后就去官网找对应2.4.11版本号的图标，看有没有这个折叠图标：回到以前的版本看看解决办法将elementui降级到具备el-icon-s-fold的折叠图标的版本即可。执行命令npm i element-ui，就能够降级到最新版本的饿了么UI了，这样图标出呈现了，哈哈问题解决。思路总结版本的降级可能会新增一些个性或者去除一些个性，所以在咱们我的项目应用某个个性的时候，如果没呈现咱们想要的成果的时候。首先要去审查代码，找BUG，如果确定咱们的代码写的没有问题的话，咱们就要思考是不是版本不匹配的问题。即：呈现问题-->排查问题-->定位问题-->解决问题

关于javascript:前端知识点提炼四月份

1.搞懂peerDependencies举个栗子：假如当初有一个工程,曾经在其 package.json 的 dependencies 中申明了 packageA，有两个插件 plugin1 和 plugin2 他们也依赖 packageA，如果在插件中应用 dependencies 而不是 peerDependencies 来申明 packageA，那么 $ npm install 装置完之后的依赖图是这样的： .├── helloWorld│ └── node_modules│ ├── packageA│ ├── plugin1│ │ └── nodule_modules│ │ └── packageA│ └── plugin2│ │ └── nodule_modules│ │ └── packageA从下面的依赖图能够看出，helloWorld 自身曾经装置了一次packageA，然而因为因为在plugin1 和 plugin2 中的 dependencies 也申明了 packageA，所以最初 packageA 会被装置三次，有两次装置是冗余的。而 peerDependency 就能够防止相似的外围依赖库被反复下载的问题。如果在 plugin1 和 plugin2 的 package.json 中应用 peerDependency 来申明外围依赖库，此时在主零碎中执行 $ npm install 生成的依赖图就是这样的： .├── helloWorld│ └── node_modules│ ├── packageA│ ├── plugin1│ └── plugin2能够看到这时候生成的依赖图是扁平的，packageA 也只会被装置一次。 ...

关于html5:模拟实际项目需求使用element的日历组件配合h5的拖拽功能实现任务拖拽保存

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><title>Document</title></head><body><div id="app"> <el-calendar> <template slot="dateCell" slot-scope="{date, data}"> <div style="height:100%;width:100%" @dragenter="dragenter" @drop="drop(data)" @dragover="dragover" @dragleave="dragleave" > <p v-for="(item,index) in array[data.day.split('-').join('-')]" style="width:80%" draggable="true" @dragstart="dragstart(data,index)" @dragend="dragend" >{{item.name}} </p> </div> </template></el-calendar></div></body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script> var app = new Vue({ el: '#app', data: { array:{ '2021-04-05':[ {name:'工作一'},{name:'工作二'} ], '2021-04-06':[ {name:'工作三'},{name:'工作四'} ], '2021-04-07':[ {name:'工作五'},{name:'工作六'} ], '2021-04-08':[ ] }, sourceElement:'', targetElement:'', index:'' }, methods: { dragstart(source,index){ console.log(source,'dragstart') this.sourceElement=source.day; this.index=index; }, dragend(source){ console.log(source,'dragend') }, dragenter(target){ console.log(target,'dragenter') }, dragleave(source){ console.log(source,'dragleave') }, dragover(target){ //须要阻止默认行为，不然不会触发drop办法 target.preventDefault(); }, drop(target){ console.log(target,'drop'); this.targetElement=target.day; if(this.targetElement!=this.sourceElement){ if(!this.array[this.targetElement]){ this.$set(this.array,this.targetElement,[]) }; //先在源数组革除该元素 let arr=JSON.stringify(this.array[this.sourceElement][this.index]); this.array[this.sourceElement].splice(this.index,1); //在指标数组增加该元素 this.array[this.targetElement].push(JSON.parse(arr)); //最初调用api保留 } } }})</script> ...

关于前端:trycatch-不能捕获的错误有哪些注意事项又有哪些

作者：Ashish Lahoti译者：前端小智起源：codingnconcept点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。**最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。 github 地址：https://github.com/qq44924588... 明天的内容中，咱们来学习一下应用try、catch、finally和throw进行错误处理。咱们还会讲一下 JS 中内置的谬误对象(Error, SyntaxError, ReferenceError等)以及如何定义自定义谬误。 1.应用 try..catch..finally..throw在 JS 中处理错误，咱们次要应用try、catch、finally和throw关键字。 try块蕴含咱们须要查看的代码关键字throw用于抛出自定义谬误catch块解决捕捉的谬误finally 块是最终后果无论如何，都会执行的一个块，能够在这个块外面做一些须要善后的事件1.1 try每个try块必须与至多一个catch或finally块，否则会抛出SyntaxError谬误。咱们独自应用try块进行验证： try { throw new Error('Error while executing the code');}ⓧ Uncaught SyntaxError: Missing catch or finally after try1.2 try..catch倡议将try与catch块一起应用，它能够优雅地解决try块抛出的谬误。 try { throw new Error('Error while executing the code');} catch (err) { console.error(err.message);}➤ ⓧ Error while executing the code1.2.1 try..catch 与有效代码try..catch 无奈捕捉有效的 JS 代码，例如try块中的以下代码在语法上是谬误的，但它不会被catch块捕捉。 try { ~!$%^&*} catch(err) { console.log("这里不会被执行");}➤ ⓧ Uncaught SyntaxError: Invalid or unexpected token1.2.2 try..catch 与异步代码同样，try..catch无奈捕捉在异步代码中引发的异样，例如setTimeout： ...

关于html5:前端面试每日-31-第728天

明天的知识点 (2021.04.13) —— 第728天 (我也要出题)[html] 如何启用360浏览器的极速模式？[css] 应用css画一个旗号[js] 写一个办法获取文件的扩展名[软技能] 如接到紧急的工作，你该如何协调人员？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信保持的力量！！！欢送在 Issues 和敌人们一起探讨学习！我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注前端剑解公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

关于javascript:智慧城市大数据运营中心-IOC-之-Web-GIS-地图应用

前言IOC（Intelligent Operations Center）——智慧城市智能经营核心就是智慧城市的大脑，是建设在各个智慧利用零碎之上的零碎。通过对政府各职能部门的业务信息共享与整合，聚焦城市运行监测、剖析决策、可视化指挥、应急治理等环节，对人口统计、民生服务、信访举报、产业经济、突发事件等一系列综合指标进行无效监控，并围绕网格化治理、综合执法、环境卫生、园林绿化等重点畛域，晋升城市运行管理水平和突发事件的处理效率。打造智慧市政、智慧城管、智慧社区等智慧型城市。 HT for Web GIS 产品的定位在于使用产品弱小的可视化技术，将地理信息系统（Geographic Information System，GIS）的数据进行丰盛的可视化展现。以城市为根底，对城市各类基础设施数据以更加多样化模式进行可视化展现；将 GIS 数据和云计算、大数据、物联网等技术相结合，构建真正的数字经济，数字城市，数字中国；以时空为根底，通过可视化剖析技术，对城市的布局、布局、剖析和决策提供技术撑持，推动城市数字化转换和建设。图扑软件（Hightopo）总部正位于漂亮的鹭岛厦门，厦门是一个集文化、生态、游览、高新技术于一身的漂亮城市，并被誉为“国家生态园林城市”、“中国人的海上花园”。智慧城市智能经营核心（IOC）案例以厦门为基点，应用 Hightopo 的 2D、 3D 和 GIS 可视化技术进行搭建。市面上的 GIS 零碎常见的是基于 ArcGIS API for JavaScript、百度地图API、高德地图 API 、Cesium、Mapbox、Leaflet、Openlayers 等技术进行实现。HT for Web GIS 产品反对对不同地图瓦片服务或数据、航拍歪斜摄影实景的 3DTiles 格局数据以及城市建筑群等不同的 GIS 数据的加载，同时，联合 HT 矢量、BIM 数据轻量化、三维视频交融以及 2D 和 3D 的无缝交融等技术劣势，在 GIS 零碎中对海量的 POI 数据、交通流量数据、布局数据，现状数据等进行多样化的可视化展现。HT for Web GIS 产品颠覆传统的 GIS 零碎的开发，让 2D GIS 零碎和 3D GIS 零碎的开发变得更加便捷，数据更加直观，展示更加多样化。成果展现IOC 智慧城市智能经营核心大屏联合 GIS 地图，以城市地图为背景，辅以左右两侧 2D 面板进行展现。别离从城市综合、生态文化、社会治理、文化游览四个方面对整座城市进行经营整合，全方位掌控城市运行状况，及时做出经营策略调整。其中对于城市修建模型，如果间接采纳地图供应商提供的白模，展现成果绝对一般，因而还须要通过烘焙 AO 贴图来减少模型之间的暗影关系。其次建筑群作为一个模型不可逐个进行解决，制作过程中不免容易解体，因而须要将模型一分为多来离开解决。最终将分进去的每个区块都会附带一个较大的 AO 贴图，再对 AO 贴图进行烘焙，就须要对模型进行展UV，最终实现城市级建筑群建模工作。 ...

关于前端:boxshadow-设置后看不到的问题

引子在修复问题的时候，发现一个元素设置了 box-shadow 属性，其它的元素也有专用，但这个元素的暗影看不见，试着把色彩值变的更显著，但还是看不到。问题示例，示例二维码。 OriginMy GitHub问题起因首先想到是不是属性写错了，但其它的元素都失常显示，这个是专用的款式。那么是不是有款式笼罩呢？在浏览器中认真看了下，款式是有笼罩，但没有笼罩 box-shadow 属性。于是就认真的跟失常显示的元素进行比照，发现有一点不同：一个元素的父元素能够滚动，另外一个元素的父元素不能够滚动。于是尝试把设置 overflow-y 属性去掉，而后就好了！尽管解决了问题，但想要明确其中的一些原因，于是查找相干材料，发现了一些阐明，感觉有用，上面是局部内容的翻译。外暗影投射暗影时，元素的边框盒子如同是不通明的，假设扩散的间隔是 0，它的边界有着跟边框盒子一样的大小和形态。暗影从边框外边界绘制，暗影在元素盒子边框内侧被剪切。内暗影投射暗影时，内边距边界之外的所有如同都是通明的，假设扩散的间隔是 0，它的边界有着跟内边距盒子一样的大小和形态。暗影从内边距边界内侧绘制，暗影在元素内边距盒子之外被剪切。暗影成果从前到后利用：第一个暗影在最顶层，其它的在这个暗影的上层。暗影不会影响布局，可能会与其它盒子重叠或者跟他们本人的暗影重叠。从内容重叠和绘制程序来说，一个元素外暗影，会立刻在元素背景之下绘制，内暗影会立刻在元素的背景之上绘制，如果有边框的话，内暗影也会在边框和边框背景图片之下。依据以上的内容，联合遇到的问题，就得出了一个想法：既然暗影的绘制不会影响布局，那么是不是说暗影并不会占据理论的空间。测试示例，示例二维码。由此可见，暗影是不占据失常文档流外面的空间。再回到问题上来，父元素设置了 overflow 属性，其值除了 visible 之外，当内容超过了内边距时都会被剪切掉。其子元素的高度、宽度和父元素一样，子元素设置 box-shadow 时，绘制的暗影从子元素的边框边界向外绘制，子元素边界跟父元素的边框边界雷同，绘制出的暗影超出了父元素的内边距边界，被属性 overflow 的作用剪切掉了，就呈现了看不见暗影的景象。相干材料MDN overflowoverflow-clippingbox-shadowBlock formatting context

关于html5:css三种方式实现sticky-footer底部黏连布局

问题形容什么是sticky footer布局举例来说，就是在网页中有一篇文章，文章可长可短，如果文章比拟长，就在文章完结的中央，搁置一个点赞按钮。如果文章比拟短，就在页面的底部搁置一个点赞按钮。大抵效果图如下：就是黏在底部的布局文章较短时：文章较长时：实现形式形式一（定位布局）察看网页的骨架，大抵分为两局部，一部分是文章内容，另外一部分底部的按钮，咱们能够把文章的内容和底部的按钮都放在一个内容区的盒子外面，给盒子设置最小高度100vh。按钮组设置固定定位到盒子的最底部，子元素绝对定位到底就会盖住父元素的底部的一部分内容。又因为盒模型默认是content-box，所以咱们开启border-box盒模型，同时在加上一个底部的padding，这样的话，既会把内容挤上去同时底部的padding空间就能够留给底部的按钮用以搁置。 vh是绝对的长度单位，对应的还有vw，别离是绝对于这个网页的高度和宽度的。即把网页分成100份。100vh就是整屏的高度代码如下： <template> <div id="app"> <div class="content"> <p v-for="(item,index) in data" :key="index">段落{{index}}</p> <div class="btns"> <el-button size="small" type="primary">按钮</el-button> </div> </div> </div></template><script>export default { data() { return { data: [], }; }, mounted() { for (let i = 0; i < 55; i++) { this.data.push(i); } },};</script><style lang="less" scoped>#app { width: 100%; height: 100vh; .content { width: 100%; min-height: 100%; position: relative; /* 子元素绝对定位到底就会盖住父元素的底部的一部分内容。又因为盒模型默认是content-box，所以咱们开启border-box盒模型，同时在加上一个底部的padding，这样的话，既会把内容挤上去同时底部的padding空间就能够留给底部的按钮用以搁置。当然别忘了应用定位哦 */ box-sizing: border-box; padding-bottom: 40px; .btns { width: 100%; height: 40px; line-height: 40px; background-color: #ced; position: absolute; bottom: 0; } }}</style>形式二（应用calc()计算布局）这种形式的css代码量会少一点，还不错。构造上，要把内容区的盒子和装按钮的盒子并排搁置，装按钮的盒子设置固定高度，比方50px，装内容区的盒子设置计算形式calc(100vh-50px)这样也会自适应实现。代码如下： ...

关于angular:SAP-Spartacus-B2B-页面信息提示图标的弹出窗口显示实现逻辑

这个弹出窗口的技术实现，通过SAP Spartacus 自定义的popover Component实现而成：留神，当我刚接触Angular时，误以为下图标号为1的a标签，和标号为2的自定义标签cx-org-toggle-status, 会依照其在unit-details.component.html里呈现的先后顺序，呈现在最终的页面里。实际上，我这种了解是谬误的。 SAP Spartacus B2B 页面如下图左边高亮区域所示，技术上实现在cx-org-card 选择器对应的CardComponent里： Card的layout即布局设置，实现在card.component.html里：其中class为actions的div标签，作为一个place holder，包容所有生产CardComponent selector, 即cx-org-card时传入的蕴含属性actions的DOM元素。这种动静注入元素的机制，通过下列语句实现，称为content projection: ng-content select="[actions]"也就是说：下图标号为1的a标签，和标号为2的cx-org-toggle-status标签页，因为都带有actions的属性：因而运行时，会呈现在下图标号为1，class为actions的div元素里。因而，我只须要在CardComponent的template实现，即card.component.html里，申明cxPopover, 这样所有生产了CardComponent selector cx-org-card 的利用Component，都可能主动看到 (i) icon, 而不必在Spartacus B2B 的 6个 Details Component里，反复申明 cxPopOver了。更多Jerry的原创文章，尽在："汪子熙":

关于vue-router:简单实现VUERouter

githubvue-router Vue-router是Vue.js官网的路由管理器。它和Vue.js的外围深度集成，让构建单页面利用变得大海捞针。装置vue add router外围步骤步骤一：应用vue-router插件 //router.jsimport Router from 'vue-router';VueRouter是一个插件1）实现并申明两个组件router-view router-link2）install: this.$router.push()*/Vue.use(Router); // 引入插件步骤二：创立Router实例 // router.jsexport default new Router({...}) // 导出Router实例步骤三：在根组件增加该实例 // main.jsimport router from './router';new Vue({ router // 增加到配置项}).$mount("#app")步骤四：增加路由视图 <router-view></router-view>步骤五：导航 <router-link to="/">Home</router-link><router-link to="/about">About</router-link>this.$router.push('/');this.$router.push('/about')vue-router简略实现需要剖析单页面应用程序中，url发生变化时候，不能刷新，显示对应视图 hash：#/aboutHistory api：/about依据url显示对应的内容 router-view数据响应式：current变量持有url地址，一旦变动，动静执行render工作实现一个插件实现VueRouter类解决路由选项监控url变动响应变动实现install办法$router注册两个全局组件实现创立新的插件在Vue2.x我的项目中的src门路下，复制一份router文件，重命名为ou-router。而后在ou-router门路下新建一个ou-vue-router.js文件，并将index.js文件中的VueRouter引入改为ou-vue-router.js。 import VueRouter from './ou-vue-router'同时将main.js中的router引入也批改一下。 import router from './ou-router'创立Vue插件对于Vue插件的创立：能够应用function实现，也能够应用object或class实现；要求必须有一个install办法，未来会被Vue.use()应用 let Vue; // 保留Vue的构造函数，插件中须要用到class VueRouter {}插件：实现install办法，注册$router参数1是Vue.use()肯定会传入*/VueRouter.install = function (_Vue) { Vue = _Vue; // 援用构造函数，VueRouter中要应用}export default VueRouter; ### 挂载`$router`当咱们发现`vue-router`引入`vue`的时候，第一次是在`router/index.js`中应用了`Vue.use(Router)`，在这个时候也就会调用了`vue-router`的`install`办法；而第二次则是在`main.js`中，创立根组件实例的时候引入`router`,即`new Vue({router}).$mount("#app")`。也就是说，当调用`vue-router`的`install`办法的时候，我的项目还没有创立`Vue`的根组件实例。因而咱们须要在`vue-router`的`install`办法应用全局混入，提早到`router`创立结束才执行挂载`$router`。let Vue; // 保留Vue的构造函数，插件中须要用到class VueRouter {}/* ...

关于javascript:前端面试每日-31-第724天

明天的知识点 (2021.04.09) —— 第724天 (我也要出题)[html] h5页面如何关上微信APP？[css] 应用css画一个半透明的吸管[js] JS中把其它类型转成布尔的办法及规定是什么？[软技能] 说说你学到的这些计算机技能除了做网站外还用这些技能做过什么有意义的事吗？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信保持的力量！！！欢送在 Issues 和敌人们一起探讨学习！我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注前端剑解公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

关于html:前端那些事九VUE

https://appf96umjwe7950.pc.xiaoe-tech.com/detail/p_603eeeb8e4b087d11d4e47bc/6谈谈你对MVVM的了解？ MVVM模式的作用：解决分层。 MVC：晚期作用在后端，后端解决模板和数据再返回给浏览器，浏览器进行渲染。 model view controller controller：解决业务逻辑（路由） model：数据 view：渲染视图 MVP：益处：暗藏controller，应用mvvm简化了数据到视图绑定的过程，能够主动监听变动 mvvm是模拟mvc模式在前端进行分层，手动获取数据操作视图，因为controller负载臃肿，更难保护，将数据主动映射到视图上，不须要通过controller解决。解决了controller臃肿问题。请说一下Vue2及Vue3响应式数据的了解 vue2应用Object.defineProperty把属性都劫持，从新定义，只能劫持曾经存在的属性， => 数组：对于多层对象，须要递归并且从新定义，所以性能差， vue2的问题 : 属性必须在对象里能力劫持递归 vue3 不必重写get和set 在取值的时候判断是不是对象，是对象再代理懒代理默认不代理只有取值的时候代理 vue3 data里是数据心愿哪些是响应式的能够用对应api 响应式数据：数据变了告诉我。双向数据绑定 Vue中如何检测数组变动更改数组自身能扭转数组，然而监控不到数组长度函数劫持 Vue中如何进行依赖收集？如何了解Vue中模板编译原理 Vue生命周期钩子是如何实现的都是回调函数把他放在一个数组里合成整个数组顺次执行 Vue的生命周期办法有哪些？个别在哪一步发送申请及起因Vue.mixin的应用场景和原理 vuex vue-router Vue组件data为什么必须是个函数？唯一性保障组件之间的数据不受影响 nextTick在哪里应用？原理是？保障在更新结束后再获取内容，更新的策略是异步的自身不代表异步，是异步的然而是将内容保护到一个数组里，最终依照程序执行，第一次会开启一个异步工作，后续更新是往数组里放，并不是又开启一个异步工作为什么采纳异步更新，心愿都改完之后执行原理 promise => settimeout computed和watch区别底层实现都靠watcher，性能项不一样 ...

关于vue.js:前端那些事七数组

数组结构器数组的办法：不扭转原数组： concat(): 拼接数组，合并数组 slice()：slice(开始地位索引，完结地位索引)：向数组中提取指定元素，蕴含开始，不蕴含完结 map()：做计算会扭转原数组： pop(): 删除数组最初一个元素，返回删除的元素值 push(): 向数组开端增加多个元素，并返回一个值(数组新长度) shift()：与pop相同，删除数组第一个元素，返回删除的元素值 unshift()：与push相同，向数组结尾增加多个新元素，并返回一个值(数组新长度) splice()：splice(开始地位索引，删除的数量，传递新元素) : 增加元素，删除指定元素 reverse() ：倒序数组，会影响原数组 join()：数组转为字符串，返回字符串遍历办法： forEach()：循环 every(): 每个元素都满足测试函数返回true some(): 数组中至多有一个满足测试函数，返回true indexOf()： findIndex()：找到第一个满足测试函数的元素，返回具体索引 find()：找到第一个满足测试函数的元素，返回值 filter()：在所有过滤函数中返回true的数组元素放进一个新数组，返回数组 includes()：包含，返回布尔值 reduce()：数组求和 sort()：从新排序，会影响原数组，按Unicode排序进阶的办法：flat()：多维数组转一维数组 flatMap() ： Array.from()：将类数组转为数组， Array.of() /fill() ：将一组值转为数组数组实例的 copyWithin() 数组去重https://juejin.im/post/6844903881500016647 ES6： new set数组去重：（array.from 或者扩大运算符） Array.from(new Set(arr)) [...new Set(arr)] map数组去重 reduce去重 filter + indexOf去重：filter(x,index,self) ES5：双重for循环+splice去重 indexOf去重 includes去重数组排序Array.prototype.sort() 的排序稳定性 reverse() 倒序，sort()升序数组遍历：for循环：for、forEach 、for...in、for...of（ES6）迭代器Iterator map、forEach、reduce求和、filter过滤、【every、some区别】 ES6： entries()，keys() 和 values() ...

关于前端:ES611区别汇总

问题汇总： var、let、const区别（延长：变量晋升、函数晋升）let、const是ES6新增的命令，用于申明变量； let、const只在块级作用域失效，var申明变量是全局的； var存在变量晋升，let、const不存在变量晋升；romis var能够反复申明，let、const在同一块作用域内不能反复申明； let、const的区别：const不能更改寄存在栈区里的根本数据类型和援用数据类型的指针，申明后不能再更改。存在暂时性死区 for、forEach 、for...in、for...of 循环的区别相同点：都能够遍历数组；区别： for：毛病：不能间接遍历对象。 forEach()：毛病：不能间接遍历对象，循环不能跳出。 for...in：长处：能够间接遍历对象，循环原型链的所有对象，毛病：耗费性能；保留的是键名，返回序列号 0 1 2 3 for...of【最优】：可遍历array,object,string,map,set等，能够跳出循环；保留的是键值，返回 arr1 arr2 arr3 毛病：不适用于解决原有的原生对象。解决for、forEach、for...of不能间接遍历对象的问题：将对象转为数组；参考：https://www.cnblogs.com/goule/p/13630915.html ES5和ES6的区别：ECMAScript 是 JS 的外围，ES6 绝对于 ES5 在向下兼容的根底上提供大量新个性，如：块级作用域关键字 let, 常量 const、箭头函数 promise this指向问题类Class 对象字面量的属性赋值简写、字符串模板、 Iterators（迭代器）、 Modules、 Proxies、 Map+Set+WeakMap+WeakSet 四种汇合类型、 ES6文档：https://es6.ruanyifeng.com/#docs/let ES版本更新：https://www.jianshu.com/p/824f255c2dd8 数据类型检测typeof：检测根本数据类型，返回后果是字符串 typeof string * 毛病：不能细分对象，不能区别数组和对象 * 原理：所存的值在内存都是按二进制贮存 instanceof：检测是否是某个类的实例 arr instanceof Array constructor：检测构造函数 arr.constructor === Array Object.prototype.toString.call：检测数据类型是数组，对象，函数 Object.prototype.toString.call(obj) Array.isArray：检测数组Array.isArray(arr) 如何辨别是数组还是对象Array.isArray()：ES6语法 constructor： Object.prototype.toString.call()： Object.prototype的toString()：基于Object.prototype.isPrototypeOf() 基于getPrototypeOf() https://www.cnblogs.com/woniubushinide/p/11231646.html axios ajax fetch区别axios是一种对ajax的封装，fetch是一种浏览器原生实现的申请形式，跟ajax对等 ...

关于前端:前端那些事六ES611

ES6文档：https://es6.ruanyifeng.com/#docs/set-map ES6（2015年公布） ------------版本变动最多，退出许多语法个性；兼容性：label 能够把ES6编译成ES5。 ES6 申明变量的六种办法： ES5 只有两种申明变量的办法：var命令和function命令。 ES6除了增加let和const命令，前面章节还会提到，另外两种申明变量的办法：import命令和class命令。所以，ES6 一共有6种申明变量的办法。 let变量申明const申明常量，值不能批改解构赋值：解构赋值：ES6容许依照肯定模式从数组和对象中提取值，对变量进行赋值。简化对象写法箭头函数（=>）以及申明箭头函数有几个应用留神点。函数体内的this对象，就是定义时所在的对象，而不是应用时所在的对象。不能够当作构造函数，不具备prototype原型对象，不能够应用new命令，否则会抛出一个谬误。没有arguments对象，该对象在函数体内不存在。如果要用，能够用 rest 参数代替。不能够应用yield命令，因而箭头函数不能用作 Generator 函数箭头函数都是匿名函数箭头函数三种简化形式this的动态个性：不能作为构造函数实例化对象：不能应用 arguments 变量：简化实例：箭头函数适宜与this无关的回调，比方：定时器数组的办法回调箭头函数不适宜与this无关的回调，比方：事件回调、对象的办法容许给函数参数赋默认值rest参数扩大运算符扩大运算符扩大运算符能将「数组」转换为逗号分隔的「参数序列」; 扩大运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。扩大运算符的使用数组的合并：[...数组1, ...数组2] 数组的克隆：[...数组] 将伪数组转为真数组：新数据类型SymbolES6引入一个新数据类型Symbol来标识举世无双的值，是一种相似于字符串的数据类型。 Symbol特点： Symbol的值是惟一的，用来解决命名抵触的问题 Symbol值不能与其余数据进行运算 Symbol定义的对象属性不能应用for...in循环遍历，然而能够应用Reflect.ownKeys来获取对象的所有键名。在for...in迭代中不可枚举，object.getOwnPropertyNames() 不会返回symbol对象的属性，能够通过object.getOwnPropertySymbols() 获取。 Symbol创立应用Symbol给对象增加属性或办法Symbol的内置属性数组Map：映射一对一reduce：汇总一堆进去一个算总数，平均数filter：过滤器forEach：循环遍历（迭代）字符串新办法 startsWith endsWith字符串模板 ``（反引号）面向对象class类区别：类不存在变量晋升 this 的指向 ES6的面向对象： 1、减少class关键字，结构器和类离开了 2、 class外面间接加办法 class类的继承extends，supersuper：超类 == 父类面向对象 - 实例模块化，组件化 JSX == babel ==browser.js JSONJSON对象JSON.stringify()：json转字符串 JSON.parse()：字符串转json json的简写，办法简写名字和值(key和value)一样的时候，能够值保留一个。 ...

关于html5:js-对象数组-去重

去重函数unique function unique(arr, key) { if (!arr) return arr if (key === undefined) return [...new Set(arr)] const map = { 'string': e => e[key], 'function': e => key(e), } const fn = map[typeof key] const obj = arr.reduce((o,e) => (o[fn(e)]=e, o), {}) return Object.values(obj)}一般数组去重 unique([1, 1, 1, 14, 1, 4, 4, 1, 13])对象数组去重 const list = [ { id: 0, name: '小明', age: 13 }, { id: 1, name: '小明', age: 99 }, { id: 2, name: '小明', age: 23 }, { id: 3, name: '小红', age: 42 }, { id: 4, name: '小明', age: 13 }, { id: 5, name: '小芳', age: 35 }, { id: 0, name: '小明', age: 13 }, { id: 7, name: '', age: 23 }, { id: 8, name: 'lm', age: 22 }, { id: 9, name: 'xh', age: 79 }]unique(list, 'id') // id 去重unique(list, 'age') // age 去重unique(list, 'name') // name 去重unique(list, e => e.name + e.age) // name+age 去重实现hashcode 去重 ...

关于游戏开发:开发-HTML5-小游戏

在介绍小游戏之前，先看一个框架 Phaser。 Phaser 框架是一个疾速、收费且开源的H5游戏开发框架，它提供了 Canvas 和 WebGL 两种渲染形式，兼容 PC 端与挪动端浏览器。一、Phaser 版本在启动 Phaser 游戏前，须要定义一个 Phaser.Game 对象实例，并同时将配置信息传至该实例：var game = Phaser.Game(config)。在 Phaser2 版本中，定义的是一个全局变量，并作为简直全副的零碎或者场景的入口。但降级至 Phaser3 版本之后，不再应用全局变量来存储游戏实例了。Phaser2 版本之前在介绍小游戏之前，先看一个框架 Phaser。 Phaser 框架是一个疾速、收费且开源的 HTML5 游戏开发框架，它提供了 Canvas 和 WebGL 两种渲染形式，兼容 PC 端与挪动端浏览器。一、Phaser 版本在启动 Phaser 游戏前，须要定义一个 Phaser.Game 对象实例，并同时将配置信息传至该实例：var game = Phaser.Game(config)。在 Phaser2 版本中，定义的是一个全局变量，并作为简直全副的零碎或者场景的入口。但降级至 Phaser3 版本之后，不再应用全局变量来存储游戏实例了。Phaser2 版本之前Phaser3 版本之后 const config = {};Phaser.Game(config);二、游戏配置 config const config = { type: 'Phaser.AUTO', title: "Starfall", width: 800, height: 600, parent: "game", backgroundColor: "#18216D", scene: [WelcomeScene, PrizeScene, GameScene, ScoreScene], transparent: false, antialias: true, loader: { baseURL: 'https://raw.githubusercontent.com/wqjiao/phaser-prize/master/', // 资源根本地址 crossOrigin: 'anonymous' } physics: { default: "arcade", arcade: { debug: false } },}1.type 游戏应用的渲染环境可选值： Phaser.AUTO、Phaser.WEBGL、Phaser.CANVAS 推荐值： Phaser.AUTO 主动尝试应用 WebGL，如果浏览器或设施不反对，它将回退为 Canvas 父节点： Phaser 生成的画布元素 canvas 将径直增加到文档中调用脚本的那个节点上，也能够在游戏配置中指定一个父容器 parent。2.title 游戏界面题目3.width、height Phaser 生成的画布尺寸，即游戏界面的分辨率默认：width -- 800、height -- 6004.parent 自定义 Phaser 生成画布(游戏界面)的父容器5.backgroundColor 游戏界面的背景色彩，Phaser3 版本配置项6.scene 游戏场景单场景 ...

关于游戏开发:H5游戏开发游戏引擎入门推荐

前言很多刚刚接触到游戏开发，筹备大展拳脚的小鲜肉们，往往在技术选型这第一关就栽了跟头。毕竟网络上的游戏引擎参差不齐，官网上相干材料也比拟少，而抉择一个适宜的游戏引擎是一个我的项目最根底，也是很外围的一部分。试想一下，在游戏开发进行到中后期的时候，才发现我的项目引入的游戏引擎与需要相悖，这时候不论是从新做一些修修补补的工作或者更换游戏引擎，这都是相当消耗人力物力的一件事。为了防止这种状况的呈现，在后期抉择适宜我的项目需要的游戏引擎显得尤为重要。接下来咱们来聊一聊如何去抉择适宜我的项目的 JS 游戏引擎。游戏场景分类在刚接到游戏需要时，咱们能够从以下几个方面进行考量，剖析出游戏需要场景所属，从而作为咱们抉择游戏引擎的根据。游戏成果出现形式（ 2D ？ 3D ？ VR ？）这与游戏引擎可能反对的渲染形式间接挂钩。当初的 H5 游戏渲染形式个别有 2D 渲染、3D 渲染、VR 渲染三种。而 2D 渲染个别也有三种：Dom 渲染、Canvas 渲染、WebGL 渲染。Dom 因为性能起因，个别只适宜做一些动画成果较少，交互较少的小游戏，本文次要针对 Canvas 和 WebGL 开展介绍。一般来说，对于 2D 小游戏来说，Canvas 渲染曾经足够。然而 Canvas 渲染因为底层封装档次多，不足以撑持起大型游戏的性能要求，因而大型游戏最好抉择 WebGL 渲染或者浏览器内嵌 Runtime 。游戏复杂度这与游戏引擎可能反对的性能，提供的API，性能等方面关系比拟大。游戏引擎举荐笔者从业界较风行的一些框架，进行以下几个方面比照，心愿能从主观数据上给大家的技术选型带来倡议和参考。引擎反对的渲染形式github上的 star 数更新工夫文档具体度周边产品2D，3D，VR 都反对的游戏引擎 Egret白鹭引擎是企业级游戏引擎，有团队保护。Egret 在工作流的反对上做的是比拟好的，从 Wing 的代码编写，到 ResDepot 和 TextureMerger 的资源整合，再到 Inspector 调试，最初到原生打包（反对 APP 打包），游戏开发过程中的每个环节根本都有工具撑持。官网上的示例，教程也是比拟多。值得一提的是，往年5月白鹭引擎反对了 WebAssembly ，这对于性能的晋升又是一大里程碑。 LayaAir 在渲染模式上，LayaAir 反对 Canvas 和 WebGL 两种形式；在工具流的反对水平上，次要是提供了 LayaAir IDE。LayaAir IDE 包含代码模式与设计模式，反对代码开发与美术设计拆散，内置了 SWF 转换、图集打包、JS 压缩与加密、APP 打包、Flash 公布等实用功能。 ...

关于前端:给在座各位打工人分享33款提高工作效率的vscode插件

海阔凭鱼跃，天高任鸟飞。Hey 你好！我是秦爱德。平平无奇下班摸鱼，甚至想着如何带薪拉屎？不不不，明天咱们来聊聊vscode中那些进步工作效率的实用插件吧。在之前的给在座各位“老划水员”分享10款进步幸福指数的vscode“摸鱼神器”这篇文章公布之后，也播种了很多小伙伴的点赞，咱们也不能一天天光摸鱼，还是得干点闲事。特此，我整顿了一些好用的vscode插件，如果感觉不错，欢送一键三连，你们的点赞，就是我继续写文最大的能源本文从根底必备、代码标准、开发神器三个方面来举荐，方方面面都有波及，有了这些神器就让咱们一起愉悦的撸代码吧！后方高能，多图正告根底通用插件Chinesevscode编辑器汉化包，装置后，在 locale.json 中增加 "locale": "zh-cn"，即可载入中文（简体）语言包。 Auto Rename Tag主动重命名成对的HTML标记，批改开始标签，完结标签会同步批改 HTML SnippetsHTML代码片段，该插件可为你提供html标签的代码提醒，不必键入尖括号了 Bracket Pair Colorizer该插件能够为你把成对的括号做色彩辨别，并且提供一根连接线。不便咱们审阅代码构造。通过批改配置文件，使得构造线高亮，食用更佳 "workbench.colorCustomizations": { "editorIndentGuide.activeBackground": "#00ffea"},CSS Peekcss款式查看器，可疾速查看咱们的css款式，十分方便快捷 Npm Intellisense可主动实现导入语句中的npm模块 open in browser疾速关上html文件到浏览器预览 vscode-icons提供了十分丑陋的目录树图标主题 Auto Close Tag主动闭合HTML/XML标签 Path Intellisense主动提醒文件门路，反对各种疾速引入文件 Image preview鼠标悬浮在链接上可及时预览图片 Beautify在代码文件右键鼠标一键格式化 html,js,css JavaScript (ES6) code snippetsES6语法智能提醒，以及疾速输出 VeturVScode官网钦定Vue插件，Vue开发者必备。内含语法高亮，智能提醒，emmet，谬误提醒，格式化，主动补全，debugger等实用功能代码格调标准类插件ESlint标准js代码书写规定，如果感觉太过谨严，可自定义规定 TSLintts的书写标准，这个插件是一个系列，同时还提供了TSLint (deprecated)，TSLint Vue，TSLint Vue-TSX Code Spell Checker是拼写检查程序，查看不常见的单词，如果单词拼写错误，会给出正告提醒 koroFileHeader在vscode中用于生成文件头部正文和函数正文的插件，通过多版迭代后，插件：反对所有支流语言,功能强大，灵便不便，文档齐全，食用简略！不光如此，还能生成一些特地有意思的正文，比方这一条喷火龙... Better Align代码书写的整洁，工整往往是掂量一个程序员素养的规范，这款插件能够让你的代码更排版优雅选中代码配合组合键[Ctrl+Shift+p]，输出Align即可、 change-case通常咱们对一个变量的命名可能是驼峰，可能是全大写，又或是下划线，这里可通过这个插件解决变量命名标准的问题选中变量配合组合键[Ctrl+Shift+p]，输出对应格局即可 extension.changeCase.commands：列出所有“更改案例”命令，如果仅抉择一个单词，则带有预览extension.changeCase.camel：更改大小写'camel'：转换为字符串，并用下一个字母大写示意分隔符extension.changeCase.constant：更改大小写“常量”：转换为大写字母，下划线分隔字符串extension.changeCase.dot：更改大小写的“点”：转换为小写，句点分隔的字符串extension.changeCase.kebab：更改大小写“ kebab”：转换为小写字母，用破折号分隔的字符串（参数名的别名）extension.changeCase.lower：更改大小写为“小写”：转换为小写的字符串extension.changeCase.lowerFirst：更改大小写“ lowerFirst”：转换为首字母小写的字符串extension.changeCase.no：转换没有任何大小写的字符串（小写字母，空格分隔）extension.changeCase.param：更改大小写为'param'：转换为小写字母，用破折号分隔的字符串extension.changeCase.pascal：更改大小写“ pascal”：转换为以与camelCase雷同的形式示意的字符串，但首字母也大写extension.changeCase.path：更改大小写的“门路”：转换为小写，用斜杠分隔的字符串extension.changeCase.sentence：更改大小写的“句子”：转换为小写的空格分隔的字符串extension.changeCase.snake：更改大小写“ snake”：转换为小写字母，下划线分隔字符串extension.changeCase.swap：更改大小写“替换”：转换为每个大小写相同的字符串extension.changeCase.title：更改大小写“题目”：转换为以空格分隔的字符串，每个单词的第一个字符均大写extension.changeCase.upper：更改大小写为大写：转换为大写字符串extension.changeCase.upperFirst：更改大小写为“ upperFirst”：转换为首字母大写的字符串Better Comments这款插件能够丰盛正文色彩，让正文也具备生命力，如需自定义款式，须要写入配置代码配置代码"better-comments.tags": [ { "tag": "*", "color": "#98C379", "strikethrough": false, "backgroundColor": "transparent" }]应用// * 绿色的高亮正文TODO Tree咱们常常会在代码中应用TODO来标记咱们的代码，进步可读性，TODO Tree这款插件提供了可视化窗口来查看和治理咱们的TODO Tree ...

关于前端:HTML5秘籍表单

HTML5秘籍书籍中表单局部进行要点演绎表单检测浏览器对表单验证反对状况的属性placeholder、autofocus、required、max、min和step。 autofocus主动对焦, 刷新页面会主动对焦到以后input <label for="name">Name <em>*</em></label><input id="name" placeholder="Jane Smith" autofocus><br>stepstep 属性规定输出字段的非法数字距离（如果 step="3"，则非法数字应该是 -3、0、3、6，以此类推）。敞开验证# 表单敞开<form id="zooKeeperForm" action="processApplication.cgi" novalidate># 绕过验证<input type="submit" value="Save for Later" formnovalidate>验证挂钩# required必填input:required { background-color: lightyellow;}# invalid没通过验证款式input:required:invalid { background-color: lightyellow;}# valid没通过验证款式input:required:valid { background-color: red;}应用正则表达式不用应用^和$字符示意要匹配字段值的结尾和结尾。HTML5会主动确保这一点。实际上，这就是说正则表达式匹配的是字段中残缺的值，验证的也是整个值的有效性 <label for="promoCode">Promotion Code</label><input id="promoCode" placeholder="QRB-001" title= "Your promotion code is three uppercase letters, a dash, then three numbers" pattern="[A-Z]{3}-[0-9]{3}">自定义验证<label for="comments">When did you first know you wanted to be a zookeeper? </label><textarea id="comments" oninput="validateComments(this)" ></textarea>这里，onInput事件会触发一个名为validateComments()的函数。这个函数的代码是你本人写的，次要是检测<input>元素的值，而后调用setCustomValidity()办法。如果以后值有问题，那么在调用setCustomValidity()办法时就须要提供一条谬误音讯。否则，如果以后值没有问题，调用setCustomValidity()办法时只有传入空字符串即可；这样会革除以前设置过的自定义谬误音讯。 function validateComments(input) { if (input.value.length < 20) { input.setCustomValidity("You need to comment in more detail."); } else { //没有谬误。革除任何谬误音讯 input.setCustomValidity(""); }}提交表单检测须要为表单的onSubmit事件定义处理函数，依据状况返回true（示意验证通过，能够提交表单）或false（示意验证未通过，浏览器应该勾销提交操作） ...

关于html5:HTML5秘籍文档类型和语义化以及离线缓存

HTML5秘籍书籍中文档类型和语义化, 离线缓存局部进行要点演绎 HTML5文档类型<!DOCTYPE html>益处: 简洁, 相比XHTML和HTML4阐明更加简略申明的状况下. 进入规范模式, 所有古代浏览器都会以统一的格局和布局来显示网页没有申明的状况下. ,进入混淆模式, 浏览器将依照本人的规范就进行布局(导致浏览器出现成果不同)语义元素# 新增<time>, <nav>, <footer>, <header>, <figure>, <figcaption>, <main>, <output>长处: 容易批改和保护无障碍性(屏幕阅读器辨认)搜索引擎优化语义应用header只有在内容题目还附带了其余信息的状况下，才有必要思考<header>。也就是说，其中蕴含题目、概要、发表日期、作者署名、图片或子主题链接等很多内容 main<main>包装了<article>用于标识网页的次要内容。比方，在后面的启示录网站上，次要内容就是整篇文章，不蕴含站点页眉、页脚和侧边栏。强烈建议大家在本人的网页中应用这个元素。题目标签在站点的页眉中应用了<h1>元素后，你就应该给页面中其余的区块（如“Articles”和“About Us”）选用<h2>元素作题目侧边栏aside能够用它来标注一段与注释相干的内容（2.2.5节正是这么做的），也能够用它示意页面中一个齐全独立的区块——作为页面次要内容的陪衬。导航栏nav常只用于页面中最大最次要的导航区应用<output>标注JavaScript返回值应用<mark>标注突显文本ie9及以下执行<! --[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><! [endif]-->离线缓存通过形容文件缓存资源离线利用的一项根本技术就是缓存，即下载文件（如网页）并在用户计算机上保留一份正本。有了这份正本，即便计算机不能上网，浏览器也能够应用缓存的文件。创立形容文件(PersonalityTest.manifest)形容文件就是一个文本文件，其中列出了须要缓存的文件。 CACHE MANIFEST# version 1.00.001 // 下方更新形容文件中有形容# pagesPersonalityTest.htmlPersonalityTest_Score.html# styles & scriptsPersonalityTest.cssPersonalityTest.js# pictures & fontsImages/emotional_bear.jpgFonts/museo_slab_500-webfont.eotFonts/museo_slab_500-webfont.woffFonts/museo_slab_500-webfont.ttfFonts/museo_slab_500-webfont.svg应用形容文件<! DOCTYPE html><html lang="en" manifest="PersonalityTest.manifest">...更新形容文件它缓存了两个页面。如果你更新了PersonalityTest.html，关上浏览器，从新加载这个页面，你看见的依然是原先缓存的那个页面。无论你的计算机目前是否上网，都是如此。问题在于，只有浏览器缓存了利用，那么它就不会向Web服务器申请新内容。浏览器不论你是否更新了服务器上的页面，它只管用本人曾经缓存的那个。因为离线利用没有过期一说，所以无论你过多长时间当前再看，就算是几个月当前再看，浏览器依旧还会疏忽更新后的页面。最好的方法就是增加正文，比方：...# version 1.00.001...NETWORKCACHE MANIFESTPersonalityTest.htmlImages/emotional_bear.jpgNETWORK:Images/logo.png在联网时，浏览器才会尝试从Web服务器下载logo.png文件，而在离线时，则会疏忽它。 FALLBACKCACHE MANIFESTPersonalityTest_Score.htmlFALLBACK:PersonalityScore.html PersonalityScore_offline.html浏览器会把后备文件（即这里的PersonalityScore_offline.html）下载并缓存起来。不过，只有在不能上网的时候浏览器才会应用这个后备文件。而在能上网的时候，浏览器会照常向Web服务器申请另一个文件（即这里的PersonalityScore.html）。 SETTINGS: 在线时绕开缓存SETTINGS:prefer-online

关于javascript:前端实现文本多行省略方案

以下示例文案摘取自武侠小说英雄志计划一、单行省略 <p>这个最简略，css间接实现</p> <style> .text1 { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> <p class="text1"> <b>杨肃观</b>我建超世志，必至无上道。五辅大学士杨远之子，外号「风流司郎中」，少时代父还俗，少林天绝僧关门弟子，十八岁赴京赶考，官拜兵部职方司郎中，乃是柳昂天手下两大将之一。外貌俊美，多智善谋，再加文武全才，是各朝各代中的政治菁英榜样。天绝惟一弟子，天生战略家，客栈大掌柜，大佛国创始人，也是真正的枭雄之辈。正统朝创建者之一。英雄志中最让人看不透的一个人。理论是正统朝真正的客人。以一人之身，承托整个正统朝。他不是卢云，不会纠结于什么才是对错之分的公理邪道；他不是秦仲海，不会一怒揭竿而起、牵动千万黎民之恨后转身遁逃；他不是伍定远，不会困惑于苍生和集体恩怨而茫然无措；他是杨肃观，一个灭世又济世的掌控者；敢于把现实付诸理论的实干家，倩兮口中的真正英雄。顾嗣源死后，与顾倩兮成亲。与怒苍交战难解难分。习成其师天绝神僧毕生摸索欠缺的少林传说阵法——天决，在少林与怒苍第三战中手持神剑擒龙，用六道轮回先后战胜宁不凡的仁剑和秦仲海，正统朝机密机构“客栈”创始人。客栈的主旨：围堵勇剑、守护魔刀、遮蔽圣光。“罪”与“罚”，愿天地罪孽尽加于吾身的情怀，谁能懂？ </p>成果：计划二、多行省略，谷歌计划，css实现，（谷歌浏览器或者挪动端无效） <style> .text2 { width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}</style> <p class="text2"> <b>秦仲海</b>他日若遂凌云志，敢笑黄巢不丈夫。为征西大都督武德侯、前怒苍山主秦霸先之子，九州剑王方子敬之徒，柳昂天手下头牌猛将，与杨肃观并称“文杨武秦”，另有外号「火贪一刀」。正所谓“侵掠如火，嗜血如贪，杀人何须第二刀”。秦仲海状似粗豪，其实为人精密，尤擅权谋，英雄志中命运变动最为微小的一人。性情滑稽，行事往往出人意表，死也不怕的铁汉。天生反骨，不屈从于任何压迫，敢于对皇权拔刀相向，是历史各朝代中挑战相对权威的榜样。他长年戍守北疆，生得是高鼻鹰目，虎背熊腰，生平最爱逛酒家。后被刘敬告知身世，打入狱中后左腿被施刖刑，脸刺“罪”，琵琶骨被穿，文治被废。被卢云救出后，与言二娘的客栈中谋生。后攀登珠穆朗玛峰而使得阴阳筋脉畅通，文治直追业师。尔后重建怒苍山并扯起反旗，引动八方好汉齐聚怒苍反抗朝廷。他在少林密道和宁不凡对阵杨肃观，练成烈火焚城。秦仲海带领怒苍反军为天下饥民之表率，一直冲击朝廷防线，屡次与伍定远交锋，并亲赴帝都与杨肃观对决。面对越强势的敌人，反而能越战越勇，曾以一人之力倒拖800军士。昔年火贪刀，攻守不用第二刀；今朝秦仲海，杀人何须再用刀？</p>成果：计划三、多行省略利用css中的after实现 <p>这里背景色因为我示例代码父元素用的pink，所以要跟父元素统一，这个计划，结尾处总感觉有些不太适合，不介意UI成果能够凑合着用</p> <style> .text3 { position: relative; width: 100%; line-height: 20px; max-height: 60px; overflow: hidden;}.text3::after { content: "..."; background-color: pink; height: 20px; font-size: 14px; color: #000; position: absolute; right: 0; bottom: 0; padding-left: 20px; background: -webkit-linear-gradient(to right, transparent, pink 20px); background: -o-linear-gradient(to right, transparent, pink 20px); background: -moz-linear-gradient(to right, transparent, pink 20px); background: linear-gradient(to right, transparent, pink 20px);}</style> ...

关于javascript:前端内练基础关于this的理解

前言：this的关键字是JavaScript中最简单的机制之一，它是有一个很特地的关键字，被主动定义在所有函数作用域中。然而即便是十分有教训的JavaScript开发者也很难说清它到底指向的是什么。 ——起源《你不晓得的JavaScript上卷》在开始之前咱们先带着几个问题登程。this的定义什么？有几种绑定形式，别离是什么？谁的优先级比拟高？扭转this的指向有几种形式，别离是什么？底层是如何实现的？this的定义this是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数时的各种条件，this的绑定和函数申明的地位没有任何关系，只取决函数的调用形式。举个例子： function foo () { var a = 2; this.bar();}function bar() { console.log(this.a)}foo(); // undefined解析：其实从下面那段代码能够显著看到，当foo()进行调用的时候,能够了解代码解析成 window.foo() 这个时候 this.bar() 指向的就是window,同样的在 bar() 函数打印的console.log(this.a) 能够了解为 console.log(window.a)然而真正的var a = 2其实是在foo()作用域中，以后的window对象中并不存在，那么只能输出undefined。总结：this实际上是在函数被调用时产生的绑定，它的指向什么齐全取决于函数在哪里调用。一、了解调用地位function baz() { // 以后的调用栈：baz // 因而，以后的调用地位是全局作用域 console.log('baz') bar() // bar 的调用地位}function bar() { // 以后的调用栈是 baz -> bar // 因而，以后的调用地位在bar中。 console.log('bar') foo(); // <-- foo的调用地位}function foo() { // 以后的调用栈是 baz -> bar -> foo // 因而，以后的调用地位在bar中。 console.log('foo')}baz(); // <--- baz的调用地位留神咱们是如何从调用栈中剖析出真正的调用地位，它决定了this的绑定。 ...

关于javascript:前端面试每日-31-第721天

明天的知识点 (2021.04.06) —— 第721天 (我也要出题)[html] 说说你对URL Scheme的了解[css] css如何监听屏幕的旋转？[js] 实现一个数组的fill办法[软技能] 如果有几本技术书籍，你只想买一本，你是如何抉择的？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信保持的力量！！！欢送在 Issues 和敌人们一起探讨学习！我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注前端剑解公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

关于html5:记得有一次面试被虐的题Promise-完整指南

作者：Adrian Mejia译者：前端小智起源：adrianmjia点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。 github 地址：https://github.com/qq44924588... 这篇文章算是 JavaScript Promises 比拟全面的教程，该文介绍了必要的办法，例如 then，catch和finally。此外，还包含解决更简单的状况，例如与Promise.all并行执行Promise，通过Promise.race 来解决申请超时的状况，Promise 链以及一些最佳实际和常见的陷阱。 1.JavaScript PromisesPromise 是一个容许咱们解决异步操作的对象，它是 es5 晚期回调的代替办法。与回调相比，Promise 具备许多长处，例如：让异步代码更易于浏览。提供组合错误处理。*　更好的流程管制，能够让异步并行或串行执行。回调更容易造成深度嵌套的构造（也称为回调天堂）。如下所示： a(() => { b(() => { c(() => { d(() => { // and so on ... }); }); });});如果将这些函数转换为 Promise，则能够将它们链接起来以生成更可保护的代码。像这样： Promise.resolve() .then(a) .then(b) .then(c) .then(d) .catch(console.error);在下面的示例中，Promise 对象公开了.then和.catch办法，咱们稍后将探讨这些办法。 1.1 如何将现有的回调 API 转换为 Promise？咱们能够应用 Promise 构造函数将回调转换为 Promise。 Promise 构造函数承受一个回调，带有两个参数resolve和reject。 ...

关于javascript:前端那些事四JS基础

JS由哪几局部组成ECMAScript语言外围：由 ECMA-262 定义，提供外围语言性能，ECMAScript 是由ECMA （欧洲计算机制造商协会）国内进行标准化的一门编程语言，ECMAScript 作为各自 JavaScript 实现的根底。DOM文档对象模型：（Document Object Model，简称DOM），提供拜访和操作网页内容的办法和接口，是W3C组织举荐的解决可扩大标记语言的规范编程接口。DOM扩大：Selectors API、Element Traversal API 和 HTML5 扩大。 DOM2 和 DOM3 中新增的 DOM 属性、办法和对象 BOM浏览器对象模型：(Browser Object Model，简称BOM)，提供与浏览器交互的办法和接口，通过BOM能够操作浏览器窗口，比方弹出框、管制浏览器跳转、获取分辨率等。BOM对象：window、document、location、navigator 和 screen。 JS数据类型根本数据类型：布尔型（Boolean）： true/false数值型（Number）：整数和浮点数值字符串型（String）：字符串，Null类型：空值，null值示意一个空对象，typeof返回空对象，objectUndefined类型：未定义值，应用var申明变量但给变量赋值时，他的值就是undefined，typeof返回undefined。symbol：ES6新增数据类型bigint：ES11新增数据类型，解决精度问题援用数据类型：Object 类型Function 类型根本类型和援用类型的区别：根本类型寄存在栈内存中援用类型寄存在堆内存中，，指针在栈内存null和undefined的区别： null示意没有开拓空间（js会主动回收空间），空值。undefined示意开拓了空间然而没有赋值，未定义。null默认转换成number类型是0，undefined是NaN（非数值是一个非凡的数值）检测数据类型办法typeof：检测根本数据类型（除了null），返回字符串毛病：不能细分对象，不能区别数组和对象原理：所存的值在内存都是按二进制贮存instanceof：检测实例，判断一个对象是否是一个类的实例，判断简单援用数据类型毛病：不能正确判断根本数据类型constructor：检测构造函数Object.prototype.toString.call：通过原型链判断，返回[object Xxx]Array.isArray：检测数组数据结构在我的项目中理论利用：数组树形构造：导航栏，菜单栏输入框链式调用队列栈 hash 链表汇合堆栈问题，进栈出栈https://www.bilibili.com/video/BV1U5411Y7k7?p=2 栈内存：是浏览器给代码提供的执行的环境EC执行上下文：代码本人执行时所在的环境ECStack：执行环境栈，栈内存堆内存：寄存属性和办法作用域（执行上下文）：全局作用域，函数作用域，块级作用域GO：全局对象：浏览器把属性办法放到独自内存=>堆内存（Heap），任何开拓的内存都有一个16进制的内存地址，window代表全局对象VO(G)：全局变量对象，寄存变量，以后上下文AO：公有流动变量对象进栈：造成的全局执行上下文进入到栈内存中执行全局不会出栈，公有的会出栈，先进后出栈溢出，内存优化机制 AST语法解析词法解析变量程序：var a = 123; 先创立值，在栈内存中寄存。创立变量变量和值关联对象程序：所有的指针赋值都是指针的关联指向创立一个堆内存把键值对寄存在堆内存中堆内存地址放在栈中根本类型：值类型援用类型：援用地址作用域作用域：ES5全局作用域，函数作用域，ES6块级作用域闭包概念：指的是可能拜访另一个函数作用域的变量的函数，设计公有的办法和变量。长处：缓存。将变量暗藏起来不被 GC 回收，防止全局变量的净化实现柯里化。利用闭包个性实现柯里化。毛病：内存耗费。闭包产生的变量无奈被销毁。性能问题。因为闭包外部变量优先级高于内部变量，所以须要多查找作用域链的一个档次，肯定水平影响查找速度。https://mp.weixin.qq.com/s?__... 函数柯里化https://www.jianshu.com/p/69fa332823bf 概念：将一个多参数的函数转化为单参数函数的办法作用：柯里化函数次要起到预处理的作用；益处：参数复用，提前确认，提早容许可枚举和不可枚举可枚举性：对象的每个属性都有一个形容对象（Descriptor），用来管制该属性的行为。Object.getOwnPropertyDescriptor办法能够获取该属性的形容对象。形容对象的enumerable属性，称为“可枚举性”，如果该属性为false，就示意某些操作会疏忽以后属性。躲避掉for...in操作。在JavaScript中，对象的属性分为可枚举和不可枚举之分，它们是由属性的enumerable值决定的。可枚举性决定了这个属性是否被for…in查找遍历到。根本包装类型的原型属性是不可枚举的，如Object, Array, Number等Object对象的propertyIsEnumerable()办法能够判断此对象是否蕴含某个属性，并且这个属性是否可枚举。实例对象，构造函数，原型，原型链，链式调用原型链：构造函数，原型prototype，constructor组成实例的contructor = 构造函数 ...

关于vue.js:前端那些事三网络浏览器

浏览器网络相干：OSI的七层模型、TCP/IP四层模型 TCP的三次握手（为什么要三次握手，一次呢？四次挥手是什么？）输出URL到页面加载实现须要哪几步？TCP和UDP的区别报文HTTP的特点？（疾速灵便，为什么用http不必其余的？）HTTP有哪些办法？罕用有哪些？get和post的区别是什么？options的作用？HTTP状态码？http1和http2的区别？讲出至多五种解决跨域的方法，jsonp（写一个繁难jsonp），CORSjsonp的优缺点？http和https的区别http缓存都有哪些，强缓存和协商缓存有什么区别localStorage 与 sessionStorage 与cookie的区别总结什么是同源策略，为什么呈现跨域问题？申请形式，域名和端口不同什么是事件委托，事件捕捉DNS缓存，原理WebSocket属于什么（简略利用API），原理OSI的七层模型、TCP/IP四层模型TCP的三次握手（为什么是三次握手，一次呢？四次挥手是什么？）输出URL到页面加载实现须要哪几步？TCP和UDP的区别OSI的七层模型：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层。TCP/IP：网络接口层/链路层、网络互联层、传输层、应用层。1.1 TCP三次握手https://www.jianshu.com/p/f1b3decb07f8 客户端向服务器发送SYN包，期待服务器确认；服务器收到SYN包，须要确认后向客户端发动一个SYN包；客户端收到服务器的SYN+ACK包后则向服务器发动确认包，实现三次握手。为什么不能一次或两次？因为客户端和服务器都要做好发送数据的筹备后，能力建设通信。避免了服务器端的始终期待而浪费资源。 tcp是一个全双工的协定，意思是客户端和服务端之间的通信能够同时来回流动，为了保障通信的可靠性以及确定对方能收到本人的申请，tcp采纳半敞开准则，意思是在收到一个申请后必须发送回复申请，只通信一次或者两次无奈确定对方是否收到申请 1.1 四次挥手其性质为终止协定TCP客户端发送一个FIN，用来敞开客户到服务器的数据传送。服务器收到这个FIN，它发回一个ACK，确认序号为收到的序号加1。和SYN一样，一个FIN将占用一个序号。服务器敞开客户端的连贯，发送一个FIN给客户端。客户端发回ACK报文确认，并将确认序号设置为收到序号加1。保证数据接管残缺。 1.2 输出URL到页面加载实现须要哪几步？输出网址URL是url还是字符串搜索引擎缓存机制，判断本地是否有缓存，没有缓存，DNS解析（解析失去IP），https建设TLS连贯解析的时候，服务器负载平衡TCP连贯（三次握手）发送http申请（申请办法，get、post）承受响应，判断状态码抉择解决形式（返回http状态码）判断缓存解码渲染连贯完结（四次挥手）下载html dom树，下载css OM树，联合rander树参考：https://zhuanlan.zhihu.com/p/34288735 https://mp.weixin.qq.com/s?__... 1.3 TCP和UDP的区别TCP：一对一；面向连贯；面向字节流；传输大量数据；速度慢；（web开发，http）长处：牢靠，通过TCP连贯传输的数据无差错、不失落、不反复，并且可能按序达到。UDP：一对多；面向非连贯（发送数据前不须要建设连贯）；面向报文；传输大量数据，速度快；（利用：直播，视频，应用程序）毛病：不保障交付牢靠，丢包。报文1. 申请报文（发送申请的报文）：申请头Request Headers：Accept ：申请报文可通过一个“Accept”报文头属性通知服务端客户端承受什么类型的响应。Cookie ：客户端的Cookie就是通过这个报文头属性传给服务端的哦！Referer ：示意这个申请是从哪个URL过去的Cache-Control ：对缓存进行管制，如一个申请心愿响应返回的内容在客户端要被缓存一年，或不心愿被缓存就能够通过这个报文头达到目标。申请行：HTTP办法，get/post申请HTTP协定申请体：2. 响应报文（服务端相应的报文）状态行，响应首部，内容实体， HTTP协定的次要特点？（疾速灵便，为什么用http不必其余的？）http是超文本传输协定，应用层协定的一种，应用层协定：DNS、FTP、SMTP、HTTP、SNMP、Telnet。特点：简略疾速灵便，属于应用层的面向对象的协定，基于TCP的牢靠传输。 http是不保留状态的协定（无状态协定） HTTP有哪些办法？罕用有哪些？GET（获取）POST（传输）PUT（更新）DELETE（删除）HEAD（获取报文首部）OPTIONS（询问）CONNECTget和post的区别是什么？数据类型：get只承受ASCII字符，而post没有限度，容许二进制。后退/后退：get在浏览器回退/刷新时是有害的，而post会再次提交申请。申请长度：get长度取决于浏览器窗口的长度，post长度不限度缓存：get能被缓存，post不能。申请次数：get申请一次（申请头申请体一起发送），post申请两次（先发送申请头，等100 continue，而后再发送申请体，连着发送）。安全性：post比get 更平安，因为GET参数间接裸露在URL上，POST参数在HTTP消https息主体中，而且不会被保留在浏览器历史或 web 服务器日志中，。编码格局：post反对多种编码格局 gbk utf-8GET产生一个TCP数据包，浏览器会把http header 和 data 一并发送POST产生两个TCP数据包（除了FireFox）先发送header,浏览器响应100 continue,浏览器再发送dataspecification ：相干的RFC， options的作用？检测服务器所反对的申请办法CORS中的预检申请（检测某个接口是否反对跨域）HTTP状态码，http响应，信息响应？1结尾：承受持续解决，（100 continue）2结尾：示意胜利 (200胜利并返回 201已创立 202接管 203胜利未受权 204胜利无内容)3结尾：重定向（301永恒重定向，302长期重定向，304有缓存不必更新）4结尾：客户端谬误（400语法错误，403禁止被拜访，没有权限，404资源页面不存在）5结尾：服务端谬误（500后端服务器挂了，501服务器不反对无奈解决，502网关谬误，后盾建设连贯超时，503服务器外部谬误，504后盾未建设连贯超时，505不反对http协定版本） https://mp.weixin.qq.com/s?__... URI 一个资源文件的不同辨示意办法URI：对立资源标识符URL：对立资源定位符URN：对立资源名称串行连贯长久连贯管道化长久连贯 HTTP2.0多路复用串行连贯： http1.0版本，每次发申请都要建设新的TCP连贯，每次通信后都要断开TCP连贯。长久连贯：http1.1，连段没有提出断开连接，则放弃长久TCP连贯。管道化长久连贯: 不必期待响应返回而发送下个申请并按数据返回响应。HTTP2.0多路复用：http2.0websocket: HTML5，客户端被动向服务器发申请，建设连贯后。http1和http2的区别？超文本传输协定影响一个 HTTP 网络申请的因素次要有两个：带宽和提早。浏览器为每个域名最多同时保护6条TCP长久连贯。影响http1.1效率的因素是TCP启动慢，多条TCP竞争带宽，呈现队头阻塞的问题，为了解决这个问题，http2采纳通过引进二进制分帧层，多路复用，服务器推送，头部压缩。 1）在HTTP 1.0中，客户端的每次申请都要求建设一次独自的连贯，在解决完本次申请后，就主动开释连贯。 2）在HTTP 1.1中则能够在一次连贯中解决多个申请，并且多个申请能够重叠进行，不须要期待一个申请完结后再发送下一个申请。采纳了keep-alive。 http1的次要问题：第一个起因，TCP 的慢启动，因为三次握手。第二个起因，同时开启了多条 TCP 连贯，那么这些连贯会相互竞争固定的带宽。第三个起因，HTTP/1.1 队头阻塞的问题，只有一个TCP管道。http1.1:减少了长久连贯； ...

关于前端:前端那些事二CSS

关于javascript:免费开源基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之业务数据增删改查七

基于Vue和Quasar的前端SPA我的项目实战之业务数据（七）回顾通过上一篇文章基于Vue和Quasar的前端SPA我的项目实战之表关系（六）的介绍，元数据设计性能全副实现了，本文次要介绍业务数据的crud增删改查性能。简介在crudapi零碎中，通过配置表单的形式定义元数据。表单配置好之后，对应的crud接口就主动生成了，前端集成RESTful API就能够实现业务数据的crud性能，如果配置了表关系，也反对奴才表的级联操作。 UI界面业务数据列表编辑业务数据省市区奴才表 API业务数据API包含根本的CRUD操作，具体的通过swagger文档能够查看。通过axios封装api，名称为table import { axiosInstance } from "boot/axios";const table = { create: function(tableName, data) { return axiosInstance.post("/api/business/" + tableName, data ); }, update: function(tableName, id, data) { return axiosInstance.patch("/api/business/" + tableName + "/" + id, data ); }, list: function(tableName, page, rowsPerPage, search, query, filter) { if (!page) { page = 1 } if (!rowsPerPage) { rowsPerPage = 10 } let filterStrEncode; if (filter) { let filterStr = JSON.stringify(filter); filterStrEncode = encodeURIComponent(filterStr); } return axiosInstance.get("/api/business/" + tableName, { params: { offset: (page - 1) * rowsPerPage, limit: rowsPerPage, search: search, ...query, filter: filterStrEncode } } ); }, count: function(tableName, search, query) { return axiosInstance.get("/api/business/" + tableName + "/count", { params: { search: search, ...query } } ); }, get: function(tableName, id) { return axiosInstance.get("/api/business/" + tableName + "/" + id, { params: { } } ); }, delete: function(tableName, id) { return axiosInstance.delete("/api/business/" + tableName + "/" + id); }, batchDelete: function(tableName, ids) { return axiosInstance.delete("/api/business/" + tableName, {data: ids} ); }};export { table };外围代码代码构造代码构造 ...

关于javascript:前端面试每日-31-第717天

明天的知识点 (2021.04.02) —— 第717天 (我也要出题)[html] 应用SVG画一个小米的logo[css] 给一段文字主动定时变色[js] Number.isNaN和isNaN有什么区别？[软技能] 说说你对中台的了解《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信保持的力量！！！欢送在 Issues 和敌人们一起探讨学习！我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注前端剑解公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

关于html5:如何解决-ReactuseEffect-的无限循环

作者：Shadeed译者：前端小智起源：dmitripavlutin点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。 github 地址：https://github.com/qq44924588... useEffect() 次要用来治理副作用，比方通过网络抓取、间接操作 DOM、启动和完结计时器。尽管useEffect() 和 useState(治理状态的办法)是最罕用的钩子之一，但须要一些工夫来相熟和正确应用。应用useEffect()时，你可能会遇到一个陷阱，那就是组件渲染的有限循环。在这篇文章中，会讲一下产生有限循环的常见场景以及如何防止它们。 1. 有限循环和副作用更新状态假如咱们有一个性能组件，该组件外面有一个 input 元素，组件是性能是计算 input 更改的次数。咱们给这个组件取名为 CountInputChanges，大略的内容如下： function CountInputChanges() { const [value, setValue] = useState(''); const [count, setCount] = useState(-1); useEffect(() => setCount(count + 1)); const onChange = ({ target }) => setValue(target.value); return ( <div> <input type="text" value={value} onChange={onChange} /> <div>Number of changes: {count}</div> </div> )}<input type =“ text” value = {value} onChange = {onChange} />是受控组件。value变量保留着 input 输出的值，当用户输出输出时，onChange事件处理程序更新 value 状态。 ...

关于前端:带你走进影子元素Shadow-DOM浏览器原生组件开发Web-Components-API

带你走进->影子元素(Shadow DOM)&浏览器原生组件开发(Web Components API ) 本篇介绍习惯了应用vue与react等框架来开发组件, 但其实咱们能够不依赖任何框架, 间接原生开发组件, 所以这个原生api的一大长处就是能够不依赖任何的框架。浏览器自身反对组件是大趋势, 然而目前应用起来并不够好, 但这并不能阻挡咱们学习的脚步与对常识的好奇心, 而且我也置信原生组件几年后会成为一种支流的组件编写形式, 当初就让咱们一起来学习它吧。 1. 兼容性Chrome 54 Safari 10.1 Firefox 63MDN上显示: 不倡议间接上生产环境。 2. 影子元素还记得是我第一次用qiankun.js框架的时候看到的这个概念(接下来的文章会写微前端相干实战), 这个技术能够实现一部分的css款式隔离, 之所以说只是实现一部分款式隔离, 学完这篇文章你就懂了。第一步: 生成影子元素咱们新建一个html5页面, 写上如下构造 <!DOCTYPE html><html lang="en"><head> <style> #cc-shadow { margin: auto; border: 1px solid #ccc; width: 200px; height: 200px; } </style></head><body> <div id="cc-shadow"> <span>我是外部元素</span> </div> <script> const oShadow = document.getElementById("cc-shadow"); const shadow = oShadow.attachShadow({mode: 'open'}); </script></body></html> 奇怪的一幕呈现了, 外部元素不可见并且在查看构造的控制台里呈现了非凡的构造定义。 attachShadow办法给指定的元素挂载一个Shadow DOM。mode: open 示意能够通过页面内的 JavaScript 办法来获取 Shadow DOM。mode: open针对是dom.shadowRoot办法, 间接getElementsByClassName获取还是能够获取到的(这条很重要, 有的文章都说错了)。与mode: open对应的是mode: close。留神: 不能够先开后关这种操作第二步: 往里面注入元素 const link = document.createElement("a"); link.href = 'xxxxxxxxxxxx'; link.innerHTML = '点我跳转'; shadow`.appendChild(link);留神这里应用的是shadow, 而不是dom自身。第三步: 往里面注入款式 const styles = document.createElement("style"); styles.textContent = `* { color:red } ` shadow.appendChild(styles);通过下面能够看出, 创立了一个style标签插入了进去。与此相似咱们能够创立一个link标签插入进来成果也是一样的。成果如下: ...

关于html5:免费开源基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之动态表关系管理六

基于Vue和Quasar的前端SPA我的项目实战之表关系（六）回顾通过上一篇文章基于Vue和Quasar的前端SPA我的项目实战之动静表单（五）的介绍，咱们曾经实现了元数据中动静表单设计性能，本文次要表关系性能的实现。简介在crudapi零碎中，通过表关系(relation)治理将多个表连接起来，反对一对多，多对一，一对一，多对多等关系，无关表关系基本概念参考之前文章表关系，通过UI配置好表关系后，能够反对奴才表的级联操作。 UI界面表关系列表编辑表关系表关系图 API表关系API包含根本的CRUD操作，具体的通过swagger文档能够查看。通过axios封装api，名称为metadataRelation import { axiosInstance } from "boot/axios";const metadataRelation = { create: function(data) { return axiosInstance.post("/api/metadata/tablerelations", data ); }, update: function(id, data) { return axiosInstance.patch("/api/metadata/tablerelations/" + id, data ); }, list: function(page, rowsPerPage, search, query) { return axiosInstance.get("/api/metadata/tablerelations", { params: { offset: (page - 1) * rowsPerPage, limit: rowsPerPage, search: search, ...query } } ); }, count: function(search, query) { return axiosInstance.get("/api/metadata/tablerelations/count", { params: { search: search, ...query } } ); }, get: function(id) { return axiosInstance.get("/api/metadata/tablerelations/" + id, { params: { } } ); }, delete: function(id) { return axiosInstance.delete("/api/metadata/tablerelations/" + id); }, batchDelete: function(ids) { return axiosInstance.delete("/api/metadata/tablerelations", {data: ids} ); }};export { metadataRelation };外围代码q-select控件表关系设计页面用到了q-select控件，反对抉择4种根本类型：包含一对多OneToMany，多对一ManyToOne，一对一(奴才)OneToOneMainToSub，一对一(子主)OneToOneSubToMain，通过屡次组合实现了所有类型的表关系。 ...

关于前端:前端面试每日-31-第716天

明天的知识点 (2021.04.01) —— 第716天 (我也要出题)[html] 如何禁止字母大写？[css] px、em、rem、rpx区别和为什么应用62.5%；[js] 举例说明DOM罕用的操作方法有哪些？[软技能] 说说你对微信抢红包技术的了解《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信保持的力量！！！欢送在 Issues 和敌人们一起探讨学习！我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注前端剑解公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

关于html5:Vue3-Teleport-简介请过目这个是真的好用

作者：Michael Thiessen译者：前端小智起源：news点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。对于 ve3 的一个新个性曾经探讨了一段时间了，那就是 Portals(传送门) ，它的性能是将模板HTML挪动到DOM不同中央的办法。Portals是React中的一个常见个性，Vue2 中能够应用portal-vue库。 Vue3 中，提供了 Teleport 来反对这一性能。 Teleport 的目标我首先要理解的是何时应用 Teleport 性能。在解决较大的Vue我的项目时，有逻辑解决组织代码库是很重要的。然而，当解决某些类型的组件（如模式，告诉或提醒）时，模板HTML的逻辑可能位于与咱们心愿渲染元素的地位不同的文件中。实际上，在很多时候，与咱们的Vue应用程序的DOM齐全离开解决时，这些元素的治理要容易得多。所有这些都是因为解决嵌套组件的地位，z-index和款式可能因为解决其所有父对象的范畴而变得辣手。这种状况就是 Teleport 派上用场的中央。咱们能够在逻辑所在的组件中编写模板代码，这意味着咱们能够应用组件的数据或 props。然而，而后齐全将其渲染到咱们Vue应用程序的范畴之外。如果不应用 Teleport，咱们将不得不放心从子组件向DOM树传递逻辑的事件流传，但当初要简略得多。 Vue Teleport 是如何工作的假如咱们有一些子组件，咱们想在其中触发弹出的告诉。正如方才所探讨的，如果将告诉以齐全独立的DOM树渲染，而不是Vue的根#app元素，则更为简略。咱们要做的第一件事是关上咱们的index.html，并在</body>之前增加一个<div>。 // index.html<body> <div id="app"></div> <div id='portal-target'></div></body>接下来，创立触发要渲染的告诉的组件。 // VuePortals.vue<template> <div class='portals'> <button @click='showNotification'> Trigger Notification! </button> <teleport to='#portal-target'> <div v-if="isOpen" class='notification'> This is rendering outside of this child component! </div> </teleport> </div></template><script>import { ref } from 'vue'export default { setup () { const isOpen = ref(false) var closePopup const showNotification = () => { isOpen.value = true clearTimeout(closePopup) closePopup = setTimeout(() => { isOpen.value = false }, 2000) } return { isOpen, showNotification } }}</script><style scoped> .notification { font-family: myriad-pro, sans-serif; position: fixed; bottom: 20px; left: 20px; width: 300px; padding: 30px; background-color: #fff; }</style>在此代码段中，当按下按钮时，将渲染2秒钟的告诉。然而，咱们的次要指标是应用Teleport获取告诉以在咱们的Vue应用程序内部渲染。 ...

关于html5:eslint-prettier-editorconfig问题点整理

import/no-unresolvedeslint不认门路中带有webpack门路别名的问题解决形式：装置eslint-import-resolver-webpack包在eslint的settings中，退出如下配置，相当于把你在webpack申明的门路别名通知eslint settings: { 'import/resolver': [{ webpack: { config: { resolve: { alias: { '@': path.resolve('src'), }, extensions: ['.js', '.jsx'], }, }, }, }], },node模块触发import/no-extraneous-dependencies 解决形式：装置eslint-import-resolver-webpack包而后在eslint配置中的settings退出如下配置

关于html5:深入剖析letconst在for循环中的作用原理

疾速排序'use strict';const quickSort = function (array, low, high) { if (low >= high) { return; } let i = low; let j = high; const tmp = array[i]; while (i < j) { while (i < j && array[j] >= tmp) { j--; } if (i < j) { array[i++] = array[j]; } while (i < j && array[i] <= tmp) { i++; } if (i < j) { array[j--] = array[i]; } } array[i] = tmp; quickSort(array, low, i - 1); quickSort(array, i + 1, high);}const arr = [1, 23, 7, 123, 45, 78, 10];console.log(arr);quickSort(arr, 0, arr.length - 1);console.log(arr);归并排序'use strict';// 两个有序数组合并const memeryArray = function (arr1, arr2) { const c = []; let i = 0; let j = 0; let k = 0; while (i < arr1.length && j < arr2.length) { if (arr1[i] < arr2[j]) c[k++] = arr1[i++]; else c[k++] = arr2[j++]; } while (i < arr1.length) c[k++] = arr1[i++]; while (j < arr2.length) c[k++] = arr2[j++]; return c;}// 将同一数组，两段有序序列合并const memery = function (arr, first, mid, last) { const temp = []; let i = first; const j = mid; let m = mid + 1; const n = last; let k = 0; while (i <= j && m <= n) { if (arr[i] < arr [m]) temp[k++] = arr[i++]; else temp[k++] = arr[m++]; } while (i <= j) temp[k++] = arr[i++]; while (m <= n) temp[k++] = arr[m++]; for (i = 0; i < k; i++) arr[first + i] = temp[i];}const mergeSort = function (arr, first, last) { if (!Array.isArray(arr)) throw new Error('argument is not a array'); if (first < last) { const mid = parseInt((first + last) / 2, 10); mergeSort(arr, first, mid); mergeSort(arr, mid + 1, last); memery(arr, first, mid, last); }};const arr1 = [1, 7, 13, 20, 6, 9, 10, 10, 11, 26, 29];console.log(arr1);mergeSort(arr1, 0, arr1.length - 1);console.log(arr1);

关于html5:前端面试每日-31-第715天

明天的知识点 (2021.03.31) —— 第715天 (我也要出题)[html] H5如何只弹出数字键盘？[css] css的高级选择器有哪些？[js] requireJS是如何缓存、动静加载、防止屡次加载的？[软技能] 你心愿公司能给你什么样的帮忙？为什么？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信保持的力量！！！欢送在 Issues 和敌人们一起探讨学习！我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注前端剑解公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

关于html5:Vue计算属性computed

明天通过一个购物车的案例简略论述一下vue的计算属性，在vue中咱们往往须要对数据进行操作后再返回，通常咱们须要写一个相干的操作函数来对这些数据进行操作，不过当初vue给这样的数据处理提供了新思路——计算属性。在本例中总价的数据就是利用了该属性。1.先做一个简略的购物车界面，进去大略是这个样子：把代码贴下边 <template> <div class="home"> <Head v-bind:hname="head_name" /> <div class="car_head"> <h2>商品图片</h2> <h2>商品详情</h2> <h2>商品单价</h2> <h2>购买数量</h2> <h2>单品总价</h2> </div> <div class="car" v-for="(item,index) of products" :key="index"> <div class="p_img"> ![](item.img_src) <p>{{item.p_name}}</p> </div> <div class="pdetail"> <p>{{item.p_detail}}</p> </div> <div class="price"> <p>￥{{item.p_price}}</p> </div> <div class="count"> <div class="num_box"> <button>-</button> <input type="text" v-model="item.p_number"> <button>+</button> </div> </div> <div class="total"> <p v-if="item.total === 0">未抉择数量</p> <p v-else>￥{{item.total}}</p> </div> </div> <div class="check_box"> <h2>总计:</h2> <h2>0</h2> </div> </div></template><script>import Head from "@/components/Head"export default { name: 'Home', components: { Head }, data(){ return{ head_name:"shopCar", products:[ { img_src:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb69512d9d6430d865d457ec52eebb51.png?thumb=1&w=200&h=200&f=webp&q=90", p_name:"小米11 Ultra", p_detail:"1.12''GN2｜128°超广角｜120X超长焦｜2K四微曲屏｜骁龙888｜IP68级防水｜67W 有线闪充｜67W 无线闪充｜10W 无线反充｜5000mAh超大电池｜LPDDR5｜WiFi6（增强版）｜哈曼卡顿音频认证｜立体声双扬声器", p_price:6499, p_number:0, total:0 } ] } }}</script><style scoped> .car{ width: 1200px; height: 228px; border: 2px solid #000; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; margin-top: 6px; overflow: hidden; } .pimg{ height: 200px; } .car>div{ width: 220px; height: 250px; position: relative; } .car>div>h2{ margin-top: 12px; } .car_head{ width: 1200px; height: 70px; border: 2px solid #000; margin: 0 auto; display: flex; justify-content: space-around; align-items: center; } .check_box{ width: 1200px; height: 70px; border: 2px solid #000; margin: 0 auto; margin-top: 12px; position: relative; } .check_box>h2{ position: absolute; top: 50%; transform: translateY(-50%); } .check_box>h2:first-child{ right: 200px; } .check_box>h2:last-child{ left: 1002px; } .pdetail>p{ font-size: 12px; color: #909399; } .pdetail>p,.price>p,.total>p,.num_box{ position: absolute; top: 50%; transform: translateY(-50%); } .price>p,.total>p,.num_box{ font-size: 22px; left: 50%; transform: translateX(-50%); } .num_box{ width: 200px; height: 36px; display: flex; justify-content: space-around; } .num_box>input{ width: 86px; font-size: 22px; padding-left: 6px; text-align: center; } .num_box>button{ width: 36px; }</style>2.第二步须要在methods里增加函数downPrice(index)和addPrice(index)对购买数量的两个按钮别离绑定实现加法和减法的性能，这里之所以要传递形参index是因为须要依据数组的下标来更改该下标所对应的商品的总价。代码如下： ...

关于css:CSS-实现优惠券的技巧

在理论 Web 开发过程中，总会遇到各种各样的布局。有公司共事问我这样一种布局有没有什么好的实现形式，就是一种在流动充值页十分广泛的优惠券成果，如下还有这样的思考到各种可能呈现的场景，形象出以下几种案例，一起来看看实现吧一、最佳实现形式首先，碰到这类布局的最佳实现必定是mask遮罩。对于遮罩，能够看一下CSS3 Mask 安利报告。这里简略介绍一下根本语法很简略，和background的语法基本一致 .content{ -webkit-mask: '遮罩图片' ;}/*残缺语法*/.content{ -webkit-mask: '遮罩图片' [position] / [size] ;}这里的遮罩图片和背景的应用形式基本一致，能够是PNG图片、SVG图片、也能够是突变绘制的图片，同时也反对多图片叠加。遮罩的原理很简略，最终成果只显示不通明的局部，通明局部将不可见，半透明类推事实上，除了依据透明度（Alpha）来作为遮罩条件，还能够通过亮度（luminance）来决定，比方红色示意暗藏，彩色示意可见。不过目前只有 Firefox 反对所以，只有能绘制以上各种形态，就能够实现了。二、内凹圆角优惠券大多有一个很显著的特点，就是内凹圆角。提到圆角，很容易想到radial-gradient?fileGuid=kDGWvXGxTXG6KrrQ)。这个语法有点简单，记不住没关系，能够看看张老师的这篇10个demo示例学会CSS3 radial-gradient径向突变。 .content{ -webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px); } 这样就绘制了一个半径为 20px 的通明的圆，不过代码层面还有很多优化的空间。在实现边界明显的突变时，前面色彩的地位只须要小于等于后面色彩的地位就行了，比方0通明色彩能够用16进制缩写比方#0000来代替，不通明的局部轻易用一个色彩就好，我喜爱用red，次要是这个单词比拟短还有突变的地位默认是居中的，所以第二个center能够去除，left 能够用0来示意测试发现挪动端对 16 进制反对不加，所以还是须要采纳 transparent 或者 rgba 的模式进一步简化就失去了 .content{ -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0); }不错，又少了好几个B的流量~ 能够查看在线实例codepen 优惠券实现1 三、优惠券成果下面是一个最根本的内凹圆角成果，当初来实现上面几种布局，比方两个半圆的，依据下面的例子，再复制一个圆不就能够了？改一下定位的方向 .content{ -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); } ...

关于前端:中-常见的8个前端防御性编程方案

对于前端防御性编程咱们大多数状况可能遇到过，后端的因为同时申请人数过多，或者数据量过大，又或者是因为异样导致服务异样，接口申请失败，而后前端呈现白屏或者报错还有一种状况，是前端本身写的代码存在一些缺点，整个零碎不够强壮，从而会呈现白屏，或者业务零碎异样，用户误操作等那么，就呈现了前端防御性编程常见的问题和防备1.最常见的问题:uncaught TypeError: Cannot read property 'c' of undefined呈现这个问题最根本原因是：当咱们初始化一个对象obj为{}时候,obj.a这个时候是undefined.咱们打印obj.a能够失去undefined,然而咱们打印obj.a.c的时候，就会呈现下面的谬误。js对象中的未初始化属性值是undefined,从undefined读取属性就会导致这个谬误(同理，null也一样) 如何防止? js和ts目前都呈现了一个可选链概念,例如： const obj = {};console.log(obj?.b?.c?.d)下面的代码并不会报错，起因是?.遇到是空值的时候便会返回undefined.2.前端接口层面的谬误机制捕捉前端的接口调用，个别都比拟频繁，咱们这时候能够思考应用单例模式,将所有的axios申请都用一个函数封装一层。对立能够在这个函数中catch捕捉接口调用时候的未知谬误，伪代码如下： function ajax(url,data,method='get'){ const promise = axios[method](url,data) return promise.then(res=>{ }).catch(error){ //对立处理错误}}那么只有产生接口调用的未知谬误都会在这里被解决了 3.谬误边界（Error Boundaries,前端呈现未知谬误时，展现事后设定的UI界面）以React为例局部 UI 的 JavaScript 谬误不应该导致整个利用解体，为了解决这个问题，React 16 引入了一个新的概念 —— 谬误边界。谬误边界是一种 React 组件，这种组件能够捕捉并打印产生在其子组件树任何地位的 JavaScript 谬误，并且，它会渲染出备用 UI，而不是渲染那些解体了的子组件树。谬误边界在渲染期间、生命周期办法和整个组件树的构造函数中捕捉谬误。应用示例： class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // 更新 state 使下一次渲染可能显示降级后的 UI return { hasError: true }; } componentDidCatch(error, errorInfo) { // 你同样能够将谬误日志上报给服务器 logErrorToMyService(error, errorInfo); } render() { if (this.state.hasError) { // 你能够自定义降级后的 UI 并渲染 return <h1>Something went wrong.</h1>; } return this.props.children; }}留神谬误边界无奈捕捉以下场景中产生的谬误： ...

关于javascript:一文让你读懂TCP1

前言上篇咱们讲了http，咱们晓得了http是基于tcp的，先来看张图： http是应用层协定，tcp是传输层协定，http作为下层协定建设在tcp之上。当然你看到传输层协定还有一个兄弟叫udp，这家伙常常和tcp做比拟，本篇不做讲述，想晓得的可自行理解吧，好了上面让咱们间接进入注释吧。 tcp传输控制协议（TCP，Transmission Control Protocol）是一种面向连贯的、牢靠的、基于字节流的传输层通信协议传输就好比是咱们买的快递通过交通工具传递到咱们手上，交通工具就是tcp，交到咱们手上tcp就实现了它的工作了，剩下的就是http的事了，传输层协定就是干这个的。 tcp这个货色如果真要深究，恐怕一时半会也拎不清。所以咱们依据tcp的两大特点：面向连贯、牢靠的来聊聊tcp吧。本篇咱们先来讲讲tcp面向连贯的这个特点吧。面向连贯是什么？就是通信单方要先建设一条连贯通道。说到面向连贯，你想到了什么，对了，就是那个？那个？鼎鼎大名的tcp三次握手！！每次面试面试官没少问吧？就是上面这张图：让咱们形象化的阐明三次握手吧，三次握手的过程能够用打电话来模仿： 1、客户端说：服务器老哥你好，我是客户端，你能听失去我吗？ 2、服务器说：客户端老弟你好，我是服务器，我能够听到你，请问你能够听到我吗？ 3、客户端说：服务器老哥，我能够听到你。好了，建设连贯了，让咱们开始聊天吧.... 报文构造开始讲三次握手先，让咱们先来看个货色：tcp数据报文 TCP报文是TCP层传输的数据单元，也叫报文段，能够看出一个残缺的报文构造由报头和数据两局部组成的。源端口源计算机上的应用程序的端口号，占16位。目标端口指标计算机的应用程序端口号，占16位。 seq（Sequence Number）32位序列号，它示意该报文段发送数据的第一个字节的编号，在 TCP 连贯中，传输的字节流每一个字节都有个程序编号seq，以此来放弃传输的有序性。下面中SYN为1时，示意用于同步初始序列号（ISN）。 ack(Acknowledgment Number)32位确认序列号，它示意接管方冀望收到发送方下一个报文段的第一个字节数据的编号。说白点就是接受方心愿下一次发报文的时候发送方要发给我的序列号(seq)。标记位标记位指明该报文的行为，占用1位，本篇先讲上面四个标记位： SYN同步标记位，当SYN=1，示意发动新的连贯。 ACK确认标记位，只有当 ACK=1时确认号字段(ack)才无效。当 ACK=0 时，确认号有效，TCP 规定，连贯建设后，ACK 必须为 1。 PSH推送标记位，通知对方收到该报文段后是否立刻把数据推送给下层。如果值为 1，示意该当立刻把数据提交给下层，而不是缓存起来。 FIN标记数据是否发送结束。如果 FIN=1，示意数据曾经发送实现，能够开释连贯。选项：选项字段，长度可变，TCP 首部能够有多达40字节的可选信息，用于传递附加信息。数据：本次报文携带的数据字段。注明：窗口大小、TCP校验和、紧急指针字段不在本篇的探讨范畴内。状态阐明CLOSED:示意初始敞开状态 LISTEN:服务器监听状态(期待客户端的连贯) SYN_RECEIVED(SYN_RCVD):服务器接管到客户端的SYN SYN_SENT:客户端已发送SYN ESTABLISHED：示意连贯已建设下面理解了报文构造和tcp连贯过程几种状态，再联合下面那张三次握手的图片，咱们再来正式的了解下：三次握手过程1、第一次握手：客户端发送SYN到服务器，示意要申请建设连贯，开始进入SYN_SENT状态。 2、第二次握手：服务器收到申请后，回复SYN + ACK到客户端，示意确认了客户端的申请，此时服务器进入SYN_RCVD状态。 3、第三次握手：客户端收到SYN + ACK包，向服务器发送确认ACK包，客户端进入ESTABLISHED状态，服务器收到申请后也进入ESTABLISHED状态，实现三次握手。此时 TCP 连贯胜利，客户端与服务器开始传送数据。说到这里。置信你也能和面试官扯皮了。你认为你说完了三次握手就行了？what？你还是太年老了，这时候面试官必定会来一句：为什么是三次握手？二次或者四次不行嘛？为什么是三次握手？1.确定通信单方是否具备可收发能力嗯？如果是二次握手的话，你再看看下面那张三次握手图，第一次握手的时候，客户端发送一个SYN包给服务器，第二次握手服务器回复了ACK+SYN给客户端，能收到服务器的确认回复这阐明了对于客户端来说，客户端能确认了服务器的接管与发送的能力没问题。然而如果只是两次握手的话，那么问题来了，没错，客户端是能够确认服务器有收发的能力，可是服务器能确认客户端有这种能力吗？不能确认了吧，因为没法失去客户端的确认回复，服务器也不晓得发没发胜利。 2.确定单方初始序列号其实你看图就晓得了，三次握手的过程其实就是在互相告知初始化序列号（ISN），并确定对方曾经收到的过程。如果只是两次握手，只有客户端的起始序列号能被确认，服务器的序列号则得不到确认。呃。。。这个要怎么解释呢？咱们晓得tcp为了放弃有序，报文头部须要依附seq来放弃有序，所以必须在建设连贯时候单方协定一个初始序列号，后续通信都是依赖这个初始序列号，保障字节流上是有序的。如果无奈放弃有序，可能呈现数据失落，或者乱序导致数据谬误等一系列问题，上面没法玩了。 ...

关于javascript:免费开源基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之动态表单五

基于Vue和Quasar的前端SPA我的项目实战之动静表单（五）回顾通过上一篇文章基于Vue和Quasar的前端SPA我的项目实战之序列号（四）的介绍，咱们曾经实现了元数据中序列号的增删改查，本文次要介绍动静表单设计性能的实现。简介在crudapi零碎中，所有的业务表单都是通过配置动静生成的，代码无需写死，无关基本概念参考之前文章元数据管理—动静表单设计器在crudapi零碎中残缺实现，表单配置好之后，对应的crud接口就主动生成了。 UI界面表单列表创立表单索引治理 API表单API包含根本的CRUD操作，具体的通过swagger文档能够查看。通过axios封装api，名称为metadataTable import { axiosInstance } from "boot/axios";const metadataTable = { create: function(data) { return axiosInstance.post("/api/metadata/tables", data ); }, update: function(id, data) { return axiosInstance.patch("/api/metadata/tables/" + id, data ); }, list: function(page, rowsPerPage, search, query) { if (!page) { page = 1 } if (!rowsPerPage) { rowsPerPage = 10 } return axiosInstance.get("/api/metadata/tables", { params: { offset: (page - 1) * rowsPerPage, limit: rowsPerPage, search: search, ...query } } ); }, count: function(search, query) { return axiosInstance.get("/api/metadata/tables/count", { params: { search: search, ...query } } ); }, get: function(id) { return axiosInstance.get("/api/metadata/tables/" + id, { params: { } } ); }, getByName: function(name) { return axiosInstance.get("/api/metadata/tables/name/" + name, { params: { } } ); }, delete: function(id) { return axiosInstance.delete("/api/metadata/tables/" + id); }, batchDelete: function(ids) { return axiosInstance.delete("/api/metadata/tables", {data: ids} ); }};export { metadataTable };外围代码q-table控件表单设计页面用到了q-table控件，每一个字段对应一个行， ...

关于javascript:前端面试每日-31-第713天

明天的知识点 (2021.03.29) —— 第713天 (我也要出题)[html] Html5页面设计稿的尺寸有哪些？为什么？[css] 多行文本在固定高度的div中如何做到垂直居中？[js] 说说JS模块加载器加载原理[软技能] 请说说浏览器是如何加载资源的？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信保持的力量！！！欢送在 Issues 和敌人们一起探讨学习！我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注前端剑解公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

关于javascript:基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之布局菜单嵌套路由三

基于Vue和Quasar的前端SPA我的项目实战之布局菜单（三）回顾通过上一篇文章基于Vue和Quasar的前端SPA我的项目实战之用户登录（二）的介绍，咱们曾经实现了登录页面，明天次要介绍布局菜单的实现。 UI界面成果首页业务数据菜单开展设置页面阐明布局主页分为三个局部，最下面为导航栏，次要包含刷新按钮，后退按钮，用户信息等内容。右边为菜单，包含业务数据，元数据，零碎三个一级菜单。业务数据菜单的二级菜单为表名称，元数据菜单包含序列号、表、关系三个二级菜单，零碎菜单包含设置和对于两个二级菜单。左边为页面主体局部。布局嵌套路由通常由多层嵌套的组件组合而成。同样地，URL 中各段动静门路也按某种构造对应嵌套的各层组件，例如：设置Setting页面和对于About页面切换的时候，导航和菜单局部都不变，变动的是主体局部，能够通过嵌套路由实现。 /about /setting+------------------+ +-----------------+| nav | | nav || +--------------+ | | +-------------+ || | About | | +------------> | | Setting | || | | | | | | || +--------------+ | | +-------------+ |+------------------+ +-----------------+MainLayout文件为：src/layouts/MainLayout.vue <q-page-container> <router-view /></q-page-container>其中<router-view />对应上图About和Setting局部。定义路由const routes = [ { path: '/', component: () => import('layouts/MainLayout.vue'), children: [ { path: '', component: () => import('pages/Index.vue') }, { name: "about", path: "about", meta: { isAllowBack: true }, component: () => import("pages/About.vue") }, { name: "setting", path: "setting", meta: { isAllowBack: true }, component: () => import("pages/Setting.vue") } ] }其中，meta示意路由元信息，isAllowBack字段用于示意是否能够后退，在对应的component页面渲染的时候通过this.$route.meta.isAllowBack获取值，而后设置全局Vuex状态config/isAllowBack的值。 ...

关于html5:webpack笔记

webpack-dev-server的热更新将webpack-dev-server的hot设置为false，会导致module.hot无奈失常拜访吗？

关于javascript:前端面试每日-31-第711天

明天的知识点 (2021.03.27) —— 第711天 (我也要出题)[html] 写一个能够编辑列的表格布局[css] 为什么在Calc()办法中必须用或者蕴含空格？[js] 实现一个函数柯里化[软技能] 说说你对H5、小程序、APP三者之间区别的了解？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信保持的力量！！！欢送在 Issues 和敌人们一起探讨学习！我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注前端剑解公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

关于前端:vue3elementPlus-开源后台管理系统模板

element_vue3.0/VE-Admin✈ 国内减速链接 ✈ 成果预览我的项目简介基于vue3和element-plus开发的企业后盾治理模板. 性能个性我的项目应用了最新的vue3全家桶+element-plus+mockjs+axios+eChart5.我的项目继成了mockServe,可脱离后端自主开发测试对axios深度封装,采纳动静路由,路由配置更简略,mockServe独立开发测试时可在nodework直观查看接口数据基于node实现自动化开发环境依赖node 14+, vueCli 4+ 部署步骤npm i npm run serve 目录构造形容应用文档自定义指令v-permission="[array]" 自定义权限指令,参数为一个数组,数组元素为按钮所对应的key值 <el-button v-permission="['add']" size="mini" type="primary" @click="handleEdit(menus.add.name)" >{{ menus.add.name }}</el-button> v-resize="myChart" 监听 echart 容器的自定义指令,参数为 echart 实例 <div v-resize="myChart" style="height:400px;margin-top:20px" ref="liveChart"></div> 动静路由动静路由的配置可查看 srcpluginspermission.js次要原理就是依据后端接口返回的树形菜单数据,动静生成路由表并挂载.具体需要字段可在srcpluginspermission.js中的fnAddDynamicMenuRoutes办法中进行配置批改 let route = { path:menuList[i].url.replace(///g, "-") + `-${menuList[i].id}`, component: null, name: menuList[i].url.replace(///g, "-") + `-${menuList[i].id}` // meta: { // }};// url以http[s]://结尾, 通过iframe展现if (menuList[i].iframe == 1) { route["path"] = `i-${menuList[i].id}`; route["name"] = `i-${menuList[i].id}`; route["props"] = { url: menuList[i].url }; route["component"] = () => import("@/views/IFrame.vue");} else { const l = "views/layoutpages/" + menuList[i].url; route["component"] = () => import("@/" + l + ".vue");}routes.push(route); ...

关于html:HTML5本地存储浅谈

Web Storage是HTML5外面引入的一个相似于cookie的本地存储性能，能够用于客户端的本地存储sessionStorage && localStoragesessionStorage - 用于长期保留同一窗口(或标签页)的数据，在敞开窗口或标签页之后将会删除这些数据，会话级别的存储。localStorage - 用于长久化的本地存储，除非被动删除数据，否则数据会始终存在不同于cookie的4kb数据存储量localStorage和sessionStorage均能够保留5MB的信息localStorage和sessionStorage：仅在客户端（即浏览器）中保留，不参加和服务器的通信localStorage和sessionStorage：原生接口能够应用localStorage和sessionStorage：在前端页面即可查看，平安性能较差sessionStorage && localStoragesetItem - 存储数据getItem - 获取指定键名数据removeItem - 删除指定键名数据clear - 删除全副数据valueOf - 获取全副数据判断是否反对if (window.localStorage or window.sessionStorage) { // 浏览器反对 localStorage or sessionStorage }else{ // 不反对 } 利用场景localStorage能够用来夸页面传递参数sessionStorage用来保留一些长期的数据，避免用户刷新页面之后失落了一些参数</pre> 作用域localStorage: 在同一个浏览器内，能够进行数据操作sessionStorage: 在同一浏览器、同一窗口的同源文档能力共享数据，进行数据操作兼容性 IndexedDBIndexedDB - 是一种低级API，用于客户端存储大量结构化数据(包含, 文件/ blobs)。该API应用索引来实现对该数据的高性能搜寻。在 HTML5 的本地存储中，该数据库是一种存储在客户端本地的 NoSQL 数据库，它能够存储大量的数据。特点反对事务、游标、索引等数据库操作，存储空间大永恒存储，删除缓存不烦扰IndexedDB，异步性一个页面能够连贯多个IndexedDB数据库，每个数据库的名称必须是惟一的var indexedRequest = indexedDB.open('dbName', 1); open 连贯数据库，接管两个参数。第一个参数数据库名，第二个版本号（必须为整数）onerror && onsuccess 数据库成功失败后的回调 onsuccess(e)db = e.target.result db.close 敞开数据库add 减少数据。接管一个参数，为须要保留到对象仓库中的对象。put 减少或批改数据。接管一个参数，为须要保留到对象仓库中的对象get 获取数据。接管一个参数，为须要获取数据的主键值delete 删除数据。接管一个参数，为须要获取数据的主键值onupgradeneeded 数据库更新回调deleteDatabase 删除数据库。接管一个参数，数据库名兼容性IE10+Firefox 10+、Chrome 23+、Opera 15+iPhone ios8-ios10 safari反对(X5内核不反对)Android X5内核反对 ...

关于html:HTML5本地存储使用详解

前言随着Web利用的倒退，须要在用户本地浏览器上存储更多的利用数据，传统的cookie存储的计划曾经不能满足倒退的需要，而应用服务器端存储的计划则是一种无奈的抉择。HTML的Web Storage API是一个现实的解决方案。如果是存储简单的数据，则能够借助Web SQL Database API来实现，能够应用SQL语句实现简单数据的存储与查问。本文向大家介绍一下HTML5中的本地存储性能。本章知识点理解Web Storage的劣势了解localStorage与sessionStorage的区别把握设置和获取Storage数据的办法把握Storage API的属性和办法理解本地数据库Web SQL应用HTML5的Web Storage性能，能够在客户端存储更多的数据，而且能够实现数据在多个页面中共享甚至是同步。 1、cookie存储数据的有余cookie可用于在程序员间传递大量的数据，对于Web利用来说，它是一个在服务器和客户端之间来回传送文本值的内置机制，服务器能够依据cookie来追踪用户在不同页面的访问信息。正因为它卓越的体现，在目前的Web利用中，cookie失去了最为宽泛的利用。尽管如此，cookie依然有很多不尽如人意的中央，次要体现在以下方面。 1、大小的限度 cookie的大小被限度在4KB。在Web的富应用环境中，不能承受文件或邮件那样的大数据。 2、带宽的限度只有有波及cookie的申请，cookie数据都会在服务器和浏览器间来回传送。这样无论拜访哪个页面，cookie数据都会耗费网络的带宽。 3、平安危险因为cookie会频繁地在网络中传送，而且数据在网络中是可见的，因而在不加密的状况下，是有平安危险的。 4、操作简单在客户端的浏览器中，应用JavaScript操作cookie数据是比较复杂的。然而服务器能够很不便地操作cookie数据 2.应用Web Storage存储的劣势Web Storage能够在客户端保留大量的数据，而且通过其提供的接口，拜访数据也十分的不便。然而，Web Storage的诞生并不是为了代替cookie，相同，是为了补救cookie在本地存储中体现的有余。 Web Storage本地存储的劣势次要体现在以下几个方面。 1、存储容量提供更大的存储容量。在Firefox、Chrome、Safari和Opera中，每个网域为5MB；在IE8及以上为10MB。 2、零带宽 Web Storage 因为是本地存储，不与服务器产生交互行为，所以不存在带宽的占用。 3、编程接口 Web Storage提供了一套丰盛的编程接口，使得数据操作更加不便 4、独立的存储空间每个域都有独立的存储空间，各个存储空间是齐全独立的，因而不会造成数据的凌乱。由此可见，Web Storage并不能齐全代替cookie，cookie能做的事件，Web Storage不肯定能做到，如服务器能够拜访cookie数据，然而不能拜访Web Storage数据。所以Web Storage和cookie是互相补充的，会在各自不同畛域发挥作用。随着挪动互联网的倒退，浏览器端的富利用必然是一种趋势。 3. 会话存储（sessionStorage）和本地存储（localStorage）的区别Web Storage包含会话存储（sessionStorage）和本地存储（localStorage）。相熟Web变成的人员第一次接触Web Storage时，会天然的与session和cookie去对应。不同的是，cookie和session齐全是服务器端能够操作的数据，然而sessionStorage和localStorage则齐全是浏览器客户端操作的数据。 sessionStorage和localStorage齐全继承同一个Storage API，所以sessionStorage和localStorage的编程接口是一样的。sessionStorage和localStorage的次要区别在于数据存在的工夫范畴和页面范畴。我画了一个sessionStorage和localStorage区别表，大家看一下： 4. 查看浏览器是否反对Web Storage放到页面中的代码： function CheckStorageSupport(){ if(window.sessionStorage){ console.log("浏览器反对sessionStorage个性！"); }else{ console.log("浏览器不反对sessionStorage个性！"); } if(window.localStorage){ console.log("浏览器反对localStorage个性！"); }else{ console.log("浏览器不反对localStorage个性！"); } }window.addEventListener("load",CheckStorageSupport,false);控制台预览后果：我就间接在控制台输出看后果了，读者能够把下面代码放入页面内，运行看下后果： 5. 设置和获取Storage数据sessionStorage和localStorage作为window属性，齐全继承Storage API，它们提供操作数据的办法完全相同。上面以sessionStorage属性为例进行解说。 1、保留数据到sessionStorage ...

关于javascript:Hanjst汉吉斯特优化升级开发者模式

今日之北京（2021Mar16）与昨日之北京，是天堂（狂风大作沙尘暴白天如夜）与地狱（和风暖阳春光大好）。感慨大自然之神力，喟然全人类仍渺小。 Hanjst汉吉斯特间隔上次更新差不多有一年左右，期间陆续部署和应用，均工作良好。近日在一个老我的项目（有福工坊UfqiWork ：https://ufqi.com/work ）的新模块中测试时，发现一个小问题，问题虽小，其排解简单过程和背地暗藏的问题却是值得书记于此。故障表征为在有福工坊UfqiWork 中当用户进行地址切换时，有时页面显示为空白页。这个“有时”的状况，通过多轮多设施、多浏览器的测试试验，发现只在iOS的Safari浏览器中会呈现空白页景象。其余时候均失常显示，包含在iOS，Andr，Windows，Mac，Linux等，同时包含Chrome、Edge、Firefox、Safari等浏览器上，也均失常。问题锁定在 iOS + Safari 这个状况下是空白页。因为是手机挪动端，无奈开启开发者模式（前面会动用iOS连贯Mac的开发者模式大杀器，是后话），只能先从服务器端进行逐行诊断扫描。通过数次的靠近比照，发现故障页面和失常页面的差别进一步地被定位到几行代码上，而这几行代码的独特特色又是页面的URL地址参数。 Notepad++ 文件逐行比照通过NotePad++的文件比照性能，在上图中，左侧是可能失常显示的页面，右侧是无奈失常显示，出现为空白页的页面。因为从服务器端来看，曾经正确地的输入相干代码，为何URL地址参数为影响到页面的失常加载？ Hanjst汉吉斯特在接管页面之后干了些啥？怎么会对URL参数进行区别对待或者进行相干批改？至此，后端、服务器端能做的工作曾经到了极致，前端页面能显示和不能显示的差别曾经很明确的定位到URL地址参数上了。很快咱们在前端关上了 Hanjst 的调试模式，在初始化时，给与变量 IsDebug 为 true. window.Hanjst = {‘JsonDataId’:’Hanjstjsondata’,‘IsDebug’:true,‘RandomString’:’randi’,‘LoadingLayerId’:’Hanjstloading’}; // optional 遗憾地是，当Hanjst设置为调试模式时，空白页故障页面仍然没有给出更多的调试信息（前面为针对此处进行扭转，是后话）。无可奈何地，咱们开始寻求在手机端怎么对其浏览器行为进行侦测，通过搜索引擎检索，找到iOS设施通过线缆连贯到Mac上，而后同时开启Safari，能够在Mac的Safari的开发者模式下的控制台看到同步在iOS设施上是Safari相干页面的调试信息输入。这个 iOS Safari + Mac Safari 的连贯及配置的过程略微简单，上面是具体的步骤信息( -R/V2SS )，转载备忘。 To start debugging you’ll need your iOS device, a mac and a lightning cable. Then start by making sure both devices are configured to allow this. Configure devices:Launch Safari on your mac; open preferences and within the advanced tab click the checkbox for “Show Develop menu in menu bar”. ...

关于html5:前端开发中的踩坑记

1.IOS零碎在微信环境下audio不自动播放<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script> //个别状况下，这样就能够自动播放了，然而一些奇葩iPhone机不能够 document.querySelector('audio').play() //微信必须退出Weixin JSAPI的WeixinJSBridgeReady能力失效 document.addEventListener("WeixinJSBridgeReady", () => { document.querySelector('audio').play() document.querySelector('video').play() //视频自动播放 }, false)</script>Vue 环境下能够用上面这个试试 setTimeout(() => { const ev = new CustomEvent('WeixinJSBridgeReady') document.dispatchEvent(ev)}, 5000)this.$nextTick(() => { document.addEventListener('WeixinJSBridgeReady', () => { document.querySelector('audio').play() }, false)})2.canvas 含糊问题因为画布大小限度, 导致在高清屏下画布被拉伸, 画布被放大, 画布尺寸偏小, 相似于把图片放大导致含糊 // 获取像素比let getPixelRatio = function (context) { let backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1; return (window.devicePixelRatio || 1) / backingStore;};//画文字let myCanvas = document.querySelector("#my_canvas");let context = myCanvas.getContext("2d");let ratio = getPixelRatio(context);myCanvas.style.width = myCanvas.width + 'px';myCanvas.style.height = myCanvas.height + 'px';myCanvas.width = myCanvas.width * ratio;myCanvas.height = myCanvas.height * ratio;// 放大倍数context.scale(ratio, ratio);3.ios 表单输入框页面会被顶上去不回弹当输入框失焦时增加一个事件 ...

关于javascript:AutoSwagger自动爬取接口文件

Auto-Swaggerauto-swagger是一个爬取swagger-ui并生成申请接口文件的命令行工具，旨在帮忙接口调用者一键生成接口代码文件。传送地址：https://github.com/pablezhang/auto-swagger 为什么要做auto-swagger？在工作中，通常后盾开发同学会提供一份swagger接口文档。前端同学每次查问该文档调用某个接口。相当于，咱们从swagger-ui上摘录接口应用办法，设想大家在开发过程中是否遇到过以下问题：调用接口发现接口报404，费神费劲查看发现把单词拼错了~调用接口发现接口报400，认真比照swaager发现参数类型写错、参数名称写错~一时粗心把申请类型写错了~....如果在工作中你也遇到过上述问题，或者心田会指摘本人的粗枝大叶，同时有一点的心累0.0。开发者在swagger-ui文档中抄录接口时都会可能会抄错接口的url、参数类型、参数名称等等。尤其，开发同学有可能在赶我的项目进度、面对swagger-ui接口数量大、文档不标准等问题时出错的几率会更大。auto-swagger正是为解决上述机械反复的swagger抄录工作而呈现的。如何应用1、装置auto-swaggernpm install auto-swagger -g 或 yarn add auto-swagger -g 2、增加配置文件swagger.config.js如果你是第一次应用，倡议你应用初始化配置命令。关上命令行工具 auto-swagger init 此时，你的目录下应该会有一个swagger.config.js文件 // swagger-url地址，找到返回次要json的申请const urlAddress = 'http://your-swagger-url/v2/api-docs';// 想要输入的swaager接口文件寄存的门路，请应用相对路径。const outputPath ='Services';// 指定过滤掉某些参数，这些参数通常因为是专用的缘故，不须要每个接口中都传值const excludeParamName = [ "Application-Key", "Access-Token", "extFields"];const config = { excludeParamName, outputPath, url: urlAddress};module.exports = config; 上述代码，是一个简略配置的swagger.config.js文件 3、开始获取swagger-ui的接口文件执行上面的命令 auto-swagger run 此时，你会发在你指定的outputPath中会多了一些SomeService文件，这些文件即为接口调用文件。到此，根本的用法曾经实现了如何在我的项目中集成auto-swagger生成的接口文件？先看下的生成的接口文件长什么样子, 此处应用了一个公共的swagger地址：http://petstore.swagger.io/ //Operationsaboutuser.ts/** * @Description: User */ /** 留神Request为自行封装的ajax申请文件，须要自行实现。 */import Request from 'utils/Request';class Operationsaboutuser { /** * 接口简介 This can only be done by the logged in user. * 接口备注 This can only be done by the logged in user. * 接口类型 post * 接口地址 /user * @param body [object Object] Created user object */ public async createUser ({body}) { return Request({ url:`/user`, method:'POST', data: body, query: {}, app: 'user', }) } }// 默认将每一个Controller作为一个文件，并以Controller名称作为单例类的名称export default new Operationsaboutuser 如何在我的项目中应用这些接口文件？ ...

关于html5:React下不规则字符串转span和Input

遇到一个奇葩需要，接口收到一串算法规定，要求把'[]'内的数字内容转成Input，可供用户批改,其余部分转成文本，批改之后再转成字符串传给后盾。这个算法没有规定，可能只有文本，可能有多个'[]'。也不晓得中括号会呈现在字符串的什么地位。一开始接到这个需要，一脸懵逼。这两天想到一个还算不错的办法来解决这个问题。举个例子，某个算法字符串格局：####[1]###[2]#[3]##########[4]; 第一步，将字符串转成html元素 const [htmlElement,setHtmlElement] = useStae<any>(<></>); // 给须要转换的字符串设置初始值 const rule = ruleSourceStr; // 赋值原生string let result = ''; // 后果 if(rule.indexOf('[' === '0') { // 第一个字符就是[ const parseFirst = rule.replace('[',`<Input type='numer' value='`); // 替换第一个字符 const parseRemainder = parseFirst(/\[/g,`</span><Input type='number' value='`); // 替换残余中括号[ result = parseRemainder.replace(/\]/g,'/><span>'); // 替换] }else{ // 第一个[]呈现在字符串两头 const parseLeft = rule.replace(/\[/g,`</span><Input type='number' value='>`); const parseRight = parseLeft.replace(/\]/g,`/><span>`); const addLeft = '<span>' + parseRight; // 在字符串头部加上<span> result = addLeft+'</span>'; } setHtmlElement(<div id = 'inner-html' dangerouslySetInnerHtml={{__html:result}}/>); // htmlElement更新后放入相应地位第二步，相干的span和Input就显示在页面中，这时候退出款式调整一下就能够第三步，确认之后收集元素内容，转成字符串 ...

关于html5:HTML5本地存储-localStorage操作使用详解

1、html5几种存储模式本地存储（localStorage && sessionStorage）离线缓存（application cache） indexedDB 和 webSQL 2、localStorage && sessionStorage 过期工夫：localStorage 永恒存储，永不生效除非手动删除 sessionStorage 浏览器从新关上后就隐没了大小：每个域名是5M 3、localStorage API和sessionStorage API统一 getItem //取记录 setIten//设置记录 removeItem//移除记录 key//取key所对应的值 clear//革除记录 4、存储的内容数组，图片，json，款式，脚本。。。（只有是能序列化成字符串的内容都能够存储） 5、localStorage实例 1. <!DOCTYPE> 2. <head> 3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4. <meta http-equiv="Access-Control-Allow-Origin" content="anonymous"> 5. <title>locstorage 图片存储</title> 6. </head> 7. <body> 8. </body> 9. </html> 10. <script> 11. var src='images/1.png';//这里肯定要在服务器上运行，图片要是以后服务器的图片！ 12. function set(key){ 13. var img = document.createElement('img');//创立图片元素 14. img.addEventListener('load',function(){//绑定加载工夫 15. var imgcavens = document.createElement('canvas'); 16. imgcontent = imgcavens.getContext('2d'); 17. imgcavens.width = this.width;//设置画布大小为图片自身的大小 18. imgcavens.height = this.height; 19. imgcontent.drawImage(this,0,0,this.width,this.height); 20. var imgAsDataUrl = imgcavens.toDataURL('image/png');//这个办法肯定要在服务器上运行/*对图像数据做出批改当前，能够应用toDataURL办法，将Canvas数据从新转化成个别的图像文件模式。function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image;}下面的代码将Canvas数据，转化成PNG data URI。*/ try{ 21. localStorage.setItem(key,imgAsDataUrl);//保留图片地址 22. }catch(e) 23. { 24. console.log("storageFaild: "+e);//错误信息 25. } 26. },false) 27. img.src = src;//指定须要存储的图片地址 28. } 29. function get(key){ 30. var srcStr = localStorage.getItem(key);//获取本地存储的元素 31. var imgobj = document.createElement('img'); 32. imgobj.src = srcStr;//指定图片门路 33. document.body.appendChild(imgobj);//在页面中增加元素 34. } 35. </script> 上述办法能够在火狐和chrome运行，运行例子如图： ...

关于html:HTML5中的地理定位APIGeolocation

天文定位是HTML5中新增的API个性，它容许JavaScript程序向浏览器询问用户实在的地理位置。辨认地理位置的一些利用就能够应用它来显示地图、导航和其它一些与用户以后地位无关的信息。当然，思考到用户的隐衷，反对天文定位API的浏览器在JavaScript程序获取用户物理地位前总是会询问用户是否容许获取以后地位。 navigator.geolocation反对地理位置API的浏览器会定义 navigator.geolocation属性，用于获取用户的地位信息。此属性领有以下办法： navigator.geolocation.getCurrentPosition() 获取用户以后的地位。该办法须要承受一个回调函数作为参数，如果这个办法胜利则返回的天文数据对象，该对象蕴含了用户地理位置的信息，信息内容大略为：coords.latitude 用户地理位置的十进制纬度 coords.longitude 用户地理位置的十进制经度 coords.accuracy 用户地理位置的地位精度以米为单位 coords.altitudeAccuracy 用户地理位置的地位海拔精度以米为单位 coords.heading 用户设施以后挪动的角度方向，以正北方向顺时针计算。 coords.speed 用户以后的挪动速度以米为单位 timestamp 响应的工夫/日期 navigator.geolocation.watchPosition() 该办法用于获取以后地位，同时一直地监督以后地位，一旦用户的地理位置发生变化，就会调用指定的回调函数。navigator.geolocation.clearWatch() 该办法用于进行监督用户的地位。传递给此办法的参数该当是调用watchPosition()办法的返回值。在蕴含GPS的设施上，通过GPS单元能够获取准确的地理位置。大多数状况下是通过web来获取地位的，当浏览器提供Internet I给web服务时，这个服务就能确定这个IP所属的城市。同时浏览器还能够申请操作获取这个IP左近的无线网络列表和信号强度，用于失去更加准确的地位信息。将这些信息将于高级web服务时，容许更加精准地计算地位。这个此地理位置相干的技术蕴含通过网络数据交换或卫星之间的通信，因而地理位置API是异步的。 navigator.geolocation.getCurrentPosition()和 navigator.geolocation.watchPosition()这两个办法通过接管两个参数：第一个参数是一个回调函数，即当这个办法申请胜利时，就会调用这个回调函数，这个回调函数蕴含了用户地位的信息。也就是回调函数的参数对象能够拜访这些地位信息。第二个参数是在这两个办法失败时调用的回调函数。在调用这三个办法前，咱们该当书写一段代码用于浏览器判断是否反对navigator.getlocation这个属性。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="http://api.map.baidu.com/api?v=2.0&ak=vjxRk3m3YYQ4uglexlrOxEVwGc2Nw6kF"></script> <style> #demo { height: 100%; } </style></head><body> <div id="demo"></div> <input id="but" type="button" value="点击获取以后地位"></body><script> var but = document.getElementById("but"); var x = document.getElementById("demo"); but.onclick = function () { //首先是判断浏览器是否反对geolocation属性 if (navigator.geolocation) { //开始申请地理位置信息。 navigator.geolocation.getCurrentPosition(succFunction, errFunction); } else { x.innerHTML = "此浏览器不反对geolocation属性"; } }; //当getCurrentPosition()办法胜利时调用的回调函数 function succFunction (position) { //失去地理位置信息 var latitude = position.coords.latitude; //十进制纬度 var longitude = position.coords.longitude; //十进制经度 var accuracy = position.coords.accuracy; //地位精度，以米为单位 console.log("用户的地位：" + latitude + "," + longitude); console.log("用户地理位置：" + accuracy); //创立百度地图实例 var map = new BMap.Map("demo"); //创立地图实例 var point = new BMap.Point(latitude, longitude); //创立点坐标 map.centerAndZoom(point, 15); //初始化地图，设置核心坐标和地图级别 } //当getCurrentPosition()办法不胜利时 function errFunction (err) { //错误信息 var err = err.code + ":" + err.message; alert(err); } </script></html>其中,位于BMap命名空间下的Map类示意地图，通过new操作符能够创立一个地图实例。其参数能够是元素id也能够是元素对象(这里是container)。地图增加到demo容器里，所以要确保demo容器在页面有宽和高，所以设置了style，如上，ak是你申请的秘钥。watchPosition()获取以后地位，并持续返回用户挪动时更新的地位信息。注：须要具备GPS的设施测试。 ...

关于html5:Vue3教程创建你的第一个Vue-3项目

作者：Shadeed译者：前端小智起源：dmitripavlutin点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。 github 地址：https://github.com/qq44924588... 2021年2月15日Vue 3正式公布!在尤雨溪的申明中，他发表了新框架中最大的变动，并议论了整个Vue团队所做的杰出工作。长期以来，开发者始终在期待Vue 3发表的真正酷的个性，比方Typescript反对、对大型项目更好的组织、及使Vue应用程序更好的渲染优化。本文中咱们要做以下的内容，应用组合API构建了两个组件。开始有几种不同的选项可用于将Vue 3增加到现有我的项目或创立本人的Vue 3我的项目。这里，我用本人最喜爱的两个选项： Vue CLIViteVue CLI如果你用过Vue开发，那么很可能应用了Vue CLI来设置我的项目。首先，咱们必须确保领有Vue CLI的最新版本，能够通过在终端上运行 npm update -g @vue/cli 来做到这一点。接下来，创立我的项目，运行 vue create <我的项目名>，如果 CLI是最新的，咱们就能够抉择Vue 3。抉择了Vue 3选项，咱们的应用程序便会构建。实现后，咱们只须要进入咱们的我的项目，而后运行咱们的Vue利用, 该命令是： cd <我的项目我>npm run serve当初，在浏览器中输出http://localhost:8080/，就会看到咱们的应用程序！ ViteVite (法语意为 "疾速的"，发音 /vit/) 是一种新型前端构建工具，可能显著晋升前端开发体验，它次要由两局部组成：一个开发服务器，它利用原生 ES 模块提供了丰盛的内建性能，如速度快到惊人的模块热更新（HMR）。一套构建指令，它应用 Rollup 打包你的代码，预配置输入高度优化的动态资源用于生产。为什么应用 Vite你当初可能会有疑难？，那么 Vite 与现有的 vue-cli到底有什么不同呢? 因为@ vue-cli / service是在webpack之上构建的，因而它是一个模块捆绑程序，它将在启动，热重载和编译时捆绑整个Vue我的项目。 ...

关于前端:自定义html标签XML

HTML和HTML5都能够自定义标签。在浏览一些网站的源代码后，你会发现一些网页中存在你不意识的标签和元素，然而这些元素却能被浏览器执行。这就是自定义元素。自在定义标签而不用应用预约义好的语义标签之后，更能语义化咱们的内容。在HTML5之前，文档的结尾都是这样标记的。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml">而HTML5中文档的标记是这样的。<!DOCTYPE><html>这就会导致一些新增的h5元素header、footer，测试过发现IE不能解析h5新增的元素。然而咱们给这些元素增加一些款式，却能被浏览器解析。组件是 Web 开发的方向，当初的热点是 JavaScript 组件，然而 HTML 组件将来可能更有心愿。浏览器解决咱们个别都应用规范的 HTML 元素。面代码中，<p>就是规范的 HTML 元素。如果应用非标准的自定义元素，会有什么后果？<greeting>Hello World</greeting>下面代码中，<greeting>就是非规范元素，浏览器不意识它。这段代码的运行后果是，浏览器照常显示Hello World，这阐明浏览器并没有过滤这个元素。当初，为自定义元素加上款式。greeting { display: block; font-size: 36px; color: red;}运行后果如下图片接着，应用脚本操作这个元素。function customTag(tagName, fn){ Array .from(document.getElementsByTagName(tagName)) .forEach(fn);}function greetingHandler(element) { element.innerHTML = '你好，世界';}`customTag('greeting', greetingHandler);后果如下图片这阐明，浏览器看待自定义元素，就像看待规范元素一样，只是没有默认的款式和行为。这种解决形式是写入HTML5 规范的由下面的测试后果能够得悉，自定义标签能够失常显示，能够应用css款式，能够由JavaScript脚本管制事实上，浏览器提供了一个HTMLUnknownElement对象，所有自定义元素都是该对象的实例。ar tabs = document.createElement('tabs');tabs instanceof HTMLUnknownElement // truetabs instanceof HTMLElement // true下面代码中，tabs是一个自定义元素，同时继承了HTMLUnknownElement和HTMLElement接口。import HTML有了自定义元素，就能够写出语义性十分好的 HTML 代码。<share-buttons> <social-button type="weibo"> <a href="...">微博</a> </social-button> <social-button type="weixin"> <a href="...">微信</a> </social-button></share-buttons>下面的代码，一眼就能看出语义。如果将<share-buttons>元素的款式与脚本，封装在一个 HTML 文件share-buttons.html之中，这个元素就能够复用了。应用的时候，先引入share-buttons.html。 <link rel="import" href="share-buttons.html">而后，就能够在网页中应用<share-buttons>了。<article> <h1>Title</h1> <share-buttons/> ... ...</article>

关于html5:HTML语义化标签

很多面试官会问：谈谈你对 HTML5语义化标签的了解。那么本篇博客专门解答一下这个问题。什么是语义元素？语义是指对一个词或者句子含意的正确解释。很多html标签也具备语义的意义，也就是说元素自身传播了对于标签所蕴含内容类型的一些信息。例如，当浏览器解析到<h1></h1>标签时，它将该标签解释为蕴含这一块内容的最重要的题目。h1标签的语义就是用它来标识特定网页或局部最重要的题目。为什么要语义化？代码构造: 使页面没有css的状况下，也可能呈现出很好的内容构造有利于SEO: 爬虫依赖标签来确定关键字的权重，因而能够和搜索引擎建设良好的沟通，帮忙爬虫抓取更多的无效信息晋升用户体验:例如title、alt能够用于解释名称或者解释图片信息，以及label标签的灵活运用。便于团队开发和保护: 语义化使得代码更具备可读性，让其余开发人员更加了解你的html构造，缩小差异化。不便其余设施解析: 如屏幕阅读器、盲人阅读器、挪动设施等，以有意义的形式来渲染网页。 HTML5罕用的语义元素HTML5提供了新的语义元素来定义网页的不同局部，它们被称为“切片元素”，如图所示大概有100多个HTML语义元素可供选择，以下是罕用的语义元素 < h1>~< h6>元素定义页面的题目，h1元素具备最高等级，h6元素具备最低的等级 <h1>top level heading</h1><section> <h2>2nd level heading</h2> <h3>3nd level heading</h3> <h4>4th level heading</h4> <h5>5th level heading</h5> <h6>6th level heading</h6></section>< header>元素用于定义页面的介绍展现区域，通常包含网站logo、主导航、全站链接以及搜寻框。也适宜对页面外部一组介绍性或导航性内容进行标记。 <header> <h1>HTML Reference</h1> <nav> <a>Home</a> <a>About</a> <a>Contact</a> </nav></header>< nav>元素定义页面的导航链接局部区域，不是所有的链接都须要蕴含在<nav>中，除了页脚再次显示顶级全局导航、或者蕴含招聘信息等重要链接。 <nav> <a>Home</a> <a>About</a> <a>Contact</a></nav>< main>元素定义页面的次要内容，一个页面只能应用一次。如果是web利用，则突围其次要性能。 ...

关于html5:HTML5新增表单元素和表单属性

新表单元素<datalist> 选项列表。与 input 元素配合应用，定义 input 可能的值<keygen> 用于表单的密钥对生成器字段<output> 不同类型的输入，比方脚本的输入。<datalist>Safari和IE9以下不反对<datalist>,<datalist>规定了输出域的选项内容，与input元素配合应用，定义input输出域的选项内容。<form action="" method=""><input list="browsers"><datalist id="browsers"> <option value = "Internet Explorer"> <option value = "Firefox"> <option value = "Chrome"> <option value = "Safari"> <option value = "Opero"></datalist></form>2.<keygen> IE齐全不反对作用：提供一种验证用户的牢靠办法用于表单的密钥对生成器字段,当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。<form action="" method="get"> 用户名: <input type="text" name="usr_name"> 加密: <keygen name="security"> <input type="submit"></form>3.<output> IE齐全不反对用于不同类型的输入，比方计算或脚本输入：<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output></form>新表单属性<form>新属性：autocomplete 主动实现当用户在主动实现域中开始输出时，浏览器应该在该域中显示填写的选项。autocomplete 实用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。注：Opero不反对<form action="" method="" autocomplete="on"> FirstName:<input type="text" name="fname"><br> LastName:<input type="text" name="lname"><br> E-mail:<input type="email" name="email" autocomplete="off"><br> <input type="submit" name=""></form> novalidate不验证数据在提交表单时，不验证 form 或 input 里的货色。如，在个别状况下，input的类型是email，会有验证： ...

关于html5:HTML5新增语法

1.video1、简化版写法：兼容性差<video src="" controls> </video> 2、视频标签规范语法（兼容解决） `<video> <source src="视频文件URL地址" /> <source src="视频文件URL地址" /> <source src="视频文件URL地址" /> 浏览器不反对视频的提醒文本</video>`//浏览器将应用第一个可辨认的视频3、视频标签属性 width 宽度height 高度以下取值为布尔值： controls 显示播放原生控件（兼容性极差）loop 循环播放autoplay 自动播放视屏（大多数浏览器禁用此性能）muted 静音播放poster 在视频播放之前显示广告，取值为广告的url（毛病：如果暂停视频不能显示广告图片）preload 视频的预加载形式默认auto（留神：设置该属性后，则视频在页面加载时进行加载，并准备播放。如果应用 " autoplay "，则疏忽该属性）4、应用DOM操作视频 HTMLVideoElement属性 //1. 获取视频对象var vdo = document.getElmentById("video")//2. 获取/设置对象的宽度/高度（如果自身没有设置就是0）vdo.widthvdo.height//3. 获取视频对象的原始宽度、高度vdo.videoWidthvdo.videoHeight//留神：如果要获取视频对象的原始宽度和高度必须在loadeddata事件实现后能力应用vdo.addEventListener("loadeddata",()=>{ console.log(vde.videoWidth) console.log(vde.videoHeight)})//loadeddata 事件示意曾经加载实现视频的第一帧，当加载完视频的第一帧当前，视频的原始宽度和高度能力失常拜访//4. 获取视频海报帧vdo.poster = 'myvideo.mp4'HTMLMediaElement属性<script>//autoplay 是否自动播放//muted 是否静音//controls 是否显示播放控件//loop 是否循环播放//src 用于设置媒体文件的url地址//volume 用于获取、设置媒体的音量（取值范畴[0,1]）vdo.volume = 0.6//playbackRate 获取、设置媒体的播放速率，1.0为失常速率//paused 用于获取媒体对象是否在暂停，返回值为布尔值//ended 用于获取媒体对象是否播放结束//currentTime 用于获取、设置媒体对象的以后播放工夫（单位为秒）//duration 用于获取媒体对象的总时长（单位s）//办法play() 用于实现媒体的播放vdo.play()//办法pause() 用于实现媒体的暂停veo.pause()var play = document.getElementById("play")play.onclick = ()=>{ //判断视频是否为暂停 if(vdo.paused==false){ vdo.pause(); }else{ vdo.play(); }}//事件//媒体对象播放时触发vdo.addEventListener("play",()=>{})//媒体对象暂停时触发vdo.addEventListener("pause",()=>{})//媒体对象播放结束后触发vdo.addEventListener("ended",()=>{})//媒体文件的第一帧加载实现后被触发vdo.addEventListener("loadeddata",()=>{})//媒体对象的currentTime属性发生变化时调用vdo.addEventListener("timeupdata",()=>{})//媒体对象加载完结时触发vdo.addEventListener("canplaythrough",()=>{})</script>2.audio1、音频标签规范语法 <audio> <source src="音频文件URL"/> <source src="音频文件URL"/> <source src="音频文件URL"/> 浏览器不反对音频的提醒文本</audio>2、音频标签属性 ...

关于html5:HTML5简介

1、H5的浏览器兼容不同的浏览器显示的成果可能不一样。因为HTML5没有一个对立的规范，不同的浏览器解析时不一样的，当初还处于一个推广的阶段，然而大部分的时一样的 2、H5新的文档申明1）Html 4的文档申明2）Html 5的文档申明在 HTML 4.01 中，DOCTYPE 申明援用文档类型定义DTD（Document Type Definition)，因为 HTML 4.01 基于 SGML（规范通用标记语言，是一种定义电子文档构造和形容其内容的国际标准语言；）。DTD 规定了标记语言的规定，这样浏览器能力正确地出现内容。 HTML5 不基于 SGML，所以不须要援用 DTD。 ...

关于html5:关于HTML5

简介 HTML5是HTML第五次重大批改HTML5的8个个性：1. 语义个性2. 本地存储个性（indexedDB是HTML5本地存储最重要的技术之一）3. 设施兼容个性4. 连贯个性（Server-Send Event和Websockets这两个个性能帮忙咱们实现服务器将数据推送到客户端的性能）5. 网页多媒体个性6. 三维，图形及特效个性（基于SVG，Canvas，WebGL及CSS3的3D性能）7. 性能与集成个性（通过XMLHttpRequest2等技术帮忙web利用和网站在多样化的环境中更疾速的工作）8. CSS3个性w3c文档：https://www.w3school.com.cn/html5/html5_reference.aspmdn文档：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5HTML5和HTML4的区别 1. 简化的语法2. canvas代替flash3. 新的header和footer标记4. 新的section和article标记5. 新的menu和figure标记6. 新的audio和video标记7. 全新的表单设计8. 不再应用b和font标记9. 不再应用frame，center，big标记等判断浏览器是否能够应用HTML5 HTML5---标签 1. <article> ：规定独立的自蕴含内容。一篇文章应有其本身的意义，应该有可能独立于站点的其余部分对其进行散发。 <article> 元素的潜在起源：论坛帖子报纸文章博客条目用户评论 2. <aside> ：定义其所处内容之外的内容。 aside 的内容应该与左近的内容相干。 3. <audio> ：定义声音，比方音乐或其余音频流。4. <bdi> ：容许您设置一段文本，使其脱离其父元素的文本方向设置。属性：dir（可选。规定 <bdi> 元素内的文本的文本方向。默认值：auto）属性值：ltr，rtl，auto （目前只有 Firefox 和 Chrome 反对）5. <canvas> ：定义图形，比方图表和其余图像。 <canvas> 标签只是图形容器，您必须应用脚本来绘制图形。属性： height：设置 canvas 的高度。 width：设置 canvas 的宽度。 6. <datalist> ：定义选项列表。请与 input 元素配合应用该元素，来定义 input 可能的值。 datalist 及其选项不会被显示进去，它仅仅是非法的输出值列表。请应用 input 元素的 list 属性来绑定 datalist。 7. <dialog> 标签定义对话框或窗口。属性：open（规定 dialog 元素是流动的，用户可与之交互。）属性值：open （目前只有 Chrome 和 Safari 6 反对） 8. <embed> ：定义嵌入的内容，比方插件。属性： height：设置嵌入内容的高度。 src：嵌入内容的 URL。 type：定义嵌入内容的类型。 width：设置嵌入内容的宽度。 9. <figcaption> ：定义figure元素的题目（caption）。 "figcaption" 元素应该被置于 "figure" 元素的第一个或最初一个子元素的地位。 10. <figure> ：规定独立的流内容（图像、图表、照片、代码等等）。 figure 元素的内容应该与主内容相干，但如果被删除，则不应答文档流产生影响。11. <footer> ：定义文档或节的页脚。 <footer> 元素该当含有其蕴含元素的信息。页脚通常蕴含文档的作者、版权信息、应用条款链接、分割信息等等。您能够在一个文档中应用多个 <footer> 元素。 12. <header> ：定义文档的页眉（介绍信息）。13. <keygen> ：规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。属性： autofocus：使 keygen 字段在页面加载时取得焦点。 challenge：如果应用，则将 keygen 的值设置为在提交时询问。 disabled：禁用 keytag 字段。 form：定义该 keygen 字段所属的一个或多个表单。 keytype：定义 keytype。rsa 生成 RSA 密钥。 name：定义 keygen 元素的惟一名称。用于在提交表单时收集字段的值。（Firefox, Chrome, Opera 以及 Safari 6 反对） 14. <mark>：定义带有记号的文本。请在须要突出显示文本时应用 <m> 标签。 15. <meter> ：标签定义已知范畴或分数值内的标量测量。也被称为 gauge（尺度）。例子：磁盘用量、查问后果的相关性，等等。 <meter> 标签不利用于批示进度（在进度条中）。如果标记进度条，请应用 <progress> 标签。（Firefox, Chrome, Opera 以及 Safari 6 反对） 16. <nav> ：定义导航链接的局部。 17. <output> ：定义不同类型的输入，比方脚本的输入。属性： for：定义输入域相干的一个或多个元素。 form：定义输出字段所属的一个或多个表单。 name：定义对象的惟一名称。（表单提交时应用） 18. <progress> ：标示工作的进度（过程）。请联合 <progress> 标签与 JavaScript 一起应用，来显示工作的进度。 <progress> 标签不适宜用来示意度量衡（例如，磁盘空间应用状况或查问后果）。如需示意度量衡，请应用 <meter> 标签代替。属性： max：规定工作一共须要多少工作。 value：规定曾经实现多少工作。 19. <rp> : ruby 正文中应用，以定义不反对 ruby 元素的浏览器所显示的内容。 ruby 正文是中文注音或字符。 20. <rt> ：定义字符（中文注音或字符）的解释或发音。 ruby 正文是中文注音或字符。 21. <ruby> ：定义ruby的中文正文（注音或字符）。 22. <section> ：定义文档中的节（section、区段）。比方章节、页眉、页脚或文档中的其余局部。属性： cite：ection 的 URL，如果 section 摘自 web 的话。 23. <source> ：为媒介元素（比方 <video> 和 <audio>）定义媒介资源。 <source> 标签容许您规定可替换的视频/音频文件供浏览器依据它对媒体类型或者编解码器的反对进行抉择。属性： media：规定媒体资源的类型。 src：规定媒体文件的 URL。 type：规定媒体资源的 MIME 类型。 24. <summary> ：蕴含 details 元素的题目，"details" 元素用于形容无关文档或文档片段的详细信息。与 <details> 标签一起应用。题目是可见的，当用户点击题目时会显示出详细信息。 "summary" 元素应该是 "details" 元素的第一个子元素。 25. <time> ：定义公历的工夫（24 小时制）或日期，工夫和时区偏移是可选的。属性： datetime：规定日期 / 工夫。否则，由元素的内容给定日期 / 工夫。 pubdate：批示 <time> 元素中的日期 / 工夫是文档（或 <article> 元素）的公布日期。 26. <track> ：为诸如 video 元素之类的媒介规定内部文本轨道。用于规定字幕文件或其余蕴含文本的文件，当媒介播放时，这些文件是可见的。属性： default：规定该轨道是默认的，如果没有抉择任何轨道。 kind：示意轨道属于什么文本类型。（取值：captions，chapters，descriptions，metadata，subtitles） label：轨道的标签或题目。 src：轨道的 URL。 srclang：轨道的语言，若 kind 属性值是 "subtitles"，则该属性必须的。（Internet Explorer 10, Chrome 以及 Opera 反对） 27. <video> ：定义视频，比方电影片段或其余视频流。属性： autoplay：如果呈现该属性，则视频在就绪后马上播放。 controls：如果呈现该属性，则向用户显示控件，比方播放按钮。 height：设置视频播放器的高度。 loop：如果呈现该属性，则当媒介文件实现播放后再次开始播放。 muted：规定视频的音频输入应该被静音。 poster：规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 preload：如果呈现该属性，则视频在页面加载时进行加载，并准备播放。（如果应用 "autoplay"，则疏忽该属性） src：要播放的视频的 URL。 width：设置视频播放器的宽度。 28. <wbr> ：规定在文本中的何处适宜增加换行符。（所有浏览器都反对 <wbr> 标签，除了 Internet Explorer） HTML5---属性 ...

关于葡萄城开发技术:WijmoJS-前端开发工具包发布更新加入可视化地图组件

WijmoJS 是葡萄城推出的一款前端开发工具包，由 80 多款基于 HTML5、反对跨平台的高性能 UI 组件（如表格组件、图表组件、数据分析组件、导航组件和金融图表组件等）形成，完满兼容原生 JavaScript，反对 Angular、React、Vue 等前端框架，用于企业级 Web 应用程序的疾速开发和构建。近日，WijmoJS V2021.0 Update1正式公布，本次更新退出了一款同时兼容Angular、React和Vue的可视化地图组件，以及用于绑定REST API 的数据管理组件RestCollectionView。在为您列举 WijmoJS的更新内容之前，请返回WijmoJS产品官网下载安装包，以便同步体验。前端开发工具包 WijmoJS V2021.0 Update1 新个性一览：退出同时兼容Angular、React和Vue的可视化地图组件WijmoJS 在本次更新中，退出了一款用于天文数据可视化展现的地图组件FlexMap，该组件能够使您的天文数据栩栩如生，并变得更易于剖析。目前， FlexMap组件还处于测试阶段，后续会继续优化并增加一些地图包（区域地图文件）。 FlexMap组件性能反对渲染色度和为地图增加标注点，如散点图和气泡图，组件应用GeoJSON绑定天文因素图层和点图层（倡议将NaturalEarthData用作GeoJSON数据的源，并依据须要自定义MapShaper）。如下是FlexMap组件的局部应用场景： 1. 在JavaScript、Angular、React和Vue中创立分级统计地图借助FlexMap，只需几行代码就能够轻松创立分级统计地图。分级统计地图用于显示天文区域的统计值，每个区域都会依据其示意的数据进行着色。 2. 在JavaScript、Angular、React和Vue中创立散点图FlexMap反对为地图增加趣味点，以及创立散点图。散点图用于显示地图上特定坐标处的趣味点。 3. 在JavaScript、Angular、React和Vue中创立气泡地图FlexMap可用于创立气泡地图。气泡图在地图上显示的气泡大小取决于数据的值（较大的值=较大的气泡）。新的图表动静调色板WijmoJS 的第二个新性能是图表动静调色板，用于在地图和图表中创立丑陋的分级统计地图。调色板的配色计划参考了业余配色网站，包含以下几种：程序（SequentialSingle和SequentialMulti）：按色彩深浅显示数据从低到高的程序，从低值到高值顺次以深色到浅色示意。发散：两端为深色，中端为浅色，浅色示意两头值，深色代表极低值和极高值。定性：最适宜显示名义或分类数据。色彩不示意值的差别。利用这些新的调色板能够创立十分好看的图表。用于绑定REST API的RestCollectionView组件WijmoJS 的第三个新性能是一款RestCollectionView组件，该组件用于绑定REST API。在默认状况下，排序、分页和筛选是在服务器上实现的，然而借助WijmoJS ，便能够在客户端上更改其中的任何设置，将自定义的RestCollectionView绑定到WijmoJS组件中，便可主动调用服务器以执行CRUD操作。要应用这个组件，您只需创立一个扩大RestCollectionView并重写以下办法： getItems：从服务器获取我的项目列表。该列表能够被排序，过滤和分页。addItem：将一个我的项目增加到服务器上的汇合中。patchItem：在服务器上编辑汇合中的我的项目。deleteItem：从服务器上的汇合中删除一个我的项目。可用于Angular、React和Vue的MultiRow单元格模板WijmoJS 的最初一个新性能是可用于Angular、React和Vue的单元格模板，应用该模板来标记定义MultiRow单元格中的自定义内容。单元格模板反对绑定语法、嵌套组件、自定义HTML和条件逻辑。以上就是前端开发工具包 WijmoJS V2021.0 Update1的更新内容，如需理解详细信息，欢送拜访WijmoJS 产品官网。

关于vue-router:源码系列浅析vuerouter的三种模式

浅析vue-router的三种模式面试官：请说一下vue-router的2种模式... 我： vue-router不是有3种模式吗？？？一.前言vue-router到底有几种模式？依据vue-router官网，咱们能够明确看到vue-router的mode值有3种 hashhistoryabstract 其中，hash 和 history 是 SPA 单页应用程序的根底。先说论断： spa利用路由有2种模式，hash 和 history，vue路由有3种模式，比 spa 多了一个 abstract。二.源码剖析在vue-router中通过mode这个参数批改路由的模式： const router = new VueRouter({ mode: 'history', routes: [...]})具体怎么实现的呢，首先咱们下载 vue-router 的源码抽离进去对mode的解决 class vueRouter { constructor(options) { let mode = options.mode || 'hash' this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false if (this.fallback) { mode = 'hash' } if (!inBrowser) { mode = 'abstract' } this.mode = mode switch (mode) { case 'history': this.history = new HTML5History(this, options.base) break case 'hash': this.history = new HashHistory(this, options.base, this.fallback) break case 'abstract': this.history = new AbstractHistory(this, options.base) break default: if (process.env.NODE_ENV !== 'production') { assert(false, `invalid mode: ${mode}`) } } }}能够看到默认应用的是 hash 模式，当设置为 history 时，如果不反对 history 办法，也会强制应用 hash 模式。当不在浏览器环境，比方 node 中时，间接强制应用 abstract 模式。 ...

关于扫描二维码:前端面试每日-31-第707天

明天的知识点 (2021.03.23) —— 第707天 (我也要出题)[html] 实现一个雷达扫描的动画成果[css] 应用css实现一个毛玻璃成果[js] 在哪些状况下会产生隐式强制类型转换？[软技能] 你有午休习惯吗？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信保持的力量！！！欢送在 Issues 和敌人们一起探讨学习！我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注前端剑解公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

关于移动应用开发:问题排查-客户端突如其来的白屏等待

「本文选自《阿里云SRE技术期刊》2021年02月刊」挪动端的混合架构模式给 App 开发带来了簇新的空间，通过 H5 构建的业务模块能够实现高效疾速的版本迭代，满足多样化的业务需要。为了补救 H5 技术的局部性能有余，mPaaS 客户端框架为开发者提供了“离线”机制。开发者在接入 mPaaS H5 容器后，配合 mPaaS 挪动公布服务，能够让客户端不便地从本地加载 H5 业务包，极大地晋升了 H5 利用的加载效率。须要留神的是，这套离线机制的接入过程必须要严格依照文档来进行，一些轻微的谬误可能导致离线机制失败，给 H5 利用的加载性能带来影响。这篇文章将和大家分享一起由离线包重构引起的“白屏”期待景象的排查和解决案例。 1. 问题背景咱们（阿里云金融线 SRE 团队）接到客户的反馈：开发者对所有线上离线包进行了一轮的整合和重构，发版后发现 H5 利用的加载性能呈现较大的进化：在网络好的状况下会有一个短暂的“白屏”等待时间，在网络较差的状况下，甚至齐全无奈实现页面的加载。更具体的信息包含： 1) 前一天早晨在生产环境进行离线包版本更新，发现公布白名单内的用户拜访离线包呈现性能进化 2) iOS 和 Android 双端均存在这个问题 3) 白名单内共有 20 多个外部用户，非内部用户，对外业务没有理论影响 4) 非白名单内用户拜访的还是老版本的离线包，没有呈现问题 5) 开发侧的变更内容包含： a) 全量离线包更新，更新数量大略是60个左右b) 旧离线包的架构是 1 个公共资源包 + N 个一般资源包c) 新离线包的架构是 3 个公共资源包 + N 个一般资源包2. 剖析与排查依据症状 “网络好的状况下会有一个短暂的“白屏”等待时间，网络较差的状况下，甚至齐全无奈实现页面的加载”，咱们首先狐疑的是离线包的“离线”机制失败了，流量 fallback 到了线上资源。揣测“白屏”等待时间是 Web 资源网络下载和加载慢导致的，如下图所示：要验证这个揣测，咱们须要通过抓取 HTTP 层面的报文来确认这个问题，抓包办法可参考文后材料理解详情[1]。从网络包中咱们察看到，每次关上 H5 利用，均存在不同水平的资源文件拉取行为，这些 Web 资源大的有几十 MB，通过网络加载速度较慢，如下图所示： ...

关于前端:elselect的数据太多时候导致卡顿

解决：实现搜寻和很多数据的状况下保障平滑查看数据和搜寻数据。 <template> <div class="content"> <el-select size="small" v-model="searchVal" filterable :filter-method='fileterMethod' placeholder="请输出搜寻内容" clearable v-loadMoreDir:rangeNumber="loadMoreFun(rangeNumber)" @change='selChange' > <el-option v-for="(item, index) in showData.slice(0, rangeNumber)" :key="index" :label="item.label" :value="item.value" ></el-option> </el-select> </div></template><script>export default { name:'demo', data() { return { showData: [],//展现在下拉框内的数据 allData: [],//搜寻应用的所有数据 searchVal: "", rangeNumber: 10, addNumber:6,//下拉框滚动到底部后新增的条数 } }, created(){ this.getList() }, watch: { searchVal(newVal,oldVal){ // 清空输入框后从新给下拉内容赋值 if(!newVal){ this.showData = this.allData } }, }, directives:{ 'loadMoreDir':{ bind(el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap'); SELECTWRAP_DOM.addEventListener('scroll', function () { /** * scrollHeight 获取元素内容高度(只读) * scrollTop 获取或者设置元素的偏移值,罕用于计算滚动条的地位, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0. * clientHeight 读取元素的可见高度(只读) * 如果元素滚动到底, 上面等式返回true, 没有则返回false: * ele.scrollHeight - ele.scrollTop === ele.clientHeight; */ const condition = this.scrollHeight - this.scrollTop <= this.clientHeight; if (condition) binding.value() }); } } }, methods: { fileterMethod(val){ this.searchVal = val if(val){ this.showData = this.allData this.showData = this.showData.filter(item => { if(item.label.includes(val)){ return item } }) }else{ this.showData = this.allData } }, getList(){ let arr = [] for(let i = 0; i < 100000; i++){ arr.push({ label: "数据" + i, value: "数据" + i }) } this.allData = arr this.showData = arr }, loadMoreFun(n){ //每次滚动到底部能够新增条数 return () => this.rangeNumber += this.addNumber }, selChange(val){ }, }}</script> <style lang="scss" scoped></style>注：内容搜寻进去的，记录一下。见地址：https://blog.csdn.net/sunnybo... ...

关于前端:毛玻璃之前世今生之filter与backdropfilter

毛玻璃之前世今生前言：大家好，我是Aben，这里是“Coding会客厅”，这个主题我将会用本人的了解介绍前端艺术，用尽量乏味的语言与活泼的例子介绍更多前端方面的所见所闻，也欢送各位新老朋友提出您在前端方面的见解，该系列文章将推出一百个案例作为分享，不定期更新，每月至多更新一次，欢送各位订阅、珍藏与评论，也欢送你们将这档节目分享给更多的人。山水有相逢，让咱们一起退出明天的“Coding会客厅”吧。今集咱们会一起聊聊对于毛玻璃特效下的filter（滤镜）属性与利用css3的新个性backdrop-filter。咱们在很多场合下都会遇到毛玻璃特效的应用，例如windows左下角任务栏、网易云音乐的每日音乐举荐、iPhone设计等，这个特效曾经造成一种新的设计格调，业内称为glassmorphism，有人将其称作为新拟物格调下的新风向标，那么随着工夫的倒退，它又会走向何方？敬请期待吧！哈哈哈，不过明天咱们要聊的是它的前世今生~ 先上案例展现： 1.传统filter 2.css3新属性-backdrop-filter![上传中...]() filter:读音-英 [flt(r)] ，CSS属性将含糊或色彩偏移等图形成果利用于元素。滤镜通常用于调整图像，背景和边框的渲染。filter很像咱们手机中的美颜相机，它通过设置属性值能够将图片进行特效化解决，而且也能够利用于视频解决，其属性值与利用形式如下示意： filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() none 无显示 blur 高斯含糊值为css长度，不承受百分比值，默认值为0，该属性能够应用于毛玻璃 brightness 亮堂值值为[0,+x%],数值不可为正数，当数值为0时，将为全黑，而会随之数值增大曝光更加显著 contrast 对比度值是 0% 的话，图像会全黑。值是 100%，图像不变。值能够超过 100%，意味着会使用更低的比照。若没有设置值，默认是 1。 drop-shadow 暗影值该属性与box-shadow相似，filter：drop-shadow（offset-x ，offset-y，blur-radius，color），其中暗影偏移值为必须设定（数值越大偏移量越多，双正值暗影会呈现在右上方）；而blur-radius为可选值，值越大越含糊，不容许为正数；color为可选值，能够通过色彩设置决定暗影色彩，否则为浏览器默认色值举例：filter: drop-shadow(16px 16px 10px black) grayscale 灰度数值在0到百分百之间，0为原图原色（很多在哀节时调节网页色彩都会设置这个属性，如清明节或其余特定节日）举例：filter: grayscale(100%) hue-rotate() 色相翻转值默认值为0deg，尽管该值没有默认值然而咱们都做到数值翻转一圈（360deg）也就回到了原点举例：filter: hue-rotate(90deg) ...

关于javascript:打造绿色城市数字孪生天然气站-3D-可视化

前言天然气作为常见的燃料，与咱们的生存非亲非故，而对于这种燃料的存储与传输，对于天然气供应站有着严格的要求。燃气企业个别都会将点供站设计为无人值守站，而往往在经营治理过程中，对点供站的平安治理尤为重要。当在事变产生时，预警形式与应答预案的展示就成了不可或缺的局部。对于燃气产业，利用先进的新兴技术，如人工智能、物联网、BIM 等形式打造全新的管理模式是将来所趋，采纳 Hightopo（以下简称 HT )翻新的 2D/3D 可视化建模技术，数字孪生天然气站三维可视化零碎，提供一套集展现、监控、预警、预案于一体的解决方案。赋能燃气产业向信息化、可视化、绿色化环保方向倒退。常被提及的传统 BIM 被宽泛用于工程的设计和施工，最大特点就是三维模型的表达方式比传统的CAD图纸更加形象，大多用于辅助图纸审查、可视化交底、协同施工等等，但其实现老本高，需业余技术人员破费大量工夫进行我的项目建设。除蕴含模型根本形态展现信息外，还蕴含了大量业务和层次结构信息，所以个别 BIM 文件都十分大，几百 MB 到上 GB 的都有，这对于所有展现内容都是实时加载的 Web 简直是成为了瓶颈。 Hightopo 的可视化采纳轻量化建模的形式搭建场景成果，模型成果次要以贴图出现，以保障在网页中高效加载和晦涩运行。并且可提供导入 IFC 格局的 BIM 性能，在某些场景下应用 BIM 信息升高开发成本。打造1:1高仿真建模成果可视化场景。成果展现界面左右两侧为 2D 面板，左侧体现了设施温度、压力及管道流量等信息，右侧则是性能切换面板， 2D 界面采纳了科幻格调。界面核心展示天然气站的主体、管线、设施等整体仿真三维景观。系统分析园区监控应用写实格调建设天然气站三维成果，可通过大屏、PC 或挪动设施拖动界面扭转以后视角，也可进行界面缩放。鼠标悬停在对应设施上将展现出设施详情标签，反对实时查看设施运作信息。智能巡检无人园区中，巡检智能机器人依据指定线路，对点位设施进行一一巡检排查，采集实时可视化运作数据并进行剖析，将异样数据第一工夫反馈给控制中心，为管理人员提供应答根据。构造扫描透明化修建外观，采纳修建模型线框，可直观查看设施设施整体布局构造、运行状态。设施呈现故障时，会变为红色预警款式，以可视化的形式揭示管理人员做到及时防控与采取对应措施。现场视频通过接入设立在园区各个点位的监控设施，反对实时查看厂区实时影像，为治理部门提供及时无效的信息。消防模仿天然气作为可燃物对于存储量极大的天然气站来说是十分危险的，对其安全性的要求也是十分高。事后布局的消防线路、人员施救计划等，通过三维场景仿真模仿现场消防施救，为消防施救工作提供牢靠无效的信息。研判流程次要介绍了在火灾产生时，在火灾信息接报后，预警系统的预案研判流程，包含预警流程、判断是否达到应急启动计划、应急启动、应急处理与应急终止等信息。实现价值对于天然气点供站平安危险特色次要有以下三点： 1.高温危险液化天然气的存储对于温度有着严格的要求，要求饱和蒸汽压要靠近大气温的失常压力。无论在液化天然气的存储运输以及应用过程中都要确保其温度的临界点。同时在液化天然气供应站中存储以及输送的过程中，要保障其设施的资料合乎高温的性能，防止在高温环境下产生，脆性断裂膨胀等情况产生否则会造成液化天然气的泄露景象，会对天然气供应站带来肯定的危险。 2.焚烧危险液化天然气的其焚烧范畴在 6%-13%，液化天然气的焚烧速度大略为 0.3m/s，如若在密封的环境下，液化天然气与蒸汽会因为焚烧导致爆炸;但在凋谢的环境中液化天然气和蒸汽产生爆炸的几率较小。当液化天然气蒸汽遇到明火则会易燃，同时还极易扩散到有氧气的中央。 3.治理危险天然气点供站具备工艺简略、老本低廉等诸多特点，而往往在经营治理过程中，对点供站的平安治理尤为重要，点供站平安治理上的危险次要体现在平安治理规章制度不健全，点供站工作标准化、规范化不够具体，平安治理责任体系不落实，相关联内外部操作人员平安培训不到位，安全检查及隐患解决不及时，事变应急解决范畴及应急措施不能及时无效等诸多危险。综上所述，天然气站的平安治理是相当重要的，同时也迫切需要一套欠缺的可视化监控零碎来反对其平安治理，维持失常运作。总结可视化、数字化、智能化监管是燃气产业的发展趋势，大大提高了管理效率，省去了许多人力物力。在信息化飞速发展的当初，利用 HT 可视化技术和智能监管相结合，配合无效的预警计划，能够保障了生产的平安高效有序进行。更多行业利用实例能够参考图扑软件官网案例链接：https://www.hightopo.com/demo...

关于javascript:绿色物流智慧仓储中心监控可视化平台

前言随着电子商务产业的迅速倒退，快递爆仓已成为了困扰仓储物流的一大难题。大量的碎片化订单，传统仓储治理和运作形式已无奈满足，减速仓储物流治理的智能化、自动化降级翻新，延长而出的智慧物流概念成为物流行业的发展趋势。在大数据、挪动互联网、物联网、云计算等新兴技术高速倒退背景下，智慧物流越来越受到政府与企业的器重，成为智慧城市建设的得力抓手和无力撑持。智慧物流的劣势在于集成智能化技术，使物流全过程可主动感知辨认、可追踪溯源、可施行应答、可智能化决策、各环节信息系统交互集成。而通过依靠 HT 可视化技术，智慧仓储治理将能够通过2d组态，三维仿真状态的形式展现出物流核心的全场景治理交互零碎，不便上游供应方的大批量货物进行集中仓库贮存、治理等作业，并能承受解决上游用户的订货信息的一个 3D 智慧物流可视化仓储管理系统可视化。成果展现界面由 3d 仿真物流仓储核心以及左侧 2D 面板组成，整合了传统的仓库管理系统（WMS）和仓储控制系统（WCS），打造三维仿真仓储物流核心，包含了RFID、AGV、机器人码垛、立体化仓库、集装箱货运、机器人充电桩以及WMS等等。场景展现设施的运行状态、实时地位、装载货物状况等，可依据需要设置AVG行走门路。系统分析货物信息可视与调配 HT仓储治理监控的实现对仓储场景起到监控的作用，对于货架和挪动中的货品进行了数据采集，可通过可视化零碎疾速获取设施的运行状态，货架的数据变更以及面板数据的实时反馈，达到全方位把握仓储转运核心的活动状态，起到监管、保护以及调配多维度对立。出入库治理在HT技术支持下，数据可视化除了“可视”，还有可交换、可互动的特点。汇合仓储零碎利用物联网、视频监控联网技术、输送和分拣技术、灵便的叉车服务模式、智能穿梭车和货架零碎、嵌入智能管制与通信模块的物流机器人技术、RFID托盘等。数字孪生一个物流全过程，让物品出入库信息可展示，可监控，可治理。疾速智能检索信息在面板设置了智能多维度搜寻，零碎通过对数据的采集与剖析检索出相应的货物流。高效化的检索性能有利于用户理解订单的状态以及出出入库等信息。人员车辆及设施治理通过可视化等技术将仓储核心的设施、人员等信息都集成监控，实现运维治理统一化，智能化。仓储管理人员能够实时通过平台数据理解人员配置、车辆应用状况、设施数量监控。仓储数据统计在信息化根底上，数字化的展现通过作业后的状况，提取各模块数据并进行剖析，让管理人员对以后仓储作业能力进行评估，为一系列可能产生的理论问题找到解决方案。进步仓库现场的治理，实现仓库数据实时化、透明化，进步管理效率，仓储效益等。实现价值1、解放人工作业，提高效率：从以前的手动仓库，人工随身携带清单，调配产品以及装运货物，到现在的智能仓储，齐全取代并解决了人工仓库，智能仓储零碎的主动承受、辨认、分类组织和提取获取等性能更加适应现在的社会进度，HT可视化的技术赋能了仓储物流行业，通过可视化让产品可知可控。进步库存物资的盘点效率，升高员工的作业难度。高效作业。 2、升高企业老本，绿色环保：随着国家绿色理念的推广，绿色物流是古代物流的必然产物。产品从投产至销出，制作加工仅占10%，而简直90%的工夫为仓储、运输、装卸、分装、流通加工、信息处理等物流过程。而利用 HT可视化技术能够缩小了纸质作业的应用。通过整合现有资源，优化资源配置，企业能够进步资源利用率，缩小资源节约与企业老本，升高物流对环境的影响，充分利用可视化技术以实现绿色物流。 3、数据联动，高效治理：传统仓库治理，数据繁多无限，只能满足根底需要。现在依靠互联网新兴技术如大数据、云计算、AI、物联网、机器视觉等利用，以及HT可视化技术，让货物智能化，仓库信息化展示，治理透明化，保障出货的及时性、准确性和高效性；能够对数据可视化，进行数据挖掘剖析预测，晋升仓库精细化治理，让决策有据可依。打造仓储物流可视化让数据共通与联动，让治理更高效。总结Hightopo 3D 可视化物流仓储监控零碎打造绿色仓储物流的数据运维治理一体化。全面晋升运维治理的智能化程度，以实现感知、调配、治理等。保障现代化智能仓储的平安运行，赋能物流行业绿色化、精细化、智能化倒退。更多行业利用实例能够参考图扑软件官网案例链接：https://www.hightopo.com/demos/index.html

关于javascript:浏览器重排回流重绘以及优化方案

一、什么是重排和重绘要说清重排(reflow)和重绘(repaint)，首先要了解排列和绘制，浏览器渲染页面时，在获取完html、css资源之后，会大抵通过以下步骤。(1) html生成html树(2) css造成css规定(3) 两者造成一个渲染树(4) 去文档当中找寻各自的布局地位----- 排列(5) 将内容填充到文档上 ----- 绘制【排列】就是计算地位调整布局的过程，而【绘制】就是把它画下来的过程。【重排】也就是除了最开始排列的布局，后续通过一些操作而使得dom元素从新找寻地位的过程，【重绘】就是从新绘制内容的过程。二、什么状况会引发重排和重绘1、先来说重排，重排和地位的挪动布局的变动无关，次要有以下几种状况会引发重排(1) 浏览器的窗口发生变化，每放大、放大一次浏览器的窗口，该页面的所有元素都要进行重排重绘(2) 减少、删除、挪动dom元素，更改dom元素的宽高内外边距、内容，批改dom元素的款式(3) 进行dom元素宽低等属性的查问，因为每查问一次，浏览器都会对所有的元素进行从新计算，以确保计算的值是正确的 2、再来说重绘，重绘次要是元素的外观发生变化，不会从新布局，有以下状况会引发重绘元素的背景(background)、文字色彩(color)、边框款式(outline)发生变化 3、重排和重绘的关系重绘不肯定须要重排，因为可能只是元素批改文字色彩，不须要从新布局，重排大多数状况都须要重绘，因为重新排列元素之后要绘制到屏幕上。以下显示重排和重绘的耗时，方块两秒之后右移了100px 三、为什么要优化因为重排和重绘不只是对单个的dom元素进行操作，而是对整个【图层】进行操作，须要破费工夫，如果频率高，十分的影响性能。那什么是图层？如下图所示因为每一次的重排重绘都是操作整个图层，那么咱们能够将须要频繁操作的dom元素另外建设一个图层，这样能够尽可能少的触发重排重绘。那么什么状况能够开启图层？针对频繁操作的行为，chrome浏览器主动开启了图层，次要有以下几种状况1、css 3D变动的图形 ---- transform: translateX(0)2、html5中的<video>标签3、canvas绘图中的节点4、css 动画的节点 --- keyframes animation5、领有css减速属性 --- will-change: transform 除此之外，还能够应用以下形式进行优化1、对元素进行挪动时，应用transform代替对元素top、left、right的操作，因为css3的整个操作是对图层的组合来实现的，所以不会引发重绘重排。 #node{ // position: relative; transform: translateX(0); width: 100px; height: 100px; background: pink;}var node = document.querySelector("#node");setTimeout(function(){ // node.style.left="100px"; node.style.transform="translateX(100px)";},2000);同样是对一个元素两秒后挪动100px，能够看到比照下图比照 2、将屡次对款式的操作合并成一次不要一次一次的批改款式，而是事后定义好class，间接批改DOM的className，这样只会引发一次重排重绘3、将dom离线后批改如果要对dom元素进行屡次操作，首先将dom设置为不可见，而后再对dom操作，操作实现后再将dom元素设置为可见，这样只会有两次重排重绘4、利用文档碎片 documentFragmentdocumentFragment 不是实在 dom树的一部分，它的变动不会触发dom树的从新渲染，且不会导致性能等问题，将创立的新元素全副增加到documentFragment上，最初让documentFragment一起插入到dom元素中 const list = ['哈尔的挪动城堡', '千与千寻的神隐', '起风了']const ul = document.getElementsByTagName("ul")[0]let fragment = document.createDocumentFragment()for(let i in list){ fragment.appendChild(list[i])}ul.appendChild(fragment)

关于前端:uniapp跨端开发H5小程序IOSAndroid一太强了一次性搞定全端开发

大家好，我是黑马腾云。这是一个原创系列连载文章，基于企业实在我的项目案例分享教训，带你疾速入门uni-app开发！欢送点击头像关注，防止迷路！同时如果感觉文章不错，欢送转发帮忙更多人。文章断更了段时间，之前大半年始终在忙守业的事件，期间率领团队从0到1用uni-app+java开发了二款商城类商业级利用，产品状态笼罩H5、微信小程序、IOS、Android。目前产品已胜利公布到各大电子市场。难得有空静下来对我的项目做下总结，本系列文章先站在公司的的角度对产品技术选型进行剖析，而后再依据咱们我的项目理论开发教训进行汇总，供大家参考。一、咱们为什么选uni-app？一个我的项目从立项开发到推向市场，开发只是其中占比很小的一个板块，尤其是对于初创企业来说，把每分钱都花在刀刃上显得尤为重要，因而产品开发的过程要够快、老本要够低。基于一些非凡的起因，我的项目启动之初，团队对产品要求就是须要蕴含：微信小程序、H5、Android、Ios，并且尽可能多的笼罩其它平台。单从技术角度去思考，实现形式还是挺多的。 1、采纳原生开发的模式微信小程序：微信官网提供了原生的开发模式。 Android：采纳java或Kotlin进行原生开发。 Ios：采纳Object-c或Swift进行原生开发。采纳原生开发模式，小程序、Android、Ios每个岗位都至多须要一位人员，老本较高。 2、采纳大前端技术，一次开发，打包多个平台大前端跨平台技术也有不同技术计划：uni-app、flutter、react native、Taro等等，都能够做到一次开发，跨端兼容。跨端技术通过这些年的倒退，除非非凡场合对性能要求十分高的场合，针对一般利用，性能根本都能满足，即使是真有非凡需要也能够通过混合开发的模式进行解决。综合从技术生态、开发者社区活跃度、学习老本等诸多方面思考，针对初创团队来说uni-app是比拟好的抉择。uni-app有很好的多端兼容机制，并有大量胜利的我的项目案例。同时uni-app是基于vue.js实现，因而前端人员很容易就能实现H5、小程序、App以及治理后盾的开发（甚至在很多小企业一个人就把这些活儿干完了），节约人力老本。二、系列文章布局研发产品的胜利上线（App store、Android电子市场、小程序公布）间接验证了计划的可行性。当然在开发过程中也遇到一些坑，特意梳理总结进去供参考和探讨。为了让没接触过uni-app开发的人员也能疾速上手，本系列文章将从最罕用的根底知识点开始梳理，会集成入门到实战系列文章。前半部分的文章次要解说根底知识点、后半局部将以实战模式进行demo演示。前置常识理解微信小程序开发概念理解app相干概念有肯定的HTML+CSS根底适用人群零根底前端人员在校学生想理解前端的后端程序员对小程序和app开发感兴趣人员特地阐明：因为本系列文章次要是面向入门人员提供参考和帮忙，因而不适宜uni-app经验丰富的开发人员。前期会推出高阶实战系列，敬请关注。内容布局根底局部 uni-app跨端开发H5、小程序、IOS、Android（一）：太强了，一次性搞定全端开发 uni-app跨端开发H5、小程序、IOS、Android（二）：应用HBuilderX等工具进行跨端开发 uni-app跨端开发H5、小程序、IOS、Android（三）：了解uni-app框架思维 uni-app跨端开发H5、小程序、IOS、Android（四）：理解uni-app我的项目构造 uni-app跨端开发H5、小程序、IOS、Android（五）：一文弄清uni-app双向数据绑定 uni-app跨端开发H5、小程序、IOS、Android（六）：一文弄清uni-app事件绑定机制 uni-app跨端开发H5、小程序、IOS、Android（七）：uni-app渲染 uni-app跨端开发H5、小程序、IOS、Android（八）：了解uni-app生命周期函数及作用 uni-app跨端开发H5、小程序、IOS、Android（九）：为什么uni-app能自适应不同屏幕尺寸 uni-app跨端开发H5、小程序、IOS、Android（十）：如何实现跨端兼容，全平台笼罩 uni-app跨端开发H5、小程序、IOS、Android（十一）：有哪些支流的前端布局形式 uni-app跨端开发H5、小程序、IOS、Android（十二）：一文把握flex布局中的容器属性 uni-app跨端开发H5、小程序、IOS、Android（十三）：一文把握flex布局中的元素属性 demo局部...... 三、uni-app简介uni，读 you ni，是对立的意思。 uni-app 是一个应用 Vue.js 开发所有前端利用的框架，开发者编写一套代码，可公布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快利用等多个平台。 uni-app 在开发者数量、案例、跨端抹平度、扩大灵活性、性能体验、周边生态、学习老本、开发成本等8大要害指标上领有更强的劣势。 uni-app最大特点就是跨平台，底层屏蔽了各大平台的差别，使得开发者能用同一套语法开发不同平台的利用。uni-app跨平台实质思维就是在编译时将代码转化为各自平台的代码。官网提供的uni-app性能框架如下图：平台通过几年的倒退，目前曾经汇集了几百万开发者，有着欠缺的插件市场和周边生态，也提供了广告变现，无论初创公司还是集体开发者都是一个不错的选项。四、开发工具介绍前端开发工具很多，次要分为文本编辑器和IDE集成环境，抉择很多：Atom、sublime、Dreamweaver、Visual Studio Code、WebStorm、HbuilderX等等。没有最好，适宜的就是好的。业界广泛用的多的就是：Visual Studio Code和HbuilerX，咱们团队采纳的是官网提供的HbuilderX进行跨端开发。能够依据集体爱好抉择某一个开发工具，也能够多个开发工具混用。五、实在我的项目演示实在商业我的项目，已公布小程序、上线各大电子市场，可自行依据名称进行搜寻体验。案例1：“好厨联盟” app store、各大电子市场、公众号、小程序皆可搜寻体验。 ...

关于前端:SAP-产品一脉相承的-UI-增强思路在-SAP-Commerce-Cloud电商云-UI-增强实现中的体现

本文首先疾速回顾几种 SAP 产品中的 UI 加强思路，而后具体介绍该思路是如何在 SAP Commerce Cloud(电商云) UI 加强中贯彻实施的。 Jerry 之前的文章：Jerry 在 2020 SAP 寰球技术大会的分享：SAP Spartacus 技术介绍的文字版，已经提到，SAP 电商云的新一代规范 UI，由泛滥 Angular Component 组成，这些 Component 通过 SAP Spartacus 开源我的项目，以库文件的形式公布给客户应用。客户通过在 Angular 利用的 package.json 里，导入 @spartacus/storefront 的依赖，就能够拜访到 SAP 电商云的规范 UI Component. Jerry 之前的文章从一个理论的例子登程，谈谈 SAP Commerce Cloud(电商云)的 UI 自定义开发，介绍了 SAP 电商云 UI 二次开发的形式之一：基于 UI Component 的替换。咱们假如 SAP 电商云 UI 由 SAP 规范公布的 Angular Component A, B, C, D... 组成，Jerry 文章介绍的二次开发形式，分享了 Partners 如何开发新的 Angular Component A', B', C', D'... ，而后如何通过配置通知 SAP Commerce Cloud UI，运行时应用 A', B', C', D' 来渲染 UI. ...

关于前端:如何解决使用JSONstringify时遇到的循环引用问题

程序员在日常做TypeScript/JavaScript开发时，常常须要将简单的JavaScript对象通过JSON.stringify序列化成json字符串，保留到本地以便后续具体分析。然而如果JavaScript对象自身蕴含循环援用，则JSON.stringify不能失常工作，谬误音讯： VM415:1 Uncaught TypeError: Converting circular structure to JSON 解决方案，应用上面这段来自这个网站的代码，定义一个全局cache数组，每当待序列化的JavaScript对象的属性被遍历时，将该属性对应的值存储到cache数组去。如果遍历时发现，有属性值曾经在cache数组里有值了，阐明检测到了循环援用，此时间接return退出循环即可。 var cache = [];var str = JSON.stringify(o, function(key, value) { if (typeof value === 'object' && value !== null) { if (cache.indexOf(value) !== -1) { // 移除 return; } // 收集所有的值 cache.push(value); } return value;});cache = null; // 清空变量，便于垃圾回收机制回收应用这种方法，我胜利将一个存在循环援用的JavaScript对象序列化成字符串了。更多Jerry的原创文章，尽在："汪子熙":

关于前端:eltable表格固定列错位

解决：应用el-table提供的api里的doLayoutdoLayout：对 Table 进行从新布局。当 Table 或其先人元素由暗藏切换为显示时，可能须要调用此办法用法：每次el-table数据变更后调用doLayout <el-table :data="table" ref="myTable" >this.$nextTick(() => { this.$refs.myTable.doLayout()})

关于javascript:用递归写的深度复制

function cloneDeep(old) { let map = new WeakMap() return cloneDeepCon(old, map)}function cloneDeepCon(old, map) { if (!(old && typeof old === 'object')) return old let existObj = map.get(old) if (existObj) return existObj let oldClone = Array.isArray(old) ? [] : {} map.set(old, oldClone) let keys = Object.getOwnPropertyNames(old) keys.forEach((key) => { oldClone[key] = cloneDeepCon(old[key], map) Object.defineProperty( oldClone, key, Object.getOwnPropertyDescriptor(old, key) ) }) return oldClone}

关于html5:解锁新技能手势识别隔空打飞机

飞机大战置信大家都玩过，好多同学甚至本人写过，不论你是用js还是用java，是用原生代码实现还是应用游戏引擎实现。无非就是应用鼠标或者手指触控来在屏幕上拖动飞机挪动来打飞机，但我置信你应该还没有玩过应用手势隔空来管制飞机吧。那明天咱们就来开发一款飞机大战游戏，而后应用手势隔空操控飞机。先上demo：飞机大战留神：须要开启电脑摄像头 MediaPipe为了实现手势管制，咱们就须要可能通过电脑摄像头来辨认手部的动作。这里咱们应用到了MediaPip。 MediaPipe 是一款由 Google Research 开发并开源的多媒体机器学习模型利用框架。在谷歌，一系列重要产品，如、Google Lens、ARCore、Google Home 以及，都已深度整合了 MediaPipe。作为一款跨平台框架，MediaPipe 不仅能够被部署在服务器端，更能够在多个挪动端（安卓和苹果 iOS）和嵌入式平台（Google Coral 和树莓派）中作为设施端机器学习推理（On-device Machine Learning Inference）框架 Media Pip反对应用js实现人脸网格拓扑，人脸检测，手部检测，全身检测和姿态辨认等。手部辨认为了实现应用手势管制飞机，那么咱们须要辨认出手部动作。 MediaPip能够辨认人手，并且将手部构造按关节进行拓扑，辨认后果为保留在两个对象中： MULTI_HAND_LANDMARKS：保留了每个手的关节信息MULTI_HANDEDNESS：保留多个手部信息，比方是左手还是右手手势管制飞机原理原理很简略，就是应用摄像头手别手部，MediaPip能够辨认手部21个关节，咱们能够应用食指尖这个点来管制飞机挪动。即下标为8的点：INDEX_FINGER_TIP的坐标赋值给飞机。其实就相当于应用食指代替了鼠标。代码实现好，原理分明之后，上代码：创立html文件，引入三个js库： <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>index.html <!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="demo.css"></head><body> <div class="container">  ![](./img/hero.png)  <video class="input_video"></video>  <canvas class="output_canvas" width="1280px" height="720px" ></canvas>  <div class="loading"> <div class="spinner"></div> <div class="message"> Loading </div> </div> </div> <script src="./demo.js"></script></body></html>创立Hands对象： ...

关于javascript:免费开源-基于Vue和Quasar的前端SPA项目实战之用户登录二

基于Vue和Quasar的前端SPA我的项目实战之用户登录（二）回顾通过上一篇文章基于Vue和Quasar的前端SPA我的项目实战之环境搭建（一）的介绍，咱们曾经搭建好本地开发环境并且运行胜利了，明天次要介绍登录性能。简介通常为了平安思考，须要用户登录之后才能够拜访。crudapi admin web我的项目也须要引入登录性能，用户登录胜利之后，跳转到治理页面，否则提醒没有权限。技术调研SESSIONSESSION通常会用到Cookie，Cookie有时也用其复数模式Cookies。类型为“小型文本文件”，是某些网站为了分别用户身份，进行Session跟踪而贮存在用户本地终端上的数据（通常通过加密），由用户客户端计算机临时或永恒保留的信息。用户登录胜利后，后盾服务记录登录状态，并用SESSIONID进行惟一辨认。浏览器通过Cookie记录了SESSIONID之后，下一次拜访同一域名下的任何网页的时候会主动带上蕴含SESSIONID信息的Cookie，这样后盾就能够判断用户是否曾经登录过了，从而进行下一步动作。长处是使用方便，浏览器主动解决Cookie，毛病是容易受到XSS攻打。 JWT TokenJson web token (JWT), 是为了在网络应用环境间传递申明而执行的一种基于JSON的凋谢规范（(RFC 7519).该token被设计为紧凑且平安的，特地实用于分布式站点的单点登录（SSO）场景。JWT的申明个别被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也能够减少一些额定的其它业务逻辑所必须的申明信息，该token也可间接被用于认证，也可被加密。 JWT校验形式更加简略便捷化，无需通过缓存，而是间接依据token取出保留的用户信息，以及对token可用性校验，单点登录更为简略。毛病是登记不是很不便，并且因为JWT Token是base64加密，可能有平安方面隐患。因为目前零碎次要是在浏览器环境中应用，所以抉择了SESSION的登录形式，后续思考应用JWT登录形式，JWT更适宜APP和小程序场景。登录流程次要流程如下：用户关上页面的时候，首先判断是否属于白名单列表，如果属于，比方/login, /403, 间接放行。本地local Storage如果保留了登录信息，阐明之前登录过，间接放行。如果没有登录过，本地local Storage为空，跳转到登录页面。尽管本地登录过了，然而可能过期了，这时候拜访任意一个API时候，会主动依据返回后果判断是否登录。UI界面登录页面比较简单，次要包含用户名、明码输入框和登录按钮，点击登录按钮会调用登录API。代码构造 api: 通过axios与后盾api交互assets：次要是一些图片之类的boot：动静加载库，比方axios、i18n等components：自定义组件css：css款式i18n：多语言信息layouts：布局pages：页面，包含了html，css和js三局部内容router：路由相干service：业务service，对api进行封装store：Vuex状态治理，Vuex 是实现组件全局状态(数据)治理的一种机制，能够不便的实现组件之间数据的共享配置文件quasar.conf.js是全局配置文件，所有的配置相干内容都能够这个文件外面设置。外围代码配置quasar.conf.jsplugins: [ 'LocalStorage', 'Notify', 'Loading']因为须要用到本地存储LocalStorage，音讯提醒Notify和期待提醒Loading插件，所以在plugins外面增加。配置全局款式批改文件quasar.variables.styl和app.styl, 比方设置主色彩为淡蓝色 $primary = #35C8E8封装axiosimport Vue from 'vue'import axios from 'axios'import { Notify } from "quasar";import qs from "qs";import Router from "../router/index";import { permissionService } from "../service";Vue.prototype.$axios = axios// We create our own axios instance and set a custom base URL.// Note that if we wouldn't set any config here we do not need// a named export, as we could just `import axios from 'axios'`const axiosInstance = axios.create({ baseURL: process.env.API});axiosInstance.defaults.transformRequest = [ function(data, headers) { // Do whatever you want to transform the data let contentType = headers["Content-Type"] || headers["content-type"]; if (!contentType) { contentType = "application/json"; headers["Content-Type"] = "application/json"; } if (contentType.indexOf("multipart/form-data") >= 0) { return data; } else if (contentType.indexOf("application/x-www-form-urlencoded") >= 0) { return qs.stringify(data); } return JSON.stringify(data); }];// Add a request interceptoraxiosInstance.interceptors.request.use( function(config) { if (config.permission && !permissionService.check(config.permission)) { throw { message: "403 forbidden" }; } return config; }, function(error) { // Do something with request error return Promise.reject(error); });function login() { setTimeout(() => { Router.push({ path: "/login" }); }, 1000);}// Add a response interceptoraxiosInstance.interceptors.response.use( function(response) { // Any status code that lie within the range of 2xx cause this function to trigger // Do something with response data return response; }, function(error) { // Any status codes that falls outside the range of 2xx cause this function to trigger // Do something with response error if (error.response) { if (error.response.status === 401) { Notify.create({ message: error.response.data.message, type: 'negative' }); login(); } else if (error.response.data && error.response.data.message) { Notify.create({ message: error.response.data.message, type: 'negative' }); } else { Notify.create({ message: error.response.statusText || error.response.status, type: 'negative' }); } } else if (error.message.indexOf("timeout") > -1) { Notify.create({ message: "Network timeout", type: 'negative' }); } else if (error.message) { Notify.create({ message: error.message, type: 'negative' }); } else { Notify.create({ message: "http request error", type: 'negative' }); } return Promise.reject(error); });// for use inside Vue files through this.$axiosVue.prototype.$axios = axiosInstance// Here we define a named export// that we can later use inside .js files:export { axiosInstance }axios配置一个实例，做一些对立解决，比方网络申请数据预处理，验证权限，401跳转，403提醒等。 ...

关于前端:Chrome-调试总是进入-Paused-in-debugger状态

问题形容：Chrome 关上网站时候如果先关上f12,调试总是进入 Paused in debugger状态;如果不关上f12或者页面加载完之后再关上f12页一切正常。具体显示：图片划线的内容外面并未发现异常解决方案：将下图圈住的图标点击成如图状态，下次进入网站不会进入debugger状态。

关于javascript:前端面试每日-31-第702天

明天的知识点 (2021.03.18) —— 第702天 (我也要出题)[html] 请说出几条对于HTML的W3C标准规范[css] 说说你对-webkit-overflow-scrolling属性的了解[js] [请说说js的外部属性[[Class]]是什么？](https://github.com/haizlin/fe...[软技能] 你最想在将来几年内接触哪些类型的我的项目？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信保持的力量！！！欢送在 Issues 和敌人们一起探讨学习！我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注前端剑解公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

关于vue.js:vue使用vhtml实现一段字符串中关键字词高亮效果

问题形容需要：咱们搜寻某个关键字，后端返回给咱们一个字符串，这个字符串中蕴含咱们搜寻的关键字，咱们须要把这个字符串中的关键字局部加上高亮成果（相似于百度搜寻关键字高亮的成果）。咱们先看一下，大抵相似的效果图：如上图所示，需要很简略，就是关键字高亮。思路剖析解决形式有两种，第一种就是进行字符串的切割，把关键字切出来，加上一个色彩。这种形式上一篇文章对于字符串的办法整顿的文章曾经说过了，不赘述，详情可点击链接跳转瞅瞅。附上地址：https://segmentfault.com/a/11...接下来咱们说第二种形式，应用v-html指令加上字符串的替换办法，话不多说，上代码。 <template> <div id="app"> <div> <span v-html="highLight(title)">{{title}}</span> </div> </div></template><script>export default { data() { return { title:"五百年前孙悟空大闹天宫", searchWord:"孙悟空" }; }, methods: { highLight(title){ // 如果题目中蕴含，关键字就替换一下 if(title.includes(this.searchWord)){ title = title.replace( this.searchWord, // 这里是替换成html格局的数据，最好再加一个款式权重，保险一点 '<font style="color:red!important;">'+ this.searchWord +'</font>' ) return title } // 不蕴含的话还用这个 else{ return title } } },};</script>代码效果图：DOM元素审查总结v-html如同平时不怎么用到这个vue的指令，不过实际上在某些场景下，应用v-html可能很好的解决问题

关于html5:如何编写更好的-JS-代码

作者：Taimoor Sattar译者：前端小智起源：valentinog点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。Javascript 是浏览器能够了解的语言，它用于加载动静内容而无需刷新页面。明天列举一些用用更少的代码又更具可读性形式来编写 JS，肝货开始。应用模板字符串模板字符串是能够嵌入表达式中的字符串(变量)，它能够让代码更加简略和易读。 var code = "javascript";var str = ` I love ${code} I love ${code} `;如果没有模板字符串，咱们须要这么写： var code = "javascript";var str1 = "n I love " + code + "n I love " + code + "n";应用三元运算符在编程中，会遇到逻辑操作。如果要在两条语句之间执行逻辑，三元操作符的可读性要高得多。 let price= isMember ? '$2.00' : '$10.00'应用Include语句JS 中的 include 语句是一种在数组和句子中搜寻字符串的更简略的办法。 var str = "I love JavaScript.";var word = str.includes("javaScript"); // result: true数组也能够应用 include 办法： var str = ["taimoor", "ali", "umer"];var n = str.includes("taimoor"); // result: true空合并运算符如果咱们应用的是第三方API，可能会遇到雷同的key-value不会呈现在每个查问中。这样咱们必须查看JSON中的空键，免得呈现谬误。 ...

关于javascript:日常工作小知识

1. a标签的弱小性能<a href="tel:10086">10086</a> //点击后间接拨打10086 <a href="mailto:c1586@qq.com?subject=TestObject">c6088@qq.com</a> //点击后间接给c1586@qq.com发邮件，主题为：TestObject<a href="sms:10086?body=message_body">给 10086 发短信</a> //点击后间接给10086发信息，音讯内容默认为message_body<a href="sms:10086?body=message_body">给 10086 发短信</a> //点击后间接给10086发信息，音讯内容默认为message_body<a href="img/WC.png" download="WC.png">下载图片</a> //href中只须要放上图片的链接尽量不应用 target="_blank"，如果肯定要用，须要加上 rel="noopener" 或者 rel="noreferrer"。这样新窗口的 window.openner 就是 null了 2. 多种形式实现斐波那契数列//根底版斐波那契数列function fabonacci(n) { let num1 = 1, num2 = 1, sum; let arr = [1, 1]; for (let i = 3; i <= n; i++) { sum = num1 + num2; num1 = num2; num2 = sum; arr.push(sum); } return arr;}//基于ES6 Generator实现function* fabonacciG(num) { var a = 1, b = 1, n = 0; while (n < num) { yield a; [a, b] = [b, a + b]; n++ }}3. css彩带/彩边background: repeating-linear-gradient(45deg, #114abc, #114abc 10px, #fff 10px, #fff 20px, #bf2010 10px, #bf2010 30px, #fff 30px, #fff 40px);4. 二分查找法const search = function(nums, target) { let start = 0, end = nums.length - 1; while (start <= end) { const mid = start + ((end - start) >> 1); if (nums[mid] === target) { return mid; } // 左侧有序 if (nums[mid] >= nums[start]) { // target 在 [start, mid] 之间 if (target >= nums[start] && target < nums[mid]) { end = mid - 1; } else { start = mid + 1; } } else { // 右侧有序 // target 在 [mid, end] 之间 if (target > nums[mid] && target <= nums[end]) { start = mid + 1; } else { end = mid - 1; } } } return -1;}5. 让浏览器谈话let speechInstance = new SpeechSynthesisUtterance('你好，老铁');speechSynthesis.speak(speechInstance);上面简略介绍一下相干的属性和办法：SpeechSynthesisUtterance对象的属性： ...

关于前端:jsVue实现数字金额滚动动画

实现成果数字金额定时滚动减少，最初展现成字符串格局代码如下：<span class="data-add-rate" :dataValue="num">{{num}}</span><script> ... methods:{ autoAdd(sel){ let times = 0; let total = 30; let $sel = $(sel); let intHand = window.setInterval(function(){ $sel.each(function(){ let $this = $(this); let data = parseFloat($this.attr("dataValue")); let number = parseFloat(data*times/total); $this.text(app.getString(number)); //app.getString()是将number转换位字符串的函数 }) if(times === total){ window.clearInterval(intHand); }else{ times++; } },20); } //调用时 this.autoAdd('.data-add-rate'); } ...</script>

关于css:css简单实现一个带三角的简单弹窗

代码如下实现成果如下：

关于html5:CodeHub4-前情预告｜H5-容器在技术实践中的应用

CodeHub#4：K12 在线教育 App 的开发实际 2021.03.18 19:00 期待与您一起独特探索网络环境弱影响、版本升级无感知的技术计划 ???? B 站直播间???? CSDN 直播间_???? 阿里云直播间在线教育 App 的开发实际分享人：雷文伟（「荷小鱼」前端工程师） 2021.03.18 19:00 诚邀您的参加

关于html5:HTML语义化每天一个知识点

什么是html语义化？HTML语义化就是用正当、正确的标签来展现内容。比方咱们在指定一些标签的时候，如div、span，咱们并不知道其定义的内容类型，但当咱们用h1-h5标签，咱们晓得这是定义的一级题目，table咱们晓得定义的是表格，img咱们晓得定义的是图片。语义化的长处易于用户浏览，款式失落的时候能够让页面出现清晰的构造。有利于seo，搜索引擎依据标签来确定上下文和各个关键字的权重不便其余设施监解析，如盲人阅读器依据语义渲染网页有利于开发和保护，语义化更具备可读性，代码更好保护，与CSS3关系更加谐和主题构造次要的语义化标签及含意标签名具体解释<header><header>标签定义文档或者文档局部区域的页眉，次要用作搁置介绍性内容的容器。<nav><nav>用来定义导航链接块，但并不是所有的链接都该当位于nav块中<main><main>用来定义文档的次要内容（一个文档中只能有一个）<article><article>定义独立的自蕴含内容，如文档、博客、用户提交的评论等<aside><aside>定义页面次要内容之外的某些内容，如侧边栏或嵌如内容（分类）<footer><footer>定义文档的页脚，如版权信息，联系方式等<section><section>示意文档的一个区域。

关于javascript:打造综合性智慧城市之朔州开发区-3D-可视化

前言近几年，我国智慧城市建设步调也一直放慢，党中央和国务院也更加重视智慧园区的建设与倒退，智慧园区建设与园区产业倒退相结合，向着翻新化、生态化倒退，更加重视高新技术、绿色环保型等产业的倒退，将治理翻新与园区智能化相结合。园区的倒退更新换代，汇合如：云计算，物联网，大数据，人工智能，GIS等新兴技术，通过对园区内外的数据和资源进行检测、剖析、集成和响应，实现对园区治理信息化、信息传递即时化、基础设施智能化、公共服务便捷化、产业倒退现代化、社会治理精细化等，以进步园区产业汇集能力、企业竞争力，并且以园区可继续倒退为指标的先进园区倒退模式和理念。明天将介绍图扑软件 Hightopo自主研发的 HT 引擎帮助打造三维可视化的智慧朔州开发区，通过将来科幻的建筑风格多维度展现开发区，以360度全景可视化联合数据场景联动，建设一个管制智慧综合型的智慧城市我的项目。成果展现整体场景由地球视角动静下钻至中国幅员，对山西省轮廓进行特效光边际平面描述，并在此下钻至朔州开发区整体三维场景。其中重点对科创商务园区进行漫游动画查看朔州新产品展销馆。智慧朔州开发区以展会大屏的整体设计模式，页面中展现全区的三维场景，左右两侧辅以数字化智慧城市监测常见的技术观点里尼指标进行展现，晋升业务人员数据分析可视化效率，晋升管理决策成功率，辅助领导层进行治理预测。系统分析全场景漫游除了初始化的园区全场景漫游、定点漫游外，也提供了单个园区的漫游线路，让用户以第一人称的视角依照指定线路对开发区进行全场景漫游，在制订线路的时候能够参考重点区域或智能化程度较高的区域进行制订，给用户出现开发区重点倒退区域以及智能化倒退功效。园区信息可视化园区信息可视化次要蕴含园区GDP、财政数据、工业总产值、固定资产、产出强度、企业汇总、投资因素老本、招商引资。通过园区根本数据信息可对整体园区根本现状有直观的理解。数据的展现信息可依据我的项目的理论需要进行调整，以满足园区信息的数据可视化。沙盘布局可视化整合了朔州开发区内的各项重要信息如园区路线信息、园区水系散布、西山生态林景观散布等进行全方位展现。传统的园区治理在老本和投入上都消耗很多精力。通过互联网多样化的可视化系统管理计划，整顿出一套园区模块对立在线可视化治理汇合，智慧园区通过智能化的监测管制与管理系统，促成信息利用的智慧化和深度化，无效节俭了园区运行所需的能源和人工成本的耗费，晋升土地监测、布局监控的效率和准确度，解决最基本的环节，进步工作效率、加强园区服务质量和修建环境的利用率，保障园区平安、稳固、长久的倒退。管网散布可视化可通过多级检索性能菜单实现给水管道、污水管道、雨水管道、再生水管道、电力管道、通信管道、燃气原道、供热管道等展现。管网散布可视化可帮忙管理者实现对综合管线以标准化的形式进行治理，以三维可视化的模式展示公开管线的埋深、形态、走向、周边环境。同立体管网相比，管道 3D 可视化更不便运维人员进行地下管道对应查找。也为前期公开管线资源的兼顾利用和迷信布局提供参考根据规范。为管线占用审批等工作提供了精确、直观、高效的参考。于此同时，对于新增的管网治理，图扑提供了联合管网拐点平面坐标信息实现三维管网主动渲染生成的性能，为后续的生产和延续性应用带来极大便当。土地布局可视化随着大数据、BIM、GIS 等新的技术理念衰亡，土地规划也有了更新换代，而三维模式的可视化展示更能让土地规划可知可控，便于运维人员对的土地进行集中化、科学化治理兼顾。突破土地占用数据扩散的场面，进步园区土地使用率，高效治理。图扑软件提供基于 WebGL 渲染的三维特效，也让平台中的土地散布数据表白更酷炫多彩容易辨别。交通布局可视化通过不同色彩的高亮展现了交通快速路、主干路、次干路。线路可视化能够晓得开发区的交通线路布局，不便运维人员及时无效的对交通路线进行调整部署、获取交通轨迹数据信息。辅助园区治理部门综合掌控全区大范畴的线路运行管控。在交通布局上，图扑可视化也可延申交融更多功能如综合态势监测：集成地理信息系统、视频监控零碎、交管部门各业务零碎数据，对交通路况车流量、事变解决报告等因素进行综合监测，帮忙管理者实时把握交通整体运行态势等等。园区可视化实现价值一、园区全景视角精细化展示园区内建筑物，管网设施，机动指标等根本修建信息可在零碎上全方位进行展现。例如园区内各种电力设施，交通枢纽，地标修建，园区内公开管线，机动指标等地位数据实时展示。二、园区信息数字化展示原先的园区就像一个信息孤岛，各部门、各条治理线之间，在信息资源上无奈做到交换共享和互通，单独经营各自的信息管理系统，通过图扑软件的可视化，在充分利用、整合和开掘信息技术和信息资源的根底上，对园区达到精细化治理，那么图扑可视化零碎就是园区智慧成绩和价值的集中体现，让智慧园区变得可知可感。三、园区治理集中化展示图扑可视化园区管理系统反对交融多部门、不同平台的数据对接显示，管理者能够全方位掌控园区综合态势，不同经营管理者也能够互联互通相关联信息。包含反对了：政务、警务、交通、电力等实时数据信息；包含反对集成地理信息、GPS数据、建筑物三维数据、统计数据、园区视频监控采集画面等多类型数据。图扑可视化是基于 HTML5 打造的纯 Web 页面，只有有浏览器就能够关上拜访，客户能够依据当下应用场景，监控态势，自定义布局想要显示的内容。既能够重点显示专项事件，也能够全局掌控园区整体态势。疾速实现现代化的、高性能的、跨平台的（桌面 Mouse/挪动 Touch/虚拟现实 VR）图形展现成果及交互体验，并且还能在手机端或者PAD端对大屏进行页面显示和监控模式等交互管制。总结对园区的建设治理进行全方位降级打造，整合园区资源，建设自主翻新服务体系，极大地升高园区企业的经营老本，进步工作效率，增强园区的翻新、服务和治理能力。通过退出图扑软件的Hightopo 的大屏的可视化，能及时利用、开掘、传递数据。使数据无效化的及时出现和传递，通过提取出要害、无效的信息，并以酷炫的视觉效果清晰地展示进去。更多行业利用实例能够参考图扑软件官网案例链接：https://www.hightopo.com/demos/index.html