为什么说 JavaScript 开发很疯狂

时间 2019-11-08

标签为什么 javascript 开发疯狂栏目 JavaScript 繁體版

原文原文链接

【编者按】本文做者为 Sean Fioritto，主要阐述了 JavaScript 开发为什么让人有些无从下手的根本缘由。文章系国内 ITOM 管理平台 OneAPM 编译呈现。html

网络开发乐趣多多！Javascript 却……让人望而却步。前端

网页开发的其余全部东西都很配合，惟独到了 Javascript，你会感受好像比别人少了一大块基础知识，彻底搞不懂它。react

事实就是，没错，你的确缺了几块拼图。webpack

不过，前端开发的现状其实也很疯狂。es6

并非只有你感到抓狂。

拉把椅子坐下来。该写个 Javascript 应用了。web

首先要搭建和运行本地环境。是用 Gulp，仍是 Grunt，都很差……仍是用 NPM 脚本吧！npm

Webpack 仍是 Browserify？（很差意思地）仍是 Require.js？要升级到 ES6 吗？在预处理中加入 Babel 是否是太过了？浏览器

行为驱动开发仍是常规的单元测试？应该选用哪一种断言框架？若是能从命令行运行测试固然是好事，那何不试试 PhantomJS？babel

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')

  );

这还没完。

$ 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，而后衡量未知的成千上万条代码。

基本上就是这样……

如今用基本的 Javascript 来写一个 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 网页应用基本上都会出如今钟形曲线中间的某个位置。在中间位置，若是一开始你用了 React 全栈，那么你的应用从一开始就极大地违背了设计标准。

这就是为何全部东西都很疯狂。你觉得你必须使用的工具大部分都是为了解决如今未出现，或者永远都不会出现的问题。

再看一下这张图：

Javascript 开发现状让人无措又迷惑，由于全部人并无意识到，在默认状态下，他们的应用已经违背了设计标准。

你该如何开始搭建 Javascript 应用？你应该用 React 或 Angular 这样的工具吗？要是不用该怎么办？测试到底有没有必要？还要用 Javascript 生成标记吗？在开始搭建默认的庞大技术堆栈以前，这些都是你应该回答的问题。开始开发 Javascript 应用时，关键在于在钟形曲线上选取一个点，做为你的应用最终复杂程度的上限。

坦白说，要实现这一点须要经验。不过仍是有不少 Javascript 应用能够借鉴的出发点的：Jquery 加上客户端模板，还有一个很是简单的构造工具，用来链接和减小生产文件（假设你的后台框架尚未这项功能）。

若是你了解了如何正确构造 Javascript 应用，你就会逐渐明白如何、什么时候以及为何要使用框架、npm、require、webpack 或 es6，什么时候要写测试，什么时候应该在本地测试，什么时候应该在浏览器测试，以及其余会出现的问题和麻烦。

本文转自 OneAPM 官方博客
原文地址：http://www.planningforaliens.com/blog/2016/04/11/why-js-development-is-crazy/