2017 学习 JavaScript 感觉如何？

编译： 伯乐在线/dimple11

http://web.jobbole.com/93760/

写给还没开始阅读本文的读者，本文是对《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的过滤表。

Loading...

问：

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

答：

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

问：

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

答：

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

问：

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

答：

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

'use strict';

/** @jsx m */

letplanets;

letplanetFilter=planet=>true;

问：

等等，变量不是应该设为var，并且不能设为let吗？

答：

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

问：

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

答：

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

问：

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

答：

是的，箭头函数和老式带bind（this）函数的语法几乎一样。

问：

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

答：

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

classPlanetApp{

view(){

return(

);

}

}

问：

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

答：

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

问：

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

答：

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

classPlanetTable{

view(){

return(

Name

Composition

Moons

{planets.filter(planetFilter).map(planet=>

)}

);

}

}

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

问：

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

答：

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

classPlanetRow{

view(vnode){

return(

{name}

{composition}

{moons}

);

}

}

问：

答：

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

问：

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

答：

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

classPlanetFilter{

view(vnode){

const{key,func}=vnode.attrs;

return(

onchange={filterHandler(func)}/>{key}

);

}

}

functionfilterHandler(filterFunction){

returnfunction(event){

planetFilter=filterFunction;

}

};

}

答：

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

m.request({url:'planets.json'}).then(data=>{

planets=data;

m.mount(document.getElementById('app'),PlanetApp);

});

问：

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

答：

当然，任何时候都欢迎找我探讨！

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

觉得本文对你有帮助？请分享给更多人

关注「前端大全」，提升前端技能

淘口令：复制以下红色内容，再打开手淘即可购买

范品社，使用￥极客T恤￥抢先预览（长按复制整段文案，打开手机淘宝即可进入活动内容）

近期，北京地区正常发货，但派件时间有所延长。