新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

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

怎么做 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 应用程序,那个顺序有 19364 行代码。而你只必要安装 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 应用程序?那是本人前些时间就要专一研讨的内容,所以,敬请期望,在风流浪漫两周后会有更加的多干货到来!

打赏支持自个儿翻译越来越多好小说,多谢!

打赏译者

打赏帮助作者翻译更加多好文章,谢谢!

任选黄金年代种支付方式

图片 3 图片 4

3 赞 4 收藏 2 评论

有关小编:小谢

图片 5

懒懒的程序猿~ 个人主页 · 笔者的小说 · 24 ·  

图片 6

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于www.301net,转载请注明出处:为啥做 JS 开发很疯狂???

您可能还会对下面的文章感兴趣: