2017 年里学习 JavaScript 感觉如何?

写给还没开始阅读本文的读者,本文是对《2016 年里做前端是怎样一种体验》的回复。和其他人的回复不同,这篇文章包含了一款app 的完整代码,这款 app 与之前问到的那款类似。

问:

嗨,我拿到了一个新的web项目,但是老实说,我已经有几年没怎么敲过web代码了,而且我读了些文章,发现这几年web开发好像光景大变。你是走在最前面的web开发人员,对吧?

答:

我觉得可以这么说。

问:

很酷啊。我需要创建一个能够反映用户最新活动的页面,所以我仅需从REST终端获取数据,然后在某种过滤表中进行展示,并且当服务器发生变化时及时更新数据即可。我在想是不是可以用jQuery来获取和展示数据呢?我知道有更新的框架,但是这些框架我越了解反而越困惑。

答:

jQuery难道不是几年前导致你不做web开发的原因吗?

问:

嗯,我觉得自己没做对,搞不清楚为什么自己的app总是状态诡异,也许你能帮我更好地梳理组织jQuery代码,这样就不会总是麻烦重重了。

答:

谁都会遇到这种事,为了应对变化多端的事件,用jQuery时会改变DOM结构,有的时候事件的处理顺序与我们所想的大不相同,所以对于如何进入一种特定的状态,你绝对会感到大惑不解。

问:

你不会想说服我,让我重返web开发之路吧。

答:

等一等,听我说完。有了现代web框架,你的代码仅需反映数据状态是如何映射到web网页的,这就一下子没那么难懂了。

问:

好的让我来考虑一下……难道不是每次数据一发生变化就重绘一次网页吗?我猜这样也能讲得通,我的用户都呈现在桌面上,所以这没什么大不了的,但是听上去这样会导致移动浏览器运行速度极慢。

答:

并不需每次都重绘网页,现代框架非常智能,它能够理清DOM哪一部分发生了变化,然后只处理这一部分。

问:

这挺有意思的。那我应该选用哪一种框架呢?使用的重头是React, Angular and Ember,对吧?

答:

它们都很好用,如果你想在Handlebars写前端逻辑,用Ember;如果你想用HTML属性写前端逻辑,用Angular或Vue;如果你想用Javascript写前端逻辑,用React,Mithril or Inferno。

问:

我猜一般会用Javascript,但是难道React不用其他的吗……像JSX?

答:

JSX仅是Javascript的一种语法扩展,它可以让你使用HTML标签,从而免于因为写代码而生成DOM元素。

问:

只用JavaScript开发有什么问题呢?

答:

其实没什么大不了的问题,实际上Mithril的文件都是Javascript,我也才发现给一直做HTML/CSS的人提供JSX代码时,获得的反馈要比给他们纯Javascript代码时要好得多。

问:

纯Javascript?我很高兴我并不是唯一一个对JSX没有完全适应的人。你说的都让我想试一下Mithril了,Mithril很流行吗?

答:

它太流行了,不会突然消逝,但是和更大的框架相比,它的流行程度还相差甚远。我最近实际上正在用Ember写一个非常霸气带感的web app。但是考虑到Ember隐藏了一些特定的、我希望你在加速开发的过程中能够直接看见的东西,所以我会很高兴向你展示如何使用Mithril来运行app。

问:

太好了!几小时后我们建立的时候,你能给我展示一下如何建立所有的库、scaffolding和boilerplate代码吗?现在哪种模块打包工具更好用呢,webpack还是browserify?我不得不承认,安装过程是现代web开发当中最让我有压力的。

答:

目前这些你都可以全部跳过,一旦你对现代web开发的主体有了一定的认识和感觉,你仅仅复制一下我做的就可以了,除了babel和rollup之外也没什么了。搭建系统真的只是设计一个现代web app工程中很小的一部分。

问:

全部跳过?但我想让我的web app实际正常运行。

答:

你可以让它正常运行,我向你展示一下。我们现在用Mithril写你的app代码,你说它是一张过滤表,对吧?我们来把planets.html做成一张planets的过滤表。

问:

