JavaScript:如何开始开发交互式网站

披露: 您的支持有助于保持网站的正常运行!我们会为此页面上推荐的某些服务收取推荐费.


JavaScript是世界上最受欢迎的编程语言之一。与HTML和CSS一样,JavaScript是几乎所有网站都依赖的三项基础技术之一.

HTML是用于为网站上的每一部分内容分配含义的语言,而CSS是用于格式化HTML元素的样式和布局的语言,而JavaScript会为网页添加行为.

JavaScript简介

什么是JavaScript?

首先,让我们消除对该名称的任何困惑:JavaScript与Java无关。现在我们知道什么不是JavaScript,接下来我们可以讨论什么是JavaScript.

如果您只想显示网站上的基本文本和图像,那么HTML和CSS就足够了.

但是,如果您想做更多的事情-例如动态更改样式,为菜单设置动画,创建功能按钮,验证输入到表单中的数据等等,您将需要其他工具.

JavaScript是最常用于处理这些常见网站行为任务的工具.

JavaScript入门

如果您准备好动手做起学习JavaScript的任务,则有两种资源可供查阅.

如果您喜欢边做边学,可以考虑通过一门或两门交互式课程来学习自己的方式,在系统提示您在基于浏览器的交互式课程中创建简单脚本时,您将学习JavaScript。.

当您准备进一步深入并成为一名真正的JavaScript开发人员时,在线书籍和教程可以帮助您实现目标.

如果您是一个完整的初学者,则最好开始一些免费的交互式课程。一旦您对JavaScript的工作原理有了基本的了解,就可以阅读一些更丰富的书籍和教程,这将帮助您从初学者升级为合格的程序员.

免费互动课程

密码学 是免费程序设计教育的主要提供者。他们提供了JavaScript跟踪,这可能是开始学习JavaScript的最有效方法.

密码学校 是高级(付费)教育提供者.

但是,他们的JavaScript快速入门课程是免费的,并且将为您提供10分钟的JavaScript概述,使您的学习朝着正确的方向前进。如果您是绝对的初学者,那么本课程将在短短几分钟内为您提供很多帮助.

jQuery基础, 与Code School合作,共同开发了一个交互式jQuery入门课程.

请记住,包括我们在内的大多数人都建议您在学习jQuery之前学习一些JavaScript。因此,在完成了Codecademy的JavaScript跟踪之后,尝试一下本课程,您将了解到jQuery可以完成的工作.

在线书籍和教程

猫用JavaScript 是一个免费教程,您可以在线阅读它,它的目的是帮助您入门并以JavaScript程序员的身份运行.

本教程是为猫而写的,但也适合与人类同行的猫,它不会使您成为成熟的开发人员,但是它涵盖了基础知识,并将帮助您建立坚实的基础.

雄辩的JavaScript Marijn Haverbeke的著作可以在线免费阅读,或者您可以获取老式的平装本.

Eloquent JavaScript由Mozilla和Hack Reactor等Web重量级的开发人员开发,得到了经验丰富的程序员的推崇.

Mozilla开发人员网络 (MDN)提供有关基础Web技术(包括JavaScript)的综合指南.

MDN提供的内容非常详尽,从初学者身份到成为合格的前端开发人员,一直被认为足以使一名受过训练的学生.

你不懂JS 凯尔·辛普森(Kyle Simpson)撰写的书籍系列是一本深入探讨的系列,旨在帮助您掌握所涵盖的每个主题.

这不是“起步并运行”系列。在开始之前,您应该已经相对胜任。如果您准备超越基本的JavaScript用法并成为一名真正有能力的JavaScript程序员,那么通过本系列丛书,您将深入研究.

JavaScript库和框架

JavaScript库和框架

刚开始学习JavaScript时,您将需要以其本机格式学习和使用它。但是,您很快就会发现,用JavaScript常规完成的许多事情都需要大量的编码.

这就是JavaScript库和框架出现的地方:它们减少了完成常见任务所需的代码量.

尽管您当然可以使用JavaScript的本机格式,并且应该在继续学习之前对纯JavaScript有扎实的了解,但是如果您学习使用许多库和库中的一些库,则可以用更少的按键操作从JavaScript中获得更多收益。构架.

根据W3Techs的说法,jQuery,Bootstrap和Modernizr是最受欢迎的JavaScript库和框架.

jQuery的 是很大程度上最受欢迎的JavaScript库,旨在帮助您减少代码编写.

它也是最容易上手的JavaScript库之一,因为它使用的语法与纯JavaScript几乎相同。基本上,如果您可以使用JavaScript完成任务,则可以通过学习jQuery以更少的代码完成相同的任务.

引导程序 不仅仅是一个JavaScript库。它是用于开发响应式网站的完整框架或工具套件.

