Press "Enter" to skip to content

刘建文 | Nakeman.cn Posts

Featured

2019年终总结

去年总结,我在展望新年时做了一个小小的预言,就是2019年会重新进入职场,而直到写年终总结为止,未兑现结果。对于这个事实,我想说的是, 其实一直以来我都是个看重过程实质,而轻视表面上结果的人。比如说,开发者的实质就是技术水平,2018年底,我的软件开发水平是稳定的,随着学习会稳步增长,但是不会突飞猛进。能力是我个人的,进展也是我个人的,跟进不进企业,没有关系。进了企业公司,我只是多一份收入,学习的方向会有所调整,仅此而已,正所谓幸福不会突然降临,我的人个水平,不会因为进了集体有某种跳跃。我不担心是否在职这个事实。

再说,进入了集体,有了保障也会失去一定的得个人自由,商业资本不会让你按自己的想法随意创造的,商业资本会让你用个人自由来兑换收入。 总言之,2019年我个人专业水平是有很大进展的,进职场也是可见未来内可期的。

Featured

JS开发者进阶的十项技能

有一种引人思索的事实,就是在职的开发者不必全知全会,就可入岗;这个事实存在合理性的前提是:

  • 第一,不完全掌握只影响效率(时效低,产品质量差),不代表无能;没有,你可以现学;不够不好,你可再改善;
  • 第二,软件工程复杂度超出单个人;
  • 第三,团队互补;

所以更实际的情景是,你的专业技能越来越完满(通过有效的学习),从团队的一个角色跃进到另一个角色。

作为一名JS入门者,如何进阶,从一个次要的角色转变为更有价值的角色,对他们来说非常重要。我以为  Ben McCormick的《Ten Things A Serious JavaScript Developer Should Learn》作了一个尝试,尝试列出了JS进阶的技能清单,我觉得很有趣,于是略译出来。

React 开发中的代码复用技术:继承、构成、装饰和混入

(本文略译自《 Reusable Code In React: Inheritance, Composition, Decorators and Mixins》)

React 是我用过的最好用的UI库,如果你能突破传统旧Web开发观念,并熟悉了 React 的观念和开发模式一定会同意我的看法。好用的最主要原因,是 React 支持数种 代码复用 技术。本文将介绍 React 如何支持 四种代码复用技术,我们以一个计数器(counter)UI作为例子讲解。

Inheritance

继承或类继承 是 传统面向对象构造术 的最主要 代码复用技术。对于像 有Java 背景的人来说,继承是非常熟悉的,但是对JS开发者来说,则是相对陌生一点。类继承技术的特征是,对 某既有的类 进行功能扩充,包括数据或方法[em]

React refs使用指南

(本文略译自《A guide to React refs: useRef and createRef》)

本文,我们将探究React的一个设计——全面抽象封装了DOM的操作,又开了一个小门给开发者直接操作DOM。

作为新的第二代UI库,React将DOM的操作进行抽象封装,引入了一种新的开发模式——SPA由一个个带状态的 View组件 组成,开发者将 交互功能 理解成 View的状态的变更 的结果[em],这个观念改变是突变的。

EM:View的状态(state)或形式(props)变更都会触发重渲染,都会产生 某种交互输出的效果(交互功能的实现),但性质完成不同。从名字上就可以看出来,一个是交互计算(state),一个交互辅助(props),例如用props去初化一个新子V,会产生交互输出的效果,但不是交互计算。

当我们习惯了这个新模式后会发现,过往的同样的任务(开发交互功能),使用View组件在 分析设计和实现 上都比较原来 DOM命中模式 更好。

不过,React团队非常的有远见,就像其它代码库作者一样,想到了:为特殊情况开一后门(逃生门),这扇“逃生门”就是 Refs。

尝试总结SPA V理论解释 React 技术

陆续不断学习React有一阵子了,但对于React 作为一支View库工具,它的技术(工具)特性和和针对的任务都还没有达到一种通透的控制感。这里边,我想除了项目实践经验不多,主要还是我对有关V(SPA V)的理论的不成熟。翻了下研究路经,其实在一个多月前已经对V理论有了相当的归纳:

这里的研究还停留在逻辑的抽象分析,并没有结合React API,对React的工具特性进行解释。最近对React的实际开发任务(包括VV功能制作,和VV功能复用)有了更多的经验,可以进一步推进它了。

JS语言是不是面向对象的?(研究片断)

我计划要写两篇文章。第一篇,阐述JS语言是不是面向对象的,和JS是否支持工程模块化;第二篇,讲一种阅读React源码项目的技术

第一篇,阐述的步骤

  • 1 为什么要面向对象,
  • 2 面向对象的标准特征是什么,
  • 3 JS有没有,以及如何实现这个特征。

同样,

  • 1 为啥要模块化,
  • 2 什么是模块化,
  • 3 以及JS如何做的

怎么阅读一个React SPA WGP源码项目(研究片断)

# 为啥研究源码阅读的技术?

1 读懂是模仿,和创作的前提基础,就像一般人都能阅读文章,但写不出文章,阅读比写作更基础。

2 写文章标志扎实的掌握最近学到的知识和技术

3 阅读的技术,其实对WGP理论和开发技术的掌握程度的检测,和考证

4 阅读(学习)源码,模仿源码(维护项目),和创作(开启新项目),是三种能力水平

React Context API是什么以及基本使用

