全栈开发实战宝典(txt+pdf+epub+mobi电子书下载)


发布时间:2020-06-06 03:32:10

点击下载

作者:优逸客科技有限公司

出版社:机械工业出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

全栈开发实战宝典

全栈开发实战宝典试读:

前言

读者现在拿在手里的这本书是优逸客科技有限公司出品的“实战宝典”系列丛书的第二部,第一部《HTML 5实战宝典》可以在各大书店及相关网店购买。

优逸客科技有限公司是一家全国知名的实训机构,拥有一流的师资团队,成员大多来自北京、上海的一线公司,他们拥有丰富的实战经验。多年来,从这里走出了3000 多名优秀的前端工程师,成就了无数学员的梦想。2014年初,我们决定把自己掌握的知识和经验分享给更多的人,几经筹划,最终本系列丛书诞生。当时大量Hybird App和Web App兴起,企业为了追求高效,会使用HTML 5替代原生开发,导致市场对HTML 5技术人才的需求量大大增加,为了满足这个需求,我们出版了丛书的第一部《HTML 5 实战宝典》。很多前端工程师学习阅读之后纷纷表示受益匪浅,积极反馈要求分享更多的知识以适应新的Web 开发趋势,正好在此期间我们的课程体系经过多次打磨修正,全面升级到了全端+全栈的体系,我们觉得非常有必要把全端+全栈的知识分享给大家,所以就有了丛书的第二部《全栈开发实战宝典》,希望大家喜欢!

本书内容主要围绕全栈开发展开,那么什么是“全栈”?“全栈”翻译自英文Full-Stack,表示为了完成一个项目所需要的一系列技术的集合。IT行业发展到现阶段,开发一个Web 应用,工程师需要具备的技能涵盖前端标记语言、前端编程语言、服务器端编程语言、数据库等,这些技术互相联系、互相依赖,缺一不可。以至于所有的IT 公司都亟须有全栈人才的加入,缩短开发周期、减少开发成本、增强产品的伸缩性和可维护性。

近几年前端技术飞速发展,使得前端程序语言JavaScript“焕发”出了它本该具有的光芒。在这种力量的支持下,后台JavaScaript 也迅猛发展,我们称之为Node.js。Node.js 的诞生使得前端程序员无障碍地进入到后台世界,与此同时,非关系型数据库如火如荼。JavaScript 再次发力完成对MongoDB 的操作和控制。至此,JavaScript 以全新的姿态进入人们的视野。一种语言能够完美地衔接前端、后台、数据库,这是其他语言难以做到的,使得前端人员迅速占领了全栈工程师的高地。

围绕这两个核心概念,本书分为4部分来介绍全端和全栈开发中涉及的技术。

1. 全栈之Java Script

本部分主要介绍Java Script,包含它的“前世今生”、语法结构、操作逻辑等。这一部分会结合读者在工作中遇到的大量实例来全面剖析Java Script的每一个知识点。通过对比的方式对ES5和ES6做解析,让读者能够明白新的语法结构和语言升级的来龙去脉。

2. 全栈之PHP+MySQL

本部分主要介绍PHP 和MySQL。作为一名前端工程师来说,向后台进军显然是不太容易的。我们需要掌握新的语言,需要掌握不同于前台的编程思想,需要和数据打交道。但幸运的是,Node.js 的诞生帮助前端人员大大降低了进入后台的门槛。但是Node.js 作为一个“新秀”,它天然继承了大部分语言的精髓,所以入门相对来说比较难,于是我们先从PHP这个简单、优秀的语言说起,让读者先明白一个应用前后台的架构模式和编程思想,然后再进入Node.js的学习。

这一部分内容并不是本书的重点,但是它起着承前启后的作用,既能整合前面前端的内容,又能理清后面Node.js 的编程思想,同时读者还能再掌握一门语言。这一部分中,我们将会以实际项目开发的思路带领读者写一个自己的MVC框架,这样既能熟悉PHP语法,又能了解PHP的主流编程思想,同时还能掌握现在流行的一些架构模式。

