前端综合应用
文章平均质量分 87
前端综合应用
hjb2722404
时常偷懒,经常断更,偶尔写点东西
展开
-
js(ts)截取视频第一帧作为封面图
有时候截取到的图片可能是黑屏、白屏、透明等,需要使用二进制数据进行判断,如果无效,则返回系统默认图片。,会导致如果是竖视频截取出来的封面图在横显示时会变形。这是防止截图结果为黑屏的关键一步。网络上其它文章的代码都直接读取。原创 2023-03-02 11:44:39 · 2149 阅读 · 1 评论 -
基于Git子模块的微前端项目管理和公用组件库方案
基于Git子模块的微前端项目管理方案1. 媒体项目从单一项目到多项目的转变及问题随着前端媒体业务的急剧扩大,传统的单体应用已经变得难以维护,由此,这几年我们一直在探索对大型复杂项目的拆分工作。一开始拆分出去的是策划中心,老的媒体项目主体是AngularJS编写的,而拆分出去的策划中心模块则采用 VueJS 编写,限于框架之间的巨大差异,难以优雅地集成在一起,就使用了 Iframe 嵌入式方案。后来,随着配置管理模块、网络资源模逐渐使用 VueJS 重写为独立项目的工作完成,对采编模块的重写工作终于开原创 2022-02-11 09:32:03 · 2693 阅读 · 0 评论 -
微软的软件工程检查清单
软件工程检查清单这是一份来自微软的软件工程检查清单,原文 是英文的,我认为对与我们很有参考性,所以将它翻译成中文,并结合我们自己的特定进行了文本的微调。代码版本控制 默认主分支是被锁定的。(译者注:主分支权限控制)。 所有的合并都是通过提 PR/MR 完成的。 PR/MR 都是跟任务管理系统关联的 提价历史记录是一致的,提交信息是信息性的(what,why).(译者注:关于提交信息的格式,可以参考这篇文章) 一致的分支命名约定。(译者注:比如类型 + 任务编号) 清晰的存储翻译 2022-01-06 11:12:58 · 391 阅读 · 0 评论 -
基于el-table二次封装的通用表格组件
特性:数据驱动,省去一个一个写el-table-column标签和属性的烦恼,表格的表头可以存到后端。支持通过拖拽改变列的位置支持通过拖拽改变行的位置支持loading自定义支持具名插槽语法支持可选的复选框列和序号列支持自定义每一列的显示和隐藏,以及是否允许隐藏拖拽的实现依赖于sortablejs库表格使用方式:import TrsTable from '@/components/normal/TrsTable.vue';<trs-table :ta原创 2021-11-18 18:48:43 · 1339 阅读 · 2 评论 -
VsCode+WSL+Docker 开发环境构建指南
Why——为什么整这种活在实际开发中,我们遇到了以下类型的问题:1. 不同工程对nodejs版本要求不一样比如我们的工程A是基于angularjs1.5的,它要求nodejs版本为11.0.0, 而工程B是基于vue+vite的,vite要求nodejs版本需要大于12.0.0。尽管有nvm来管理nodejs版本,但它仍旧存在以下问题:全局环境污染比如angularjs工程是基于gulp的,所以需要全局安装gulp包,但是其他工程用不到,而vue工程则需要全局安装vue-cli,这样同一个w原创 2021-10-13 09:58:14 · 4644 阅读 · 1 评论 -
当小数遇上二进制——全面解析JS中的小数二进制计算(附赠0.1+0.2 !== 0.3问题解释)
二进制小数如何转换为十进制二进制转换十进制的方法是:从二进制数的最低位开始,每一位乘以对应的2的幂数,然后将最终的结果小数部分与整数部分分别相加对应的2的幂,以个位为0,向高位依次增1,向地位依次减1;举个例子: 以二进制小数1100.0011为例:二进制小数位1100.0011对应2的幂3210.-1-2-3-4乘幂计算1 * 231 * 220 * 210 * 20.0 * 2-10 * 2-21 * 2-31原创 2021-09-27 18:41:09 · 3045 阅读 · 0 评论 -
正则表达式中的空白符详细解释
why- 为什么要专门写一篇空白符空白符代表的是编程中常见的一些可以显示为空白的符号,最常见于正则表达式,比如:var reg = /[\n\t\r\f\b\v\s]/;这些字符其实是很常见的,但有时候又像是“最熟悉的陌生人”,有时甚至会混淆他们所代表的含义。本文就彻底全面地对这些字符进行梳理解释,等我们明白了它们具体的含义和渊源后,就再也不会弄混它们了。what- 它们分别代表什么意思:符号含义\n换行符\r回车符\t制表符\f换页符\v原创 2021-09-26 15:56:24 · 10029 阅读 · 0 评论 -
前端错误监控警报系统Sentry(哨兵)私有化部署手札
1.What —— sentry 是什么它是一个前端错误监控警报系统。对于一个前端应用,即使经过开发自测——>前端团队内部评审——>测试团队测试后,仍然无法完全避免线上出现的错误,比如网络请求错误、前端逻辑异常等。sentry 可以监控前端应用的线上运行,当用户在使用应用的过程中遇到应用报错时(有时页面可能没反应,但报错会在控制台出现),它可以及时将错误信息上报给sentry的服务端程序,服务端程序可以通过开发者自定义的方式(比如,邮件、钉钉等)及时向开发者报警,并给出详细的错误信息。当原创 2021-08-30 17:33:30 · 4833 阅读 · 0 评论 -
X-UA-Compatible 是什么(详解)
是什么简而言之,它是一个指定IE8以上版本浏览器采用何种文档兼容模式来渲染页面的指令。在哪里用有两个地方使用:客户端——HTML 文档中 <meta>标签里,使用http-equiv属性指定服务端—— HTTP响应头中设置如果客户端与服务端都设置了,采用客户端的设置。什么是文档兼容模式文档兼容模式是IE8浏览器引入的,它允许开发人员告诉IE浏览器采用与旧版本IE相同的方式来渲染页面,从而允许由开发人员选择何时对页面进行更新。通过实施适当的兼容模式,站点可以确保与 Inter原创 2021-07-23 14:38:21 · 9076 阅读 · 0 评论 -
HTML的meta标签详解
HTML的meta标签详解是什么<meta> 标签是用来描述文档[[元数据]]的元素标签。在哪里<meta> 标签一般放置在HTML文档的 <head> 标签中什么时候用需要向能够读取网页代码的程序或人提供额外信息和特殊行为指令时,比如:为HTML解析器提供当前页面所使用的字符集为HTML解析器提供当前页面内容所使用的编码格式为搜索引擎提供关键词、作者等SEO内容让HTML解析器执行页面重定向操作让HTML解析器按照某种指定的模式渲染页面为用户提原创 2021-07-23 13:51:53 · 2026 阅读 · 0 评论 -
Content-Security-Policy —— HTML HTTP的内容安全策略
是什么HTTP 协议的 Content-Security-Policy 响应头允许网站管理员控制用户代理可以为给定页面加载的资源有什么用可以防止[[Web安全详解#跨站点脚本攻击]]语法Content-Security-Policy: <policy-directive>; <policy-directive>指令<policy-directive>说明获取资源型指令可选来源<host-source> : 因特网主机的名称或IP地址,以及原创 2021-07-23 13:43:45 · 3165 阅读 · 1 评论 -
HTML中<meta>标签的name属性都有哪些——标准元数据名称
是什么标准元数据名称是在HTML的<meta> 标签中定义的name 属性的可选名称,name属性包含两种类型:标准名称。这是规范中定义的,所有浏览器都能够明白其所指称的名称自定义名称。由网页作者自己定义的名称。这里所说的标准元数据名称就是上述第一种。都有哪些1. HTML规范中定义的标准名称application-name 网页中所运行的应用名称。(注意不同于<title>标签)author: 文档作者的名字description:对页面内容的描述,一些浏原创 2021-07-23 12:54:03 · 3124 阅读 · 0 评论 -
indexedDB介绍
indexedDB介绍原生介绍indexedDB 是一个前端数据持久化解决方案(即前端缓存),由浏览器实现。0. 兼容性1.特点基于文件存储。意味着其容量可达到硬盘可用空间上限非关系型数据库。意味着扩展或收缩字段一般无须修改数据库和表结构(除非新增字段用做索引)键值对存储。意味着存取无须字符串转换过程存储类型丰富。意味着浏览器缓存中不再是只能存字符串了异步: 意味着所有操作都要在回调中进行2. 数据库一组相关业务数据的存储集合。创建一个数据库windo原创 2021-07-16 11:55:02 · 3324 阅读 · 0 评论 -
Element属性与方法整理
属性/方法名描述accessKey为元素指定获取焦点的快捷键align?ariaAtomic指示辅助技术是否根据aria-relevant定义的通知显示全部或部分更改区域ariaAutoComplete反映了 aria-autocomplete属性的值,指示输入文本是否可触发自动完成功能ariaBusy反映了 aria-busy属性的值,指示元素是否正在被修改,因为辅助技术可能希望等到修改完成后再将它们暴露给用户ariaChecked反映了 ar...原创 2021-07-14 09:46:11 · 4886 阅读 · 1 评论 -
dexie.js 中文教程
what 它是什么dexie.js是一个对浏览器indexexDB的包装库,使得我们可以更方便地操作indexedDB。why 为什么用它由于原生indexedDB提供的接口对于前端开发人员来说极为繁琐,而且接口不友好,原子操作决定了很多高频复杂操作必须由开发者自己实现,这带来了巨大的工作量和不可靠性。基于此,出现了很多对原生接口的包装,而相比于其它包装库,dexie.js具有以下明显的优点:所有接口皆返回promise,更符合indexedDB的异步特性,对开发人员更友好直观。即支持与原创 2021-07-12 10:51:15 · 22644 阅读 · 4 评论 -
可视化系统中动画(帧动画+变形过渡动画)功能开发总结
业务需求1.动画* 动画是指单个动画,每个动画只支持一张图片* 单个动画可以支持两种动画效果:帧动画和变形动画帧动画可控制以下属性:可根据图片设计的不同自定义每一行多少帧;可根据图片设计的不同自定义帧动画行数;可自定义每一帧之间的时间间隔;变形动画可控制以下属性:动画运行时长(毫秒);动画循环次数;(总次数= 循环次数 +1)动画的缓动效果;(即运动速度的变化方式)结束动画ID【动画组使用】(即下一个动画)是否随页面加载一起触发;动画结束后是否从页面隐藏;结束原创 2020-12-11 09:44:10 · 2621 阅读 · 1 评论 -
一种内容区高度不定的展开收起方案
缘起在日常开发中,经常会遇到有些区块内容可以展开收起的需求,例如以下这两种:固定高度式:非固定式:固定式对于内容固定,高度固定的情况,很好实现,可以一开始就显示展开/收起按钮,点击切换区块的高度即可。非固定式而对于内容多少不固定,最终高度也不一定的情况,则稍显复杂,难点在于:内容未超出规定高度时,展开/收起按钮不显示内容超出规定高度时,显示展开/收起按钮由于内容高度不一定,当点击展开按钮时,无法确定显示高度对于这种情况,现介绍以下实现方案实现&原创 2020-12-09 09:22:25 · 1269 阅读 · 1 评论 -
微前端框架乾坤配置记录
主应用1. 路由包装为history模式// src/main.jsimport routes from './routes';const router = new VueRouter({ mode: 'history', routes});new Vue({ router, store, render: (h) => h(App)}).$mount('#app');2. 引入乾坤微前端主应用配置// src/mico/index.jsimport {原创 2020-12-08 23:50:45 · 6068 阅读 · 2 评论 -
抽象出 api 服务层的好处
0 伪代码示例0.1 demo结构-| src -| editCenter -| A.js // 获取渠道列表,获取媒体素材列表 -| resourceCenter -| B.js // 获取媒体素材列表,获取标签列表 -| mangeConfig -| C.js // 获取渠道列表,获取标签列表 -| service -| api -| tagApi.js -| mediaApi.js -| chanelApi.js0.2 未抽象出api服务层的业务原创 2020-12-08 22:55:06 · 916 阅读 · 0 评论 -
angularjs使用中国的一些细节
与第三方库的共处有时我们想要的功能angular模块库里并没有提供,而其他第三方库提供了,这时候就需要让angular与第三方库很好的共处。例如,在使用微信支付时,我们需要在页面中引入weixin-js-sdk: <html ng-app='myApp'> <head> ... <script src="http://res.wx.qq.com/open/js/jwei原创 2016-04-07 23:16:32 · 992 阅读 · 0 评论 -
从零开始写一款javascript插件(一)——tab选项卡
上一次写了《从零开始学习制作H5场景应用》系列,反响还算好,所以趁最近不是太忙,继续新的系列,从零开始写javascript插件。今天,先从最简单的开始,将已有的一个Tab选项卡切换功能改写成javascript插件形式。原生函数写法将一个javascript方法改写为js插件最简单的方式就是将这个方法挂载到window全局对象下面我们先来看看最原始的使用函数写法的代码:tab.html <!原创 2016-02-19 14:44:02 · 4614 阅读 · 4 评论 -
在HTML中打出人民币符号和对勾符号
人民币符号:¥;对勾符号:√原创 2015-09-02 18:18:36 · 16751 阅读 · 0 评论 -
在HTML中打出人民币符号和对勾符号
人民币符号:¥;对勾符号:√原创 2015-09-02 18:17:58 · 5341 阅读 · 0 评论 -
设计模式初探——基础知识
写在本系列最前面: 在以前的印象中,设计模式似乎是一个非常高大上的东东,但是呢,要想从一个码农进阶到一个工程师,怎么能绕过这东西呢。无奈,找各种设计模式的书来看,得益于自己学习过的多种语言,先后学习了java,php,javascript里的设计模式后,总算对设计模式有了一知半解的了解,于是乎,想着将自己理解的东西记录一下,以便后用(健忘症必备技能)。1、简单工厂模式:工厂模式就是使用工厂模式原创 2015-07-15 17:40:15 · 734 阅读 · 0 评论 -
从零开始学习制作H5应用——V5.0:后悔机制,整理目录,压缩,模板化
经过前面四个版本的迭代,我们已经制作了一个从视觉和听觉上都很舒服的H5微场景应用,没有看过的请戳下面:V1.0——简单页面滑动切换V2.0——多页切换,透明过渡及交互指示V3.0——加入loading,music及自动切换V4.0——加入文字并给文字加特效但是,还没有完,这一次,我们将做一些十分重要的收尾工作,才能真正完成我们的第一个H5应用,所以,let’s do it!任务 1、加入后悔机原创 2015-06-12 11:15:23 · 2540 阅读 · 1 评论 -
从零开始制作H5应用(4)——V4.0,加入文字并给文字加特效
之前,我们分三次完成了我们第一个H5应用的三个迭代版本:V1.0——简单页面滑动切换V2.0——多页切换,透明过渡及交互指示V3.0——加入loading,music及自动切换这已经是一个具有基本表达能力的版本了,但是,远远不够!因为,用户体验永远是第一位的,单纯的图片无法准确调动用户情绪,当然,除非是那些特别牛逼的照片,但那时不可多得的,所以我们必须配以适当的文案来对图片内容进行说明或者升华。并且原创 2015-06-09 15:23:38 · 3990 阅读 · 0 评论 -
从零开始学习制作H5应用——V3.0版,loading,背景音乐及自动切换
我们的第一个H5应用经过V1.0与V2.0的制作,已经越来越惊艳了,这一次,我们继续来给她梳妆打扮,让她更漂亮。任务 1、加入页面加载完成前的loading动画,提升用户体验; 2、加入背景音乐,自动播放,并添加控制图标,可以控制播放与暂停 3、让页面实现自动切换。实现第一步:Loading动画index.html ……<body><div class='loader loa原创 2015-06-08 14:35:14 · 3665 阅读 · 0 评论 -
从零开始制作H5应用(2)——V2.0版,多页单张图片滑动,透明过渡及交互指示
上一次,我们制作了我们第一个H5场景应用的V1.0版,这次我们趁热打铁,在上一版的基础上对层序进行修改和扩展。任务 1、页面数量由3张增加至9张; 2、每张页面中放入一张全屏自适应的图片; 3、修复页面过渡中的白场,并在过渡时加入页面的透明效果 4、给予用户“向上滑动“的交互提示;分析老规矩,拿到任务需求后,我们还是要先具体分析每一步的实现思路:1.页面数量由3张增加至9张原创 2015-06-05 18:05:27 · 3075 阅读 · 1 评论 -
从零开始学习H5应用(1)——V1.0版,简单页面滑动切换效果
可曾看见过那些在微信上转疯了的H5神作?好生羡慕啊,那么从今天开始,我将从零开始学习制作H5应用,看看那么漂亮的页面是怎么样一步一步形成的。2016年2月更新:之前很多朋友问我要源码,由于工作原因,一直没来得及上传,今天已上传至github,点击下面的地址可查看下载最终源码:该案例git代码仓库准备在学习制作H5应用之前,必须具备以下基础前提: HTML,CSS,JS基本编写与制作能力原创 2015-06-04 16:13:06 · 16505 阅读 · 4 评论 -
HTML5新的语义标签——大纲算法
我们都知道,在HTML5中,引入了一批新的语义标签,比如<header>,<section>,<footer>,<nav>,<aside>,<article>,<blockqouet>等等。之所以加入这些标签,是为了解决HTML4中的div与h标签无法清晰的表示整个文档的大纲,导致整个文档的结构层次混乱。知道了这些标签的由来和作用,我们就能很容易地判定该在何时再哪种上下文环境中应用这些标签。下面就分原创 2015-04-23 21:30:09 · 981 阅读 · 0 评论 -
如何获取别人微信文章中的图片
有时我们看到别人微信文章中的图片很好看,想保存下来,又或者是我们本身是微信运营者,想“借用”一下别人的图,简单点的做法是在手机微信文章中点击图片,会出现微信图片浏览器,然后点击右上角的三个点点,点击保存到手机。如果电脑要用,就用手机发送给电脑就行,如下图:但是,如果仅仅这么简单我就不用写这篇文章了!!关键在于,这样得到的图是经过微信处理过的小图,放大后会失真,那怎么获得大图呢?试过的人可能知道,将微原创 2015-08-05 10:30:16 · 9354 阅读 · 1 评论