首页科技 › GitHub 入门不完全指南(未完待续)

GitHub 入门不完全指南(未完待续)

原标题:GitHub已完全弃用jQuery,问题是为什么?

我一直认为 GitHub
是一座宝藏,想让更多人的知道它、加入到这个社区中。本人能力有限,如果文中出现不对的地方,欢迎指正交流。

亚洲城手机客户端登录 1

一、前言

大家好,我是削微寒(xuē wēi hán),一个走在进阶路上的程序员。

一个人走在路上,不如和志同道合的小伙伴一起前行。所以,我喜欢分享一些自己的收获,记录过程放到自己的
blog
上,主要是方便以后查阅(我记性不好)。如果我的文字能够帮助到其他人,那真是极好的!

编程进阶的道路是坎坷的,没有任何捷径。这个时期只能是积累、吸收、学习、坚持,做到量的积累,到质的飞跃

古语有云:‘书山有路,勤为径’、‘不积跬步,无以至千里’

编程是一个动手实践性的学科,多动手才是王道,积累代码量。那么问题就来了:写什么呢?

作者 | GitHub 前端工程团队

二、什么是 GitHub

如果把编程比做绘画,那么 GitHub
就是一个‘巨型画展’,里面展出了各式各样、各种风格的‘画作’,有名家的作品,有默默无闻的作者的作品。整个画展中的任何作品,你可以随意浏览,任意临摹,与作者讨论作品中的想法、思路。

同比到编程中,就是各种‘编程作品’。通过‘临摹’和学习别人的代码,你就会知道要写些什么了。不要想着上来就写一个特别
NB
的项目,优秀的项目不是一朝一夕完成的,都是一步步地借鉴、优化、完善——罗马不是一天建成的

一位前辈告诉说过:优秀的程序最重要的是什么?匠心!编写优秀的程序需要有精益求精的态度。追求的卓越的过程就是进阶的过程。

在 GitHub
上,你可以与百万其它程序员一起创造有趣、有价值的程序。准备好,加入
GitHub 了吗?

译者 | 无明

三、开始 GitHub 探索之旅

这章主要讲述快速使用 GitHub,不会涉及任何 Git 命令

编辑 | 覃云 - 前端之巅

3.1 注册

只需要三步,10秒:注册地址

  1. 依次输入用户名、邮箱、密码
    亚洲城手机客户端登录 2

  2. 选择账号性质:Unlimited public repositories for
    free(免费)、付费,免费账号就可以了
    亚洲城手机客户端登录 3

  3. 调查问卷,skip this step(跳过这步)
    亚洲城手机客户端登录 4

  4. 注册成功
    亚洲城手机客户端登录 5

最后,登陆自己的邮箱点击注册认证链接,认证邮箱。

最近,我们将 jQuery 完全从 GitHub.com
的前端代码中移除了,这标志着我们数年来逐步移除 jQuery
这个渐进式的过程终于结束了,这对我们来说是一件里程碑式的事件。这篇文章将介绍过去我们是如何依赖上
jQuery
的,随着时间地推移,我们意识到不再需要它,但到最后我们并没有使用另一个库或框架取代它,而是使用标准的浏览器
API 实现了我们所需要的一切。

3.2 概述

GitHub 算是一个‘程序员的社交’网站,就像微博一样,可以 Follow
用户。针对于程序员的社交又有对项目的一系列操作例如:Watch项目、Fork项目、Star项目

早期,jQuery 对我们意义重大

3.2.1 信息流页

亚洲城手机客户端登录 6

登陆后默认进入这个页面,该页面会展示你的项目动态、你关注的用户的动态(Star、Fork、Crtead等)、你Watch的项目的动态(修改、Issues等)

GitHub.com 在 2007 年底开始使用 jQuery 1.2.1,那是谷歌发布 Chrome
浏览器的前一年。当时还没有通过 CSS 选择器来查询 DOM
元素的标准方法,也没有动态渲染元素的样式的标准方法,而 Internet Explorer
的 接口与其他很多 API 一样,在浏览器之间存在不一致性问题。

3.2.2 个人首页

亚洲城手机客户端登录 7

右上角头像向下尖头下拉框中的 Your profile
进入个人首页,类似于微博的个人首页一样

jQuery 让 DOM 操作、创建动画和“AJAX”请求变得相当简单,基本上,它让 Web
开发人员能够创建更加现代化的动态 Web 体验。最重要的是,使用 jQuery
为一个浏览器开发的代码也适用于其他浏览器。在 GitHub 的早期阶段,jQuery
让小型的开发团队能够快速进行原型设计并开发出新功能,而无需专门针对每个
Web 浏览器调整代码。

