古语云:“纸上得来终觉浅,绝知此事要躬行”.的确,不管看了多少本书,如果自己不实践,那么就很难领会其中的精髓.自己研读过许多ES6相关的书籍和资料,平时工作中也会用到,但在用到时经常需要上搜索引擎中查询相关知识概念,并且对很多知识也仅仅是略知一二,没有领会到其中的原理.为此,开辟了<ES6躬行记>系列,将ES6相关的知识系统的记录下来,以便自己翻阅,也希望能帮助到广大网友. 在ES6之前的版本中,用于声明变量的关键字只有var,并且没有块级作用域,只有函数作用域和全局作用域,但在ES6中已改变…

ES6躬行记(18)--迭代器 要实现以下接口## next() ,return,throw 可以用for-of保证迭代对象的正确性 例如 var str = "向…

WebRTC (Web Real-Time Communications) 是一项实时通讯技术,在 2011 年由 Google 提出,经过 10 年的发展,W3C 于 2021 年正式发布 WebRTC 1.0 标准. WebRTC 标准概括介绍了两种不同的技术:媒体捕获设备和点对点连接(P2P,Peer-to-Peer),可让用户无需安装任何插件或第三方软件的情况下,实现共享桌面.文件传输.视频直播等功能. 下图是官方给出的一张 WebRTC 整体架构设计图: 紫色部分是前端开发所使用的 A…

WebRTC 在创建点对点(P2P)的连接之前,会先通过信令服务器交换两端的 SDP 和 ICE Candidate,取两者的交集,决定最终的音视频参数.传输协议.NAT 打洞方式等信息. 在完成媒体协商,并且两端网络连通之后,就可以开始传输数据了. 本文示例代码已上传至 Github,有需要的可以随意下载. 一.术语 在实现一个简单的视频通话之前,还需要了解一些相关术语. 1)SDP SDP(Session Description Protocal)是一个描述会话元数据(Session Met…

公司目前的业务会接触比较多的音视频,所以有必要了解一些基本概念. 文章涉及的一些源码已上传至 Github,可随意下载. 一.基础概念 本节音视频的基础概念摘自书籍<FFmpeg入门详解 音视频原理及应用>. 1)音频 声音的三要素为频率.振幅和波形,即声音的音调.声波的响度和声音的音色. 音频是一种利用数字化手段对声音进行录制.存放.编辑.压缩和播放的技术,相关概念包括采样.量化.编码.采样率.声道数和比特率等. 采样是指只在时间轴上对信号进行数字化. 量化是指在幅度轴上对信号进行数字化.…

Redux是一个可预测的状态容器,不但融合了函数式编程思想,还严格遵循了单向数据流的理念.Redux继承了Flux的架构思想,并在此基础上进行了精简.优化和扩展,力求用最少的API完成最主要的功能,它的核心代码短小而精悍,压缩后只有几KB.Redux约定了一系列的规范,并且标准化了状态(即数据)的更新步骤,从而让不断变化.快速增长的大型前端应用中的状态有迹可循,既利于问题的重现,也便于新需求的整合.注意,Redux是一个独立的库,可与React.Ember或jQuery等其它库搭配使用. 在Re…

webpack是一个静态模块打包器,此处的模块可以是任意文件,包括Sass.TypeScript.模板和图像等.webpack可根据输入文件的依赖关系,打包输出浏览器可识别的JavaScript.CSS和HTML等文件,并且能对图像做优化处理,如图1所示. 图1  webpack打包 目前,webpack的最新版本是4.33,其配置文件(webpack.config.js)的基本结构如下所示,包含了它的4个核心概念:入口(entry).输出(output).加载器(loader)和插件(plug…

一.box-decoration-break CSS3新增的box-decoration-break属性可指定行内非替换元素在跨行.跨列或跨页时的样式渲染,它包含两个值: (1)slice:默认值,盒子会被分割成多部分. (2)clone:断开的各个盒子会单独渲染. 下面用一个示例来演示两种的区别,第一个span元素采用box-decoration-break的默认值,效果如第一张图所示,在断行处没有左右内边距和圆角:第二个span元素box-decoration-break的值为clone,效…

后台管理系统使用的是umi框架,随着公司业务的发展,目前已经变成了一个巨石应用,越来越难维护,有必要对其进行拆分了. 计划是从市面上挑选一个成熟的微前端框架,首先选择的是 icestark,虽然文档中有说明umi框架的改造,但版本得是 3 以上. 而当前我们自己使用的版本是 1,差了整整两个版本.然后再去搜索,发现另一个微前端框架:qiankun,并且它有一个 umi插件. 但是又遇到了 umi版本的问题,好不容易找到一个咨询umi改造微前端的问题,版本也是2. 本来是打算将老项目作为主应用,新…

在遇到一个页面性能问题时,我理解的优化闭环是:分析.策略.验证和沉淀. 分析需要有分析数据,因此得有一个性能监控管理. 策略就是制订针对性的优化方案,解决当前遇到的问题. 验证的对象上述策略,判断方案是否有效,同样需要数据支撑. 沉淀就是将解决过程文档化.通用化,能够总结成一套实际方案.优化规则等. 这其中非常关键的一步是需要采集到性能数据,并且得有个可视化后台查看数据变化. 在之前已经自制了一个性能优化平台,采集前端性能参数的 SDK 叫 shin.js. 一.优化的三部分 在文章开头,我想先…