3. 全栈之框架

本部分对Angular JS和React JS等流行的框架进行了详细的阐述。

4. 全栈之Node.js

Node.js是一个让JavaScript 运行在浏览器之外的平台。它实现了诸如文件系统、模块、包、操作系统API、网络通信等JavaScript Core没有或不完善的功能。

本部分的讲解覆盖了Web 开发中的大多数知识点,从原生JavaScript 到AngularJS、ReactJS框架,从PHP到Node.js,深入讲解ES6核心内容,全面剖析Node.js开发模式,全面解读MVVM 模式和组件化开发模式,全面分析流行框架以及前端自动化开发工具的原理。选题案例应用价值高,且全部来源于大型项目的真实案例,完全可以应用于真实的项目。

同时,本书作者团队曾指导上千名前端、全栈开发工程师高薪就业,学习成果久经考验,列举的实例数量多,质量高,覆盖最前沿的技术方案。他们不仅精通程序开发,同时又是经验丰富的讲师,对学习过程中的重点、难点,以及学生容易感到困惑的点都有非常精准的把控,知识点之间的关联、顺序都是根据多年的实训经验积淀而成,这一点在本书的各个章节中都有体现。

看着这样一本书的诞生,我们百感交集,在这里要感谢所有为本书付出了大量精力的同事,没有他们的辛勤工作,就没有本书的问世,他们分别是优逸客公司总经理张宏帅,副总经理严武军,实训副总监岳英俊,全栈团队马彦龙、候宁洲、王琦、马松、李星、石晓蕾、杨晓春、杨登辉。在本书编写过程中,他们加班加点,几易其稿,精益求精,力求做到让所有知识点都清晰明了,力争每一段示例代码都是经过深思熟虑的精品,尽最大努力尝试让读者在阅读的过程中,不仅可以学到技能,同时还能感受到代码之美!

因为作者水平有限,书中难免会出现纰漏和瑕疵,请广大读者批评、指正。编者

第1部分 全栈之JavaScript

从Web的发展史来看,Web 1.0以展示和呈现信息为主。从Web 2.0开始以使用和交换信息为主,即人机交互。交互的出现使得人们能在互联网上进行各种各样的活动,如社交、购物、观影等,而互联网的发展不仅于此。移动端的出现使得人们不再局限于计算机旁,每个人则变为行走的数据。离开了固定局促的计算机旁,人们发现基于互联网能做更多的事情,如移动支付、移动办公、移动餐饮、移动学习、移动娱乐,越来越多的事情都能在移动中完成。所以人们需要的交互越来越多,交互的逻辑也越来越复杂。于是开始进入Web 3.0时代也就是万物互联的时代。

JavaScript“生于”Web 1.0,但是在Web 2.0的时候“粉墨登场”,它的出现正好契合了Web 2.0 时代的标志。它使得前端页面具有了动态的效果,具有了交互的生命和产品的灵魂。于是JavaScript受到了越来越多的从业人员的追捧和喜爱。JavaScript一路追随着互联网的发展在更新和迭代,于是ES5、ES6、ES7 一路“高奏凯歌”,全面占领了前端的高地,能够高效地运行在PC端、移动端、多端,为下一步布局做好充分的准备。

JavaScript 现在已然是前端的代名词,成为前端的核心技术。它能够对重构的页面进行动态操作,能够实现人类对于前端页面操作的所有想象,能够为静态的页面注入活力四射的数据。本章将对JavaScript 展开详细的讲解,结合大量的实例来全面剖析JavaScript 的每一个知识点。通过对比的方式对ES5 和ES6 做解析,让读者明白新的语法结构和语言升级的来龙去脉。

JavaScript是进阶Web全栈开发的必经之路,也是Web全栈开发中最核心的语言,本部分对后续内容有着举足轻重的作用。

第1章 JavaScript基础概念

本章主要内容● JavaScript的用途● JavaScript的发展历史● JavaScript的语法特点● JavaScript的引入方式● JavaScript中的输出工具