使用Bootstrap构建网站前端将产生可靠的HTML,CSS和JavaScript代码。 Bootstrap提供了开发任何类型网站的前端所需的一切.

现代化 是一小段JavaScript代码,用于检测网站访问者浏览器中的可用功能,并根据检测到的功能来调整所提供的内容和样式.

与jQuery和Bootstrap可以完成几乎所有任务不同,Modernizr是一种利基脚本,用于特定目的:根据访问者的浏览器支持的功能来定制网站访问者的体验.

当前用于开发最高级的Web应用程序的其他一些JavaScript框架是Angular.js,Backbone.js,Ember和React.

如果您希望将JavaScript从简单的前端操作过渡到成熟的定制应用程序开发,花些时间研究这些框架将有助于您为项目确定最佳框架,并为它们所提供的功能打开眼睛.

现代化

Modernizr是一个JavaScript库,用于检测浏览器是否符合HTML5和CSS3。这使它可以执行浏览器可以执行的操作。它不会为您的代码添加功能,但可以确保仅向浏览器发送可执行的命令.

如果您认为这是您正在使用的东西,可以找到许多教程和书籍.

Modernizr教程

关于Modernizr的书很少,因为它相当专业。而且周围的那些没有得到很好的审查。您最好坚持使用在线教程:

  • Modernizr:这是Modernizr的官方网站,其中包含您应有的详细信息.

  • Modernizr入门:这是一个简短的介绍,但是它将帮助您进行设置。如果您的需求不是很大,那可能就是您所需要的.

  • 使用Modernizr解决跨浏览器挑战的初学者/设计者指南:不错的基础教程,应该让您在短时间内启动并运行.

jQuery的

我们已经提到了jQuery。一旦掌握了JavaScript,您可能会希望研究jQuery,这确实使JavaScript编程更容易.

我们上有整篇文章“学习和掌握jQuery”,不仅可以让您开始使用jQuerry,而且还包括了有关使用jQuery的教程。.

Backbone.js

Backbone.js是由Jeremy Ashkenas创建的JavaScript库,他还共同创建了CoffeeScript,LiveScript和Underscore.js。.

该项目托管在GitHub上,正在进行的开发工作由Ashkenas领导,并带有开源贡献者社区.

Backbone.js旨在用于构建单页JavaScript Web应用程序。该库通过鼓励应用程序逻辑与应用程序内容表示之间的完全隔离来为Web应用程序的开发带来结构。.

Backbone.js基础

Backbone.js是一个客户端JavaScript库。它的依赖项包括Underscore.js和jQuery库,必须在加载Backbone.js之前由浏览器加载它们.

该库具有RESTful JSON接口,这意味着它可以使用轻量级JSON数据格式向Web服务器发送数据和从Web服务器接收数据。.

该库采用Model-View-Presenter(MVP)编程体系结构进行设计,该模型是一种流行的用户界面软件设计模式。但是,在Backbone.js生态系统中,使用了术语“模型,视图和集合”.

模型,视图和集合

Backbone.js背后的哲学是应用逻辑和应用数据表示应该分开。通过创建和操纵模型和视图的方式来保持这种分离.

在Backbone.js中,模型代表单个数据表以及处理数据所需的功能和逻辑.

数据是使用一个或多个视图呈现的,这些视图只是Web应用程序UI的一部分,这些UI在模型中转换数据并调整网页DOM以匹配.

视图还侦听用户输入,并将该输入发送回适当的模型以更新模型中保存的数据.

Backbone.js包含一个内置的JSON API。更改模型后,可以通过JSON API将更改传达回Web服务器数据库.

由于几乎所有服务器端编程语言都可以发送和接收JSON数据,因此实际上任何具有JSON API的服务器端语言或应用程序都可以用于与Backbone.js Web应用程序之间进行数据通信并更新应用程序数据库。相应地.

可以通过将相关模型分组在一起来组织和管理相关模型,这提供了额外的好处,即提供了一个侦听点,从而可以使用多个视图来保持一个或多个视图的不断更新。.

Backbone.js的优点是什么?

虽然Backbone.js不如jQuery和Modernizr等最流行的JavaScript库普遍存在,但该库在所有客户端JavaScript技术中排名前15位.

此外,Backbone.js项目可能不算很多,但是使用该库的项目往往是访问量较高的Web应用程序,其中一些享有较高的知名度.

例如,Backbone.js网站提供了使用Backbone.js构建的已知项目列表,其中包括知名互联网初创公司的知名人士和已建立的数字巨头,例如:

  • 葫芦

  • 石英

  • 沃克斯

  • WordPress.com

  • 领英

  • 可汗学院

  • 沃尔玛手机

  • 大本营

  • 爱彼迎

  • 潘多拉

  • 密码学校

  • 特雷洛

  • 条纹

  • 还有很多.

