暂时未有相关云产品技术能力~
每天进步一点点 研磨生活的香甜
我于2007年参加高考,顺利考入一所男女比例严重失调的师范大学,主修计算机科学与技术。其实高中的时候本来想选生物的,可惜报生物的人太少,就没有开班,后面选修了化学。原计划是想学高分子材料相关专业的,怎奈高考分数太低,没有考上相关的大学。第二志愿填写的是计算机相关的学校,当初并不知道这个专业是编程,以为是修理电脑的。因为自家电脑老是这个那个的问题,所以就义无反顾的报考了计算机专业。填志愿的时候没有什么伟大的理想,也没有什么周密的计划,就是随意的这么一填,没想到现在就靠这个吃饭了。
Vuex是一个专为Vue.js设计的状态管理库,适用于多组件共享状态的场景。Vuex能集中式的存储和维护所有组件的状态,并提供相关规则保证状态的独立性、正确性和可预测性,这不仅让调试变得可追踪,还让代码变得更结构化且易维护。本文所使用的Vuex,其版本是3.1.1。
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持。它与Vue.js深度集成,可快速的创建单页应用(Single Page Application,SPA)。
除了可通过模板创建HTML之外,Vue还提供了渲染函数和JSX,前者的编码自由度很高,后者对于开发过React的人来说会很熟悉。注意,Vue的模板最终都会被编译成渲染函数。
组件之间除了保持独立之外,还需要相互通信,本章将介绍几种通信的方式。
组件是可复用的Vue实例,拥有属于自己的数据、模板、脚本和样式,可避免繁重的重复性开发。由于组件都是独立的,因此其内部代码不会影响其它组件,但可以包含其它组件,并且相互之间还能通信。
Vue对DOM元素的class和style两个特性做了专门的增强,即对CSS类和内联样式做了一层封装,通过v-bind指令来处理它们,而接收的表达式既可以是简单的字符串、对象或数组,也可以是复杂的计算属性。不仅如此,Vue还为表单设计了一些语法糖,让表单处理变得尤为简单。
Vue不仅内置了各类指令,包括条件渲染、事件处理等,还能注册自定义指令。
Vue躬行记(1)——数据绑定
每次阅读外文技术资料都头疼,终于知道原因了。
前端利器躬行记(6)——Fiddler
Git是一款开源的分布式版本控制系统,它的出现和Linux紧密相关。Linux内核项目组为了能更好地管理和维护Linux内核开发,于2002年开始启用商业的分布式版本控制系统BitKeeper。虽然软件开发商授权了Linux社区能免费使用,但是好景不长,到了2005年,BitKeeper的开发商由于某些原因终止了与Linux社区的合作关系。于是Linux的作者Linus Torvalds就决定开发一款能替代BitKeeper的分布式版本控制系统(即Git),在花费十天的时间后发布了Git的第一个版本。
webpack是一个非常强大的工具,除了前文所介绍的基础概念之外,还有各种进阶应用,例如Source Map、模块热替换、集成等,本文会对这些内容做依次讲解。
webpack是一个静态模块打包器,此处的模块可以是任意文件,包括Sass、TypeScript、模板和图像等。webpack可根据输入文件的依赖关系,打包输出浏览器可识别的JavaScript、CSS和HTML等文件,并且能对图像做优化处理,如图1所示。
前端利器躬行记(2)——Babel
前端利器躬行记(1)——npm
在网络工程中,路由能保证信息从源地址传输到正确地目的地址,避免在互联网中迷失方向。而前端应用中的路由,其功能与之类似,也是保证信息的准确性,只不过来源变成URL,目的地变成HTML页面。
React躬行记(12)——Redux中间件
高阶组件(High Order Component,简称HOC)不是一个真的组件,而是一个没有副作用的纯函数,以组件作为参数,返回一个功能增强的新组件,在很多第三方库(例如Redux、Relay等)中都有高阶组件的身影。由于遵循了装饰者模式的设计思想,因此不会入侵传递进来的原组件,而是对其进行抽象、包装和拓展,改变原组件的行为(图9形象的表达出了高阶组件的作用)。这样不仅增强了组件的复用性和灵活性,还保持了组件的易用性。灵活使用高阶组件,可大大提高代码质量。
根据组件之间的嵌套关系(即层级关系)可分为4种通信方式:父子、兄弟、跨级和无级。
由于React推崇组件模式,因此会要求HTML、CSS和JavaScript混合在一起,虽然这与过去的关注点分离正好相反,但是更有利于组件之间的隔离。React已将HTML用JSX封装,而对CSS只进行了较弱的封装,仅仅给出了基本的样式设置。不过,好在第三方库提供了CSS in JS的解决方案,让开发者能更高效的书写组件的样式,促进CSS工程化的发展。
React在原生事件的基础上,重新设计了一套跨浏览器的合成事件(SyntheticEvent),在事件传播、注册方式、事件对象等多个方面都做了特别的处理。
表单元素是一类拥有内部状态的元素,这些状态由其自身维护,通过这类元素可让用户与Web应用进行交互。HTML中的表单元素(例如<input>、<select>和<radio>等)在React中都有相应的组件实现,不仅如此,React还将它们分成两种:受控组件和非受控组件。
React实现了一套与浏览器无关的DOM系统,包括元素渲染、节点查询、事件处理等机制。
组件的生命周期(Life Cycle)包含三个阶段:挂载(Mounting)、更新(Updating)和卸载(Unmounting),在每个阶段都会有相应的回调方法(也叫钩子)可供选择,从而能更好的控制组件的行为。
组件(Component)由若干个React元素组成,包含属性、状态和生命周期等部分,满足独立、可复用、高内聚和低耦合等设计原则,每个React应用程序都是由一个个的组件搭建而成,即组成React应用程序的最小单元正是组件。
JSX既不是字符串,也不是HTML,而是一种类似XML,用于描述用户界面的JavaScript扩展语法,如下代码所示。在使用JSX时,为了避免自动插入分号时出现问题,推荐在其最外层用圆括号包裹,并且必须用一个元素包裹(例如下面的<div>元素)其它元素或文本,所有的元素还必须得闭合。
函数式编程是React的精髓,在正式讲解React之前,有必要先了解一下函数式编程,有助于更好的理解React的特点。函数式编程(Functional Programming)不是一种新的框架或工具,而是一种以函数为主的编程范式。编程范式也叫编程范型,是一类编程风格,除了函数式编程,常用的还有面向对象编程、命令式编程等。
最近找到了一本有趣的书《程序员健康指南》,此书关注的重点不仅在于预防软件开发者短期的物理并发症,还在于长期保持心血管的健康。那些长时间对着电脑工作、一天下来基本不怎么走动的人,患高血压及2型糖尿病的风险远高于其他人群,这两种疾病会对人体的健康产生长久的严重影响,还会增加心脏病及中风的几率。
经常会在群里或论坛上看到有人问:“学习前端有什么捷径?”,一般都是卖油翁式的回答:“无他唯手熟尔”。那么该如何让手熟练呢?其实也就是该如何系统的学习前端。在本文中,我会结合自身的经历,分享一下自己学习前端的过程,期间会穿插引用我过去各个阶段所写的博文。
代理和反射是ES6新增的两个特性,两者之间是协调合作的关系,它们的具体功能将在接下来的章节中分别讲解。
Promise有四个静态方法,分别是resolve()、reject()、all()和race(),本节将着重分析这几个方法的功能和特点。
在JavaScript中,回调函数是处理异步编程的常用解决方案,但层层嵌套的回调金字塔(如下代码所示)一直受人诟病,因为不仅在视觉上更加混乱,而且在管理上也更为复杂。
ES6的继承依然是基于原型的继承,但语法更为简洁清晰。通过一个extends关键字,就能描述两个类之间的继承关系(如下代码所示),在此关键字之前的Man是子类(即派生类),而在其之后的People是父类(即基类或超类)。
ES6正式将类(Class)的概念在语法层面标准化,今后不必再用构造函数模拟类的行为。而ES6引入的类本质上只是个语法糖(即代码更为简洁、语义更为清晰),其大部分功能(例如继承、封装和复用等)均可在ES5中实现,只不过现在能用更符合面向对象的语法来操作类。但诸如接口、protected修饰符等一些面向对象常用的语法,ES6没有给出相关标准。
根据ES6制订的标准自定义迭代器实现起来比较复杂,因此ES6又引入了生成器的概念,生成器(Generator)是一个能直接创建并返回迭代器的特殊函数,可将其赋给可迭代对象的Symbol.iterator属性。与普通函数不同,生成器不仅可以暂停函数内部的执行(即维护内部的状态),在声明时还需要包含一个星号(*),并且拥有next()、return()和throw()三个迭代器方法。
ES6将迭代器和生成器内置到语言中,不仅简化了数据处理和集合操作,还弥补了for、while等普通循环的不足,例如难以遍历无穷集合或自定义的树结构等。
Map类似于Object(对象),可用来存储键值对,但需要通过SameValueZero算法保持键的唯一性。与Set一样,在使用之前也得要实例化,如下代码所示,构造函数Map()中的参数也是一个可选的可迭代对象,但此对象得是键值对的集合或两列的二维数组。
ES6引入了两种新的数据结构:Set和Map。Set是一组值的集合,其中值不能重复;Map(也叫字典)是一组键值对的集合,其中键不能重复。Set和Map都由哈希表(Hash Table)实现,并可按添加时候的顺序枚举。
箭头函数(Arrow Function)是ES6提供的一个很实用的新功能,与普通函数相比,不但在语法上更为简洁,而且在使用时也有更多注意点,
在前面的章节中,已陆陆续续介绍了ES6为改良函数而引入的几个新特性,本章将会继续讲解ES6对函数的其余改进,包括默认参数、元属性、块级函数和箭头函数等。
类型化数组(Typed Array)是一种处理二进制数据的特殊数组,它可像C语言那样直接操纵字节,不过得先用ArrayBuffer对象创建数组缓冲区(Array Buffer),再映射到指定格式的视图(view)之后,才能读写其中的数据。总共有两类视图,分别是特定类型的TypedArray和通用类型的DataView。在ES6引入类型化数组之后,大大提升了JavaScript数学运算的性能。
ES6为数组添加了多个新方法,既对它的功能进行了强化,也消除了容易产生歧义的语法。
在ES5中,如果使用构造函数RegExp()初始化RegExp对象(即正则表达式),并且它的第一个参数是正则表达式时,那么不允许再传入标志字符串(即第二个参数)。而ES6更改了这项限制,如果传入了第二个参数,那么就会取代第一个参数中的标志,如下所示。
在介绍字符串之前,有必要先了解一点Unicode的基础知识,有助于理解ES6提供的新功能和新特性。
ES6不仅完善了数字的八进制形式,还补充了一种十六进制形式,并且添加了全新的二进制形式。下面的三个变量分别表示八进制、十六进制和二进制的10,注释中给出了该进制的另一种写法。
在ES6之前,由于ECMAScript不具备模块化管理的能力,因此往往需要借助第三方类库(例如遵守AMD规范的RequireJS或遵循CMD规范的SeaJS等)才能实现模块加载。而自从ES6引入了模块化标准后,就不需要再特地加载一次外部脚本了。模块化的语法不仅让JavaScript代码的组织变得更有条理,还包含封装、按需导出或导入等实用功能,可轻松应对日益复杂和庞大的前端工程。但有一点要注意,模块中的代码默认运行在严格模式中。
本节将会重点分析ES6引入的第6种基本类型:Symbol(符号)。符号可以像字符串那样作为对象的属性名,只是它有唯一性的特点,可以避免属性名之间的冲突。
当创建对象字面量时,如果属性值是与属性同名的已定义的标识符(例如变量、常量等),那么ES6允许省略冒号和属性值,这样就能避免冗余的初始化。下面分别用传统的键值对和最新的简写方式创建对象字面量,可以明显的看出,第二种书写起来更加精炼。
模板字面量(Template Literal)是一种能够嵌入表达式的格式化字符串,有别于普通字符串,它使用反引号(`)包裹字符序列,而不是双引号或单引号。模板字面量包含特定形式的占位符(${expression}),由美元符号、大括号以及合法的表达式组成,合法的表达式(expression)可以是变量、算术或函数调用,甚至还可以是模板字面量。在ES6引入模板字面量后,就能避免用若干个加号来实现字符串拼接,而改用更为优雅的语法来替代,下面用新旧两种方式分别来组合字符串。