全端意味着利用相关的技术、编程手段、编程思想将视觉和交互效果无缝、完美地重构到多种终端。本章将从基本语法开始,详细阐述能够实现交互效果的JavaScript。

JavaScript 是一门跨平台、面向对象的弱类型的轻量级的解释型语言,也是目前最流行的网页前端脚本语言之一,通常被称为JS。那些炫酷的页面效果、良好的交互体验、表单验证等,都是通过JavaScript实现的。

随着AJAX的出现,前端可以在不刷新页面的情况下和后台进行数据交换,从而实现页面数据的更新。jQuery 库的出现,使得JS 编写变得非常简洁。类似于ECharts、D3 插件的出现,使得前端实现丰富的数据可视化图表变得更加容易,AngularJS、React等优秀框架的出现,大大提高了开发效率。最终Node的发布,使得JS不仅可以运行在前端,还可以运行在服务器上。现在,前端工程师通过JS实现网站开发已经成为现实了。

以上只是陈列了本书中涉及的一些插件和框架,当然还远不止这些,那么面对这么多框架和插件,该如何快速上手呢?既然它们都是建立在JavaScript 的基础上,那么只要把JavaScript中的基本知识以及原理都理解透彻,学习将会变得容易很多。

关于JavaScript,大家必须深刻理解并熟练运用的有3 部分,即变量、对象、函数。具体内容会在接下来的章节中讲到。

本章将重点阐述JavaScript的基础概念。

1.1 JavaScript的用途

JavaScript 作为前端开发中的核心语言,其重要性不言而喻,那么用它能做些什么呢?本节将介绍JavaScript的一些应用场合。

1.1.1 数据的验证

JavaScript最初设计的目的就是用来完成表单数据的验证。到今天,利用JavaScript完成数据验证依然是一种重要的验证方式,当然,除了使用JavaScript,表单中也有自带的验证功能,但是一些需要结合数据库的验证依然需要通过后台语言来完成。

例如,优逸客官网(www.sxuek.com),首页中有在线咨询的功能,其中有输入手机号的一个输入框,当用户输入信息时就需要进行数据验证。还有人们经常操作的用户登录、注册等也都需要进行数据验证。

1.1.2 制作页面动态效果

随着网络链接速度的提升和硬件设备的发展,人们越来越不满足于简单、死板的内容呈现方式,通过浏览器,用户更想看到一些不一样的效果,而JavaScript 就是在网页中制作动态效果的比较好用的工具。

例如,优逸客官网的轮播图和楼层跳转等动态效果都是通过JS实现的。

1.1.3 对事件做出响应

JavaScript 是基于事件驱动的,用户可以通过单击、鼠标指针的移入移出、滚轮滚动、键盘按下等一系列的事件来控制页面中代码的执行,进而提升网页的交互性。

例如,在优逸客官网中通过单击banner 图的轮播点、导航栏等,可以进行内容的切换等,包括鼠标指针移入后效果的变化,其实都是JavaScript在对事件做响应。

1.1.4 单页面应用

随着AngularJS等前端框架的兴起,JavaScript 能够在前端网页中处理的逻辑也更加复杂,WebStorage更是给开发人员提供了直接在浏览器中保存数据的便利。以前一些C/S结构的应用现在也可以基于浏览器来实现了。

例如,谷歌在线的Word、Excel等编辑器;各大平台的云,如小米云、谷歌云等都是单页面应用。

1.1.5 网页游戏

H5中的Canvas给开发人员提供了在页面中处理复杂2D、3D效果的接口,当然,操作这些接口的还是JavaScript。虽然如今在浏览器端的网页游戏更多的是通过其他语言实现的,但是基于JavaScript的游戏,现在也可以在游戏市场分一杯羹。

1.1.6 服务器端的应用

Node.js(有关Node.js详见本书的第3部分)就是运行在服务器端的JavaScript。Node.js是一个事件驱动I/O服务端的JavaScript环境,基于Google的V8引擎,执行JavaScript的速度非常快,性能非常好。

JavaScript 发展到目前为止,它不仅仅作为一种客户端语言,而且还能构建服务器,但是无论如何,学习它都需要学习以下3部分:

1)ECMAScript,核心语法部分。

2)浏览器对象模型(BOM),提供访问和操作网页内容的方法和接口。

3)文档对象模型(DOM),提供与浏览器交互的方法和接口。

注:在本书Node 部分还有关于JavaScript 的其他操作,如操作文件、操作数据库等,相关内容请查阅本书的第3部分。

有关BOM和DOM的详细介绍请参考第6章。

1.2 JavaScript的发展历史

如上节介绍所说,JavaScript 拥有诸多用途,那么我们不禁好奇,如此强大的一门语言,它是怎么由来的呢?

1.2.1 悄然诞生

1995年,Netscape(网景)公司的Brendan Eich(布兰登·艾奇)(见图1-1)在公司提出的“看上去与Java 足够相似,但是比Java 简单,使得非专业的网页开发者也能很快上手”的要求下,利用10 天时间就把JavaScript 设计出来了。当然,起初并不是JavaScript 这个名字,最开始叫作liveScript,因为Sun 公司(Java 开发者所在公司)与网景合作的原因,故改名为JavaScript。

同年,不甘落后的微软在自己的IE 浏览器中嵌入了JavaScript的复刻版并且将其命名为JScript,独立发展自己的客户端脚本语言。

1997年,通过网景、Sun、微软等公司以及众多开发者的努力,统一标准的ECMAScript 被作为标准规范推出,标准编号为ECMA-262,从此ECMAScript 就成为JavaScript等脚本语言实现的标准基础。因为命名版权的原因,JavaScript 的正式名称为“ECMAScript”。ECMA(欧洲计算机制造联合会)是制定计算机标准规范的机构,不过在一般场合下,还是把它称为JavaScript。图1-1

1.2.2 稳步发展

1998年、1999年,ECMAScript 2.0和ECMAScript 3.0相继推出,并且稳定下来,在之后的很长一段时间内,JavaScript 都在有条不紊地发展。随着JavaScript 的不断发展,越来越多的人加入到JavaScript 开发者的行列中。当然,因为语言本身设计缺陷的问题,JavaScript越来越多的不足之处渐渐暴露了出来。所以新版本的推出已经迫在眉睫。

2008年,关于JavaScript新版本协商的会议在并不和谐的氛围中落下帷幕,因为有太多激进的改动被提出,众多开发商不能达成一致,所以最终只是采用了一个折中的办法,将一些较小的改动加入到新版本中,并且命名为ECMAScript 3.1。而一些激进的改动则作为JavaScript.next 继续改进。ECMAScript 3.1也在不久后正式更名为ECMAScript 5。

1.2.3 黄金时代

2015年6月,ECMAScript 6.0正式推出,其中包含了大量关于JavaScript的语法补充以及新的语法,因为还有许多改动不断被提出,所以标准委员会决定,在每年6 月份发布一次版本更新,而第一版的正式名称也被改为ECMAScript 2015。

如今,越来越多基于JavaScript的框架出现,JavaScript可以完成的功能也越来越多,使用也越来越方便。AngularJS、ReactJS、VueJS等框架让前端开发进入了全新的模式,而Node.js 的出现和发展也让JavaScript 进入了后台和数据库。在未来一段时间内,JavaScript作为Web全栈开发的核心,将会迎来更加鼎盛的发展。

1.2.4 JavaScript和ECMAScript

如上文所述,ECMAScript 1.0版从一开始就是针对JavaScript 语言制定的,但是之所以不叫JavaScript,有两个原因:

1)Java是Sun 公司的商标,根据授权协议,只有Netscape 公司可以合法地使用JavaScript 这个名字,且JavaScript本身也已经被Netscape 公司注册为商标。

2)想体现这门语言的制定者是ECMA,而不是Netscape,这样有利于保证这门语言的开放性和中立性。

因此,ECMAScript 和JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现。日常场合中,这两个词是可以互换的。

1.2.5 JavaScript和Java

