管理平台,我们建议在 必威React 中使用 CommonJS

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

2016/06/08 · JavaScript · 2 评论 · 开发

本文由 伯乐在线 - 小谢 翻译,cotton 校稿。未经许可,禁止转载!
英文出处:sfioritto。欢迎加入翻译组。

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!”应用。

JavaScript

// main.js var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );

1
2
3
4
5
6
7
8
// main.js
var React = require('react');
var ReactDOM = require('react-dom');
 
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
  );

Not quite done. 不止这些。

Shell

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

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 即可,它们会帮你生成成千上万行的你不了解的代码,想想吧。

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

JavaScript

Marc was almost ready to implement his "hello world" React app pic.twitter.com/ptdg4yteF1 — Thomas Fuchs (@thomasfuchs) March 12, 2016

1
2
3
Marc was almost ready to implement his "hello world" React app pic.twitter.com/ptdg4yteF1
— Thomas Fuchs (@thomasfuchs) March 12, 2016
 

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

XHTML

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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 应用!”(大多数情况下)你是对的,但你还需要走一小步才能理解为什么一切都疯了。

下面是我承诺过的图片。

必威 1

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

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

同一张图片:

必威 2

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

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

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

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

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

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

打赏支持我翻译更多好文章,谢谢!

打赏译者

JSFiddle

【编者按】本文作者为 Sean Fioritto,主要阐述了 JavaScript 开发为何让人有些无从下手的根本原因。文章系国内 ITOM 管理平台 OneAPM 编译呈现。

实例中我们引入了三个库: react.min.js 、react-dom.min.js 和 browser.min.js:
  1,react.min.js -React 的 核心库
  2,react-dome.min.js - 提供与DOM 相关的功能。
  3,browser.min.js 用于将JSX 语法转化为JavaScript 语法。

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

必威 3 必威 4

3 赞 4 收藏 2 评论

开始 Hack React 的最简单的方法是用下面 JSFiddle 的Hello Worlds:

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

   ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('example')
  );
  注意:如果我们需要使用 JSX,则 <script> 标签的 type 属性需要设置为 text/babel。

关于作者:小谢

必威 5

懒懒的程序员~ 个人主页 · 我的文章 · 24 ·  

必威 6

React JSFiddle

网页开发的其他所有东西都很配合,唯独到了 Javascript,你会感觉好像比别人少了一大块基础知识,完全搞不懂它。

  React 使用 JSX 来替代常规的 JavaScript。
  JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
  我们不需要一定使用 JSX,但它有以下优点:
  JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
  它是类型安全的,在编译过程中就能发现错误。
  使用 JSX 编写模板更加简单快速。

React JSFiddle without JSX

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

使用 JSX
  JSX 看起来类似 HTML ,我们可以看下实例:
      ReactDOM.render(
          <h1>Hello, world!</h1>,
          document.getElementById('example')
      );

通过 npm 使用 React

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

我们可以在以上代码中嵌套多个 HTML 标签,需要使用一个 div 元素包裹它,实例中的 p 元素添加了自定义属性 data-myattribute,
添加自定义属性需要使用 data- 前缀。
    ReactDOM.render(
      <div>
        <h1>柠檬先生</h1>
        <h2>欢迎学习 React</h2>
        <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
      </div>,
      document.getElementById('example')
    );

本文由必威发布于必威-前端,转载请注明出处:管理平台,我们建议在 必威React 中使用 CommonJS

相关阅读