当前位置: 首页 >> 新闻世界 >> 沈阳,逗鸟外传,gle-卡通池-孩童的天空,有趣的视角-给你带来不同的新闻 >> 正文

沈阳,逗鸟外传,gle-卡通池-孩童的天空,有趣的视角-给你带来不同的新闻

2019年09月07日 16:34:24     作者:admin     分类:新闻世界     阅读次数:300    

我是现代 Web 开发的忠诚粉丝,我以为它称得上是一种“魔法”——但一切的魔法都有其长处和缺乏:

  • 假如你能娴熟运用 Web 开发的一系列奇特东西(Babel、bundler、watcher 等!),就能打造出快速、强壮而令人愉悦的开发流程;
  • 假如你不熟悉 Web 开发的这些奇特东西就会步履维艰;
  • 想要搞清楚这些魔法的作业机制往往是条不归路,除非有人引导你差异 Web 业界的术语、热门和过期信息。

最近,我常常需求向新手解说“现代 Web 开发流程”的内容,可是……

这很难解说!

哪怕是泛泛而谈都需求长篇大论才行。

千里之行始于足下,本文便是针对 Web 开发演化的一系列归纳介绍的第一篇内容:静态网站到 Babel 的演化

最简略的网站:静态网站

故事要从“经典”的前端 Web 开发形式讲起,信任咱们对这部分内容很熟悉了。

在经典的前端 Web 开发形式中,咱们会直接修 HTML/CSS/JavaScript 文件。想要预览更改时,咱们在本地浏览器中翻开 HTML 文件,更改代码后改写页面以更新内容。

开发流程

这种开发流程如下所示:

  1. 在 Atom 这样的文本修改器中修改 HTML/CSS/JavaScript 文件。
  2. 在文本修改器中保存文件。
  3. 在浏览器中翻开并从头加载文件。

修改 JavaScript,保存文件,改写页面以检查更新

布置

然后当你想将网站发布到互联网时,只需将 HTML/CSS/JavaScript 文件上传到网上即可。

只需运用像 Netlify 这样的服务,把包括文件的文件夹拖上去即可将页面发布到 Web 端。

以下是一个简略的示例: https://sleepy-lichterman-6811cc.netlify.com/

几乎太简略了!为什么咱们还要让工作变得那么杂乱呢?

假如你了解“经典”Web 开发流程的机制,你或许会问:这么简略的办法为什么咱们要扔掉它?!为什么现代 Web 开发流程如此杂乱?

简略的答案:好吧,或许我得给出两个简略的答案:

  • 你并不一定挑选那么杂乱的路途 。“经典”的 Web 开发流程十分棒!并且足以满意你的需求!你底子用不着增加剩余的,或许你看不懂的那些东西。
  • 但关于某些项目来说,更杂乱的流程自有其优点 。你增加到流程中的每项东西都是用来处理某种问题的。

为了了解现代 Web 开发的东西体系,咱们有必要 了解 Web 开发面对的问题

在这段漫绵长路中咱们将逐个处理这些问题,首要来看一个现已存在了几十年的 Web 开发老问题吧。

一个老问题:JavaScript 的约束性

直到今日,JavaScript 和一系列 Web API 都有许多约束(原因多种多样,这儿就不细说了)。