Backbone.js与许多其他流行的JavaScript框架(著名的AngularJS)的不同之处在于,它为开发人员提供了相对的自由.

虽然其他领先的框架可能包括内置的默认功能,这些功能很有帮助(例如双向数据绑定),但Backbone.js却没有。这是将Backbone.js称为库而不是框架的关键原因.

相反,它为开发人员提供了完全的自由来构建符合其偏好的Web应用程序,而不是强迫开发人员接受各种预先制定的决定.

另一方面,这确实意味着,与使用包括预先构建的基础基础的AngularJS之类的框架相比,使用Backbone.js构建Web应用程序时必须奠定更多的基础基础.

学习资料

如果您想学习Backbone.js,那么您需要做的第一件事就是掌握JavaScript和jQuery。.

由于Backbone.js是一个可与jQuery配合使用的JavaScript库,因此在处理Backbone.js之前先掌握这两种编程语言将为您节省大量时间和无聊的时间.

  • JavaScript简介

  • 学习和掌握jQuery

  • 面向设计师的JavaScript和jQuery.

此外,您还想了解Underscore.js或其后代库Lodash的最新信息.

Backbone.js要求在加载Backbone.js之前先加载这两个库中的一个,因此一定要熟悉一个或另一个.

在线教程

如果您想尽快开始使用Backbone.js并开始运行,那么最好遵循以下一些教程.

我们已经按照复杂程度对它们进行了排序。因此,如果您是初学者,请从列出的第一个资源中入手,因为后一个资源需要具备很多先验知识.

  • Backbone.js入门

  • Adrian Mejia的Backbone.js(绝对入门)

  • 骨干底漆

  • Henback Joreteg用Backbone.js,Underscore.js和jQuery构建单页应用程序

  • 骨干网联系人管理器教程

  • 骨干移动应用程序示例.

Backbone.js GitHub存储库还包括其他教程,博客文章以及Backbone.js Web应用程序示例的详尽列表。.

图书

如果您真的想精通Backbone.js,或者您只希望打印并装订您的知识,请考虑以下经过积极评价的文本.

  • 掌握Backbone.js(2016),作者Abiee Echamea

  • 全栈JavaScript:学习Backbone.js,Node.js和MongoDB(2015),作者Azat Mardan

  • Swarnendu De的Backbone.js模式和最佳实践(2014)

  • Backbone.js蓝图(2014),安德鲁·伯吉斯(Andrew Burgess).

关于Backbone.js的最终想法

Backbone.js是一个JavaScript库,旨在开发一页Web应用程序.

该库的值得注意之处在于,它在应用程序数据和向应用程序用户显示该数据的视图之间提供了完全隔离,并为JavaScript开发人员提供了相对的自由度和相应的责任。.

功能性JavaScript

功能性JavaScript

当程序员谈论函数式编程时,他们通常在谈论两种不同但相关的东西:

  • 一种编程风格,强调故意避免副作用以及隐藏的输入和输出.

  • 从兰巴演算派生的一组编程功能(例如咖喱,地图和过滤器).

这些概念是相关的,因为与函数式编程相关的函数类型通过执行功能强大且复杂的数学计算,可以实现更大程度的代码抽象.

是什么使函数式编程起作用?

每个功能都接受一个或多个输入,并产生一个或多个输出。以这个简单的函数为例:

函数示例(a){
var result = a +1;
返回结果;
}

这个简单的函数接受一个输入a,将其加到该值,然后将结果存储在一个名为result的变量中。在这种情况下,a是输入,结果是输出.

很简单,对?

但是,这个稍微复杂些的功能呢?它的输入和输出是什么?

函数示例(a){
var结果= doSomething(a)+ 1;
返回结果;
}

好吧,现在突然事情变得更加复杂了。我们有一个函数doSomething(),嵌套在函数内部并作用于变量。如果要更改doSomething(),则还必须更改example()的结果.

在这种情况下,我们具有所谓的隐藏输入。无论doSomething()实际上在我们example()函数的输入中做了什么,都无法通过查看我们的函数来确切地知道它将做什么.

另外,我们可以说函数doSomething()具有副作用。这意味着更改doSomething()会影响其他功能。函数的整个范围未包含在函数内.

函数式编程是一种编程风格,通过编写明确声明其所有输入和输出的函数来尝试消除所有副作用以及隐藏的输入和输出.

例如,我们可以通过使函数分开并声明doSomething(a)作为example(a)的输入来以函数样式重做上面的函数,如下所示:

函数doSomething(a){
var b = a + 1;
返回b;
}
函数示例(c){
var结果= c +1;
返回结果;
}
var c = example(doSomething(1));

