xml地图|网站地图|网站标签 [设为首页] [加入收藏]

皇家赌场网址入门教程,开发很疯狂

来源:http://www.ccidsi.com 作者:最新解决方案 人气:60 发布时间:2019-05-02
摘要:干什么做 JS 开拓很疯狂??? 2016/06/08 · JavaScript· 2 评论 ·开发 本文由 伯乐在线 -小谢翻译,cotton校稿。未经许可,禁止转发! 英文出处:sfioritto。迎接参加翻译组。 Web开辟时很有趣

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

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

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

Web开辟时很有趣的~然而Javascript确是……令人生畏的。

Web开拓中任何任何对您来讲都是很轻巧的,然而当你长远切磋Javascript的时候,就能够有1种“稠人广众皆醒你独醉”的感到,好像你不驾驭别的人都知情的局地最重要的基础知识内容,并且那个内容能够扶助你通晓有所知识。

实际是,的确如此,你遗漏了壹部分化解难点的基本点部分。

与此同时,前端开垦确实已经进入了疯狂的意况了。

不仅仅是您。

拉过一把交椅,坐下来。是到初叶写Javascript应用的小时了。

率先步是搭建本地开荒遭逢并跑通它。那么是利用 Gulp?依旧Grunt?等等,好……好像还有 NPM script!

WebPACK?照旧 Browserify? (羞涩的)Require.js?进级到 ES陆?或然为你的门类增进 Babel 帮助?

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

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

您看了有个别 React 文书档案,“Redux 是1种为 Javascript 应用提供的可预测状态的容器。”酷毙了!你早晚须要中间的五个。

为啥营造 Javascript 应用会这么疯狂?!?

让自己来告诉你为何那全部是那般疯狂。让我们从2个事例开头,前面会有一流的图形。

这是 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,以及在您做好之后还要让它运营在网页上,因为那实则不会一直发生二个能有怎么着内容的网页。 ¯ (ツ)

在成功那几个之后,你最终还需求1个名字为 bundle.js 的文件,那些文件包涵新的 React Hello World 应用程序,这么些顺序有 1936四 行代码。而你只须求安装 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>

那就成了。1共 1八 行代码。你能够复制/粘贴到 index.html 文件中,双击把它加载到你的浏览器中。化解。

那时候您显著会说:“等等,React 能做的事务比你刚刚写的那几个小玩意儿越来越多,并且你不容许用那种办法写二个Javascript 应用!”(大很多境况下)你是对的,但你还需求走一小步技能明白为啥一切都疯了。

上边是自己答应过的图片。

皇家赌场网址 1

大多数你付出的Javascript web应用程序,会落在钟形曲线中部的某部地点。一定会在中等部分,假让你从三个完好无损的 React 仓库起初,那么从一开首你就过度设计了你的应用程序。

那正是干什么1切都变得疯狂。个中的大多数工具你以为是你消除难点所不可不具备的,然而你直接从未超过那样的难题,而且将来您世世代代也不会遇见

萧规曹随张图纸:

皇家赌场网址 2

因为在默许情形下,各样人都过度设计他们的采用,他们却开采不到那一点,使得 Javascript 的支付处境变得过度繁冗。

你应该怎么样运行 Javascript 应用程序呢?是或不是相应选择一些类似 React 或 Angular 的工具?是或不是应当利用软件包处理器?倘诺您不这么做,你应当做哪些?测试有不可缺少吗?是或不是相应用 Javascript 生成标记?全数这几个都以你应该能够问问自个儿的标题,在起步默许的大幅的技艺仓库在此之前。

当你运营3个 Javascript 应用程序时,关键是要在钟形曲线上挑一个点,那一个点恰恰位于你感到这些应用最后也许会达到的复杂程度的先头。

本人不会撒谎,验证那全体供给阅历。不过这里有1个科学的点可以令你运转大大多的 Javascript 应用程序:jQuery 加上客户端模板,以及用于连接和裁减产品文件一流轻便的营造筑工程具(假令你的后端架构还平昔不这么做的话)。

比如您明白如何准确地塑造 Javascript 应用程序,那么你就能开端精晓怎么着、曾几何时以及为什么选取框架或 npm/requir/webPack 或 ES陆,哪一天编写测试,哪一天理应费心让您的测试本地运行,何时运维在浏览器中,全部这么些题材都会解决。

有意思味用你的 Javascript 开拓文化互补那一个空白?想要防止不堪重负的痛感?想要防止在这么些开拓进度中过分设计你的 Javascript 应用程序?那是本身前些日子将在专注探究的剧情,所以,敬请期待,在一两周后会有更多干货到来!

打赏支持小编翻译更多好小说,多谢!

打赏译者

始于 哈克 React 的最简便的不二等秘书技是用上边 JSFiddle 的Hello Worlds:

真相就是,没有错,你的确缺了几块拼图。

打赏帮忙自个儿翻译更多好作品,多谢!

任选1种支付办法

皇家赌场网址 3 皇家赌场网址 4

3 赞 4 收藏 2 评论

JSFiddle

为什么搭建 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,还有完毕那一个之后还要做什么样,本事让它在网页上运转,因为唯有那些并无法生成3个使得的网页。

形成这个之后,会获取一个名叫 bundle.js 的文本,里面正是新的 React Hello World 应用,包蕴 1936四 行代码。接下来,只须求设置 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行代码。你能够把它们复制、粘贴到1个叫 index.html 的公文,双击加载到您的浏览器。好了。

假设这时你对和谐说:“可是,等一下,React 能做的可不断你刚才写的那点儿小东西,你不能够那么写 Javascript!”那话(大多数)是未可厚非的,你急速就能够意识怎么全数东西都这样疯狂了。

关于作者:小谢

皇家赌场网址 5

懒懒的程序员~ 个人主页 · 笔者的篇章 · 24 ·  

皇家赌场网址 6

// main.jsvarReact=require('react');varReactDOM=require('react-dom');ReactDOM.render(

可是,前端开荒的现状其实也很疯狂。

Hello,world!

,document.getElementById('example'));

要用 browserify 安装 React DOM 和营造你的包。

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

要用 webpack 安装 React DOM 和创设你的包:

$npm install --save react react-dom babel-preset-react$webpack

注意:

要是你正在选拔 ES20一伍, 你将要采纳babel-preset-es2014包.

注意:暗中认可景况下,React 将会在付出情势,很缓慢,不建议用于生产。要在生养形式下利用 React,设置意况变量NODE_ENV为production(使用 envify 或者 webpack's DefinePlugin)。例如:

newwebpack.DefinePlugin({"process.env":{NODE_ENV:JSON.stringify("production")}});

决不 npm 的高效初始

如果你未来还没打算要运用npm,你能够下载这么些曾经包罗了预构建的 React 和 React DOM 拷贝的入门套件.

下载入门套件 一5.三.一

在入门教程包的根目录,创制贰个富含如下代码的helloworld.html。

Hello React!ReactDOM.render(

互连网支付乐趣多多!Javascript 却……令人惊讶。

本文由68399皇家赌场发布于最新解决方案,转载请注明出处:皇家赌场网址入门教程,开发很疯狂

关键词: 68399皇家赌场 JavaScript 日记本 我的文集 Think C...

最火资讯