举几个比方:

  • 没有模块
  • 没有常数
  • 没有 Promise/ 异步
  • 没有 Array.includes()
  • 蠢笨的语法 / 缺失许多常用原语(没有 for-of、模板字面量、箭头函数语法、模板解包…
  • (Web API)有许多 DOM 操作底子没必要那么杂乱(比方增加 / 删去类名、躲藏元素、挑选元素、删去元素…)

浏览器只能履行 JavaScript,因而当约束是来自 JavaScript 言语自身时,你无法简略地换成其他言语来处理问题;你只能忍耐这些约束。

小故事:JavaScript 和 Web API 之间的差异?

你或许现已留意到我在上面说的是“JavaScript 和 Web API”。这是两件不同的工作!

当你为网页编写 JavaScript 时,与网页自身交互的 API 调用都是 Web API(仅仅刚好用 JavaScript 编写罢了),而不是 JavaScript 言语的一部分。

一些比方:

  • Web API:文档和文档上的办法;窗口和窗口上的办法;工作、XMLHttpRequest、获取,等等
  • JavaScript:函数、const/let/var、数组、Promise,等等。

比方说你正在写一个 Node.js 服务器,你会用 JavaScript 编写,意味着你可以运用 Promise 这种东西,但不能运用 document.querySelector(这样做也没有含义)。

一个陈旧的处理方案:jQuery 和它的小伙伴们

jQuery 早在 2006 年就诞生了:它是一个用来处理 JavaScript 和 Web API 中许多缺点的库。

jQuery 中的 API 对常见 Web 使命助力颇大,如 DOM 操作、异步处理、处理跨浏览器差异和资源获取等。

基本上来说,尽管用旧的 JavaScript/ 旧的 Web-API 处理这些工作在技能上都是可行的,但它们十分烦人、无趣,并且往往很难编写——所以为了把 Web 开发者从编写头疼代码的担负中解放出来,你可以下载 jQuery 库并用它的精巧 API 来处理 JSON 文件之类的使命。

一个新的处理方案:改善 JavaScript 自身

可是今日间隔 2006 年现已很久了!

自 2006 年以来,JavaScript 和 Web API 得到了极大的改善。(jQuery 和许多人都奉献巨大!)

JavaScript 是一种不断发展的言语。与软件的更新相似,JavaScript 言语也会更新许多版别。

你或许听说过“ES6”一词。ES6 代表“ECMAScript 6”,指的是 ECMAScript 的第 6 次迭代。ECMAScript 仅仅 JavaScript 的另一种叫法,差异仅仅人们一般运用“ECMAScript”来指代标准,而运用“JavaScript”来指代人们编写的言语。

(趁便说一句,这又是一件让人头晕的工作:JavaScript 不是 ECMAScript 的完结;就像你不能把“HTML”称为“HTML”的完结相同,叫成“HTML 标准”也不可,都是错的!维基百科就写错了!JavaScript 和 ECMAScript 是一个东西。)

不论怎样,ES6(2015 年发布)是一次严重更新,由于它为 JavaScript 增加了许多十分好的言语功用,比方 const、模块和 Promise 等。(别的 ES8 引进了我最喜欢的言语功用,也便是异步。)

与此同时,自 2006 年以来 Web API 也得到了极大的改善,加入了 document.querySelector、fetch 以及 classList 和 hidden 之类的东西。

因而在 2019 年的今日,大多数情况下咱们可以直接运用 JavaScript 和 Web API,无需 jQuery 之类的库了。

……但也有破例

一个长久以来的难题:跨浏览器支撑

更新 JavaScript 言语时浏览器也要更新才干支撑新的言语功用。(Web API 也是如此,但简略起见咱们现在只谈 JavaScript。)

但以下过程之间是有推迟的:

  1. 在 JavaScript 中界说言语功用。
  2. 浏览器完结悉数功用并发布支撑。
  3. 用户悉数升级到最新版别的浏览器,一般经过自动更新 / 从头启动浏览器来完结(有时还做不到!)。

对立:咱们应该用旧版 JavaScript 仍是最新的 JavaScript 编写呢? 两者都有利有弊

这给 JavaScript 开发人员带来了两难的境况:咱们期望运用现代化的 JavaScript 言语功用,由于这些改善一般会让某些内容编写起来更简略。但咱们也期望网站可以为一切用户服务,不论他们是什么时分重启浏览器更新版别的都应该看到相同的内容。这种窘境一般要由 Babel 来处理。

Babel 是一个 JavaScript 编译器,可以将 JavaScript 代码转换为…不同的 JavaScript 代码!具体来说,它能把用最新版 JavaScript 编写的 JavaScript 代码转换为被更多浏览器支撑的旧版 JavaScript 等效代码。

Web 开发人员将 Babel 整合到流程中,就可以运用最新的 JavaScript 功用编写代码,无需忧虑浏览器兼容性。

小故事:Babel 不包括 Web API

例如,假如你在 JavaScript 中运用 fetch,Babel 将不会供给兼容性支撑(兼容支撑也称为“polyfill”-ing),由于 fetch 是一个 Web API 而不是 JavaScript 自身的一部分。(他们正在从头考虑这个 决议

因而你还需求一个独立的处理方案来 polyfilling Web API!之后的文章中咱们会谈到这一点。

再来看流程:静态网站 +Babel

好的,所以现在咱们现已知道为什么要用 Babel 了。那么运用 Babel 的 Web 开发流程是什么样的呢?

以下是最简略的 Babel 流程,人们一般不会用它。(由于像 Parcel 或 webpack 这样的包更便利,咱们以后会提!)

装置

装置 Babel

你可以依照这儿的 CLI 阐明 操作,但它假定你了解 npm 的机制。他们主张你在本地装置 Babel 作为每个项目的 npm dev 依靠项,而不是在你的核算机上大局装置。

开发流程

  1. 像一般的静态网页相同开发你的网站。

示例:src 目录是你的 JavaScript 地点的方位

布置

当你预备将网站发布到互联网时,不或许直接把写好的 JavaScript 文件上传到 Web 端,由于你一向都用的是一切浏览器都不支撑的 JavaScript 功用。

你要做的工作是:

  1. 运用 Babel 编译 JavaScript,以获得与浏览器兼容的代码:

这将在独自的文件夹中创立新的编译好的 JavaScript 文件:

示例:Babel 将生成第二个“script.js”,该脚本具有跨浏览器兼容的代码

2. 将 编译好 的 JavaScript 与 HTML 和 CSS 一同上传到互联网:

编译好的 JS

加上你的 CSS 和 HTML 文件

  • 你的网站看起来 * 和动起来都和开发形式中的相同,但用户拿到的是 Babel 编译过的 JavaScript。这是没有 Babel 的项目: site / script.js
  • 这是用了 Babel 的项目: site /script.js

(但愿如此!有时调试和发布版别会有差异,但这些都是过错!)

停一下,谈谈开发与发布代码!

请留意,咱们现在将“开发”代码和“发布”代码差异开对待:

  • 开发代码:你在开发 Web 应用程序时编写的代码。
  • 发布代码:用户拜访你的 Web 应用程序时要运转的代码。

咱们有意差异这两者,由于:

  • 开发代码对开发人员有利,但对用户晦气
  • 发布代码对用户有利,但对开发人员晦气

在前端 Web 开发中,不是每个人都会用或许需求 Babel。

但下面的形式:

  • 编写不向用户显现的 开发代码
  • 然后编译成另一个版别的 发布代码 显现给用户。

不只很常见,并且在现代前端 Web 开发中经常会用到。

请留意,差异“调试”与“发布”构建是软件工程中的常用形式,并不是 Web 开发引进的新事物。但它特别合适前端 Web 开发,由于它太常见了,并且前端 Web 开发的调试 / 发布版别之间差异巨大。

下面是一个简略的前端技能列表,可以用来差异调试和发布版别:

  • npm 模块
  • 各种 CSS 预处理器
  • React/Vue/Angular/ 各种 Web 结构

之后的文章会重复说到这种形式,所以现在好好记下来!

期望咱们可以转发点赞,谢谢~

重视作者,我会不定期在头条共享Java,Spring,MyBatis,Netty源码剖析,高并发、高功能、分布式、微服务架构的原理,JVM功能优化、分布式架构,BATJ面试 等材料...

转发此文,重视并私信小编“学习”web前端课程材料立刻免费收取

除非特别注明,本文『沈阳,逗鸟外传,gle-卡通池-孩童的天空,有趣的视角-给你带来不同的新闻』来源于互联网、微信平台、QQ空间以及其它朋友推荐等,非本站作者原创。 本站作者admin不对本文拥有版权,如有侵犯,请投诉。我们会在72小时内删除。 但烦请转载时请标明出处:“本文转载于『卡通池-孩童的天空,有趣的视角-给你带来不同的新闻』,原文地址:http://www.katokoichi.com/articles/4358.html