![](https://img-blog.csdnimg.cn/20190918162326502.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端技术
文章平均质量分 52
前端技术分享
Yoo前端
Yoo前端,带来无限可能。
展开
-
ChatGPT使用的SSE技术是什么?
在现代web应用程序中,实时通信变得越来越重要。HTTP协议的传统请求/响应模式总是需要定期进行轮询以获得最新的数据,这种方式效率低下并且浪费资源。因此,出现了一些新的通信技术,如WebSocket和SSE。但是,GPT为什么选择用SSE技术而不是WebSocket?一起做一下比较分析。原创 2023-06-21 17:26:53 · 1754 阅读 · 0 评论 -
【只需三步】发布自己的NPM包
简单三步,发布自己npm依赖包。原创 2022-07-25 15:27:12 · 352 阅读 · 0 评论 -
为什么说pnpm是最先进的包管理工具?
什么是幽灵依赖?什么是依赖分身?对于这些包管理工具的设计问题来看看pnpm是怎么解决的。原创 2022-07-06 16:06:39 · 852 阅读 · 0 评论 -
confirm自定义信息
// 确定删除数据吗? this.$confirm(`<a style="font-weight:500;display:inline">Are you sure you want to delete this device?</a><br><a style="color:red">Comm. No.</a>: <a style="font-weight:700">${ae_comid}</a> `, this.原创 2022-04-08 11:02:17 · 637 阅读 · 1 评论 -
循环展示数组的每一项数据
由于展示屏幕有限或需求的要求,常常在大屏中需要进行动态地、自动地、周期性的展示预设场景假设需要展示的数据项为对象,而数据源是一个数组包含多个对象的格式,比如需要三秒展示数组的下一项。[ { "message1": 88, "message2": -3, "message3": 8 }, { "message1": -17, "message2": -9, "message3": .原创 2022-03-03 09:39:52 · 755 阅读 · 0 评论 -
vue打包后修改接口地址(私有化部署)
私有化部署应用场景1.客户对于软件交付物需要自己部署数据库和站点的情况。2.一套软件通过修改某文件的方式(较低成本的更改),以达到调换接口的目的。解决方案在vue项目中public文件夹下新增serverConfig.js文件夹(function (window){ window.$config = { // BASE_API: 'http://yyyyyyyyyyyy', BASE_API: 'https://xxxxxxxxxxxxx', } }原创 2022-03-02 16:05:09 · 868 阅读 · 0 评论 -
使用多个el-date-picker导致弹窗位置偏移的问题
<el-form-item label='补算时间' prop="data_date" :rules="rules.validateRequire" v-if="!isSupply"> <el-date-picker v-if="type==='time'" v-model="model.data_date" type="daterange" value-format="yyyy-MM-dd" key="picker_time" plac原创 2022-01-27 10:26:44 · 3219 阅读 · 0 评论 -
EventLoop与async-await机制解析
https://www.jianshu.com/p/5b4c4756e461 图片引用首先明晰两个概念:宏任务和微任务也称之为 task 和microtask ,微任务要先于宏任务执行宏任务主要有:script(整体代码)、setTimeout、setInterval、I/O、UI 交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)。微任务主要有:Promise.then、 MutationObserver、 proce.原创 2021-12-02 09:05:33 · 130 阅读 · 0 评论 -
package.json与package-lock.json的不同点
首先明晰一下二者的结构package.json:scripts:脚本dependencies:生产环境依赖devDependencies:开发环境依赖engines:指定node和npm的版本范围 check-version中使用browserslist:节点^的意思是 向新兼容 "axios": "^0.21.1"所以如果当前axios的最新版本是0.21.1,没有lock的情况下install 会下载下大版本号(第一位版本号)下的最新版本,而package-lock会把原创 2021-11-30 15:56:06 · 351 阅读 · 1 评论 -
vscode插件系列-live server
Live Server直译为实时服务器。这个插件是一个具有实时重新加载功能的小型开发服务器。用来破解html/js/css文件,而不适用于部署最终的站点。优势vscode拓展方便,一键安装架设本地服务器环境,并且可解决自动刷新的问题。在需要打开的启动页右键 open with live server默认接口为5500就可以方便的启动项目...原创 2021-11-26 14:58:03 · 1516 阅读 · 0 评论 -
企业级前端开发自测标准
常规的开发模式往往是前后端分离,后台进行接口与数据的开发整合,前端进行页面的切图与调用,所以前端往往也是提测前的最后环节。所以前端的自测其实穿插着接口的容错等其他各部分的综合。本期的自测标准整合分为三个部分,展示,交互和校验。展示首先是:展示部分这也是前端唯一不能甩锅的部分。展示可以说是在自测中解耦的测试点。页面展示布局展示图片展示控件展示…等等所见即为展示验证标准而展示的验证结果则是符合prd或者交互ui的要求,达到美观整洁大方与代码端表现一致即可。主要涉及的html和cs原创 2021-08-31 14:21:50 · 1125 阅读 · 2 评论 -
表单提交验证新实践之class-validator
class-validator实践篇之前有一篇关于class-validator的基础的介绍,这篇来一下如何实践:首先介绍一下业务背景:简单来说就是一个表单提交 ,根据类型的选择进行四种提交模式。首先我们在ts文件中预设好四种类型的提交模板:预设四种 仅以一种为例feesModal.tsexport const feesAddInfo1 = { fees: { //订单详情Id workOrderDetailId:"", //费用类型原创 2021-03-08 16:11:56 · 2396 阅读 · 1 评论 -
class-validator中文教程
官方文档:https://www.npmjs.com/package/class-validatorclass-validator可以说是一个简化表单验证的依赖库但是缺少中文文档和过程,以自己的理解和对官网文档的阅读进行整理输出。1.引入import { validate, validateOrReject, Contains, IsInt, Length, IsEmail, IsFQDN, IsDate, Min, Max,} from 'clas原创 2021-01-20 15:17:20 · 9493 阅读 · 4 评论 -
vscode快捷键之window版
Thanks Deepak Gupta对20 VS Code Shortcuts for Faster Coding进行翻译输出原创为Deepak Gupta格式化代码Windows :Shift + Alt + F代码折叠与打开折叠:Windows :ctrl + shift + [打开:Windows :ctrl + shift + ]上/下复制行Windows :ctrl + shift + up/down拆分编辑器Windows :ctrl + 获取不同页面.翻译 2020-11-27 13:52:05 · 166 阅读 · 0 评论 -
Mock伪造后台接口调试前端页面教程
https://mock.yonyoucloud.com/前端开发往往会遇到一个不可避免的问题,就是后台的接口出的比较晚,往往最后给前端调试接口数据的时间少之又少,为了可以无缝衔接后台开发,给前端一个缓冲,给FE们推荐一个好东西。首先注册一个可用账号注册成功后进入个人界面点击添加项目添加一个项目添加分类和接口编辑接口的数据设定get/post方式设定返回response的值调用接口地址...原创 2020-08-04 09:46:28 · 437 阅读 · 0 评论 -
别错过这些前端实用开发技能!
断点调试:1.在逻辑代码中加入一行debugger即告诉浏览器将在此时开始断点在正在运行的项目中将会出现如下的标识2.在浏览器的source界面增加下一个断点点击数字列左侧即可然后点击屏幕中出现paused in debugger的蓝色箭头让断点继续执行,此时在断点区域可以对某些数据,字段进行准确的读取,以此直观的展现出是否出现判断逻辑错误等postman调试:一般后台给到前端接口的时候,很多时候需要前端自己进行接口调试...原创 2020-07-01 21:32:03 · 159 阅读 · 0 评论 -
参数冗杂的优化解决办法看这里
在前端很容易出现多种判断和多种输入框联合搜索的情况,如果按部就班的进行书写if语句会提高维护成本等问题。首先先看一下当前的问题:多块逻辑代码层叠冗杂if (!!this.CustName) { this.params.queryGroup.Groups.push({//需要向params参数中push的字段 Op: "and", Rules: [ { Field: "CustomerName",原创 2020-06-30 11:26:42 · 467 阅读 · 0 评论 -
ngx-datatable中文教程
ngx-datatable在网络上教程相对较少,并且在官网文档中查看demo需要找到对应的位置,也不方便开发。所以我将GitHub上的ngx-datatable下载下来运行,与编译器对应。下载地址:https://github.com/swimlane/ngx-datatable文档地址:https://swimlane.gitbook.io/ngx-datatable安装依赖,启动:npm inpm start搜索demo<div> <h3>原创 2020-05-12 13:17:35 · 2259 阅读 · 0 评论 -
预处理Sass样式开发重点
https://sass-lang.com/guidesass官方英文文档进入学习模块:首先安装sass,如果是node开发环境,npm不多说npm install -g sass安装成功后第一站:监听建立一个index.scss在index目录下语法解析:sass --watch input.scss output.css效果:生成的css即为监听出的css文...原创 2020-04-21 14:30:27 · 372 阅读 · 1 评论 -
这些网站太赞了,学习前端千万不能错过!
1.codepen与 GitHub相比,它最重要的优势有: 即时预览。原创 2020-03-22 22:47:55 · 487 阅读 · 2 评论 -
H5新特性看这一篇就够了
部分资料参考百度百科HTML历史上有如下版本:①HTML 1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。②HTML 2.0:1995年1 1月作为RFC 1866发布,于2000年6月发布之后被宣布已经过时。③HTML 3.2:1997年1月14日,W3C推荐标准。④HTML 4.0:1997年12月18日,W3C推荐标准。⑤HTML 4.01(微小改进)...原创 2020-03-20 10:23:08 · 276 阅读 · 0 评论 -
让我的html也能freestyle
yoyo,给你的网页加点响。今天用到加响的标签就是audio。首先选一首嘻哈歌曲,我这里选择了嘉尔的巴比龙。autoplay自动播放<audio src="Papillon.mp3" autoplay></audio>以上代码实现了自动播放,但无法控制音乐停止。加入controls控制器<audio src="Papillon.mp3" autopla...原创 2020-01-31 01:08:28 · 233 阅读 · 0 评论 -
如何把爱情公寓5引入到我的html
多媒体embed首先网站上是不建议直接存储视频的,网站将来是会布在服务器上的,当然是越小越好。打一个比方,现在爱情公寓5比较火爆,如何将其展现在我们的html页面上?1.找到网页的embed代码:2.复制到自己的html中3.运行在浏览器中若出现flash问题请允许即可。...原创 2020-01-31 00:45:32 · 192 阅读 · 0 评论 -
HTML发展史及HTML5常用新增属性分析
部分资料参考百度百科HTML历史上有如下版本:①HTML 1.0:在1993年6月作为互联网工程工作小组(IETF)工作草案发布。②HTML 2.0:1995年1 1月作为RFC 1866发布,于2000年6月发布之后被宣布已经过时。③HTML 3.2:1997年1月14日,W3C推荐标准。④HTML 4.0:1997年12月18日,W3C推荐标准。⑤HTML 4.01(微小改进)...原创 2020-01-30 14:27:21 · 578 阅读 · 0 评论 -
说一说路径和列表
同级路径:直接用下一级路径:<img src="img/img01/logo.jpg">上一级路径:…/依次类推列表无序列表<ul><li></li><li></li><li></li></ul>有序列表<ol></ol>自定义列...原创 2020-01-29 01:38:32 · 147 阅读 · 1 评论 -
页面锚点定位及新窗口打开
锚点定位使用<a href="#id名">连接文本</a>id名对应新窗口打开的方法target="_blank"属性可以使链接在新页面打开如<a href="http://www.baidu,com" target="_blank">百度</a>也可用base标签<base/>单标签可在base标签同时设置targ...原创 2020-01-29 00:59:42 · 726 阅读 · 0 评论 -
图像标签知多少
<img/>单标签属性值分为:src 图像的路径alt 图像不能显示时的替换文本title 鼠标悬停时显示的内容width 设置图像的宽度height 设置图像的高度border 设置图像边框的宽度ok,图像标签就说这一点...原创 2020-01-27 22:52:48 · 168 阅读 · 0 评论 -
常用的字符集编码方式
web字符集在之前通常使用的是utf-8 避免出现字符集不统一而引起的乱码的情况其他常用的字符集编码方式gb2312简体中文,包含6763个汉字BIG5繁体中文 港澳台等用GBK包含全部中文字符 是GB2312的拓展 加入对繁体字的支持 兼容GB2312...原创 2020-01-27 19:44:30 · 209 阅读 · 0 评论 -
浏览器内核的纷争
浏览器的主要任务:渲染故浏览器内核主要指渲染引擎IE内核:TridentEdge(win10发布后的新内核)firefox:Gecko 代码完全公开,开源Safari:webkit苹果浏览器内核chrome:chromium/Blink谷歌13年前用的webkitblink其实是webkit的分支国产浏览器大部分都是blink内核Opera:prestopresto...原创 2020-01-27 14:46:22 · 205 阅读 · 0 评论 -
前端资料整合1
https://segmentfault.com/a/1190000014332276原创 2020-01-19 17:43:16 · 124 阅读 · 0 评论 -
这些是不是你知道的TCP与UDP
onetcp面向连接udp无连接的,即发送数据不需要提前建立连接twotcp提供可靠的服务,适合大数据量的交换upd尽最大努力交付,即不保证可交付threetcp是面向字节流udp面向报文,并且网络出现拥塞不会使得发送速率降低fourtcp只能是1对1udp可以是1对1可以是1对多fivetcp首部20字节udp首部8字节...原创 2019-12-02 21:05:17 · 131 阅读 · 0 评论 -
关于web Quality 无障碍(WAI)
无障碍网页这些指导方针的目标是易用性(accessibility),但是也有助于使 web 内容可用于更多的浏览器(语音浏览器、移动电话、手持设备),以及更多工作于困难环境的用户(非手持式的、强光、黑暗、弱视、噪音等)。alt 属性允许你为图像(也可以为其它的元素)提供一条相对应的文字。实例:<img src="images/banana.jpg" alt="Banana">...原创 2019-12-02 17:16:36 · 1001 阅读 · 0 评论 -
你知道这样的http和https吗?
基本概念:http:超文本传输协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从www服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少。https:是以安全为目的的HTTP通道,简单讲是HTTP的安全版,即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。主要作用是建立一个信息安全通道,来确保数组的传输,确保网站的...原创 2019-12-02 14:36:04 · 288 阅读 · 0 评论 -
流行的四大CSS预处理器
以上是四大流行CSS预处理器,less,sass,postcss,stylus在vue项目中以less为例:add -D less-loader less使用方法为@color则sass同理:add -D sass-loader node-sass使用方法为$color...原创 2019-10-16 20:34:10 · 219 阅读 · 0 评论 -
Vue的兼容性解决方案Babel-polyfill
Babel-polyfill可以抹去旧版本浏览器不熟悉的特征,在babel.config.js中写出如果有依赖需要 polyfill,你有几种选择:1. 如果确切知道有兼容性问题的依赖包名,可以配置项目根目录下的vue.config.js,将依赖包名添加到transpileDependencies键中,这会为该依赖同时开启语法语法转换和根据使用情况检测 polyfill。例如:modul...原创 2019-10-16 18:22:15 · 14466 阅读 · 1 评论 -
Vue移动端手机浏览器支持性总结(ES5)
数据支持来自can i use https://www.caniuse.com/Vue不支持IE8及以下版本,因为Vue使用了IE8无法模拟的ECMAScript5特性。但它支持所有兼容ECMAScript5的浏览器。所以我们先来看一下ES5:ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,European Computer ManufacturersAss...原创 2019-10-16 15:50:05 · 3196 阅读 · 0 评论 -
rem和vw的分析比较
rem:首先rem是css单位,相比于px固定的像素单位,rem是相对像素单位,更加的灵活。需求存在:现在移动端各种屏幕的出现,适应性就更加的强烈。根据分辨率的不同让html的字体大小变化。一、基本原理:我们在页面中写rem,由于rem是相对于根元素字体大小来计算的,那么就可以实现自适应的效果。Rem原理举例:设计稿宽度:x px移动设备宽度:y pxHtml中font-size...原创 2019-10-15 16:33:36 · 6575 阅读 · 2 评论 -
npm run start和npm run serve
之前在网上clone下一个vue的源码,进行npm run serve无效,后在网上查到用npm run start就可以解决。百思不得其解,今天终于破案了。在package.json中,有一个scripts属性定义了所有可以进行npm run xxx的地方可能只是因为cli3定义的是serve而2定义的是start吧,欢迎指正...原创 2019-10-14 19:02:04 · 4962 阅读 · 0 评论 -
js中DOM和事件
DOM:控制html文档的内容document.getElementById(“id value”);var light=document.getElementById("light");alert("换");light.src("new src");事件:方式1:<image id="",src="",onclick="fun();">方式2:var ligh...原创 2019-07-25 22:22:29 · 97 阅读 · 0 评论 -
如何用js实现轮播图
首先 明晰一下轮播图的效果,比如很多网页中存在的经过几秒换一下图片如图所示就是一个五张图片的轮播图首先达成这个效果的第一步,我们现有这几张图,可以命名为image1-3;第一步加载图片显示要显示的第一张图,其他图通过改变src地址来改变<img id="img" src="img/img_1.jpg" width="100%">这里100%让图片与屏幕显示一致第二步构...原创 2019-07-26 13:32:52 · 488 阅读 · 0 评论