初探JavaScript

前言

昨夜山河齐恸震，今朝大星辞九州。在写这篇博客的时候，袁老逝世了。在神农离去的两分钟后，吴孟超先生也离开了人世。两位巨人的远去，让我不禁感慨，我们无法抵抗浪潮，但会永远铭记灯塔。

前端知识体系都有什么东东？

  1. HTML：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容。

  2. CSS：层叠样式表（Cascading Style Sheets），设定网页的表现形式。

    • CSS预处理器：CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来讲就是，“用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化成为正常的CSS文件，以供项目使用”。

  3. JavaScript：是一种弱类型脚本语言，其源代码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为。

  4. JavaScript框架：

    • jQuery：优点是简化了DOM操作，缺点是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6\7\8；
    • Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如1代->2代，除了名字，基本就是两个东西）
    • React：Facebook出品，一款高性能的JS前端框架；特点是提出了新概念【虚拟DOM】用于减少真实DOM操作，在内存中模拟DOM操作，有效提升了前端渲染效率；缺点是复杂，因为需要额外学习一门【JSX】语言；
    • Vue：一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular（模块化）和React（虚拟DOM）的优点；
    • Axios：前端通信框架；因为Vue的边界很明确，就是为了处理DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery提供的AJAX通信功能；

  5. UI框架：

    • Ant-Design:阿里巴巴出品，基于React的UI框架；
    • ElementUI、iview、ice：饿了么出品，基于Vue的UI框架；
    • Bootstrap：Twitter推出的一个用于前端开发的开源工具包；
    • AmazeUI:又叫“妹子UI”，一款HTML5跨屏前端框架；

  6. JavaScript构建工具：

    • Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript；
    • WebPack：模块打包器，主要作用是打包、压缩、合并及按序加载；

三端统一

  1. 混合开发（Hybrid App）：主要目的是实现一套代码三端统一（PC\Android:.apk\IOS:.ipa）并能够调用到设备底层硬件（如传感器、GPS、摄像头等），打包方式有如下两种：

    • 云打包：HBuild->HBuildX，DCloud出品；API Cloud；
    • 本地打包：Cordova（前身是PhoneGap）；

  2. 微信小程序：详见微信官网，这里就额是介绍一个方便微信小程序UI的框架：WeUI；

后端技术

前端人员为了方便开发也需要掌握一定的后端技术，但我们Jaca后台人员知道后台体系极其庞大复杂，所以为了方便前端人员开发后台应用，就出现了Node.js这样的技术。

NodeJS的作者已经声称放弃了NodeJS（说是架构做的不好再加上笨重的node_modules，可能让作者不爽了吧），开始开发全新的架构Deno。

既然是后台技术，那肯定也需要框架和项目管理工具，NodeJS框架及项目管理工具如下：

  • Express:NodeJS框架
  • Koa：Express简化版
  • NPM：项目综合管理工具，类似于Maven
  • YARN：NPM的代替方案，类似于Maven和Gradle的关系

什么是 JavaScript？

1.概述

JavaScript是一门世界上最流行的脚本语言

然而Java和JavaScript鸡毛关系没有，JavaScript名字看起来带Java，实际上是在蹭Java的热度。

一个合格的后端人员，必须要精通JavaScript

2.历史

ECMAScript它可以理解为是JavaScript的一个标准，最新版本已经到了es6版本，但是大部分浏览器还只停留在支持es5代码上！

问题所在：开发环境–线下环境 不一致

快速入门

1.引入到HTML中

lesson1.js

1
alert('你好啊，中国男孩！');

lesson1.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--Script标签内写JavaScript代码-->
    <script src="js/lesson1.js"></script>
<!--javascript标签必须成对出现-->
</head>
<body>
</body>
</html>

效果：

2.基本语法与数据类型

JavaScript的基本语法同Java并无太大的差别，我们主要来看定义变量的方式。

lesson2.js

1
2
var num = 1;
alert(num);

lesson2.html

同lesson1.html相同

效果：

JavaScript中变量定义的方法很爽，无需指明变量的类型，直接赋值就好。它其实就像python中变量定义的方法，只不过前面要加一个var。

number

JavaScript不区分整数和小数，只有一个类型number。

1
2
3
4
5
6
123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//复数
NaN//not a number
Infinity//表示无穷大

字符串

‘abc’ ， “abc”

布尔值

true，false

逻辑运算

1
2
3
4
5
&& //两个都为真，结果为真

|| //一个为真，结果为真
  
! // 真即假，假为真

比较运算符（重要）

1
2
3
= //赋值
== //等于（类型不一样，值一样，也会判断为true）
=== // 绝对等于（类型一样，值一样，结果为true）

坚持不要使用==进行比较

须知：

  • NaN===NaN，这个与所有的数值都不相等，包括自己

  • 只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题

1
console.log((1/3)===(1-2/3)) // false

尽量避免使用浮点数进行运算，存在精度问题。

1
console.log(Math.abs(1/3-(1-2/3))<0.00000001)// true

null和undefined

  • null 空
  • undefined 未定义
1
console.log(a) // undefined

数组

定义数组的两种方式：

1
1.var arr = [1,2,3,4,5,'hello',true,null]
  • Java的数组内必须是相同的数据类型，JavaScript不必。
1
2.new Array(1,2,3,4,5,'hello',true,null)
  • 为了保证代码的可读性，定义数组尽量使用第一种方式。

如果取数组下标，越界了的话，就会==undefined==。

对象

对象是大括号，数组是中括号。

1
2
3
4
5
var Person = {
    name:"yaning",
    age:20,
    tags:['js','java','web']
}
  • 每个属性之间通过逗号隔开，最后一个不需要添加逗号。
1
Person.name // "yaning"