在开始接触JavaScript 时,很多人都会误解JavaScript 和Java。这两个编程语言除了“外貌”看起来有点相似,实则是两种完全不同的编程语言:

1)从发布公司来讲,Java是Sun公司于1995年5月推出的;而JavaScript是1995年由Netscape公司设计并实现的,由于两个公司间的合作关系,Netscape高层希望它看上去能够像Java,所以取名为JavaScript。

2)从本质上来说,Java是面向对象的编程语言;而JavaScript是基于对象的,它本身就提供了很多丰富的内置对象可以供设计人员使用。

3)从执行方式上来讲,Java 是编译性的语言,即在执行之前必须经过编译;而JavaScript 是解释性的语言,在执行之前无须编译,由浏览器解释执行,等等。总之,Java和JavaScript是两个完全不一样的语言。

1.3 JavaScript的语法特点

每个编程语言都有自己的特点,而语法的学习是入门的开始。本节将介绍JavaScript 这门编程语言的特点。

JavaScript是基于对象和事件驱动的松散型的解释性语言,下面一一解释每个特点。

1.3.1 基于对象

基于对象,是因为JavaScript 是基于面向对象的方式开发的,通过构造函数完成类的定义,通过对象冒充和prototype 实现继承。之所以说是继承,是因为它自身就有很多内置的对象可以直接使用,关于JavaScript内置的对象将在第5章中详细介绍。

示例:

1.3.2 事件驱动

在事件驱动这个特点中,事件指的就是用户的一些操作或浏览器的一些行为,如用户单击鼠标、按下键盘上的某个键等。JavaScript 的运行需要事件的驱动来完成,那么对于事件我们可以在HTML代码中添加,也可以在JavaScript代码中添加。

示例:

1.3.3 松散型

之所以说JavaScript 具有松散型特点(有时也称为是一门弱语言),是因为相比Java、C等强语言,它的语法并不是很严格。在强语言中,不同类型的变量声明方式也不相同,而在JS中,不用关注变量的类型,一个var就可以搞定;每一行代码的最后可以加分号,也可以不加分号;函数和var声明的变量都可以在声明之前访问等。

示例:

说明:在上述示例中定义的变量str,在没有声明之前就可以调用,且不报错。此处得到的undefined是个数据类型,并不是错误,后续章节中会讲到。

1.3.4 解释型

在众多编程语言中,如C、C++、Java、JavaScript、PHP等,都可以分为两类,即编译型语言和解释型语言。如果把读者比喻为计算机,那么编程语言就是一本书,读者通过阅读书上的内容,理解书里边的内涵,从而采取某些相应的动作。解释型语言就类似于阅读英文的文献,需要一边看一边翻译。

JavaScript 作为典型的解释型语言,不需要编译,可以由浏览器来解释执行,所以在学习JavaScript时,安装主流浏览器进行测试是很有必要的,如IE、火狐、谷歌。

1.4 JavaScript的引入方式

通过学习前3节,读者已经初步对JavaScript有了一定的了解,为了让静态的HTML页面实现某些动态效果,因此引入JavaScript。本节将重点介绍如何将JavaScript 与HTML 页面正确地联系起来。

总的来说,在HTML网页中引入JavaScript有4种方式,这4种方式各有各的用途,在实际工作中具体采用哪种方式,需要根据具体的需求来决定。

1.4.1 在域名或者重定向的位置引入

示例:

说明:如上述示例,当用户单击链接进行页面跳转或提交表单时就会执行对应的JavaScript语句。在实际工作中,JavaScript语句一般都会写在对应的JS文件中。

1.4.2 在事件中引入

在事件中引入JavaScript,即在元素的某个属性中直接编写JavaScript代码,这里的属性指的是元素的事件属性,如onclick表示鼠标单击事件。

示例:

说明:如上述示例,当用户单击该文本时会执行对应的JavaScript 语句。该方式一般也仅用于测试,在实际工作中,这些操作都是在JS文件中实现的。

1.4.3 在页面中嵌入

在页面中嵌入,类似于之前的CSS通过style标签对在页面中嵌入,JavaScript可以在页面中通过script标签对嵌入。