乍一看,这看起来可能比较复杂,但是您可以轻松地查看声明var c的行,并知道创建输出涉及两个函数,而前面的示例使该信息模糊了.

如果您对确切的功能编程还是有些困惑,那么什么是功能编程? Kris Jenkins撰写的对该主题的优秀技术介绍,适用于任何编程语言.

使用JavaScript进行函数式编程

JavaScript是一种功能编程语言吗?好吧,这个问题的答案取决于您对函数式编程语言的理解。.

您可以使用功能性编程风格和JavaScript来编写代码。但是,普通的JavaScript不包含大多数程序员在谈论函数式编程时所寻找的强大数学函数.

当然,解决方案是构建或包括功能编程功能的JavaScript库。这样做,JavaScript成为了编写功能代码的好语言.

如果您主要关注学习函数式编程风格,而又不关心复杂的数学函数,那么以下资源将帮助您更好地掌握函数式编程风格以及如何将其应用于JavaScript:

  • SitePoint的M David Green撰写的功能性JavaScript简介简要地比较了JavaScript中的命令式,面向对象和功能性编程.

  • 功能JavaScript的温和介绍:James Sinclair的四部分系列.

  • 函数式编程:Eloquent JavaScript的第6章.

功能性JavaScript

虽然JavaScript可以按功能样式进行编程,但正如我们提到的那样,它确实缺少许多函数式程序员正在寻找的那种函数库.

2007年,Oliver Steele发布了Functional —一个JavaScript库,其中介绍了函数程序员经常使用的数学公式和函数.

实际上,Functional并不是一组强迫程序员编写功能代码的约束,而是将一组lambda微积分公式转换为JavaScript函数.

  • “函数”中包含的高阶函数包括映射,缩小和过滤.

  • 功能级别的方法包括curry,partial,compose,guard和直到.

  • 此外,Functional还包括对lambda表达式的支持.

Functional托管在GitHub上,并且完全免费和开源。但是,自2007年以来,它没有发生过重大更新。换句话说,如果您尝试使用旧库,则可能会遇到一些麻烦.

如果您想了解有关Functional JavasScript的更多信息,请查看以下资源:

  • 功能性JavaScript库:位于GitHub.

  • 功能性JavaScript:由Oliver Steele提供。另请参阅以下档案:

    • 功能性JavaScript:公告

    • 功能性JavaScript 1.02:库的更新.

功能性JS

如果使用大约2007 JavaScript库的想法让您有点紧张(应该如此),为什么不提出一个更现代的替代方案?

Lee Crossly的Functional JS于2013年底发布。它与Oliver Steele的Functional相似,因为它基本上是微积分函数的集合,而不是强制执行编程功能样式的约束。但是,它包含的功能范围更广,包括咖喱,阿里,lambda,地图,缩小,选择,分区,分组等等。.

Functional JS托管在GitHub上,官方项目网站提供了出色而详尽的库文档。虽然,应该警告您,文档的编写应假定有经验的开发人员正在阅读该文档.

关于功能性JavaScript的最终思考

函数式编程是为支持lambda演算而开发的一种编程样式,该方法鼓励显式声明所有输入和输出并避免产生副作用。使用JavaScript编码时可以使用功能性编程风格.

但是,标准JavaScript不包括许多函数程序员所寻找的那种强大的数学函数。通过使用免费的JavaScript库(例如Oliver Steele的Functional和Lee Crossley的Functional JS),可以增强JavaScript以使其更好地适应函数式编程风格。.

JavaScript样式

JavaScript样式

JavaScript是一种非常宽容的编程语言。结果,由两个不同的JavaScript程序员编写的同一段代码通常看起来会完全不同.

遵循一组样式准则,即使涉及多个程序员,也可以确保所有代码看起来都是由单个程序员编写的。它还使代码更易于阅读和理解.

在本指南中,我们将提供一组JavaScript编码准则,您可以采用这些准则来编写简洁明了的代码,并确保使用一致的编程风格.

指导原则

当使用包括JavaScript在内的任何语言进行编程时,都要强调清晰度而不是技巧.

这意味着程序员的目标应该是以尽可能易读的方式编写代码,而不是使用最少的击键次数.

如果有两种方法可以做某件事-在JavaScript中,通常有六种或更多种方法可以做某件事-请使用提供最清晰说明的方法,而不是最聪明的方法.

例如:

//聪明,但可能会造成混乱
; [‘foo’,’bar’,’baz’,’qux’]。forEach(function(){
//功能码
});

//有点冗长,但清晰
var foobars = [‘foo’,’bar’,’baz’,’qux’];
函数somethingClever(){
//功能码
};
foob​​ars.forEach(somethingClever);

注释

