前端
文章平均质量分 67
坐在路边数星星
稀里糊涂
展开
-
前端渲染模式CSR,SSR,SSG,ISR,DPR
针对CSR,SSR,ISR,SSG,DPR的介绍和对比原创 2023-07-12 15:24:53 · 1325 阅读 · 0 评论 -
TS格式视频的使用
TS(Transport Stream,传输流)是一种封装的格式,它的全称为MPEG2-TS。MPEG2-TS是一种标准数据容器格式,传输与存储音视频、节目与系统信息协议数据,主要应用于数字广播系统,例如,DVB、ATSC与IPTV。传输流最初是为广播而设计的。后来,通过在标准的188字节数据包中添加4字节的时间码(TC),从而使该数据包成为192字节的数据包,使其适用于数码摄像机,录像机和播放器。Tips:MPEG2是一种多媒体传输、复用技术,在数字电视广播中可提供数百个节目频道。原创 2023-06-25 20:29:46 · 1848 阅读 · 0 评论 -
GitHub 代码线上阅读小技巧
以 commitlint 仓库为例,地址直接查看的情况如下图:在此情况,查看文件及返回相对繁琐。重点来了!!重点来了!!重点来了!!修改地址栏地址,将.com修改为.dev,如下图修改完成后变可直接GitHub Web IDE打开当前项目,如下图:还是VSCode哟~~...原创 2021-11-02 16:11:32 · 244 阅读 · 0 评论 -
Introduction to JavaScript Source Maps
Have you ever found yourself wishing you could keep your client-side code readable and more importantly debuggable even after you’ve combined and minified it, without impacting performance? Well now you can through the magic of source maps.Basically it’s转载 2021-08-03 14:50:50 · 206 阅读 · 0 评论 -
关于前端图片展示的总结
针对图片通过 img标签 和 CSS background-image两种方式展示的对比总结原创 2021-06-21 14:48:59 · 1255 阅读 · 0 评论 -
Jenkins 如何修改工作目录
Jenkins如何修改工作目录原创 2021-06-21 11:22:45 · 3043 阅读 · 0 评论 -
使用verdaccio搭建npm私服
NPM私服搭建及使用原创 2021-06-21 11:17:13 · 326 阅读 · 0 评论 -
React Hooks理解
Dan Abramov 于2018年发表的针对React Hook的理解翻译 2021-05-30 23:45:02 · 249 阅读 · 0 评论 -
addEventListener 和 removeEventListener 事件监听的简单实现
前端经常性会用到的addEventListener和removeEventListener,在这里使用class进行一个简单的实现:1. 实现分析通过想象addEventListener和removeEventListener的功能,需要包含以下核心功能:能够注册处理函数(handler function)能够发布事件(emit event)在发布事件的同时执行性已注册的处理函数,需要维护处理函数的事件的对应关系能够移除处理函数2. 代码实现const noop = () => {原创 2021-05-18 22:49:37 · 407 阅读 · 0 评论 -
npm install 的内部机制是什么
在npm install 安装依赖的背后到底执行了哪些操作,规则是什么翻译 2021-05-11 00:30:07 · 333 阅读 · 0 评论 -
echartsInstance. setOption 被忽略的配置项 notMerge —— Echarts小记
通过设置 echartsInstance. setOption 的 notMerge 属性,保证涉及 series 变动的数据更新后的正常展示方式原创 2021-04-11 11:07:10 · 5211 阅读 · 0 评论 -
全局Scss变量引入配置
使用vue cli中的prependData进行scss全局变量预处理原创 2021-03-30 13:59:20 · 3127 阅读 · 0 评论 -
如何在 v-html 中使用 filters
问题2.0 filters only work in mustache tags and v-bind.Vue2.0 不再支持在 v-html 中使用过滤器,比如在 1.0 中是这样使用的:{{{ option.title | highlight }}}然而,现在不能使用了,Vue2.0 的过滤器现在只能应用在{{ }}和 v-bind中。然而,嫌麻烦,还想使用怎么办?解决方法使用全局方法使用 computed 属性使用 $options.filters使用全局方法put y转载 2020-11-04 15:46:38 · 519 阅读 · 0 评论 -
如何为你的Angular项目定义一个高度可伸缩的文件夹结构
译文地址:How to define a highly scalable folder structure for your Angular project@TOC前言本文中使用的实践非常适合我的单个用例,因此绝对不应严格遵循。 项目的文件夹结构将根据多种因素而变化。 但是,如果您对着重于多模块架构的结构感兴趣,而又着重于扩展性,请继续阅读。注意! [+]表示文件夹中还有其他文件。|-- app |-- modules |-- home |-- [+]翻译 2020-06-17 15:20:41 · 253 阅读 · 0 评论 -
Git 相关操作整理——常用命令
1、同步远程仓库分支变动git remote prune origin2、查看remote地址、远程分支,及本地分支与之相对应的关系信息git remote show origin3、查看代码库源git remote -v4、增加代码库源git remote set-url --add origin [代码库源地址]5、删除代码库源git remote set-url --delete origin [代码库源地址]...原创 2020-06-04 15:28:22 · 123 阅读 · 0 评论 -
登录授权整理(OAuth)
The OAuth 2.0 authorization framework enables a third-partyapplication to obtain limited access to an HTTP service, either onbehalf of a resource owner by orchestrating an approval interactionbetw...原创 2020-04-30 14:20:02 · 503 阅读 · 0 评论 -
Safari10 wap 兼容性问题
配置Webpack的terser-webpack-plugin解决safari10 wap 打包错误问题原创 2020-02-19 10:45:43 · 1463 阅读 · 0 评论 -
十步图解CSS的position
原文出处: barelyfitz 译文出处:w3cplus 转载自:http://blog.jobbole.com/49320/CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行。今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的“转载 2015-08-17 15:36:57 · 439 阅读 · 0 评论 -
Cookie知识整理
Cookie是服务于HTTP协议的小数据块,主旨是协助无状态的HTTP协议进行稳定的数据记录。为交互式前端页面提供了技术基础。虽然自身因浏览器而异存在着不同的大小、个数限制,同时安全隐患已然存在,但目前仍被广泛使用,本文主要是对Cookie的基本技术的整理和总结原创 2018-11-21 17:12:18 · 283 阅读 · 0 评论 -
关于浮点数的那些事
关于浮点数的那些事在进行浮点数运算或判断时,经常会出现很多“奇异”的结果,其实都是浮点数运算及表示规则造的怪0.1 + 0.2 = 0.300000000000000048.88 * 100 = 888.00000000000011050.6 * 100 = 105059.99999999999基本原因浮点数的运算是基于 IEEE 754 标准的;二进制基准;对循环小数通过相对...原创 2018-12-06 16:30:22 · 191 阅读 · 0 评论 -
Vue多页面应用骨架屏添加实践
为Vue+Webapck搭建的MPA(多页面应用)添加骨架屏,通过对JS文件加载方式的变更,兼容移动端和PC端浏览器的渲染机制,保证骨架屏的正常显示原创 2019-02-15 12:50:06 · 1311 阅读 · 0 评论 -
滑动窗口算法(Sliding Window Algorithm)
滑动窗口算法(Sliding Window Algorithm)Sliding window algorithm is used to perform required operation on specific window size of given large buffer or array.This technique shows how a nested for loop in...原创 2019-03-05 16:48:40 · 48501 阅读 · 3 评论 -
归并排序学习整理
归并排序归并排序(MERGE-SORT)是利用归并的思想实现的排序方法,该算法采用经典的分治(divide-and-conquer)策略(分治法将问题分(divide)成一些小的问题然后递归求解,而治(conquer)的阶段则将分的阶段得到的各答案"修补"在一起,即分而治之)。将已有序的子序列合并,得到完全有序的序列;即先使每个子序列有序,再使子序列段间有序。若将两个有序表合并成一个有序表,称为...原创 2019-03-05 16:53:16 · 173 阅读 · 0 评论 -
提交表单的四种方式
这里写自定义目录标题提交方法简介一个小的普通的框架转载自:MDN -XMLHttpRequest提交方法简介一个 html <form> 可以用以下四种方式发送:使用 POST 方法,并设置 enctype 属性为 application/x-www-form-urlencoded (默认)使用POST 方法,并设置 enctype 属性为 text/plain使用 PO...转载 2019-03-24 21:29:48 · 3164 阅读 · 0 评论 -
面向切面编程(AOP)
概念Aspect Oriented Programming(AOP),译作面向切面编程/面向方面的程序设计/剖面导向程序设计1、对OOP(面向对象编程)的一个横向的补充2、是面向切面软件开发的基础3、其中“通知”是切面的具体实现,分为before(前置通知)、after(后置通知)、around(环绕通知)应用目的针对业务处理过程中的的某个步骤或阶段进行切面提取,抽离于业务无关的功能,...原创 2019-05-13 12:17:06 · 340 阅读 · 0 评论 -
什么是MVVM,MVC和MVVM的区别,MVVM框架VUE实现原理
MVVM(Model-View-ViewModel)定义即模型-视图-视图模型。模型: 指的是后端传递的数据。视图: 指的是所看到的页面。视图模型: MVVM模式的核心,它是连接view和model的桥梁。它有两个方向:一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:...转载 2019-07-29 13:13:51 · 459 阅读 · 0 评论 -
常见的HTTP状态码及说明
2开头 (请求成功)表示成功处理了请求的状态代码。200 (成功) 服务器已成功处理了请求。 通常,这表示服务器提供了请求的网页。201 (已创建) 请求成功并且服务器创建了新的资源。202 (已接受) 服务器已接受请求,但尚未处理。203 (非授权信息)&...原创 2019-07-29 16:28:58 · 708 阅读 · 0 评论 -
使用css实现一个三角形
利用border绘制先看一下border的布局,如图:设置宽度、高度为0不设置border-top设置左右border颜色为transparent–透明调整左border的宽度同时调整左右border的宽度总结:设定的三角形指向方向不设置border三角线的高由指向方向的反方向的border宽度控制正交的两个方向的背景颜色为transparent...原创 2019-07-30 14:22:23 · 262 阅读 · 0 评论 -
如何避免重复addEventListener?
避免重复addEventListener的核心就是在添加前通过removeEventListener将已经添加的处理函数进行移除。如下代码为id=btn的元素添加click事件的处理函数clickHandler:const $btn = document.getElementById('btn');function clickHandler() { console.info(`thi...原创 2018-08-15 17:25:07 · 16160 阅读 · 5 评论 -
使用Array.prototype.fill和Array.prototype.map未曾注意到的基础
Array.prototype.fill使用fill配合Array构造函数进行指定个数和初始值的数组创建,并可以通过相关函数的连续调用,完成对数组的修改,从而抛离了for或while的循环使用。/** * 生成指定长度有统一初始值的数组 * * @param {Number} len - 长度 * @param {*} val - 初始值 * @returns {Array[...原创 2018-06-12 19:01:46 · 527 阅读 · 0 评论 -
深入理解ES6 Generators
“深入理解ES6”是一个针对第6版ECMAScript(简称ES6)标准的新特性的系列教程。非常高兴能发布今天的内容。今天我们叫讨论ES6中最“奇妙”的特性。为什么说“奇妙”呢?首先,这个特性与已存在于JS中的其他特性相比有较大的不同,尤其在刚开始接触时有些晦涩难懂。换句话说,它彻底颠覆了JS的正常行为。如果这还不算“奇妙”,那我不知道什么才算是了。不仅如此:这个特性简化了代码,并且修正了“回调地狱翻译 2016-11-30 18:16:31 · 1333 阅读 · 0 评论 -
关于angularjs中ngOptions的简单介绍
源:http://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/在使用ng-options经常会遇到一些困难。在实际使用中经常会搞的自己焦头烂额。因此在大部分时间,不得不使用google查询它的工作原理。Angularjs官方文档中只有较少的说明和示例。但是,通过查看翻译 2016-04-13 17:17:20 · 3019 阅读 · 0 评论 -
如何实现嵌套的内部div垂直水平居中
实现目标divOuter包裹divInner,实现divInner的垂直水平居中原创 2016-03-18 17:22:03 · 687 阅读 · 0 评论 -
JavaScript 标准参考教程--基本语法 学习笔记
来自《JavaScript 标准参考教程(alpha)》,by 阮一峰***********************************************************************************************************************************变量提升变量提升只对var命令声明的变量有效转载 2015-11-08 22:17:53 · 440 阅读 · 0 评论 -
每天学一点(一)
记录学习内容…JS中对于函数的创建,在使用函数表达式和函数声明相结合时,正确写法为:var sum=function sum(a,b){ return a+b;};console.log(sum(1,2)) //输出3若定义的变量和函数名称书写不一致,则会产生错误。var sum1=function sum2(a,b){ return a+b;};conso转载 2015-11-08 21:27:06 · 344 阅读 · 0 评论 -
直接使用Id和使用document.getElementById()的比较
H5中测试直接使用Id和使用document.getElementById()方法 var d=document.getElementById("test"); console.log(Object.prototype.toString.call(d)); //[object HTMLDivEle原创 2015-11-07 16:34:11 · 3893 阅读 · 0 评论 -
windows下安装sass/scss
转载自:http://www.th7.cn/Program/Ruby/201502/388940.shtml一、安装ruby。到ruby官网下载最新的ruby软件,然后开始安装ruby,最好放到系统下,安装时勾选添加环境变量的路径,如下图:二、安装sass。打开命令窗口,输入如下命令gem install sass,这时可能会报这样的错误,ERROR: Could no转载 2015-08-12 13:25:05 · 720 阅读 · 0 评论 -
前端开发技术汇总
GulpGulp 和 Grunt 类似, 是一种基于流的,代码优于配置的新一代构建工具。但相比于 Grunt 的频繁的 IO 操作,Gulp 的流操作,能更快地完成构建。官方网址:http://www.gulpjs.com.cn/SassSass是最早的css预处理语言,有比less更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受,所以使用率不高,不过由于其强大原创 2015-07-15 13:31:14 · 536 阅读 · 0 评论 -
深入浅出 JavaScript 中的 this
转载自:http://www.ibm.com/developerworks/cn/web/1207_wangqf_jsthis/在 Java 等面向对象的语言中,this 关键字的含义是明确且具体的,即指代当前对象。一般在编译期确定下来,或称为编译期绑定。而在 JavaScript 中,this 是动态绑定,或称为运行期绑定的,这就导致 JavaScript 中的 this 关键字有能转载 2015-08-07 15:30:46 · 295 阅读 · 0 评论 -
如何成为一名优秀的web前端工程师
来源:王子墨的博客程序设计之道无远弗届,御晨风而返。———— 杰佛瑞 · 詹姆士我所遇到的前端程序员分两种:第一种一直在问:如何学习前端?第二种总说:前端很简单,就那么一点东西。我从没有听到有人问:如何做一名优秀、甚至卓越的WEB前端工程师。 何为:前端工程师?前端工程师,也叫Web前端开发工程师。他是随着web发展,细分出来转载 2015-06-03 10:27:05 · 788 阅读 · 0 评论