组件是可复用的Vue实例,拥有属于自己的数据.模板.脚本和样式,可避免繁重的重复性开发.由于组件都是独立的,因此其内部代码不会影响其它组件,但可以包含其它组件,并且相互之间还能通信. 一.注册 在使用组件之前,需要先将其注册,Vue提供了两种注册方式:全局注册和局部注册. 1)全局注册 通过Vue.component()方法可注册全局的组件,它能接收两个参数,第一个是组件名称,第二个既可以是扩展过的构造器(即Vue.extend()的返回值),也可以是选项对象(会自动调用Vue.extend()…

组件之间除了保持独立之外,还需要相互通信,本章将介绍几种通信的方式. 一.直接访问 Vue提供了三个实例属性,可直接访问父组件.子组件和根实例,如下所列. (1)$parent:父组件. (2)$root:根实例,如果没有父实例,那么读取的将是自身. (3)$children:直接子组件,无法获取隔代的子组件,并且不保证组件的顺序,也非响应式. 下面用一个示例来演示它们的用法,首先创建两个父子关系的组件parent和child:接着初始化根实例vm,挂载的<div>元素包含parent组件:最…

Vue.js的核心是通过基于HTML的模板语法声明式地将数据绑定到DOM结构中,即通过模板将数据显示在页面上,如下所示. <div id="container">{{content}}</div> <script> var vm = new Vue({ el: "#container", data: { content: "strick" } }); </script> 其中<div>元…

Vue不仅内置了各类指令,包括条件渲染.事件处理等,还能注册自定义指令. 一.条件渲染 条件渲染的指令包括v-if.v-else.v-else-if和v-show. 1)v-if 该指令的功能和条件语句中的if类似,可根据表达式的计算结果,判断是否渲染分支中的元素和它所包含的子元素.在下面的示例中,当把数据对象的exist属性设为true时,<div>和<p>两个元素就会被添加到页面的DOM中. <div v-if="exist"> <p>…

Vue对DOM元素的class和style两个特性做了专门的增强,即对CSS类和内联样式做了一层封装,通过v-bind指令来处理它们,而接收的表达式既可以是简单的字符串.对象或数组,也可以是复杂的计算属性.不仅如此,Vue还为表单设计了一些语法糖,让表单处理变得尤为简单. 一.CSS类 v-bind指令与class参数配合,就能处理CSS类,并且能接收多种类型的值. 1)对象 v-bind:class可以接收一个对象,对象的属性名就是CSS类名,只有当其值是真值时,才能添加到DOM元素上,否则会…

Vue提供了一种内容分发技术,可将父组件中的内容传递给子组件的模板,实现方式参照了Web组件规范草案. 一.插槽 Vue内置了一个<slot>元素,能作为插槽(slot)存在,而插槽内可包含文本.HTML片段.组件等.以下面的btn组件为例,其模板中包含一个<slot>元素,在DOM中为btn组件添加了文本内容. <btn>提交</btn> <script> Vue.component("btn", { template: '…

除了可通过模板创建HTML之外,Vue还提供了渲染函数和JSX,前者的编码自由度很高,后者对于开发过React的人来说会很熟悉.注意,Vue的模板最终都会被编译成渲染函数. 一.渲染函数 虽然在大部分场景中,都会选择直观而清晰的模板,但遇到一些复杂的场景时,就不得不使用渲染函数render()了. 1)render() 假设有一个page组件,它会根据外部传入的type特性,有选择的渲染,其模板如下所示. <script type="text/x-template" id=&qu…

虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Application,SPA). 一.基本用法 首先需要引入vue和vue-router两个库,如果像下面这样全局引用(即存在全局变量Vue),那么vue-router会自动调用Vue.use()方法注册其自身:但如果以模块的方式引用,那么就得显式地调用Vue.use(). <script src="js…

Vuex是一个专为Vue.js设计的状态管理库,适用于多组件共享状态的场景.Vuex能集中式的存储和维护所有组件的状态,并提供相关规则保证状态的独立性.正确性和可预测性,这不仅让调试变得可追踪,还让代码变得更结构化且易维护.本文所使用的Vuex,其版本是3.1.1. 一.基本用法 首先需要引入Vue和Vuex两个库,如果像下面这样在Vue之后引入Vuex,那么Vuex会自动调用Vue.use()方法注册其自身:但如果以模块的方式引用,那么就得显式地调用Vue.use().注意,因为Vuex依赖P…

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

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

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

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

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

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

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

