《现代前端技术解析》读后鬼扯
- 别名:前端工程师培养大纲
- 评分:4星
- 作者:张成文
- GitHub:https://github.com/ouvens/
- 豆瓣:https://book.douban.com/subject/27021790/
本书就像它前言中提到的那样,是一本以现代前端技术思想与理论为主要内容的书,类似于大学刚入学发的那本专业培养大纲,总结和梳理了整个前端开发体系,让我们站在一个全局的角度去看待前端这个领域,展示了可供我们深入探索的各个方向。
这类书籍写起来不容易,没把握好很容易就变成博客合集。这本书到底怎么样,见仁见智吧。书中很多原理的讲解都附有代码,不是很复杂,仔细揣摩下都能懂,作者确实是费了些心思的。个人感觉不足的地方有几点,第一个就是对前端构建的工具介绍的不多,我们常见的webpack,gulp等都没怎么提及,另一个是对MVV*模式介绍的过于简单,React Native,weex都没留下只言片语。前端技术发展日新月异,各种工具框架层出不穷,争奇斗艳,让我们这些搞前端的眼花缭乱,真心有些学不动的感觉。
作者的GitHub上有一张 前端知识导图, 一定要看,一定要看,一定要看,重要的事情说三遍。大家可能比较熟悉StuQ出品的 HTML5开发技能图谱,也很全面,但是比前者精简了很多。
本书第一章就回答了一个常见的问题,即我们在浏览器的地址栏输入网址到展示页面这一过程中发生了什么。由此引出了浏览器的组成结构, 介绍了渲染引擎的渲染流程,我们最常见的是webkit内核,渲染DOM的流程如下:
接着是浏览器缓存的话题,有一张图还是很经典,如下: 第二章的内容让我怀疑作者了解Android开发,因为在Hybrid app的介绍中原生的部分都是Android的,对于jsBridge的原理,我之前还花过力气研究过,大家最常见的应该是大头鬼的开源的项目 JsBridge 了,还有其他的实现方法,不过原理都是一样的,但是实现的细节有不同。第三章提及了web Components
这个提上议程的原生组件化标准。其实我们也接触过,比如说 <video>、<audio>
等标签,深入下去你会发现这个其实就是Shadow DOM
。我觉得web Components
的组件化和常用框架的组件化有着很大的区别,前者目的就是为了组件,而后者的目的是高效的同步UI和状态,无论是使用虚拟DOM还是通过观察者检测变化。
大名鼎鼎的ionic
在V4版本中放弃了Angular
,转而使用了Stencil,它是一个把你所写的组件代码最终生成Web Components的编译器。官网上介绍它的特色如下:
- Virtual DOM
- Async rendering (inspired by React Fiber)
- Reactive data-binding
- TypeScript
- JSX
我粗略看了下它的文档,可以说是Angular+React的结合体,上一段他们官网的示例代码,大家体会一下:
import { Component, Prop } from '@stencil/core'; @Component({ tag: 'my-first-component', styleUrl: 'my-first-component.scss' }) export class MyComponent { // Indicate that name should be a public property on the component @Prop() name: string; render() { return ( <p> My name is {this.name} </p> ); } } 复制代码
@Component,render()
这两个看起来很眼熟吧。
第四章介绍了现代前端框架的原理,通过简单的代码粗略实现了双向数据绑定,静下心来看的话,肯定可以懂得,掘金上介绍Vue实现原理的博客很多,可以对照着看。Virtual DOM的设计理念当然是不可或缺的,短短几页内容,深入了解的话,还是不够的。
第五章是前端项目的各种规范,这里我就不得不吐槽一下Angular,官方文档里居然连变量命名都提供了建议,真是够够的。相比Vue和React,Angular真的是管的太宽了,可能唯一的好处就是从java转过来的我对ts有种莫名的好感吧。不过Angular自带的Rxjs真心是好用,让我想起当年写Android的痛苦岁月。
第六章提到了后端直出,这个我没用过,就不鬼扯了。
本书一个有意思的地方是在最后一部分还专门教大家如何成为一个优秀的前端工程师,这个在其他的技术类书籍中确实是少见的。
本书不推荐购买,借阅看两遍就足够了,不过上面的知识导图强烈建议存档的。
前端类图书还是挺多的,有些真的没必要买,看一遍就过去了,有些呢确实是不可或缺的好书,为了防止自己花了冤枉钱,可以办理一张图书馆的借书证,很多书都可以在里面找到,先借阅一番,再来决定是否买。吐槽一下南京的金陵图书馆,号称是排在全国前列,我以为管理有多好,然而有些书的位置压根儿就不对,可以搜到,就是找不到,也是醉了。
原文发布时间为:2018年06月28日
原文作者:JerryMissTom
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
ConstraintLayout 想说爱你不容易!
ConstraintLayout 约束布局 的发布已经很长时间了,小菜用的比较少,测试时看到同事用的 ConstraintLayout 布局方式编辑的 xml,觉得有必要学习一下,并记录一下小菜在学习过程中遇到的小问题。 小菜理解的约束布局是相对布局的升级版,相对位置,更依赖于其他控件位置,关联性更强。 小菜的测试小结如下: 命名空间需要用 xmlns:app="http://schemas.android.com/apk/res-auto" 类似于自定义属性效果;如果只是随意添加一个控件,而不做任何操作,会提示如下: 提醒.png 控件的居中与对齐方式,约束布局中并没有类似于 LinearLayout/RelativeLatout 可以直接设置居中的属性,需要关联周围的布局,相互约束,例如: <LinearLayout android:id="@+id/linearLayout" android:layout_width="0dp" android:layout_height="100dp" android:orientation="horizontal" android:pa...
- 下一篇
Release Flutter的最后一公里
作者:闲鱼技术-凯航 Flutter是一个使用Dart语言开发的跨平台移动UI框架,通过自建绘制引擎,能高性能、高保真地进行Android和IOS开发。在业界还未出现过Base Flutter的大型商业应用实战验证的情况下,闲鱼技术团队在最复杂且重要的商品详情页作了相关的技术实践并取得良好的结果。现尝试通过本文向有兴趣进行类似实践的开发者或团队分享过程中的思考/实践过程。 Flutter特色 面对一系列移动开发技术:IOS、Android、Weex,RN, Kotlin,H5... Flutter究竟特色何在? 开发语言选择 了解过Flutter的都知道,它采用Dart语言进行开发,而并非Java,Javascript这类热门语言,这是Flutter团队对当前热门的10多种语言慎重评估后的选择。因为Dart囊括了多数编程语言的优点,它更符合
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- CentOS关闭SELinux安全模块
- Hadoop3单机部署,实现最简伪集群
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2全家桶,快速入门学习开发网站教程
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- MySQL8.0.19开启GTID主从同步CentOS8
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2整合Redis,开启缓存,提高访问速度