澳门搏彩官方网 > Web前端 >

入门教程

干什么做 JS 开辟很疯狂???

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

本文由 伯乐在线 - 小谢 翻译,cotton 校稿。未经许可,制止转发!
România语出处: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 应用程序,这么些程序有 一九三七4 行代码。而你只须求设置 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 应用!”(大超级多景色下)你是没错,但您还亟需走一小步技能掌握为何一切都疯了。

澳门娱乐就上01311平台网,下边是本人承诺过的图纸。

澳门娱乐就上01311平台网 1

大比较多您付出的Javascript web应用程序,会落在钟形曲线中部的某些地点。一定会在中游有个别,假若您从一个完整的 React 货仓伊始,那么从生机勃勃最初你就过度设计了您的应用程序。

那便是干什么一切都变得疯狂。其中的大非常多工具你感觉是你消亡难题所不可不持有的,不过你向来还未有境遇那样的标题,何况事后您永恒也不会高出

如出蓬蓬勃勃辙张图片:

澳门娱乐就上01311平台网 2

因为在暗中同意景况下,每种人都过度设计他们的接纳,他们却发现不到那或多或少,使得 Javascript 的费用意况变得过度繁冗。

你应当什么运转 Javascript 应用程序呢?是或不是相应采纳一些近乎 React 或 Angular 的工具?是或不是应该使用软件包微处理机?借使您不这么做,你应有做哪些?测量检验有须求吗?是不是相应用 Javascript 生成标识?全数那一个皆以你应当能够问问本身的难点,在运转默认的一点都不小的技能仓库早前。

当您运维一个 Javascript 应用程序时,关键是要在钟形曲线上挑二个点,这些点刚刚位于你以为这一个利用最终大概会达到的复杂程度的前方。

本人不会撒谎,验证这一切需求经验。不过这里有八个科学的点能够让你运转大比相当多的 Javascript 应用程序:jQuery 加上顾客端模板,甚至用于连接和减削少产量物文件一流简单的营造筑工程具(若是你的后端布局还未有曾这么做的话)。

假令你知道什么样正确地创设 Javascript 应用程序,那么您就能够早前精通什么、哪一天以致为啥使用框架或 npm/requir/webPack 或 ES6,何时编写测验,曾几何时理应费心令你的测验本地运行,哪天运维在浏览器中,全体这几个标题都会解决。

风乐趣用你的 Javascript 开辟文化互补那么些空白?想要制止不堪重负的感觉?想要幸免在此个开采进程中过分设计你的 Javascript 应用程序?这是笔者前段时期将在静心探究的内容,所以,敬请期望,留意气风发两周后会有越来越多干货到来!

打赏扶助自个儿翻译更加的多好文章,谢谢!

打赏译者

JSFiddle

【编者按】本文小编为 夏恩 Fioritto,首要演讲了 JavaScript 开荒为啥令人有点无法下手的根本原因。小说系国内 ITOM 管理平台 OneAPM 编写翻译显示。

打赏援救本人翻译越来越多好小说,多谢!

任选后生可畏种支付情势

澳门娱乐就上01311平台网 3 澳门娱乐就上01311平台网 4

3 赞 4 收藏 2 评论

始于 Hack React 的最简易的方法是用上面 JSFiddle 的Hello Worlds:

网络费用乐趣多多!Javascript 却……令人毛骨悚然。

有关作者:小谢

澳门娱乐就上01311平台网 5

懒懒的程序员~ 个人主页 · 小编的随笔 · 24 ·  

澳门娱乐就上01311平台网 6

React JSFiddle

网页开采的别的具有东西都很匹配,唯独到了 Javascript,你会认为好像比旁人少了一大块底蕴知识,完全搞不懂它。

React JSFiddle without JSX

谜底正是,没有错,你的确缺了几块拼图。