由于我们将在本指南中始终使用评论,因此让我们先解决评论样式.

程序员应该在提供过多注释而不是过多注释方面犯错。注释是帮助其他开发人员了解正在发生的事情的宝贵方法,还可以帮助原始开发人员记住每段代码的用途.

JavaScript中可以使用三种类型的注释:

  • 单行注释.

  • 多行注释.

  • 内联评论.

我们建议您按照以下方式设置每种评论的格式:

/ **
这是多行注释。这种评论
应该保留用于文件标题并描述
复杂功能的目的.
* /

//这是一行注释。用它来提供简短的注释.

//尝试避免内联注释,如下所示.
var foobars = [‘foo’,’qux’/ *也是quux和quuux * /];

单行和多行注释应始终以空白行开头。此外,单行注释应出现在它们描述的代码上方,而不是旁边或下方。.

多行注释可以采用多种不同的格式设置.

/ ***************************************************** **********
* *
*一些开发人员喜欢创建大块*
*在其中嵌套多行注释。当然可以*
*不是我们的偏好,但是关键是一致性。 *
*如果要使用此格式,请确保*
*始终使用它。 *
* *
****************************************************** ********* /

/ **
*我们的首选是简单。多行注释
*输入内容只需花费更少的精力,就像
*易于阅读-如果您眼神不佳
* 问我们。我们建议使用单个正斜杠
*和两个星号以打开多行注释。然后,
*每行以两个空格缩进,
*星号和一个空格。该评论以
*两个空格缩进,一个星号和一个结尾
*正斜杠.
* /

/ ***************************************************** **********

但是这种风格的评论可以说像
其他样式。它的优点是
易于维护,无论编辑器认为
程序员正在使用.

****************************************************** ********* /

空格,换行符,列和缩进

正确使用空间是代码可读性的最重要决定因素。一致间隔和缩进的代码比替代代码更容易阅读.

缩进

让我们从缩进开始。尽管缩进方式有所不同,但主要的缩进方法(以及我们推荐的方法)是使用两个空格进行缩进.

实际上,可以在每个集成开发环境(IDE)或文本编辑器中配置缩进,因此只需将缩进设置为2个空格,您就可以开始使用.

当我们谈论编程中的列时,我们指的是添加换行符之前应连续出现的字符数。为了便于阅读,添加换行符很重要。通常,共识是80个字符(或列)是一个很好的断点。其他人则选择较小的长度,例如65.

需要说明的另一个问题是换行后使用缩进。发生这种情况时,最好的做法是将包装内容缩进4个空格,而不是如下面的示例所示的2个空格:

var foo =’此变量包含一个很长的’ +
“将分解成多个字符串” +
‘行。为了清楚起见,“ +
“出现在新行上的内容应为” +
“缩进四个空格。”,
bar =’以这种方式缩进更容易’ +
‘在视觉上区分线’ +
“由于换行和换行而导致的中断” +
‘在声明末尾。’;

(请注意,我们正在使用较短的行长以使它们在此网页上看起来不错。)

空格

使用空白的其他一些最佳实践规则包括:

  • 避免行尾和空白行空白。即,避免在代码行的末尾或空行上留有空白。在大多数文本编辑器和IDE中启用“显示不可见”或“绘制空白”将显示这些字符,以便您可以发现并消除它们.

  • 在列表中的逗号后面添加空格,如下所示:var foo = [‘bar’,’baz’,’qux’];.

  • 在括号及其内容之间添加空格,如下所示:function(foo)….

  • 连接字符串时,在运算符和内容之间添加空格,如下所示:’Hello’+’world!’.

  • 添加单个空白行以分隔和关联代码位组就可以了。不建议添加多行.

命名