示例:

注意:JavaScript 代码必须在标签对内编写。该引入方式一般在做练习的时候比较常用,真正做项目的时候不推荐大家使用,因为不能很好地实现前后台分离。

1.4.4 引入外部JavaScript文件

在实际工作中,不同功能的文件一般是分离的,所以外部引入的形式采用较多,引入方式也是采用script标签对。不过这里需要注意的是,在引入外部文件时,script标签对中间是不能放置任何其他内容的!

示例:

注意:引入外部JavaScript 文件的script 标签可以放在head 标签内,也可以放在body标签内。

1.4.5 注意事项

上文中介绍的4种不同的引入方式之间会在代码加载的时候按照书写顺序执行。

多个块之间(即多个script 标签对)的代码最终还是在一个环境中解析的,所以互相之间是有关联的,会相互影响。

示例:

说明:如上述示例,在第一个script 标签对中声明的变量,可以在第二个script 标签对中进行调用。特别注意,在JavaScript脚本中不能出现script标签对。

1.5 JavaScript中的输出工具

在上节中已经学习了如何将HTML页面和JavaScript关联起来,即JavaScript的引入,那么在编写代码的过程中,除了要正确引入文件,编写高质量、优美的语法代码也是必需的。但是在编写过程中难免会碰到一些bug,所以需要一些输出工具来完成一些数据的验证测试。在最终完成的程序中肯定看不到这些输出的代码,但在开发过程中,这些输出调试是必需的,常用的输出方式有console.log()、alert()、document.wirte()等,下面将详细介绍每个输出工具的使用方法。

1.5.1 console

console 是控制台的意思,在浏览器中打开开发者工具就可以找到控制台,各个浏览器都有自己的查看工具,功能各有千秋,常用的控制台命令如下:

1)console.log()可在控制台打印括号中的内容,将要输出的内容写到括号中即可,可以一次输出多个。

示例:

说明:有时在不同的浏览器中可能会输出不同的结果,如对于对象的输出,这是正常现象。

2)console.dir()可详细地输出一个对象的所有属性以及原型链。

示例:

3)console.table(),对于某些复合类型的数据,它可以将其转为表格显示。

示例:

示例输出结果见表1-1。表1-1

4)console.clear()可清空当前的控制台。

当然还有一些其他方法,不过常用的就是这些,读者若感兴趣可以详细查阅console对象。

1.5.2 alert()

方法alert()用于显示带有一条指定消息和一个确定按钮的警告框。

示例:

示例运行结果如图1-2所示。图1-2

说明:alert()会阻塞代码的运行,这在测试的时候对我们非常有帮助,如果不想程序被阻塞,可以采用其他输出方式。

1.5.3 document.write();

此方法会在文档中打印内容并显示到网页中,不过,因为这样的操作会影响文档结构,所以这种方式不推荐使用,可在页面中做一些有个性的输出测试。

1.5.4 prompt(str,[value]);

此方法用于弹出一个输入框,可以为它指定默认值,也可以接收该输入值。

示例:

示例运行结果如图1-3所示。图1-3

1.5.5 confirm()

此方法用于弹出一个确认框,单击确认返回true,单击否返回false。

示例:

示例运行结果如图1-4所示。图1-4

1.5.6 JavaScript注释

在实际开发过程中,除了通过输出工具可以帮助我们进行代码的调试,还可以借助JavaScript注释。

JavaScript注释分为两种:行注释//和块注释/**/。

通过添加注释可以对JavaScript 代码进行解释,或者提高代码的可读性;还可以使用注释来阻止代码的执行。

下面的示例中使用行注释来解释代码:

下面的示例中使用块注释进行多行代码的注释,故块注释又可以称为多行注释:

说明:不能嵌套使用块注释,否则会报错。

第2章 基本构成

本章主要内容● JavaScript变量● 数据类型● JavaScript运算符● JavaScript流程控制

