目录
不仅仅是你。
为什么构建JavaScript应用会如此疯狂?!?
所以基本上这是…
首页 web前端 js教程 为何JavaScript开发如此疯狂的详细代码

为何JavaScript开发如此疯狂的详细代码

Mar 08, 2017 pm 02:47 PM

Web开发太有意思了! 但是JavaScript则……令人望而生畏。

Web开发中其他一切对你而言都是小菜一碟,但当你深入探究JavaScript的时候,不免有一种“众人皆醒你独醉”的悲壮——好像其他人都知道你不知道的一些大的基础的知识内容,并且这些内容可以帮助你理解所有知识。

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

并且,前端开发实际上已经陷入了疯狂。

不仅仅是你。

拉过一把椅子,坐下来。到时间写JavaScript应用了。

第一步是准备本地开发环境并运行。那么使用Gulp还是Grunt,等等,不……还有NPM脚本!

使用WebPACK还是Browserify?Require.js?提升到ES6?或者过多地添加Babel到你的预处理?

BDD还是常规单元测试?应该使用什么断言框架?当然从命令行运行测试会很好,所以也许PhantomJS也行?

Angular还是React?Ember?Backbone?

你看了一些React文档,“Redux是JavaScript app可预测的状态容器。”真棒!你一定需要那些中的其中之一。

为什么构建JavaScript应用会如此疯狂?!?

让我来帮助你理解为什么我要说这一切是如此疯狂。让我们从一个例子开始,然后转移到漂亮的图片。

这是React的“Hello, world!”应用。

// main.js
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById(&#39;example&#39;)
  );
登录后复制

没有完全完成。

$ 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应用程序——程序有19,374行代码。而你只需要安装browserify,babelify和react-dom,考量未知的成千上万行代码即可。

所以基本上这是…

Marc几乎已经准备好实施他的“Hello World”React app pic.twitter.com/ptdg4yteF1

——Thomas Fuchs(@thomasfuchs)2016年3月12日

下面就让我们用朴实无华的JavaScript代码写一个Hello World app。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Hello World</title>
  </head>

  <body>
    <p id="container"></p>
    <script>
     document.body.onload = function(){
       var container = document.getElementById("container");
       container.innerHTML = &#39;<h1>"Hello, world!"</h1>&#39;;
     }
    </script>
  </body>
  </html>
登录后复制

这就成了。 18行代码。你可以复制/粘贴到index.html文件中,双击并把它加载到你的浏览器中。完成。

如果此时你觉得,“等等,React能做的事情比你刚刚写的这个小玩意更多,并且你不可能用那种方法写一个JavaScript app!”你是(大多数时候)对的,但你还需要走一小步才能理解为什么一切都疯了。

下面是我承诺过的图片。

绝大多数你将工作的JavaScript web应用程序,会落在钟形曲线中部的某个位置。并且在中部,如果你从一个完整的React堆栈开始,那么从一开始你就大量过度设计了你的应用程序。

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

同一张图片:

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

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

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

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

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

有兴趣用你的JavaScript开发知识填补那些空白?想要避免不堪重负的感觉以及避免在这个过程中大量过度设计你的JavaScript应用程序?那是我之后将要专注讨论的内容,敬请期待!


以上是为何JavaScript开发如此疯狂的详细代码的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

四款值得推荐的AI辅助编程工具 四款值得推荐的AI辅助编程工具 Apr 22, 2024 pm 05:34 PM

