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

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

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

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

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

不仅仅是你。

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

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

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

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

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

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

扫描二维码关注公众号,回复: 12136218 查看本文章


为什么构建 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 应用!”(大多数情况下)你是对的,但你还需要走一小步才能理解为什么一切都疯了。

下面是我承诺过的图片。
为啥做 JS 开发很疯狂???

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

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

同一张图片:

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

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

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

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

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

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

猜你喜欢

转载自blog.51cto.com/15080022/2588321