暂时未有相关云产品技术能力~
每天进步一点点 研磨生活的香甜
用JavaScript完成页面自动操作
《Javascript设计模式系统讲解与应用》
自上一篇《每次阅读外文技术资料都头疼,终于知道原因了》已过去多月,最近又在做简单的实践,实践方式很朴素,就是对照阅读React官方资料和国内翻译的资料,逐句对比,发现了许多问题,特在此记录。
最近这段时间新型冠状病毒肆虐,上海确诊人数每天都在增加,人人提心吊胆,街上都没人了。为了响应国家号召,近期呆在家里撸码,着手将项目迁移到React中,项目比较朴素,是一张线索提交页面,包含表单、图片滚动等功能。
React可大致分为三部分:Core、Reconciler和Renderer,在阅读源码之前,首先需要搭建测试环境,为了方便起见,本文直接采用了网友搭建好的环境,React版本是16.8.6,与最新版本很接近。
视频开头给出了面试的定义:面试是测查和评价人员能力素质的一种考试活动。具体地说,面试是一种经过组织者精心设计,在特定场景下,以考官对考生的面对面交谈与观察为主要手段,由表及里测评考生的知识、能力、经验等有关素质的一种考试活动。
最近阅读了多篇从面试官的角度看面试的文章,全部记录在了Github上,看完后就想结合自己的经历总结一下,如有不当之处,欢迎留言讨论。本文将分为五部分:简历、自我介绍、问答、提问和2019年求职分析。
装饰器(Decorator)可声明在类及其成员(例如属性、方法等)之上,为它们提供一种标注,用于分离复杂逻辑或附加额外逻辑,其语法形式为@expression。expression是一个会在运行时被调用的函数,它的参数是被装饰的声明信息。假设有一个@sealed装饰器,那么可以像下面这样定义sealed()函数。
TypeScript躬行记(7)——命名空间
本节将对TypeScript中类型的高级特性做详细讲解,包括交叉类型、类型别名、类型保护等。
TypeScript躬行记(5)——类型兼容性
泛型是程序设计语言中的一种风格或范式,相当于类型模板,允许在声明类、接口或函数等成员时忽略类型,而在未来使用时再指定类型,其主要目的是为它们提供有意义的约束,提升代码的可重用性。
类是对对象的抽象,描述了对象的特征和行为,而对象就是类的实例。ES6引入了类的概念(相关内容可参考ES类和ES6类的继承两节),TypeScript在此基础上,不仅根据ES7等规范完善了类的语法,还添加了许多其它语法。而在使用TypeScript的类时,不必关心兼容性问题,因为这些工作已由编译器完成。
在传统的面向对象语言中,接口(Interface)好比协议,它会列出一系列的规则(即对行为进行抽象),再由类来实现这些规则。而TypeScript中的接口更加灵活,除了包含常规的作用之外,它还能扩展其它的类、为对象的类型命名以及约束值的结构等,大大消除了许多潜在的错误。
TypeScript不仅支持JavaScript所包含的数据类型,还额外扩展了许多实用的数据类型,例如枚举、空值、任意值等。
Hook(钩子)是React v16.8新引入的特性,能以钩子的形式为函数组件附加类组件的状态、生命周期等特性。React的类组件有难以拆分、测试,状态逻辑分散,难以复用等问题,虽然可以通过渲染属性(Render Props)和高阶组件来提取状态逻辑,但会形成层层嵌套,而使用Hook后的函数组件就能避免这些问题。
测试不仅可以发现和预防问题,还能降低风险、减少企业损失。在React中,涌现了多种测试框架,本节会对其中的Jest和Enzyme做详细的讲解。
这次也是创业公司,但与以往不同的是,起点很高,起步资金有1500W,而且给我开的工资破万,对我也很有吸引力。这家公司我待的时间蛮长的,有一年半,而且同事之间的感情也比前面两家要好。我在这家公司主要做PHP,兼顾页面的制作。
我的程序员之路——2013年和2014年
我于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提供了一种内容分发技术,可将父组件中的内容传递给子组件的模板,实现方式参照了Web组件规范草案。
组件之间除了保持独立之外,还需要相互通信,本章将介绍几种通信的方式。
组件是可复用的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中间件
Redux是一个可预测的状态容器,不但融合了函数式编程思想,还严格遵循了单向数据流的理念。Redux继承了Flux的架构思想,并在此基础上进行了精简、优化和扩展,力求用最少的API完成最主要的功能,它的核心代码短小而精悍,压缩后只有几KB。Redux约定了一系列的规范,并且标准化了状态(即数据)的更新步骤,从而让不断变化、快速增长的大型前端应用中的状态有迹可循,既利于问题的重现,也便于新需求的整合。注意,Redux是一个独立的库,可与React、Ember或jQuery等其它库搭配使用。
高阶组件(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型糖尿病的风险远高于其他人群,这两种疾病会对人体的健康产生长久的严重影响,还会增加心脏病及中风的几率。