为啥做 JS 开发很疯狂？？？

558 查看

Web开发时很有趣的~但是Javascript确是……令人生畏的。

Web开发中其他一切对你而言都是很简单的，但是当你深入探究Javascript的时候，就会有一种“众人皆醒你独醉”的感觉，好像你不知道其他人都知道的一些重要的基础知识内容，并且这些内容可以帮助你理解所有知识。

事实是，的确如此，你遗漏了一些解决问题的重要片段。

并且，前端开发确实已经进入了疯狂的状态了。

不仅仅是你。

拉过一把椅子，坐下来。是到开始写Javascript应用的时间了。

第一步是搭建本地开发环境并跑通它。那么是使用 Gulp？还是 Grunt？等等，好……好像还有 NPM script！

WebPACK？还是 Browserify？（羞涩的）Require.js？升级到 ES6？或者为你的项目添加 Babel 支持？

BDD 还是常规的单元测试？应该使用什么断言框架？从命令行运行测试显然很棒，所以 PhantomJS 也是不错的选择？

Angular 还是 React？还是 Ember？再或者 Backbone？

你看了一些 React 文档，“Redux 是一种为 Javascript 应用提供的可预测状态的容器。”酷毙了！你肯定需要其中的一个。

为什么构建 Javascript 应用会如此疯狂？！？

让我来告诉你为什么这一切是如此疯狂。让我们从一个例子开始，后面会有漂亮的图片。

这是 React 的“Hello, world!”应用。

// main.js

var React = require('react');

var ReactDOM = require('react-dom');

ReactDOM.render(

<h1>Hello, world!</h1>,

document.getElementById('example')

);

Not quite done. 不止这些。

1 2	$ npm install --save react react-dom babelify babel-preset-react $ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

实际上这里还缺了几个步骤，例如安装 browserify，以及在你做好之后还要让它运行在网页上，因为这其实不会直接产生一个能有什么内容的网页。 ¯ （ツ） /¯

在完成这些之后，你最后还需要一个名为 bundle.js 的文件，这个文件包含新的 React Hello World 应用程序，这个程序有 19374 行代码。而你只需要安装 browserify、babelify 和 react-dom 即可，它们会帮你生成成千上万行的你不了解的代码，想想吧。

所以基本上是像下面这样的：

Marc was almost ready to implement his "hello world" React app pic.twitter.com/ptdg4yteF1

— Thomas Fuchs (@thomasfuchs) March 12, 2016

好，下面就让我们用简单的 Javascipt 代码写一个 Hello World 应用。

<!DOCTYPE html>

<head>

<title>Hello World</title>

</head>

<body>

document.body.onload = function(){

var container = document.getElementById("container");

container.innerHTML = '<h1>"Hello, world!"</h1>';

}

</script>

</body>

</html>

这就成了。一共 18 行代码。你可以复制/粘贴到 index.html 文件中，双击把它加载到你的浏览器中。搞定。

此时你肯定会说：“等等，React 能做的事情比你刚刚写的这个小玩意更多，并且你不可能用那种方式写一个 Javascript 应用！”（大多数情况下）你是对的，但你还需要走一小步才能理解为什么一切都疯了。

下面是我承诺过的图片。

绝大多数你开发的Javascript web应用程序，会落在钟形曲线中部的某个位置。一定会在中间部分，如果你从一个完整的 React 堆栈开始，那么从一开始你就过度设计了你的应用程序。

这就是为什么一切都变得疯狂。其中的大多数工具你觉得是你解决问题所必须具备的，但是你一直没有碰到这样的问题，而且以后你永远也不会碰到。

同一张图片：

bell_curve_2

因为在默认情况下，每个人都过度设计他们的应用，他们却意识不到这一点，使得 Javascript 的开发状态变得过于繁冗。

你应该如何启动 Javascript 应用程序呢？是否应该使用一些类似 React 或 Angular 的工具？是否应该使用软件包管理器？如果你不这样做，你应该做什么？测试有必要吗？是否应该用 Javascript 生成标志？所有这些都是你应该好好问问自己的问题，在启动默认的庞大的技术堆栈之前。

当你启动一个 Javascript 应用程序时，关键是要在钟形曲线上挑一个点，这个点刚好位于你认为这个应用最终可能会到达的复杂程度的前面。

我不会撒谎，验证这一切需要经验。但是这里有一个不错的点可以让你启动大多数的 Javascript 应用程序：jQuery 加上客户端模板，以及用于连接和缩减产品文件超级简单的构建工具（假如你的后端架构还没有这样做的话）。

如果你知道如何正确地构建 Javascript 应用程序，那么你就会开始懂得怎样、何时以及为什么使用框架或 npm/requir/webPack 或 ES6，什么时候编写测试，什么时候应该费心让你的测试本地运行，什么时候运行在浏览器中，所有这些问题都会搞定。

有兴趣用你的 Javascript 开发知识填补那些空白？想要避免不堪重负的感觉？想要避免在这个开发过程中过度设计你的 Javascript 应用程序？那是我下个月将要专注讨论的内容，所以，敬请期待，在一两周后会有更多干货到来！