Fiddler是一款免费的.基于Windows系统的代理服务器软件(即Web调试抓包工具),由Eric Lawrence用C#语言在2003年10月发布了第一个版本.注意,由于Fiddler依赖Microsoft .NET Framework 2.0或更高版本,因此在运行Fiddler之前需要预先将其安装. 当启动Fiddler时,它会自动注册成Windows Internet(WinINET)网络服务代理,从而就能捕获本地所有的HTTP和HTTPS数据流.在图14中,客户端(例如Web浏览器.…

一.伪类选择器 伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器不会出现在HTML文档中(有几个例外,如:lang.::placeholder等).并且它的关键字大小写不敏感,也就是说empty和EMPTY完全相同.伪选择器分为两种:伪类选择器和伪元素选择器.注意,伪选择器会以一个或两个冒号(:)开头,并且如果要与其它选择器组合使用,那么只能与类型选择器(即元素…

在2020年我刚到公司的时候,公司使用的版本还是1.0,之后为了引入微前端,迫不得已被动升级. 一.从 1.0 到 2.0 在官方文档中,有专门一页讲如何升级的,这个用户体验非常好. 一个清单列的非常清楚,内容不多,让我信心大增.并且自己之前也曽依托 umi 2.0开源过一套系统. 所以在实际操作中,升级遇到的阻力没有我想象中的那么大,但期间还是遇到了些难缠的问题,诸如页面空白,文件不存在等. 具体的改造其实就那么几步,升级和替换依赖库,更正路由配置,去除过时文件等. 改造好后,自己粗略的刷刷页…

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

ES6的继承依然是基于原型的继承,但语法更为简洁清晰.通过一个extends关键字,就能描述两个类之间的继承关系(如下代码所示),在此关键字之前的Man是子类(即派生类),而在其之后的People是父类(即基类或超类). class People { constructor() { this.age = 28; } getAge() { return this.age; } static getName() { return "strick"; } } class Man extend…

类型化数组(Typed Array)是一种处理二进制数据的特殊数组,它可像C语言那样直接操纵字节,不过得先用ArrayBuffer对象创建数组缓冲区(Array Buffer),再映射到指定格式的视图(view)之后,才能读写其中的数据.总共有两类视图,分别是特定类型的TypedArray和通用类型的DataView.在ES6引入类型化数组之后,大大提升了JavaScript数学运算的性能. 一.ArrayBuffer 虽然ArrayBuffer对象可以开辟一片固定大小的内存区域(即数组缓冲区)…

解构(destructuring)是一种赋值语法,可从数组中提取元素或从对象中提取属性,将其值赋给对应的变量或另一个对象的属性.解构地目的是简化提取数据的过程,增强代码的可读性.有两种解构语法,分别是数组解构和对象解构,两者的区别在于解构赋值语句的左侧,前者是数组字面量,而后者是对象字面量.为了说明解构的优势,下面用一个例子来对比手动赋值和解构赋值. var arr = [1, 2], obj = { a: 3, b: 4 }, x, y, a, b; x = arr[0]; y = arr[1…

在ES6之前,由于ECMAScript不具备模块化管理的能力,因此往往需要借助第三方类库(例如遵守AMD规范的RequireJS或遵循CMD规范的SeaJS等)才能实现模块加载.而自从ES6引入了模块化标准后,就不需要再特地加载一次外部脚本了.模块化的语法不仅让JavaScript代码的组织变得更有条理,还包含封装.按需导出或导入等实用功能,可轻松应对日益复杂和庞大的前端工程.但有一点要注意,模块中的代码默认运行在严格模式中. 一.导出 一个模块就是一个独立的JavaScript文件,如果要读取…

模板字面量(Template Literal)是一种能够嵌入表达式的格式化字符串,有别于普通字符串,它使用反引号(`)包裹字符序列,而不是双引号或单引号.模板字面量包含特定形式的占位符(${expression}),由美元符号.大括号以及合法的表达式组成,合法的表达式(expression)可以是变量.算术或函数调用,甚至还可以是模板字面量.在ES6引入模板字面量后,就能避免用若干个加号来实现字符串拼接,而改用更为优雅的语法来替代,下面用新旧两种方式分别来组合字符串. var name = "s…

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(),其他三个方法都只会运行一次.…

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

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

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