在JavaScript中命名函数,变量和其他项目时,请遵循以下规则:

  • 尽可能使用易于理解的易读名称.

  • 对数组使用复数名称,对其他类型的变量使用单数名称.

  • 使用camelCase命名函数和变量,如下所示:var longName =”;.

  • 在命名构造函数(对象类)时,请使用PascalCase,例如:function HostingCompany(name,url,rating){….

  • 如果创建符号常量,则使用所有大写字母和下划线将其命名,如下所示:var MAX_RATING = 100;.

  • 创建正则表达式时,请在名称前加上小写字母r,以用于验证电子邮件地址:var rEmail = / [A-Z0-9 ._%+-] [受电子邮件保护] [A-Z0-9.-] +。[AZ] {2,63};.

分号

几乎所有现代JavaScript实现都包含一个称为自动分号插入(ASI)的功能。此功能可以直觉出现分号并自动添加.

结果,一些程序员鼓励其他人不要使用分号,除了少数情况。其他程序员鼓励您添加它们,就像ASI不存在一样.

我们坚决地站在后一个阵营。我们刚刚看到有太多串联的JavaScript文件损坏,以为可以忽略它们.

问题变成了,什么时候应该添加分号?通常,应在每次声明或分配后添加分号。例如:

var foo =”;
foo = 1;
foo ++;
foo = function(){
//需要分号,因为此函数已分配给变量.
};
alert(foo);
console.log(foo);

在语句或函数的大括号后不需要分号-除非函数的最后一部分演示了将函数指定为变量的值.

但是,如果您确实在函数和语句后添加分号,则不会造成任何破坏.

此外,在这样的语句或函数中,切勿在右括号和右花括号之间添加分号:function(parameter); {…或if(条件); {….

行情

在JavaScript中,可以使用单引号或双引号。但是,大多数已发布的样式指南中的共识是使用单引号-我们很高兴与大家达成共识。.

当您需要使用多个引号时,例如在JavaScript中嵌套HTML时,请在单引号和双引号之间切换.

// 做这个
var foo =’bar’;

// 不是这个
var foo = "酒吧";

// 还行吧
var foo =’这里有一些内容。’;

//但这更容易阅读
var foo =’这里有一些内容。’;

变数

JavaScript非常宽容地允许以多种格式声明变量。我们建议使用一种尽可能易读和清晰的格式.

//这很糟糕,因为很难阅读。不要这样.
var foo = "", bar = [],baz = {},qux = function(){
/ *在此处插入语句。 * /};

//这很糟糕,因为不一致.
var foo =”,
bar = [];
var baz = {};
qux = function(){/ *在此处插入语句。 * /};

//这很好,因为它是一致且清晰的.
var foo =”,
酒吧= [],
baz = {},
qux = function(){
//在此处插入语句.
};

//最好.
var foo =”;
var bar = [];
var baz = {};
var qux = function(){
//在此处插入语句.
};

很多时候,您想在函数内部或if … else语句内部声明变量。发生这种情况时,将所有变量组合在一起并首先声明它们.

数组和对象

创建复杂的数组和对象可能会产生难以辨认的代码。因此,正确的缩进和换行符的使用至关重要。让我们回顾一下有关数组和对象创建的良好和不良编码实践的一些示例.

//可以在一行上声明简短的简单数组.
var foobars = [‘foo’,’bar’,’baz’,’qux’];

//长数组应使用换行符声明.
var emailAddresses = [
‘[受电子邮件保护]">联系我们’,
‘[受电子邮件保护]">网站管理员,
‘[受电子邮件保护]">销售’,
‘[受电子邮件保护]">支持’
];

//对象应始终以换行符声明.
var占位符= {
1:“ foo”,
2:“酒吧”,
3:“巴兹”,
4:“ qux”
};

陈述和功能

正确设置语句和函数的格式可以使它们更易于理解,还可以帮助避免在浏览器连接或呈现代码时出现问题。以下是通常应格式化函数和语句的方式:

函数functionName(){
//在此处插入代码.
}

函数,if语句,语句,while语句等都应遵循该基本格式。指示该样式的规则包括:

  • 始终将左括号与函数或语句参数放在同一行,如下所示:(parameters){…。在右括号和左括号之间添加换行符可能会导致自动分号插入(ASI)通过添加而中断代码分号不当.

  • 始终将语句和函数分成多行,所有函数或语句代码都出现在左括号和右括号之间的行上.

嵌套功能

如下面的示例所示,在函数内部嵌套函数是完全可以接受的:

函数fooBar(foo){
var bar = function(){
//这里的功能代码.
}
函数nestedFunction(){
//更多功能代码在这里.
}
返回nestedFunction(bar);
}

但是,仅在将函数分配给变量时,才应在语句内嵌套函数。这是因为ECMAScript标准不支持语句中的嵌套函数.

尽管大多数JavaScript实现都能很好地处理这种不当使用,但是严格遵循ECMAScript的实现将无法正确处理代码.

以下示例说明了区别:

如果(foo > 酒吧){

//不要这样做
函数fooBar(foo,bar){
foob​​ar = foo + bar;
返回foobar;
}
fooBar(foo,bar);

//改为这样做
var foobar = function fooBar(foo,bar){
返回foo + bar;
}
}

在编写if … else语句时,请避免在语句的每个部分之前添加换行符,以使整个语句都已连接在一起.

//使用以下格式.
如果(条件){
//在此处插入语句.
} else if(condition){
//这里的附加语句.
}其他{
//这里还有更多语句.
}

//不要这样做。令人困惑.
如果(条件){
//在此处插入语句.
}
否则(条件){
//这里的附加语句.
}
其他{
//这里还有更多语句.
}

比较方式

在JavaScript中比较两个值时,有两个选择。您可以使用===和!==检查严格相等性,也可以使用==和!=检查抽象相等性.

这两个选项之间的区别在于,当您检查抽象相等性时,JavaScript机将尝试在返回false之前尝试转换值类型。.

但是,当您检查严格相等性时,只有类型和值都匹配时,机器才会返回true。以下是一些如何在实践中发挥作用的示例:

// 一个号码
var foo = 0;

//一个字符串
var bar =’0′;

//评估为“真”
foo == bar;
foo == false;
bar == false;
foo!== bar;

//评估为’false’
foo!= bar;
foo === bar;
foo === false;
foo === false;

抽象比较的使用可能导致对变量类型的混淆。因此,我们建议坚持严格的比较,以避免出现以下问题:

//一个字符串
var foo =’123′;

// 一个号码
var bar = 123;

//将返回true
foo == bar;

//将返回false
foo === bar;

如果使用抽象比较,则您可能会认为foo实际上等于字符串“ 123”时,两个值都等于数字“ 123”。

因此,您可以尝试使用foo中的字符串执行数学计算。值的严格比较会提示您问题所在,并让您知道在执行计算之前需要将foo转换为数字.

了解有关JavaScript样式的更多信息

如果您想了解有关JavaScript样式的更多信息,那么以下来源将非常有用:

  • 一致的惯用JavaScript编写原理

  • JavaScript标准样式

  • jQuery Foundation JavaScript样式指南

  • Google JavaScript样式指南.

关于风格的最终思考

在编写JavaScript时使用一致且周到的样式可以使您的代码更易于阅读和理解.

此外,在涉及多个开发人员的项目上使用一致的样式可以确保所有代码以一致的方式显示.

在本指南中,我们提出了一种用于编写JavaScript代码的建议样式。采用它,对其进行修改以适合您的需求,并获得更清晰,更清晰,更一致的代码的好处.

CoffeeScript

CoffeeScript

CoffeeScript(CS)是由Jeremy Ashkenas设计的简洁编程语言,可编译成标准JavaScript,可在任何JavaScript环境中执行.

它是一种开放源代码语言,在Ashkenas和将近200名贡献者的军队的协作下,正在进行的开发已完成.

CS旨在让开发人员使用简单明了的语法编写代码。然后将其编译为利用编程最佳实践并且可以在任何JavaScript运行时环境中轻松执行的JavaScript代码.

CoffeeScript的历史

2009年12月,Jeremy Ashkenas创建了一个新的GitHub存储库,其初始提交标记为“神秘语言的初始提交”。

最初的提交很快就建立了,并且该语言的第一个正式发行版本CS版本0.1.0不到2周后的2009年圣诞节前夕。.

CS编译器最初是用Ruby编写的。但是,2010年2月发布的版本0.5用用CoffeeScript本身编写的版本替换了编译器。但是,离项目的第一个稳定版本(即1.0.0版)还有很长的路要走,该版本于2010年圣诞节前夕发布,大约在该项目生效后的一年.

最新的CoffeeScript版本是2018年5月的2.3.1版本.

为了及时了解CS上最新的开发工作,请参阅CoffeeScript 6.0 GitHub存储库.

杰里米·阿什肯纳斯(Jeremy Ashkenas)

CS的设计师Jeremy Ashkenas是一位有影响力且富有成效的JavaScript开发人员。除CS外,Jeremy还开发了以下值得注意的项目:

  • LiveScript:一种功能编程语言,支持面向对象和命令式编程样式,它是CoffeeScript的间接后代。像CS一样,它可以编译成标准JavaScript.

  • Backbone.js:灵活的JavaScript库,专为单页Web应用程序而设计,强调将应用程序逻辑代码与定义应用程序数据表示的代码分开.

  • Underscore.js:具有实用程序功能的JavaScript库,可解决常见的编程任务.

杰里米(Jeremy)还是《纽约时报》的开发商,也是会议的热门演讲者,您会在YouTube上找到许多他的演讲视频,例如:

  • 转运者的崛起

  • JS.Next和CoffeeScript

  • 共生语言

  • CoffeeScript作为JS /下一个

  • 一杯CoffeeScript.

CoffeeScript语法

CS标语是“ Unfancy JavaScript”,该标语可以作为CS语法的有效描述加倍.

设计CoffeeScript的主要目标之一是创建一种易于编写的语言-以Ruby,Python和Haskell等语言为蓝本。因此,CoffeeScript放弃了许多适用于JavaScript的语法规则.

最值得注意的是,CS中省略了花括号,分号以及诸如var和function之类的赋值关键字的使用.

这使得CS非常简洁,但是这样做是以牺牲可读性为代价的。为了了解其工作原理,请考虑以下JavaScript函数,后跟CS等效项.

//函数返回JavaScript的平均主机等级
var hostRating;
hostRating = function(totRatingsVal,totRatingsNo){
返回totRatingsVal / totRatingsNo;
}

// CoffeeScript中的相同功能
hostRating =(totRatingsVal,totRatingsNo) ->
totRatingsVal / totRatingsNo

如您所见,CS版本更加简洁,简短,并且包含较少的语言运算符。这使得CS版本的键入速度更快,但在一定程度上也掩盖了幕后发生的事情。.

精巧的CoffeeScript

CS的一种有趣的变体称为“识字CoffeeScript”。只要源代码文件以扩展名.litcoffee而不是.coffee结尾,编译器就可以识别这种变化。.

Literate CS允许开发人员使用markdown语法编写代码。缩进的代码块被识别为程序代码时,编译器将忽略所有文字作为注释.

让我们看一个简短的例子.

## Literate CoffeeScript

[Literate CoffeeScript](http://coffeescript.org/#literate)允许使用[markdown](https://daringfireball.net/projects/markdown/syntax#precode)编写CoffeeScript代码。所有文本-标题,段落,列表等-都会被编译器忽略并视为注释.

但是,缩进的代码块(例如下面的代码块)已编译为JavaScript.

fooBar =(foo) -> foo + 1
doSomething =(fooBar) -> 警报fooBar
如果是fooBar?做一点事

此功能创建了一些有趣的场景,可以将CoffeeScript文件以markdown的形式编写并作为教程呈现在网页上,同时充当程序源代码的功能.

如何获取CoffeeScript

CS编译器通常使用Node.js安装和运行,并且CS作为NPM软件包提供。但是,也可以从GitHub下载或克隆该项目。.

如果您尚未准备好安装CoffeeScript,也可以通过以下方式尝试一下它:前往CoffeeScript.org并选择“尝试CoffeeScript”标签.

此选项卡包含基于浏览器的CoffeeScript环境。只需在左侧键入CoffeeScript,然后在右侧观看它实时编译为JavaScript的过程.

CoffeeScript资源

如果要学习CS,首先要做的就是学习JavaScript。最好将CS视为一种旨在提高JavaScript开发人员生产力,使他们产生更少错误并产生采用最佳实践的JavaScript的语言。.

由于CS可以编译为标准JavaScript,因此调试CS需要JavaScript编程的坚实基础。此外,如果您已经了解JavaScript,则可以大大降低CS学习曲线,因为您将能够查看编译器输出以了解CS代码在做什么.

考虑到这一警告,以下资源将帮助有能力的JavaScript开发人员在短时间内开始使用CS.

讲解

  • 一小口CoffeeScript:CodeSchool提供的简短而免费的入门课程.

  • 《 CoffeeScript入门指南》:本教程名副其实,可以安装软件并教授该语言的基础知识.

  • CoffeeScript.org:CS官方网站包含该语言的详细介绍和基于浏览器的编译器.

  • Smooth CoffeeScript:基于浏览器的互动式免费电子书.

  • JavaScript源地图简介:调试CS需要使用源地图。本教程将帮助您开始调试CS代码.

图书

  • 《 CoffeeScript:关于使用CoffeScript开发应用程序的指南》(2016年),作者:尼古拉斯·布朗.

  • 由Reg“ raganwald” Braithwaite创作的CoffeeScript Ristretto(2014)。可免费在线获得.

  • Lee和Marino创作的《 CoffeeScript in Action(2014)》.

  • Alex MacCaw撰写的《 CoffeeScript小书》(2012年)。可免费在线获得.

摘要

CoffeeScript是一种编程语言,具有简洁的语法,可最大程度减少关键字和运算符的使用,并使开发人员能够快速编写精美的代码.

此外,将CS代码编译为标准JavaScript后,可以在任何启用JavaScript的环境中执行.

JavaScript摘要

JavaScript摘要

JavaScript的说唱不好。但这是由于它是如此有用和如此使用。了解JavaScript非常重要。尽管您可以使用其他语言做更多的事情,但是JavaScript仍然是最有用的语言.

希望通过本介绍,您将能够快速启动并运行-创建交互式网站.

进一步阅读

我们有更多与编码和开发有关的指南,教程和信息图:

  • F#编程:了解.NET框架中的函数式编程.

  • Erlang编程简介和资源:一种用于创建并行代码的早期功能语言.

  • Swift简介和资源:这是最新的类C语言。编程的未来?在这里找到!

您应该学习什么代码?

对应该学习哪种编程语言感到困惑?查看我们的信息图,您应该学习什么代码?

它不仅讨论了语言的不同方面,还回答了一些重要问题,例如:“我将以编程为生赚多少钱?”

您应该学习什么代码?
您应该学习什么代码?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me