这个AI辅助编程工具在这个AI迅速发展的阶段,挖掘出了一大批好用的AI辅助编程工具。AI辅助编程工具能够提高开发效率、改善代码质量、降低bug率,是现代软件开发过程中的重要助手。今天大姚给大家分享4款AI辅助编程工具(并且都支持C#语言),希望对大家有所帮助。https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot是一款AI编码助手,可帮助你更快、更省力地编写代码,从而将更多精力集中在问题解决和协作上。Git

学习如何利用Go语言开发移动应用程序 学习如何利用Go语言开发移动应用程序 Mar 28, 2024 pm 10:00 PM

Go语言开发移动应用程序教程随着移动应用市场的不断蓬勃发展,越来越多的开发者开始探索如何利用Go语言开发移动应用程序。作为一种简洁高效的编程语言,Go语言在移动应用开发中也展现出了强大的潜力。本文将详细介绍如何利用Go语言开发移动应用程序,并附上具体的代码示例,帮助读者快速入门并开始开发自己的移动应用。一、准备工作在开始之前,我们需要准备好开发环境和工具。首

AI程序员哪家强?探索Devin、通义灵码和SWE-agent的潜力 AI程序员哪家强?探索Devin、通义灵码和SWE-agent的潜力 Apr 07, 2024 am 09:10 AM

2022年3月3日,距世界首个AI程序员Devin诞生不足一个月,普林斯顿大学的NLP团队开发了一个开源AI程序员SWE-agent。它利用GPT-4模型在GitHub存储库中自动解决问题。SWE-agent在SWE-bench测试集上的表现与Devin相似,平均耗时93秒,解决了12.29%的问题。SWE-agent通过与专用终端交互,可以打开、搜索文件内容,使用自动语法检查、编辑特定行,以及编写和执行测试。(注:以上内容为原内容微调,但保留了原文中的关键信息,未超过指定字数限制。)SWE-A

五大热门Go语言库汇总:开发必备利器 五大热门Go语言库汇总:开发必备利器 Feb 22, 2024 pm 02:33 PM

五大热门Go语言库汇总:开发必备利器,需要具体代码示例Go语言自从诞生以来,受到了广泛的关注和应用。作为一门新兴的高效、简洁的编程语言,Go的快速发展离不开丰富的开源库的支持。本文将介绍五大热门的Go语言库,这些库在Go开发中扮演了至关重要的角色,为开发者提供了强大的功能和便捷的开发体验。同时,为了更好地理解这些库的用途和功能,我们会结合具体的代码示例进行讲

PHP在Web开发中是属于前端还是后端? PHP在Web开发中是属于前端还是后端? Mar 24, 2024 pm 02:18 PM

PHP在Web开发中是属于后端。PHP是一种服务器端脚本语言,主要用于处理服务器端的逻辑,生成动态网页内容。与前端技术相比,PHP更多地用于与数据库交互、处理用户请求以及生成页面内容等后端操作。接下来通过具体的代码示例来说明PHP在后端开发中的应用。首先,我们来看一个简单的PHP代码示例,用于连接数据库并查询数据:

了解VSCode:这款工具到底是用来干什么的? 了解VSCode:这款工具到底是用来干什么的? Mar 25, 2024 pm 03:06 PM

《了解VSCode:这款工具到底是用来干什么的?》作为一个程序员,无论是初学者还是资深开发者,都离不开代码编辑工具的使用。在众多编辑工具中,VisualStudioCode(简称VSCode)作为一款开源、轻量级、强大的代码编辑器备受开发者欢迎。那么,VSCode到底是用来干什么的?本文将深入探讨VSCode的功能和用途,并提供具体的代码示例,以帮助读者

Go语言前端技术探秘:前端开发新视野 Go语言前端技术探秘:前端开发新视野 Mar 28, 2024 pm 01:06 PM

Go语言作为一种快速、高效的编程语言,在后端开发领域广受欢迎。然而,很少有人将Go语言与前端开发联系起来。事实上,使用Go语言进行前端开发不仅可以提高效率,还能为开发者带来全新的视野。本文将探讨使用Go语言进行前端开发的可能性,并提供具体的代码示例,帮助读者更好地了解这一领域。在传统的前端开发中,通常会使用JavaScript、HTML和CSS来构建用户界面

Android开发最适合的Linux发行版是哪个? Android开发最适合的Linux发行版是哪个? Mar 14, 2024 pm 12:30 PM

Android开发是一项繁忙而又令人兴奋的工作,而选择一个适合的Linux发行版来进行开发则显得尤为重要。在众多的Linux发行版中,究竟哪一个最适合Android开发呢?本文将从几个方面来探讨这一问题,并给出具体的代码示例。首先,我们来看一下目前流行的几个Linux发行版:Ubuntu、Fedora、Debian、CentOS等,它们都有各自的优点和特点。

See all articles