React Context API 是 针对所谓 状态管理(state management)[em] 而设计的API。 Context API 以一种更直接有效的方式解决了早期使用 props 来处理嵌套UI的状态共享的问题。

EM:单一的V只有状态,没有状态管理,状态管理只有在复合的Vx组件中才有。

那什么是 状态管理呢? Context API 优于props的地方在哪里呢?Context API 又如何使用呢?

本文摘译自《React Context API: Using React Context with APIs effectively》。

UI状态管理技术

实际应用中的React 程序,它的交互UI都是复杂的,有着复杂的嵌套层次关系,这些嵌套的UI组件都需 共享中间计算数据(状态),甚至是计算功能(函数)来实现交互功能。

目前有三种 实现共享中间计算数据 的技术:

第一,是组件的模板参数 props。这个方法最大的优点是直观,缺点是当组件层次较复杂时没有针对性,计算不相关的组件可能会看这个props。还有一个问题,就是props形式参数,它不是用来“通信”共享数据的,有可能螺丝刀当锤子用(待证);

React 两个基础的组件设计模式

今年(2020)我围绕着一个很关心的主题花了很多时间,它就是程序结构设计师(常叫架构师),有了相当多的结论,其中除了对这个专业(基础技术和职责)有了更深的认识外,还在其基础上,上升到对整个软件项目中四个专业(功能,结构,开发和管理)有了新认识。然而,实际的项目实践中,我们大部分的工作,它性质其实都是开发,而不是结构设计。因为优秀的结构设计已经集成在各种库和应用框架之中,我们拿来即用,除非我有能耐,可以对像React这样的框架进行调优,为社区作出贡献,否则,作为一名日常的开发者,他的大部分价值,都体现在技术开发。

所以,如果有一个发展方向的问题,基础方向(至少当下)是SPA技术开发者,而不应该是WGP结构设计师,那可以是一更远的方向,以当下的方向为基础。

作为技术开发者,它的专业任务可概括为,对由设计师提供的结构设计案进行分析,结合SPA理论,设计出某种具体的代码实现方案。作为React 技术发开者,他可选的技术,是React 各种API,例如函数组件和类组件API。

我们可以从任务的方向发现React 技术发开者的需要专业技能。其中一种任务是复合的交互UI(Vx)。对一个经验丰富的React 开发者,他应该知道日常中开发任务,是针对某个交互功能进行组件分割。最困难的设计任务,是选择合适的组件,以满足项目代码可维护性,可扩展性等质量要求。

组件设计的模式是React 技术发开者的专业技能,本文介始了最基本两个组件设计模式。本文略译自《Component Composition in React 》。

如何用React Hook开发带状态的SPA V组件

把WEB UI分立为一个个带状态的 V,是一个概念革命,因为开发者工作时看到的变量语句函数,就像建筑工人上班时看到的是水泥沙石钢筋,这是一种低层次的作业水平。

把SPA看成一个个V,就像把建筑看一个个独立的生活空间,而不是水泥钢筋。所以学习造V 和Vx,就像学习造生活空间。我们工作处理的是水泥钢筋,变量语句,心中指引我们的,是生活空间,和V逻辑。

EM:把一座大厦建筑比较一个SPA,大厦的「功能空间」比作会话,具体「生活空间」比作会话步骤,是非常相似的。

前一文,我们学习了如何使用React 提供的最基本的 V制作工具—— Component 基类——制作带状态的V组件(主要使用 Component.setState API),本文将介绍React 最新V制作技术——Hook来 完成同一个任务。本文部分内容摘自《How To Manage State with Hooks on React Components》。

如何用React的 Components Class 开发带状态的SPA V组件

把WEB UI分立为一个个带状态的 V,这是一个概念革命,因为早期的WEB开发是一堆 HTML DOM CSS JS技术概念的零散组合。V 不是一定要有状态的,但是有状态的V才是完整的,不带状态只是它的一种特例。

本文就是讲 如何用React开发SPA V组件,只是重点介绍的是「V的INTEL形式属性」的实现技术。V组件有状态,和复合V的需要状态管理,是两个任务;V组件形式 有状态属性,是,使用多个基础V制作复杂的V,对复杂V进行状态管理的基础。

本文略译自《How To Manage State on React Class Components》,作者:Joe Morgan

Introduction

在一个程序里(React 程序),状态(state)是指程序在运行过程中的某个特定的数据或数据结构[em1]。状态管理的技巧 是开发应用程序(包括React程序)的重要技能,因为很多 高级交互功能 需要复杂的状态数据。状态(state)的概念是宽泛的,既可指表单控件(inputs)的输入值,也可指系统API的动态参数。本教程,我们将学习通过「React 类组件」管理交互状态,或者说学习管理「React 类组件」的交互状态[em2]

从零开始为Web项目定制构建系统(四)——Hello XXXX的SPA版(下)

前一课小结SPA理论和工作前提,现在开始本课正题——多页网站改造为单页应用(MPA的SPA改造)。

根据前面的理论的指引,我们的改造概略以下几点:

  • 第一,将网页(或部分交互功能)转换为JS view对象,「界面渲染」 转到前端(使用JS 动态操作DOM);
  • 第二,创建全局的JS router对象,负责应用会话导航,将 「会话路由」 转到前端;
  • 第三,创建一个app的对象,表征应用程序主体,管理(初始化)前两个对象;

我们再看看这个常规完整的SPA体系结构图:

服务端交换和 Model都不是必须,本课简单交互功能不需这些组件。