3.2.3 项目

项目分为三种:自己创建的、别人的项目、Fork的项目

下面以 requests 项目为例:

亚洲城手机客户端登录 8

  1. Watch:类似订阅,订阅这个项目的动态,这个项目有任何修改都会显示在你的‘信息流页’
  2. Star:等同于赞
  3. Fork:类似于拷贝,拷贝这个项目到你的账号下,你的账号下就会有一个和这个项目一摸一样的项目
  4. Issues:提问题的地方,这里可以讨论项目中的 bug 和作者交流

基于 jQuery 简单的接口所构建的扩展库也成为 GitHub.com
前端的基础构建块:pjax(
facebox(

3.2.4 寻找项目

  1. 首页的搜索
  2. explore:官方推出的推荐页
  3. trending:GitHub 热点项目(用户 star
    最多的项目)
  4. 我发起的 HelloGithub
    —— 分享、推荐 GitHub 上好玩、容易上手的项目

至此为止,就可以根据自己的兴趣爱好,找自己感兴趣的项目,查看浏览别人的代码和思路了。学习了别人的代码,是时候开始自己的项目了!

下面会依次介绍如何创建项目、把自己的代码托管在
GitHub上、向别的项目提交代码(未完待续)

我们将永远不会忘记 John Resig 和 jQuery
贡献者创建和维护的这样一个有用的基本库。

四、开始自己的项目

后来的 Web 标准

五、参与到开源项目

多年来,GitHub
成长为一家拥有数百名工程师的公司,并逐渐成立了一个专门的团队,负责 Java
代码的规模和质量。我们一直在排除技术债务,有时技术债务会随着依赖项的增多而增长,这些依赖项在一开始会为我们带来一定的价值,但这些价值也随着时间的推移而下降。

我们可以将 jQuery 与现代浏览器支持的 Web 标准的快速演化进行比较:

  • $(selector) 模式可以使用 querySelectorAll() 来替换;
  • 现在可以使用 Element.classList 来实现 CSS 类名切换;
  • CSS 现在支持在样式表中而不是在 Java 中定义可视动画;
  • 现在可以使用 Fetch Standard 执行 $.ajax 请求;
  • addEventListener() 接口已经足够稳定,可以跨平台使用;
  • 我们可以使用轻量级的库来封装事件委托模式;
  • 随着 Java 语言的发展,jQuery 提供的一些语法糖已经变得多余。

另外,链式语法不能满足我们想要的编写代码的方式。例如:

$('.js-widget') .addClass('is-loading') .show()

这种语法写起来很简单,但是根据我们的标准,它并不能很好地传达我们的意图。作者是否期望在当前页面上有一个或多个
js-widget 元素?另外,如果我们更新页面标记并意外遗漏了 js-widget
类名,浏览器是否会抛出异常会告诉我们出了什么问题?默认情况下,当没有任何内容与选择器匹配时,jQuery
会跳过整个表达式,但对我们来说,这是一个 bug。

最后,我们开始使用 Flow
来注解类型,以便在构建时执行静态类型检查,并且我们发现,链式语法不适合做静态分析,因为几乎所有
jQuery 方法返回的结果都是相同的类型。我们当时之所以选择 Flow,是因为
@flow weak 模式等功能可以让我们逐步将类型应用于无类型的代码库上。

总而言之,移除 jQuery 意味着我们可以更多地依赖 Web 标准,让 MDN Web
文档成为前端开发人员事实上的默认文档,在将来可以维护更具弹性的代码,并且可以将
30KB 的依赖从我们的捆绑包中移除,加快页面的加载速度和 Java 的执行速度。

逐步解耦

虽然定下了最终目标,但我们也知道,分配所有资源一次性移除 jQuery
是不可行的。这种匆匆忙忙的做法可能会导致网站功能出现回归。相反,我们采取了以下的策略:

  1. 设定指标,跟踪整一行代码调用 jQuery
    的比率,并监控指标走势随时间变化的情况,确保它保持不变或下降,而不是上升。

亚洲城手机客户端登录 9

  1. 我们不鼓励在任何新代码中导入 jQuery。为了方便自动化,我们创建了
    eslint-plugin-jquery(
    jQuery 功能,例如 $.ajax,CI 检查将会失败。

  2. 旧代码中存在大量违反 eslint 规则的情况,我们在代码注释中使用特定的
    eslint-disable
    规则进行了注解。看到这些代码的读者,他们都该知道,这些代码不符合我们当前的编码实践。

  3. 我们创建了一个拉请求机器人,当有人试图添加新的 eslint-disable
    规则时,会对拉取请求留下评论。这样我们就可以尽早参与代码评审,并提出替代方案。

  4. 很多旧代码使用了 pjax 和 facebox
    插件,所以我们在保持它们的接口几乎不变的同时,在内部使用 JS
    重新实现它们的逻辑。静态类型检查有助于提升我们进行重构的信心。

  5. 很多旧代码与 rails-behavior 发生交互,我们的 Ruby on Rails
    适配器几乎是“不显眼的”JS,它们将 AJAX 生命周期处理器附加到某些表单上:

// 旧方法 $(document).on('ajaxSuccess', 'form.js-widget',
function(event, xhr, settings, data) { // 将响应数据插入到 DOM 中 })

  1. 我们选择触发假的 ajax*
    生命周期事件,并保持这些表单像以前一样异步提交内容,而不是立即重写所有调用,只是会在内部使用
    fetch()。

  2. 我们自己维护了 jQuery 的一个版本,每当发现我们不再需要 jQuery
    的某个模块的时候,就会将它从自定义版本中删除,并发布更轻量的版本。例如,在移除了
    jQuery 的 CSS 伪选择器之后(如:visible 或:checkbox)我们就可以移除
    Sizzle 模块了,当所有的 $.ajax 调用都被 fetch() 替换时,就可以移除 AJAX
    模块。

这样做有两个目的:加快 Java
执行速度,同时确保不会有新代码试图使用已移除的功能。

  1. 我们根据网站的分析结果尽快放弃对旧版本 Internet Explorer
    的支持。每当某个 IE 版本的使用率低于某个阈值时,我们就会停止向它提供
    Java 支持,并专注支持更现代的浏览器。尽早放弃对 IE 8 和 IE 9
    的支持对于我们来说意味着可以采用很多原生的浏览器功能,否则的话有些功能很难通过
    polyfill 来实现。

  2. 作为 GitHub.com
    前端功能开发新方法的一部分,我们专注于尽可能多地使用常规
    HTML,并且逐步添加 Java 行为作为渐进式增强。因此,那些使用 JS 增强的 Web
    表单和其他 UI 元素通常也可以在禁用 Java
    的浏览器上正常运行。在某些情况下,我们可以完全删除某些遗留的代码,而不需要使用
    JS 重写它们。

经过多年的努力,我们逐渐减少对 jQuery
的依赖,直到没有一行代码引用它为止。

自定义元素

近年来一直在炒作一项新技术,即自定义元素——浏览器原生的组件库,这意味着用户无需下载、解析和编译额外的字节。

从 2014 年开始,我们已经基于 v0
规范创建了一些自定义元素。然而,由于标准仍然在不断变化,我们并没有投入太多精力。直到
2017 年,Web Components v1 规范发布,并且 Chrome 和 Safari
实现了这一规范,我们才开始更广泛地采用自定义元素。

在移除 jQuery
期间,我们也在寻找用于提取自定义元素的模式。例如,我们将用于显示模态对话框的
facebox
转换为<details-dialog>元素(

我们的渐进式增强理念也延伸到了自定义元素上。这意味着我们将尽可能多地保留标记内容,然后再标记上添加行为。例如,<local-time>默认显示原始时间戳,它被升级成可以将时间转换为本地时区,而对于<details-dialog>,当它被嵌在
<details>元素中时,可以在不使用 Java
的情况下具备交互性,它被升级成具有辅助增强功能。

以下是实现<local-time>自定义元素的示例:

// local-time 根据用户的当前时区显示时间。//// 例如:// <local-time
datetime="2018-09-06T08:22:49Z">Sep 6, 2018</local-time>//class
LocalTimeElement extends HTMLElement { static get observedAttributes() {
return ['datetime'] } attributeChangedCallback(attrName, oldValue,
newValue) { if (attrName === 'datetime') { const date = new
Date(newValue) this.textContent = date.toLocaleString() } }}if
(亚洲城手机客户端登录,!window.customElements.get('local-time')) { window.LocalTimeElement =
LocalTimeElement window.customElements.define('local-time',
LocalTimeElement)}

我们很期待 Web 组件的 Shadow DOM。Shadow DOM 的强大功能为 Web
带来了很多可能性,但也让 polyfill 变得更加困难。因为使用 polyfill
会导致性能损失,因此在生产环境中使用它们是不可行的。

英文原文

)

责任编辑:

转载本站文章请注明出处:亚洲城手机客户端登录 https://www.little-lily.com/?p=5357

上一篇:

下一篇:

相关文章