好吧,你来告诉我Mithril 是什么。另一个库?Babel是什么?

答:

Babel让你使用一些浏览器不支持的现代Javascript语法,你不是非用它不可,但它能让你不用去管浏览器不支持什么,只管敲代码。

问:

哦等等,实际上我读到过这些内容,在浏览器中运行转译器不是不好吗?

答:

是不好,转译器会增加显著的延迟,但是为了学习,用转译器有什么不行的呢?过后是很容易再改的。现在我们通过建立app的状态,开始写planets.jsx文件。

问:

要告诉你的是,我20分钟后要去开会,从我所读到的来看,你一开始说“状态”,那么事情就要变复杂了。也许我们下次可以应该探讨Redux、Flux等。

答:

你写app用到它们的时候,我们可以聊聊。对于这个app,你只需要两个变量:planets数组和一个过滤函数。

问:

等等,变量不是应该设为var,并且不能设为let吗?

答:

它们是一样的,除非let像C或Java中的变量一样有块级作用域,没有什么hoisting。

问:

这样确实已经有一段时间了,我都已经忘了hoisting了。

答:

你可以继续进行,也不用管它,给可能需要再指定的变量定义为let,给其余的定义为const就行了。

问:

你说第二个是过滤函数,箭头是否只是老式函数声明的一种简写呢?

答:

是的,箭头函数和老式带bind(this)函数的语法几乎一样。

问:

哦是的,我记得你曾经过添加bind(this)帮我通查找并修复过漏洞,我想我会喜欢这些箭头函数的。

答:

我打赌你会的,现在我们写一下你app的顶层组件。

问:

那个一定是新的ES6类语法,我喜欢它的外观形式,但我不确定HTML和Javascript混在一起会怎么样。

答:

不要将JSX看作混杂进Javascript的HTML,它和hyperscript,也就是创建HTML元素的Javascript是等价的。有很重要的一点要理解:它所编译的Javascript不会生成字符串;它产生的是元素的实际结构,比如说如果你的标签是不平衡的,就不会进行编译。

问:

好吧,我需要点时间来看看我是否会喜欢它。接下来,你能给我展示一下PlanetTable组件吗?

答:

当然,这个的确是你app的核心。

多数情况下它的内容只是静态的,但你写的这一行简洁地描述了你app要干的事,要用到planets的一个数组,进行过滤,仅显示应该显示的,而且被过滤的数组会映射到HTML表中的行上。

问:

哦,我想我现在搞懂了!JSX语法只是Javascript的一种表现形式,所以我可以随心所欲地操控它,我猜PlanetRow 组件会变得非常简单,对吗?

答:

是的,多亏了解构赋值,它可能会比你想象的更加简单。

问:

OK,所以我猜你就是用vnode.attrs.planet来获取传入的planet属性的,只需写一行,带个等号,就行了,所以一定……哇,解构赋值,这么长时间你都跑哪儿去了?

答:

我给你说,Javascript要比过去变得有意思得多啦。我在这给你展示一下,甚至当你仅考虑简洁性这一点时,箭头函数都非常好用。

问:

好的,我知道你讲的情况了,它们都是过滤函数,但我打赌所牵扯的事件处理器不可能那么简洁。

答:

就那么简洁,就是有点抽象。

答:

但你需要去开会,又想看它的效果。既然你提到,你需要从服务器中获取数据,那我来把一些数据扔到一个单独的planets.json文件中去。而且现在我们只要通过代码就能获取数据,然后把它们存到方便app获取的地方,进而积累组成顶级组件。瞧,能用了。

问:

真的吗,这就完了?哇,去年的时候还感觉难得让人望而却步!我得赶紧跑着撤了,但我确实真的对重拾Javascript充满期待,太感谢啦!

答:

当然,任何时候都欢迎找我探讨!

衷心感谢Biagio Azzarelli, Ben Chauvette, Garrick Cheung and Patrik Johnson对这篇文章的草稿给予的反馈意见。

1 1 收藏 评论

关于作者:dimple11

简介还没来得及写 :) 个人主页 · 我的文章 · 15

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部