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

Redux的中间件(Middleware)遵循了即插即用的设计思想,出现在Action到达Reducer之前(如图10所示)的位置.中间件是一个固定模式的独立函数,当把多个中间件像管道那样串联在一起时,前一个中间件不但能将其输出传给下一个中间件作为输入,还能中断整条管道.在引入中间件后,既能扩展Redux的功能,也能增强dispatch()函数,适应不同的业务需求,例如通过中间件记录日志.报告奔溃或处理异步请求等. 图10  中间件管道 一.开发模式 在设计中间件函数时,会遵循一个固定的模式,如…

在网络工程中,路由能保证信息从源地址传输到正确地目的地址,避免在互联网中迷失方向.而前端应用中的路由,其功能与之类似,也是保证信息的准确性,只不过来源变成URL,目的地变成HTML页面. 在传统的前端应用中,每个HTML页面都会对应一条URL地址,当访问某个页面时,会先请求服务器,然后服务器根据发送过来的URL做出处理,再把响应内容回传给浏览器,最终渲染整个页面.这是典型的多页面应用的访问过程,由服务器控制页面的路由,而其中最令人诟病的是整页刷新,不仅存在着资源的浪费(像导航栏.侧边栏等通用部分…

由于React推崇组件模式,因此会要求HTML.CSS和JavaScript混合在一起,虽然这与过去的关注点分离正好相反,但是更有利于组件之间的隔离.React已将HTML用JSX封装,而对CSS只进行了较弱的封装,仅仅给出了基本的样式设置.不过,好在第三方库提供了CSS in JS的解决方案,让开发者能更高效的书写组件的样式,促进CSS工程化的发展. 一.内联样式 在React中的元素都包含style属性,用来定义内联样式.style的属性值是一个对象而不是一段字符串,该对象的属性就是CSS属…

React实现了一套与浏览器无关的DOM系统,包括元素渲染.节点查询.事件处理等机制. 一.ReactDOM 自React v0.14开始,官方将与DOM相关的操作从React中剥离,组成单独的react-dom库,从而让React能兼容更多的终端.在引入react-dom库后,就能调用一个全局对象:ReactDOM,虽然在之前的章节中已多次使用该对象,但是都没有给出过多的讲解,本节将对其做重点分析. ReactDOM只包含了unmountComponentAtNode().findDOMNod…

React在原生事件的基础上,重新设计了一套跨浏览器的合成事件(SyntheticEvent),在事件传播.注册方式.事件对象等多个方面都做了特别的处理. 一.注册事件 合成事件采用声明式的注册方式,类似于设置HTML属性,但有两点不同: (1)事件要采用小驼峰的命名法,而不是全部小写,例如onclick要写成onClick. (2)在JSX中的事件处理程序是一个函数引用,而不是一段字符串,如下代码所示,其中handle()是一个函数. <button onclick="handle()&…

根据组件之间的嵌套关系(即层级关系)可分为4种通信方式:父子.兄弟.跨级和无级. 一.父子通信 在React中,数据是自顶向下单向流动的,而父组件通过props向子组件传递需要的信息是组件之间最常见的通信方式,如下代码所示,父组件Parent向子组件Child传递了一个name属性,其值为一段字符串“strick”. class Parent extends React.Component { render() { return <Child name="strick">子…

组件(Component)由若干个React元素组成,包含属性.状态和生命周期等部分,满足独立.可复用.高内聚和低耦合等设计原则,每个React应用程序都是由一个个的组件搭建而成,即组成React应用程序的最小单元正是组件. 一.构建 目前推崇的构建组件的方式总共有两种:类和函数,而用React.createClass()构建组件的方式已经过时,本节也不会对其做讲解. 1)类组件 通过ES6新增的类构建而成的组件必须继承自React.Component,并且需要定义render()方法.此方法用…

高阶组件(High Order Component,简称HOC)不是一个真的组件,而是一个没有副作用的纯函数,以组件作为参数,返回一个功能增强的新组件,在很多第三方库(例如Redux.Relay等)中都有高阶组件的身影.由于遵循了装饰者模式的设计思想,因此不会入侵传递进来的原组件,而是对其进行抽象.包装和拓展,改变原组件的行为(图9形象的表达出了高阶组件的作用).这样不仅增强了组件的复用性和灵活性,还保持了组件的易用性.灵活使用高阶组件,可大大提高代码质量. 图9  高阶组件的作用 高阶组件有两…

JSX既不是字符串,也不是HTML,而是一种类似XML,用于描述用户界面的JavaScript扩展语法,如下代码所示.在使用JSX时,为了避免自动插入分号时出现问题,推荐在其最外层用圆括号包裹,并且必须用一个元素包裹(例如下面的<div>元素)其它元素或文本,所有的元素还必须得闭合. (<div> <input type="text" text={getName()} /> <button className="btn"&g…

组件的生命周期(Life Cycle)包含三个阶段:挂载(Mounting).更新(Updating)和卸载(Unmounting),在每个阶段都会有相应的回调方法(也叫钩子)可供选择,从而能更好的控制组件的行为. 一.挂载 在这个阶段,组件会完成它的首次渲染,先执行初始化,再被挂载到真实的DOM中,其中依次调用的方法有constructor().componentWillMount().render()和componentDidMount().除了render(),其他三个方法都只会运行一次.…

表单元素是一类拥有内部状态的元素,这些状态由其自身维护,通过这类元素可让用户与Web应用进行交互.HTML中的表单元素(例如<input>.<select>和<radio>等)在React中都有相应的组件实现,不仅如此,React还将它们分成两种:受控组件和非受控组件. 一.受控组件 受控组件(Controlled Component)是指那些受React控制的表单元素,其状态(value.checked等属性)的变更由组件的state管理.对于不同的表单元素,其受控组…

测试不仅可以发现和预防问题,还能降低风险.减少企业损失.在React中,涌现了多种测试框架,本节会对其中的Jest和Enzyme做详细的讲解. 一.Jest Jest是由Facebook开源的一个测试框架,可无缝兼容React项目,专注简单,推崇零配置,开箱即用的宗旨,用于逻辑和组件的单元测试.它的语法和断言与Jasmine类似,并且还集成了快照测试.Mock.覆盖率报告等功能,支持多进程并行运行测试,在内部使用JSDOM操作DOM,JSDOM是一种模拟的DOM环境,其行为类似于常规浏览器,可用…

Hook(钩子)是React v16.8新引入的特性,能以钩子的形式为函数组件附加类组件的状态.生命周期等特性.React的类组件有难以拆分.测试,状态逻辑分散,难以复用等问题,虽然可以通过渲染属性(Render Props)和高阶组件来提取状态逻辑,但会形成层层嵌套,而使用Hook后的函数组件就能避免这些问题. Hook本质上是一种特殊的JavaScript函数,名称以use为前缀,在使用它时需要遵循两条规则,如下所列: (1)在循环.条件语句或嵌套函数中调用Hook是不允许的,必须在函数的最…

函数式编程是React的精髓,在正式讲解React之前,有必要先了解一下函数式编程,有助于更好的理解React的特点.函数式编程(Functional Programming)不是一种新的框架或工具,而是一种以函数为主的编程范式.编程范式也叫编程范型,是一类编程风格,除了函数式编程,常用的还有面向对象编程.命令式编程等. 一.声明式编程 声明时编程也是一种范式,但它是一个比较大的概念,函数式编程是它的一个子集.声明式编程能指定每一步操作,而不用向计算机描述具体的实现细节.与之相对立的是命令式编程…

React可大致分为三部分:Core.Reconciler和Renderer,在阅读源码之前,首先需要搭建测试环境,为了方便起见,本文直接采用了网友搭建好的环境,React版本是16.8.6,与最新版本很接近. 一.目录结构 React采用了由Lerna维护monorepo方式进行代码管理,即用一个仓库管理多个模块(module)或包(package).在React仓库的根目录中,包含三个目录: (1)fixtures,给源码贡献者准备的测试用例. (2)packages,React库提供的包的…

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

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

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,效…

Cypress是为现代网络构建的前端测试工具,解决了开发人员和 QA 工程师在测试应用程序时面临的关键痛点. 在这个测试框架中包含了E2E测试.集成测试和单元测试(内嵌了Mocha),我们需要的是它的E2E测试的能力. 官网中包含详尽的API接口文档,以及多个视频教程.实例等,只要有耐心,看完文档,上手是不成问题的. 之所以要引入E2E测试,主要是为了保证主流程能够不出错,尤其是在后期做修修补补后,有一个可靠的方式告诉我们当前页面是正常的就行. 所以,并不会要求E2E的覆盖率要达到怎样的一个数字…

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

在第5篇中,讲解了多个对象字面量的改进,本节将重点介绍两个新增的静态方法,以及对象属性的重复处理和枚举顺序. 一.Object.is() 此方法用于判断两个值是否相同,内部实现了SameValue算法,其行为类似于全等(===)比较,但它认为两个NaN是相等的,而+0和-0却是不等的.Object.is()和全等的区别如下所示. NaN === NaN; //false Object.is(NaN, NaN); //true +0 === -0; //true Object.is(+0, -0)…

为了提升业务人员操作管理后台的体验,花了点时间进行响应式的改造,紧急情况时,掏出手机就能工作. 利用CSS3的媒体查询,就能根据不同屏幕的尺寸采用不同的样式来渲染,目前使用的移动端屏幕阈值为750px. 为了便于管理,基于Less的语法,声明了一个常量,专门记录屏幕尺寸. @mobile-screen: ~"(max-width:750px)"; 我们当前使用的管理后台基于UmiJS3.X和Ant Design 3.X. 一.结构改造 首先是管理后台整体结构的改造,包括左边的菜单栏,右…

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

Babel是一个JavaScript编译器,不仅能将当前运行环境不支持的JavaScript语法(例如ES6.ES7等)编译成向下兼容的可用语法(例如ES3或ES5),这其中会涉及新语法的转换和缺失特性的修补:还支持语法扩展,从而能随时随地的使用JSX.TypeScript等语法.目前最新版本是7.4,自从6.0以来,Babel被分解的更加模块化,各种转译功能都以插件的形式分离出来,可按自己的需求,灵活配置. 在7.0版本中,对Babel的包做了一次大调整,统一改成域级包,将原先以“babel-…

低代码开发平台(LCDP)是无需编码(0代码)或通过少量代码就可以快速生成应用程序的开发平台.让具有不同经验水平的开发人员可以通过图形化的用户界面,通过拖拽组件和模型驱动的逻辑来创建网页和移动应用程序. 低代码的核心是呈现.交互和扩展,其中呈现和交互需要借助自行研发的渲染引擎实现.而此处的扩展特指物料库,也就是各类自定义的业务组件,有了物料库后才能满足更多的场景. 在 4 个月前研发过一套可视化搭建系统,当时采用的是生成代码的方式渲染页面.而本次研发采用的则是运行时渲染,功能比较基础,基于Rea…

ES6将迭代器和生成器内置到语言中,不仅简化了数据处理和集合操作,还弥补了for.while等普通循环的不足,例如难以遍历无穷集合或自定义的树结构等. 迭代器(Iterator)是一种用于迭代的对象,可有序的依次访问集合中的数据项.ES6制订了一套标准化的迭代器接口(包含3个方法,如表11所列),只要实现了这套接口都能成为迭代器. 表11 迭代器接口 方法 返回值 描述 next() IteratorResult 必选,获取下一个迭代器结果 return() IteratorResult 可选,…

npm(Node Package Manager)是Node.js的包管理工具,相当于一个在线仓库.它提供了一个公共的平台,将分散在世界各地的包集中起来,能轻松的安装.分享和管理相关的包,不用再为搜索包而烦恼,并且npm能自动处理包的依赖项.它由三部分组成: (1)网站:可用来浏览.搜索包的信息. (2)注册表:一个巨大的数据库,保存了每个包的信息,例如作者.版本.依赖等. (3)命令行界面(CLI):开发者可在CLI中对包进行发布.安装.卸载等操作. 由于新版的Node.js已集成了npm,因…

webpack是一个非常强大的工具,除了前文所介绍的基础概念之外,还有各种进阶应用,例如Source Map.模块热替换.集成等,本文会对这些内容做依次讲解. 一. runtime和manifest 在webpack打包生成的bundle文件中,除了业务代码和引用的第三方库之外,还会包含管理模块交互的runtime和manifest. 1)runtime runtime是一段辅助代码,在模块交互时,能连接它们所需的加载和解析逻辑.下面是通过webpack 4.34生成的runtime(只给出了部…