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

时间 2021-01-11

标签 html 前端 react web npm 后端浏览器 babel 架构 app 栏目 JavaScript 繁體版

原文原文链接

Web开发时颇有趣的~可是Javascript确是……使人生畏的。html

Web开发中其余一切对你而言都是很简单的，可是当你深刻探究Javascript的时候，就会有一种“众人皆醒你独醉”的感受，好像你不知道其余人都知道的一些重要的基础知识内容，而且这些内容能够帮助你理解全部知识。前端

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

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

不只仅是你。npm

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

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

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

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

Angular 仍是 React？仍是 Ember？再或者 Backbone？app

你看了一些 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')

  );

不止这些。

$ 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>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

    <title>Hello World</title>

  </head>

  <body>

    <div id="container"></div>

    <script>

     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 堆栈开始，那么从一开始你就过分设计了你的应用程序。

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

同一张图片：

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

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

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

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

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

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