WEB前端
文章平均质量分 78
程序员白彬
这个作者很懒,什么都没留下…
展开
-
Vue3+TS+Node打造个人博客(总览篇)
从 Vue3 正式发布到现在,也快过去一年了(写这行文字的时候是2021年09月08日,拖延症…)。但是就我最近招聘面试的一些经历来看,很多 Vue 技术栈的候选人依然还没有使用过 Vue3。关于他们没有选择使用 Vue3 这个事情,我觉得也是可以理解的。一方面,Vue3 直接放弃了 IE11。虽然 IE 的用户数量在持续下降,但是想让老板们直接放弃 IE11 还是有一些困难。另外就是,做项目这种事情,有时候人们的选择就是能用就行,升级 Vue3 可能并不能给项目带来太多效益。对于一些历史悠久的项原创 2022-02-24 09:18:43 · 2206 阅读 · 0 评论 -
自动化部署的一小步,前端搬砖的一大步
在nodejs日渐普及的大背景下,前端工程化的发展可谓日新月异。构建打包这种日常任务脚本化已经是常态了,webpack和gulp已经家喻户晓自然不必多说,而持续集成/持续交付/持续部署也越来越得到各个前端Team的重视,业界也有了很多成熟的概念或者方案,如Hudson, Jenkins, Travis CI, Circle CI, DevOps, git hook。然而对于小白来讲,如果直接上手这...原创 2020-01-17 09:35:25 · 460 阅读 · 0 评论 -
入门babel,我们需要了解些什么
说实话,我从工作开始就一直在接触babel,然而对于babel并没有一个清晰的认识原创 2019-12-17 11:36:13 · 407 阅读 · 0 评论 -
彻底理解浏览器的缓存机制(http缓存机制)
学习HTTP缓存时看到一篇不错的文章,推荐大家阅读:原文地址:https://www.cnblogs.com/chengxs/p/10396066.html 一、概述浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制之前,我们先使用图文简单介绍一下HTTP报文,HTTP报文分为两种:1、HTTP请求(Request...转载 2019-11-29 18:09:34 · 166 阅读 · 0 评论 -
耐人寻味的CSS属性font-family
font-family是一个网站用户体验的第一入口,非常有必要花功夫来研究一下。我们首先需要了解衬线字体和无衬线字体,接着了解中英文的常用字体及其适用性。原创 2019-10-23 15:13:56 · 540 阅读 · 0 评论 -
如何判断IE OCX插件正常安装?
项目中用到了一个第三方的ie ocx控件,而经常遇到客户和测试小伙伴反馈相关功能无法正常使用,也没有友好提示。考虑到这个问题,必须要有一个ie ocx控件的检查机制。原创 2019-10-16 13:41:37 · 772 阅读 · 0 评论 -
vue项目中引入iconfont
对于前端而言,图标的发展可谓日新月异。从img标签,到雪碧图,再到字体图标,svg,甚至svg也有了类似于雪碧图的方案svg-sprite-loader。今天咱们先聊聊怎么使用字体图标和svg图标。原创 2019-07-10 18:18:13 · 1190 阅读 · 0 评论 -
vue全家桶版本升级排错
背景如果你使用了element-ui的el-tabs组件,并且想要单独升级element-ui至2.10.0,你会发现,使用了el-tabs组件的页面只要打开就卡死。原因是element-ui~2.10.0采用了不兼容vue~2.5.10的写法。于是我尝试系统性升级vue全家桶,这也是为系统赋予更多能力做准备。结果遇到一些报错,这里记录一下。升级过程当前版本vue: 2.5.10vue-...原创 2019-06-28 14:44:21 · 732 阅读 · 0 评论 -
前端攻城狮HTML5自查手册
前言HTML5自2014年发布以来,已经有快5个年头了。但是很多人对H5有哪些新特性,兼容性如何仍然是一头雾水的。为了让自己以后方便查阅,本文整理一下H5的相关知识点。HTML5标签上的改动HTML 5 参考手册废弃或不支持的标签<acronym>定义首字母缩略词。HTML5 不支持 <acronym> 标签。请使用 <abbr> 标签代替它。...原创 2019-04-11 18:09:32 · 282 阅读 · 0 评论 -
layui小白不得不看的踩坑经验(持续更新)
1. layui的select下拉框不显示描述:由于是通过ajax获取列表数据后,去渲染select,出现了option不能显示的问题解决方法:select需要layui.use引用form,而且动态生成的元素,需要主动调用form.render()更新渲染,参数可传入type和lay-filter,见表单更新渲染。layui.use(['form'], function() { var ...原创 2018-11-21 10:50:39 · 2598 阅读 · 0 评论 -
CSS hover如何作用在伪元素before上
使用方法如下:&amp;::before { content: ''; position: absolute; bottom: 0; width: 100%; border-bottom: 1px solid $line-color; transform: scale(0); transition: all .5s;}&amp;:ho...原创 2018-10-10 11:48:37 · 10892 阅读 · 0 评论 -
CSS使用rem单位时,雪碧图的调整方法
雪碧图是利用background-position来定位的,而这个位置是针对背景图片的大小来说的。所以不能设置background-size为100%,cover之类的,因为这样改变了背景图片的尺寸,就不能用位置定位了。比如一张雪碧图的尺寸是500 * 300,其中一个图标的位置离左上角的距离约为20px, 20px那么background-position: -20px -20px就可以...原创 2018-09-23 19:54:13 · 1773 阅读 · 0 评论 -
CSS布局篇之水平垂直居中
定宽高 + 绝对定位 + 0 + auto边距这种方法需要知道元素的宽高,但是兼容性绝佳。position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;width: 200px;height: 200px;定宽高 + 绝对定位 + 50% + 负边距已知宽高,通过50%调整位置,负边距调整为自身...原创 2018-09-16 19:52:55 · 181 阅读 · 0 评论 -
细说Javascript事件的那些事儿
事件是我们开发过程中经常会用到的,像click,load,mouseenter,mouseleave等等。而我们在使用这些事件的时候,经常会忽略了它们的历史渊源。事件的DOM级别DOM(Document Object Model,即文档对象模型)级别经历了从DOM0到DOM3的变迁。而关于事件的级别却只有DOM0级,DOM2级,DOM3级三种,独独缺了DOM1级事件,因为在DOM1阶段...原创 2018-09-14 18:14:50 · 201 阅读 · 0 评论 -
CSS布局篇之左右布局
左侧定宽,右侧自适应float + margin.left { float: left; width: 200px; height: 100%; background-color: red;}.right { margin-left: 200px; background-color: blue;}float + over...原创 2018-09-13 17:45:45 · 41466 阅读 · 4 评论 -
前端Webpack打包的那些坑
记录是个好习惯,本文准备将平时开发过程中遇到的webpack问题及解决方法记录下来,以便查阅。webpack打包后,-webkit-box-orient: vertical被过滤掉多行省略是常用的一个技巧,一般会用到 -webkit-box-orient: vertical; 但是webpack打包后会发现这个属性不见了。解决方案:将 -webkit-box-orient: verti...原创 2018-09-09 10:59:57 · 1087 阅读 · 0 评论 -
MSE(Media Source Extensions)的一点尝试
最近对于blob这个东西真的是很感兴趣,图片可以是blob协议,视频可以是blob协议,直播也可以是blob协议,感觉很厉害啊。与之紧密联系的MSE(Media Source Extensions)这个概念。研究一波。 Media Source Extensions 允许JavaScript动态地为&amp;amp;amp;amp;lt;audio&amp;amp;amp;amp;gt;和&amp;amp;amp;amp;lt;video&am原创 2018-09-05 17:19:14 · 8946 阅读 · 9 评论 -
WebSocket初探(socket.io实现简版聊天室)
最近一段时间了接触了一些socket编程。这里记录一个简单的入门demo。该demo利用socket.io实现了一个简单的聊天应用。各位看官老爷,且接着看具体的实现方式。准备工作本人主要是前端开发,会一点点nodejs。因此这个demo是基于socket.io.js实现的。B/S服务端首先,我们在服务端安装socket.ionpm install --save so...原创 2018-08-30 22:35:33 · 10342 阅读 · 8 评论 -
回头再看JS模块化编程之AMD
由于CommonJS采用适合服务器端的同步加载方式,这种方式不适合天生异步的浏览器端。在这种形势下,AMD(Asynchronous Module Definition,异步模块定义)应运而生。而require.js正是AMD规范下的产物,因此,我们可以直观地从require.js入手分析AMD。require.js这是RequireJS官方下载链接,我本次测试使用的是2.3.5版本。...原创 2018-08-15 10:48:10 · 894 阅读 · 0 评论 -
回头再看JS模块化编程
什么是模块?我们可能要从需求上出发进行理解,当web应用的规模变得越来越大,业务变得越来越复杂时,我们需要将一些函数分门别类,在分类的基础上对函数进行封装,这就形成了模块。下面看一下js模块的一些形式。对象模块假如我们有多个函数,想作为一个模块使用,最原始的做法就是把这几个函数全部放在一个js文件,通过文件的形式来对js进行划分模块。// my_module.jsfunction ...原创 2018-07-26 23:28:54 · 254 阅读 · 0 评论 -
利用glfx.js完成纯前端的实时图像处理
今天在工作中要解决一个前端图像处理的需求。原创 2018-07-23 00:29:30 · 4347 阅读 · 3 评论 -
解决 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 问题
今天在启动vue项目的时候报了这样一个错误观察到关键词是 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory,发生了致命错误,nodejs内存溢出。在网上查找后,也有不少相关信息。解决方法是配置Nodejs运行内存。于是我尝试在dev脚本加上参数&quot;dev&quot;: &quot;webp...原创 2018-07-20 14:31:01 · 38075 阅读 · 8 评论 -
使用H5Stream开发实时监控系统
这些天在尝试使用RTSP协议(Real Time Streaming Protocol,实时流传输协议)来完成实时传输和显示摄像头画面的功能,毕竟海康威视的web控件对高版本Chrome不予支持,如果使用这一套技术的话,后续的系统就难以优化升级。而RTSP协议在市面上已经有一些H5的解决方案了,是一种发展可期的方案。H5Stream在网上搜索web直播/摄像头直播等关键词找到了H5St...原创 2018-07-19 11:28:58 · 40926 阅读 · 65 评论 -
海康威视web控件开发的正确姿势
最近一个vue的项目里面需要呈现某现场的实时视频,组里购买了一组海康威视的网络摄像头,是那种带管理程序的,通过ip,port,用户名,密码登录摄像头,但是不知道如何应用到web项目中。查找资料后,我在网上找到一个web控件开发包,于是在此基础上进行开发,实现vue项目需要的功能。熟悉demo程序 ...原创 2018-07-18 13:39:05 · 56500 阅读 · 243 评论 -
前后端配合实现密码找回功能
最近在开发一个密码找回的功能,目前已经实现,现在将实现的步骤记录下来。前端-邮箱验证用户进入忘记密码页面(localhost:8080/#/FindPwd),将用户名和图形验证码填入。前端对用户名进行后端校验(调用后端的api判断该用户名是否存在),如果用户不存在,给出相关提示;如果用户存在,然后调用发送邮件的后端api(携带用户名信息)后端-发送邮件后端接收到前端发送邮...原创 2018-07-16 13:44:29 · 5198 阅读 · 1 评论 -
解决Chrome的表单自动填充问题
一般的浏览器都会默认开启一个表单自动填充的功能。这给很多用户带来了方便。但是对于项目开发者来说,有时候这就是噩梦。对安全性有考虑的项目,应该都会考虑到禁用这种自动填充的功能。否则,一个用户登录后,浏览器记住了用户名和密码。当另一个人使用这台电脑时,他肯定不用输入什么,就可以登入别人的账号,这可是很危险的事情。原创 2018-06-28 13:57:22 · 51884 阅读 · 5 评论 -
自定义UI组件系列之滑块(Range Slider)
原生的组件虽然长得丑,但是提供给我们的能力是很多的。原生的事件以及属性,这些是某些UI框架不能给我们的。所以,基于原生的一些组件来做一些定制化修改是有必要的。首先,我们来看一个常用的滑块组件。场景我在一个视频类demo中,使用到了滑块组件(也就是range类型的input组件)。<input type="range" value="{{currentTime}}"...原创 2018-04-30 17:36:38 · 6818 阅读 · 4 评论 -
ng-zorro使用过程中的一些笔记
今天开始学习NG-ZORRO这个UI框架,过程中遇到了许多问题,这里把一些问题记录下来,方便后续查阅。NG-ZORRO由阿里大神们开源,给angular开发者提供了极大的便利。改变icon图标的大小我试图通过改变width属性来改变图标的大小,通过background来改变颜色,最后才发现通过::before伪元素构造的图标其实是文字内容,因而其大小需要通过font-size来...原创 2018-03-31 11:49:16 · 5538 阅读 · 0 评论 -
Angular4中使用jquery和bootstrap
在angular开发中某些场景可能需要jquery和bootstrap,那么如何使用它们呢?Angular中引用jquery安装第一步,我们使用npm安装jquerynpm install --save jquery使用我们在ts文件中引入jquery。import * as $ from 'jquery';// 可以在ngOninit方法中打...原创 2018-03-30 15:53:23 · 4136 阅读 · 2 评论 -
理解css中的px,em,rem
px px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-si...原创 2018-03-30 11:10:58 · 207 阅读 · 0 评论 -
前端利器SASS之入门篇
前端开发过程中,我们会给各个元素指定样式,甚至有很多重复的样式,在后期维护过程中,如果我们要改动一些页面样式,可能得一个个css文件去修改,这样非常麻烦。好在有SASS这样一个神器来帮我们完成CSS的拓展和管理。那么什么是SASS? Sass(Syntactically Awesome StyleSheets,非常棒的语法结构化层叠样式表,我瞎翻译的) 是一款强化 CSS 的辅助工具,它在...原创 2018-03-29 23:54:03 · 1262 阅读 · 0 评论 -
gulp入门基础
gulp是前端开发过程中经常要用到的工具,非常值得花时间去掌握。利用gulp,我们可以使产品流程脚本化,节约大量的时间,有条不紊地进行业务开发。本文简单讲一下入门gulp需要掌握的东西。安装gulp首先,我们需要在全局安装gulp。npm install -g gulp然后,我们切到项目根目录,在项目中也进行gulp的安装,表明项目对gulp的依赖。npm inst...原创 2018-03-20 23:40:01 · 192 阅读 · 0 评论 -
web网页加载圈之进阶篇
做完简单的加载效果后,相信大家也想接着做一些更为复杂的效果。我也是这么想的。很多网页的加载动画都是由很多帧组成的,要做到这种效果也不难,说到底就是看你拆分动画的思路。下面讲一个简单的例子。从左到右循序渐进的加载效果一个典型的动画加载效果就是,从左到右循序渐进的圆点加载。效果如下: 那么怎么来实现这种效果呢?绘制n个圆点我这里绘制了6个圆点,相信画圆点应该难不倒各位。...原创 2018-03-08 23:21:57 · 418 阅读 · 0 评论 -
web网页加载圈之入门篇
作为一名web开发者,或多或少都会接触到网页加载圈这个概念。一个网站的加载速度或快或慢,而慢的网页加载速度会给用户非常差的体验,这个时候如果不给用户一点提示信息,那简直糟糕透了。因此,常见的做法,是在页面加载完成之前,给一个过渡效果。那么怎么实现这种效果呢?如何知道网页加载完成DOM给我们提供了这样一个方法document.onreadystatechange。当一个文档的readyS...原创 2018-03-07 21:49:36 · 1188 阅读 · 0 评论 -
ES5,ES6的简要说明及浏览器支持性总结
前端开发离不开javascript语言,而与之密切联系的就是ECMAScript。1.什么是ECMAScript?摘自百度百科:ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。下文中就以ES和JS来简称。简单说,ES是JS原创 2017-12-23 17:35:43 · 28815 阅读 · 0 评论 -
理解html中script标签的defer与async属性
html中script标签的defer与async属性经常会在一些地方看到一些 < script > 标签带上了defer和async,总是搞不清楚两者的具体区别,于是想记录下来。 从单词语义上来,defer代表延迟,async代表异步。那么我们就有一个基本的概念了。然后我们慢慢分析。1.如果没有defer和async< script > 标签如果没有带上defer 或 async属性的话,浏览器原创 2017-11-29 22:42:28 · 1423 阅读 · 1 评论 -
【重拾基础】耐人寻味的CSS属性white-space
《耐人寻味的CSS属性white-space》,本文说的white-space是一个控制换行和空白处理的CSS属性。我曾经被这个属性烦死,一直没记住,今天决定还是写下来好好琢磨下。原创 2019-10-13 11:22:13 · 965 阅读 · 0 评论 -
【重拾基础】块级元素和行内元素
最近给自己定了一个小目标,一周温习一个基础知识点,并输出一篇手记。看自己是否能坚持下去。^_^原创 2019-09-26 12:52:29 · 193 阅读 · 0 评论 -
即将是史上最全的meta大全
本文的目的是搜集当前主流的meta配置,方便开发者快速开发调试。在这里不会做各种meta的深入分析,只是简单的介绍,让大家知道有这个东西。原创 2019-09-24 11:36:46 · 727 阅读 · 0 评论 -
Chrome远程调试手机端UC浏览器
今天在手机UC上发现我的一个网页打不开,而在PC上是正常的,因此需要通过Chrome远程调试手机端UC浏览器查下问题,折腾了老久才弄好。获取 Google USB 驱动程序首先将手机通过USB接口与PC连接接着要确认手机USB驱动程序是不是正常,可以在设备管理器中查看,如果设备左侧没有黄色感叹号,则说明正常。如果不正常就需要手动安装了,给个链接:获取 Google USB 驱动程...原创 2019-08-28 16:55:13 · 724 阅读 · 0 评论