每个编程语言都有自己一套完整的基础语法,当然这些语法之间会有一些类似,如果读者之前有了解过其他语言,将很容易上手。无论哪门语言,都会涉及变量、函数、对象等最基础的知识。

我们在编程过程中更多的是对不同类型的数据在不同的条件下进行不同的操作。每个应用中都会涉及各种类型的数据以及对数据的操作。

本章将介绍JavaScript中有关变量的基础语法以及数据类型、常见运算符和流程控制。

2.1 JavaScript变量

在应用编程中,需要使用变量作为值的符号,而且操作最多的就是变量。变量是整个JavaScript语法最基础的概念。

2.1.1 变量的概念

在代数计算中,通常会使用一个字母来保存值,如字母x上保存一个数值2,字母y上保存一个数值3,之后通过表达式z=x+y,可以计算出z的值为5。

在JavaScript 中,这些字母称为变量。读者可以将变量理解为就是一个用来存储数据的容器。JavaScript 中的变量可以保存和引用任意类型的数据。变量在内存中的存储如图2-1所示。图2-1

在JavaScript 中,变量除了可以用单个的字母来命名,也可以用一些更语义化的名称来命名,如num、sum等。这和它的松散类型关系密切。这里读者需要牢记JavaScript 中的命名规范:

1)严格区分字母的大小写。JavaScript 是区分大小写的语言,即变量名、函数名、关键字都必须采取一致的大小写形式。例如,变量名“num”“Num”“NUM”是3 个不同的变量名;函数名也类似;关键字“var”必须写成“var”,而不能写成“Var”或者“VAR”。

2)变量名必须以字母、下画线、$符号作为开始,后面可以跟任意的字母、数字、下画线、$符号。

3)不能使用关键字或保留字命名。关键字就是JavaScript 中用来执行特定操作的代码,如var。保留字是JavaScript预留的用于执行特定操作的代码,如int。

4)JavaScript 有自己的命名习惯,例如,驼峰命名法:getElementById;首字母大写法:Object()。

5)命名尽量要有实际意义,这样代码的可读性比较高。

在JavaScript中,常常用到标识符(即一个名字)对变量和函数进行命名。在JavaScript中规定了一些标识符专门为自己所用,即关键字,见表2-1。表2-1

除了关键字以外,和其他语言一样,JavaScript 也保留了一些标识符在后续的版本中可能会用到,称为保留字,见表2-2。表2-2

2.1.2 变量的声明和赋值

在ES6之前,变量的声明一般使用var来完成,在ES6中新增了使用let来声明变量的方式。

1.var声明变量

使用var声明和赋值变量有以下4种形式:

1)声明的同时赋值:

说明:在上述示例中通过var定义一个变量url,并同时通过赋值运算符给它赋值。

2)先声明后赋值:

说明:在上述示例中通过var先声明一个变量url,声明后可以在之后使用时再对它进行赋值操作。在上述示例中存在变量覆盖问题,详见2.1.3节。

3)一次声明多个变量,同时赋值:

说明:上述示例和第1种方式声明类似,只不过此处同时声明了多个变量并同时进行赋值,需要特别注意的是,多个变量间要用逗号隔开。

注意:

1)此处有的值上加了引号,有的没加,加了引号的声明是字符串类型的数据,数字17是数值类型的数据。

2)一次性声明多个变量必须要用逗号隔开。

3)一次声明多个变量,然后赋值:

说明:同第3种声明方式,需要注意多个变量间用逗号隔开。

2.Iet声明变量

let是ES6 新增的命令,用法类似于var,但是它所声明的变量只在let 命令所在的代码块内有效。let方式与var方式的区别主要体现在作用域上,这里暂且不做讨论。

不像var存在变量提升现象,即变量可以在声明之前使用,值为undefined。为纠正这种奇怪的现象,let命令改变了语法行为,即变量一定要先声明后使用,否则会报错。

示例:

说明:在上述示例中,通过关键字var 声明的变量foo 可以在声明之前进行访问,只不过结果为undefined,undefined是个数据类型,并不是报错。而通过let声明的变量bar在声明之前进行访问会报错,并非变量未定义。

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载