24、JavaScript

admin管理员组

文章数量:1122855

一、概述

1.1、前端三要素

• HTML (结构)：超文本标记语言(Hyper Text Markup Language)，决定网页的结构和内容。
• CSS (表现)：层叠样式表(Cascading Style Sheets)，设定网页的表现样式。
• JavaScript (行为)：是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页的行为。

1.1.1、结构层(HTML)

• 太简单，略

1.1.2、表现层(CSS)

• CSS层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下：
  • 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器;
  • 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护;
• 这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为**【CSS预处理器】**的工具，提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性，大大提高了前端在样式上的开发效率。
• CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”。常用的CSS 预处理器如下：
  • SASS：基于Ruby，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。
  • LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用LESS。

1.1.3、行为层(JavaScript)

• JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
• Native原生JS开发，也就是让我们按照**【ECMAScript】**标准的开发方式，简称是ES,特点是所有浏览器都支持。截止到当前博客发布时间，ES标准已发布如下版本：（区别就是逐步增加新特性）
  • ES3
  • ES4 (内部，未正式发布)
  • ES5 (全浏览器支持)
  • ES6 (常用，当前主流版本: WebPack打包成为ES5支持! )
  • ES7
  • ES8
  • ES9 (草案阶段)
• TypeScript微软的标准：TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。由安德斯海尔斯伯格(C#、Delphi、TypeScript 之父; .NET 创立者)主导。
• 该语言的特点就是除了具备ES的特性之外还纳入了许多不在标准范围内的新特性，所以会导致很多浏览器不能直接支持TypeScript 语法，需要编译后(编译成JS)才能被浏览器正确执行。

1.2、前端发展史

1.2.1、JavaScript框架

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

1.2.2、UI框架

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

1.2.3、JavaScript构建工具

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

1.2.4、三端同一

• 混合开发（Hybrid App）

  • 主要目的是实现一套代码三端统一（PC、Android：.apk、iOS：.ipa）并能够调用到设备底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：
    • 云打包：HBuild -> HBuildX，DCloud 出品；API Cloud
    • 本地打包： Cordova（前身是 PhoneGap）

• 微信小程序

  • 详见微信官网，这里就是介绍一个方便微信小程序UI开发的框架：WeUI。

1.2.5、后端技术

• 前端人员为了方便开发也需要掌握一定的后端技术但我们Java后台人员知道后台知识体系极其庞大复杂，所以为了方便前端人员开发后台应用，就出现了Node JS这样的技术。
• Node JS的作者已经声称放弃Node JS(说是架构做的不好再加上笨重的node modules，可能让作者不爽了吧)开始开发全新架构的Demo
• 既然是后台技术，那肯定也需要框架和项目管理工具， Node JS框架及项目管理工具如下：
  • Express：Node JS框架
  • Koa：Express简化版
  • NPM：项目综合管理工具，类似于Maven
  • YARN：NPM的替代方案，类似于Maven和Gradle的关系

1.2.6、主流前端框架

1.2.6.1、Vue.js

• iView

  • iview是一个强大的基于Vue的UI库， 有很多实用的基础组件比element ui的组件更丰富， 主要服务于PC界面的中后台产品。使用单文件的Vue组件化开发模式基于npm+webpack+babel开发， 支持ES 2015高质量、功能丰富友好的API， 自由灵活地使用空间。
  • 官网地址
  • Github
  • iview-admin
  • 备注：属于前端主流框架，选型时可考虑使用，主要特点是移动端支持较多

• Element UI

  • Element是饿了么前端开源维护的Vue UI组件库， 组件齐全， 基本涵盖后台所需的所有组件，文档讲解详细， 例子也很丰富。主要用于开发PC端的页面， 是一个质量比较高的Vue UI组件库。
  • 官网地址
  • Github
  • vue-element-admin
  • 备注：属于前端主流框架，选型时可考虑使用，主要特点是桌面端支持较多

• ICE

  • 飞冰是阿里巴巴团队基于React/Angular/Vue的中后台应用解决方案， 在阿里巴巴内部， 已经有270多个来自几乎所有BU的项目在使用。飞冰包含了一条从设计端到开发端的完整链路，帮助用户快速搭建属于自己的中后台应用。

  • 官网地址

  • Github

  • 备注：主要组件还是以React为主， 截止2019年02月17日更新博客前对Vue的支持还不太完善，目前尚处于观望阶段

• VantUI

  • Vant UI是有赞前端团队基于有赞统一的规范实现的Vue组件库， 提供了-整套UI基础组件和业务组件。通过Vant， 可以快速搭建出风格统一的页面，提升开发效率。
  • 官网地址
  • Github

• AtUI

  • at-ui是一款基于Vue 2.x的前端UI组件库， 主要用于快速开发PC网站产品。它提供了一套npm+web pack+babel前端开发工作流程， CSS样式独立， 即使采用不同的框架实现都能保持统一的UI风格。
  • 官网地址
  • Github

• Cube Ul

  • cube-ui是滴滴团队开发的基于Vue js实现的精致移动端组件库。支持按需引入和后编译， 轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。
  • 官网地址
  • Github

1.2.6.2、混合开发

• Flutter

  • Flutter是谷歌的移动端UI框架， 可在极短的时间内构建Android和iOS上高质量的原生级应用。Flutter可与现有代码一起工作， 它被世界各地的开发者和组织使用， 并且Flutter是免费和开源的。
  • 官网地址
  • Github
  • 备注：Google出品， 主要特点是快速构建原生APP应用程序， 如做混合应用该框架为必选框架

• lonic

  • lonic既是一个CSS框架也是一个Javascript UI库， lonic是目前最有潜力的一款HTML 5手机应用开发框架。通过SASS构建应用程序， 它提供了很多UI组件来帮助开发者开发强大的应用。它使用JavaScript MV VM框架和Angular JS/Vue来增强应用。提供数据的双向绑定， 使用它成为Web和移动开发者的共同选择。

  • 官网地址

  • 官网文档

  • Github

1.2.6.3、微信小程序

• mpvue

  • mpvue是美团开发的一个使用Vue.js开发小程序的前端框架， 目前支持微信小程序、百度智能小程序，头条小程序和支付宝小程序。框架基于Vue.js， 修改了的运行时框架runtime和代码编译器compiler实现， 使其可运行在小程序环境中， 从而为小程序开发引入了Vue.js开发体验。
  • 官网地址
  • Github
  • 备注：完备的Vue开发体验， 井且支持多平台的小程序开发， 推荐使用

• WeUI

  • WeUI是一套同微信原生视觉体验一致的基础样式库， 由微信官方设计团队为微信内网页和微信小程序量身设计， 令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。
  • 官网地址
  • Github

1.3、什么是JavaScript

1.3.1、JavaScript的发展历程

• JavaScript诞生于1995年。起初它的主要目的是处理以前由服务器端负责的一些表单验证。在那个绝大多数用户都在使用调制解调器上网的时代，用户填写完一个表单点击提交，需要等待几十秒，完了服务器反馈给你说某个地方填错了…在当时如果能在客户端完成一些基本的验证绝对是令人兴奋的。当时走在技术革新最前沿的Netscape（网景）公司，决定着手开发一种客户端语言，用来处理这种装简单的验证。当时就职于Netscape公司的布兰登·艾奇开始着手计划将1995年2月发布的LiveScript同时在浏览器和服务器中使用。为了赶在发布日期前完成LiveScript的开发，Netscape与Sun公司成立了一个开发联盟。而此时，Netscape为了搭上媒体热炒Java的顺风车，临时把LiveScript改名为JavaScript，所以从本质上来说JavaScript和Java没什么关系。

• JavaScript 1.0获得了巨大的成功，Netscape随后在Netscape Navigator 3（网景浏览器）中发布了JavaScript 1.1。之后作为竞争对手的微软在自家的IE3中加入了名为JScript（名称不同是为了避免侵权）的JavaScript实现。而此时市面上意味着有3个不同的JavaScript版本，IE的JScript、网景的JavaScript和ScriptEase中的CEnvi。当时还没有标准规定JavaScript的语法和特性。随着版本不同暴露的问题日益加剧，JavaScript的规范化最终被提上日程。

• 1997年，以JavaScript1.1为蓝本的建议被提交给了欧洲计算机制造商协会（ECMA，European Computer Manufactures Association）该协会指定39号技术委员会负责将其进行标准化，TC39来此各大公司以及其他关注脚本语言发展的公司的程序员组成，经过数月的努力完成了ECMA-262——定义了一种名为ECMAScript的新脚本语言的标准。第二年，ISO/IEC（国标标准化组织和国际电工委员会）也采用了ECMAScript作为标准（即ISO/IEC-16262）。

1.3.2. JavaScript与Java的关系

• JavaScript的基础语法和对象体系，是模仿Java而设计的。

• JavaScript语言的函数是一种独立的数据类型以及基于原型对象的继承链，是与java语法最大的两点区别。

• JavaScript不需要编译，由解释器直接执行。

1.3.3、JavaScript的实现

• 虽然JavaScript和ECMAScript通常被人用来表达相同的意思，但JavaScript的含义去比ECMA-262中规定的多得多。一个完整的JavaScript实现应由三个部分组成：

  1. 核心（ECMAScript）

  2. 文档对象模型（DOM）

  3. 浏览器对象模型（BOM）

1.3.4、JavaScript的10大设计缺陷

1. 不适合开发大型程序
2. 非常小的标准库
3. null和undefined：在编程实践中，null几乎没用，根本不应该设计它。
4. 全局变量难以控制
5. 自动插入行尾分号
6. 加号运算符
7. NaN
8. 数组和对象的区分
9. == 和===：推荐任何时候都使用"==="（精确判断）比较符
10. 基本类型的包装对象

二、快速入门

2.1、引入JavaScript

• script标签内直接写JavaScript代码
• script标签引入外部的js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--script标签内，写JavaScript代码-->
    <script>
        alert("hello,world:1");
    </script>
    <!--外部引入，script标签必须成对出现-->
    <script src="js/test.js"></script>
    <!--不用显示定义type，默认就是"text/javascript"-->
    <script type="text/javascript"></script>
</head>
<body>


<!--这里也可以存放-->
</body>
</html>

2.2、基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--JavaScript严格区别大小写！-->
    <script>
        //1.定义变量: var 变量名 = 变量值;
        var num = 1; var score = 70;
        alert(num);
        //2.条件控制
        if (score>60 && score<70) {
            alert(60-70);
        }else if (score>70 && score<80) {
            alert(70-80);
        }else {
            alert("other");
        }
        //3.注释
        //我是单行注释
        /*我是多行注释*/
        //4.在浏览器的控制台打印变量
        console.log(score);
    </script>
</head>
<body>

</body>
</html>

2.3、数据类型

• 数值、文本、图形、音频、视频

• number：js不区分整数和小数的类型

  123 //整数
  123.123 //浮点数
  1.23e3 //科学计数法
  -99 //负数
  NaN //not a number
  Infinity //无限大
  

• 字符串：‘abc’ “abc”

• 布尔值：true false

• 逻辑运算：&& || !

• 比较运算符：

  = 赋值
  == 等于（类型不一样，值一样，结果也为true）
  === 绝对等于（类型一样，值一样，结果为true）
  //坚持不要用==
  //注意：NaN===NaN为false，NaN和所有的数值都不相等，包括自己
  //只能通过isNaN(NaB)来判断这个数是否为Nan
  

• 浮点数问题：

  //尽量避免使用浮点数进行运算，存在精度问题！
  console.log((1/3) === (1-2/3))
  console.log(Math.abs(1/3-(1-2/3))<0.00000001)
  

• null和undefined：

  • null：空
  • undefined：未定义

• 数组：

  //Java的数组元素必须是相同类型的对象，js中不要求这样
  var arr = [1,2,3,4,5,"hello",null,true]
  //尽量使用第一种[],保证代码的可读性
  var array = new Array(1,2,3,4,5,"hello",null,true);
  //取数组下标越界时，就会出现undefined(未定义)
  

• 对象

  //对象是大括号，数组是中括号
  //对象的每个属性之间用逗号隔开
  var person = {
      name: "cwlin",
      age: 3,
      tags: ["js","java","web","..."]
  }
  
  //访问对象的属性
  person.name
  >>> "cwlin"
  person.age
  >>> 3
  

2.4、严格检查模式

• 作用：预防JavaScript的随意性导致产生的一些问题
• 前提：IEDA需要设置支持ES6语法
• 使用：“use strict”
• 要求：必须写在JavaScript的第一行
• 局部变量建议都是用let定义

三、数据类型

3.1、字符串

• 多行字符串编写，用反引号``实现

  let str = `hello,
      world!
  `
  

• 模板字符串

  let name = "cwlin"
  let age = 3;
  let msg = `你好, ${name}`;
  console.log(msg); //你好, cwlin
  

• 字符串长度

  str.length
  

• 字符串的可变性：不可变

• 大小写转换

  //这里是方法，而不是属性
  let student = "student";
  let STUDENT = "STUDENT";
  console.log(student.toUpperCase());
  console.log(STUDENT.toLowerCase());
  

• 获取子串的下标，若不存在，则返回-1

  console.log(student.indexOf("tu"));
  console.log(student.indexOf("tun"));
  

• 获取给定位置的子串，注意前闭后开

  console.log(student.substring(2,6));
  console.log(student.substring(1)); //从第一个字符开始截取到最后一个字符
  

3.2、数组

• Array可以包含任意的数据类型

• 长度，假如给arr.length赋值，数组大小可以发生改变，如果赋值过小，元素就会丢失。

  arr.length
  

• 通过元素获得下标索引：indexOf

  arr.indexOf(4) //字符串"1"和数字1是不同的
  

• 截取数组的一部分，返回一个新数组，slice和字符串的substring类似

  arr.slice(3)
  zrr.slice(2,5)
  

• 在尾部插入和弹出：push和pop

  arr.pushh("a","b")
  arr.pop()
  

• 在头部插入和弹出：unshift和shift

  arr.unshift("a","b")
  arr.shift()
  

• 排序：sort

  arr.sort() //默认正序排列
  

• 元素反转：reverse

  arr.reverse()
  

• 拼接：concat，返回新的数组，并没有修改原数组

  arr.concat([1,2,3])
  

• 打印拼接数组，使用特定的分隔符：join

  arr.join("-")
  

• 多维数组

  arr = [[1,2],[3,4],["5","6"]]
  arr[1][2]
  

3.3、对象

• 对象由若干个键值对组成，其中，所有的键都是字符串，值为相应的对象。

• 定义：

  var 对象名 = {
  	属性名: 属性值,
      属性名: 属性值,
      属性名: 属性值
  }
  
  var person = {
      name: "cwlin",
      age: 2,
      email: "123456789@qq",
      score: 100
  }
  

• 对象赋值

  person.age = 3;
  

• 使用一个不存在的对象属性，不会报错！undefined！

  console.log(person.haha); //undefined
  

• 动态地删减属性，通过delete删除对象的属性

  delete person.score; //true
  

• 动态地添加属性，直接给新的属性添加值即可

  person.haha = "haha";
  

• 判断属性是否在这个对象中，xx in xxx

  console.log("age" in person); //true
  console.log("toString" in person); //true
  

• 判断属性是否是这个对象自身拥有的，hasOwnProperty()

  person.hasOwnProperty("age"); //true
  person.hasOwnProperty("toString") //false
  

3.4、流程控制

• if-elseif-else

• while、do-while、for

• 数组循环

  var age = [1,4,23,2,31,3,5,6,7];
  age.forEach(function (value){ //函数
      console.log(value);
  })
  for(var index in age){ //索引
      console.log(age[index]);
  }
  for(var value of age){ //元素
      console.log(value);
  }
  

3.5、Map和Set

• Map：键值对

  var map = new Map([["tom",100],["jack",90],["rose",80]]);
  var name = map.get("tom"); //取值
  console.log(name);
  map.set("admin",123456); //新增或修改
  console.log(map);
  map.delete("jack"); //删除
  console.log(map);
  

• Set：无序、不重复的集合

  var set = new Set([3,1,2,2,1]);
  console.log(set);
  set.add(5); //添加
  console.log(set);
  set.delete(2); //删除
  console.log(set);
  console.log(set.has(3)); //判断包含
  

• iterator：遍历

  for(let x of map){
      console.log(x);
  }
  for(let x of set){
      console.log(x);
  }
  

四、函数

4.1、定义函数

• 定义方式一：

  function abs(x){
      return x>=0 ? x : -x;
  }
  

  • 一旦执行到return，代表函数结束返回结果！
  • 如果没有执行return，函数执行完也会返回结果，结果就是undefined。

• 定义方式二：

  var abs function(x){
      return x>=0 ? x : -x;
  }
  

  • function(x){…} 这是一个匿名函数。
  • 可以把结果赋值给abs，通过abs就可以调用函数！

4.2、调用函数

• 参数问题：JavaScript可以传入任意个参数，也可以不传入参数。

• 假设不存在参数，如何规避？

  function abs(x){
      //手动抛出异常
      if (typeof x!=="number"){
          throw "Not a Number!"
      }
      return x>=0 ? x : -x;
  }
  

• arguments是JavaScript免费赠送的关键字，代表传递进来的所有参数，是一个列表。

  console.log("x -> "+x);
  for (var i = 0; i < arguments.length; i++){
      console.log(arguments[i]);
  }
  

  • argument包含所有的参数，有时候我们需要使用多余的参数来进行附加操作，需要排除已有参数。

• rest 是 ES6引入的新特性，获取除了已经定义的参数之外的所有参数。

  function add(a,b,...res){
      console.log("a -> "+a);
      console.log("b -> "+b);
      console.log(res);
  }
  

  rest参数只能写在最后面，必须用…标识。

4.3、变量的作用域

• 在JavaScript中，var定义的变量实际是有作用域的。

• 假设在函数体中声明，则在函数体外不可以实现。（非要实现的话，可以研究以下***闭包***）

  function f(){
      var x = 1;
      x = x + 1;
  }
  x = x + 2; //Uncaught ReferenceError: x is not defined
  

• 如果两个函数使用了相同的变量名，只要在函数内部就不冲突。

  function f1(){
      var x = 1;
      x = x + 1;
  }
  function f2(){
      var x = '1';
      x = x + 1;
  }
  

• 内部函数可以访问外部函数的成员，反之则不行。

  function f3(){
      var x = 1;
      function f4(){
          var y = x + 1; //2
      }
      var z = y + 1; //报错
  }
  

• 假设内部函数变量和外部函数变量重名，在JavaScript中，函数查找变量从自身函数开始，由内向外查找。假设外部存在内部函数的变量，则内部函数会屏蔽外部函数的变量。

  function f5(){
      var x = 1;
      function f6(){
          var x = 'A';
          console.log('inner'+x); //innerA
      }
      console.log('outer'+x); //outer1
      f6();
  }
  

• 提神变量的作用域：JavaScript执行引擎，自动提升了变量y的声明，但是不会提升变量y的赋值。具体如下：

  function f7(){
      var x = 'x' + y;
      console.log(x);
      var y = 'y';
  }
  function f8(){
      var y;
      var x = 'x' + y;
      console.log(x);
      y = 'y';
  }
  // undefined，f7()和f8()效果相同。
  

• 这是在JavaScript建立之初就存在的特性：所有变量的定义都放在函数的头部，不要随便乱放，便于代码维护。

  function f9(){
      var x = 1,
          y = x + 1,
          z,i,a; //undefined
  }
  

• 全局变量

  x = 1; //全局变量
  function f10(){
      console.log(x);
  }
  f10();
  console.log(x);
  

• 全局对象window，默认所有的全局变量都会自动绑定在window对象下。

  var x = 'xxx';
  alert(x);
  alert(window.x);
  

• alert()函数本身也是一个window变量。

• JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找；如果在全局作用域都没有找到，报错：ReferenceError！

  window.alert(x);
  window.alert(window.x);
  var old_alert = window.alert;
  window.alert = function (){}
  window.alert(123); //函数失效了
  window.alert = old_alert;
  window.alert(456); //恢复
  

• 规范：由于所有的全局变量都会被绑定在window上，如果不同的js文件使用了相同的全局变量，就会产生冲突。为了降低全局命名冲突的问题，可以把自己的代码全部放入自己定义的唯一空间名字中。（jQuery）

  //唯一全局变量
  var CwlinApp = {}
  //定义全局变量
  CwlinApp.name = 'cwlin';
  CwlinApp.add = function (a,b){
      return a + b;
  }
  

• 局部作用域 let：

• 建议使用let去定义局部作用域的变量。

  function f11(){
  	for (var i = 0; i < 100; i++)
  	console.log(i);
  	console.log(i+1); //变量i出了作用域还可以使用
  }
  function f12(){
      for (let i = 0; i < 100; i++)
      console.log(i);
      console.log(i+1); //报错
  }
  

• 常量 const：

• 在ES6之前，只有用全部大写字母命名的变量就是常量，建议不要修改这样的值。

  var PI = '3.14'; //可以修改
  

• 在ES6引入了常量关键字const。

  const PI = '3.14'; //不可修改
  

4.4、方法

• 定义方法，方法就是把函数放在对象中，对象只有两个东西：属性和方法。

  var Cwlin = {
      name: 'cwlin',
      birth: 2020,
      age: function (){
          var now = new Date().getFullYear();
          return now - this.birth;
      }
  }
  Cwlin.name
  Cwlin.age()
  

• 拆开上面的代码，分开定义。当直接调用getAge()时，this表示window对象，未定义。

  function getAge(){
      var now = new Date().getFullYear();
      return now - this.birth;
  }
  var Cwlin = {
      name: 'cwlin',
      birth: 2020,
      age: getAge
  }
  Cwlin.age() //OK
  getAge() //NaN
  

• apply：在Java中，this是无法指向的，默认指向调用它的那个对象；在JavaScript中，可以控制this的指向。

  getAge.apply(Cwlin,[]) //this指向了Cwlin，参数为空
  

五、内部对象

5.0、标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

5.1、Date日期对象

• 基本使用

  var now = new Date(); //Fri Mar 12 2021 11:19:02 GMT+0800 (中国标准时间)
  now.getFullYear(); //年
  now.getMonth(); //月: 0~11
  now.getDate(); //日
  now.getDay(); //星期几
  now.getHours(); //时
  now.getMinutes(); //分
  now.getSeconds(); //秒
  now.getTime(); //时间戳，全世界统一 从1970.1.1 00:00:00到现在的毫秒数
  

• 日期转换

  now = new Date(1615519401237); //时间戳转为时间
  Fri Mar 12 2021 11:23:21 GMT+0800 (中国标准时间)
  now.toLocaleString();
  "2021/3/12上午11:23:21"
  now.toGMTString(); //IDEA中无法调用
  "Fri, 12 Mar 2021 03:23:21 GMT"
  

5.2、JSON对象

• JSON是什么？

  • 早期，所有的数据传输都习惯使用XML文件。
  • JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
  • 它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
  • 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

• 在JavaScript中，一切皆为对象，任何js支持的类型都可以用JSON来表示。

• 对象用 {}，数组用 []，键值对用 key: value

• JSON字符串和JS对象的转化，注意区分。

  var user = {name: "cwlin", age: 3, sex: "男"};
  //对象转化为json字符串
  var jsonUser = JSON.stringify(user);
  //json字符串转化为对象
  var obj = JSON.parse('{"name": "cwlin", "age": 3, "sex": "男"}');
  

5.3、Ajax（没看懂）

• 原生的js写法 xhr 异步请求
• jQuey封装好的方法 $("#name").ajax("")
• axios 请求

六、面向对象编程

6.1、面向对象原型继承

var Student = {
    name: "cwlin",
    age: 3,
    run: function () {
        console.log(this.name + "run...")
    }
};
var Bird = {
    fly: function () {
        console.log(this.name + "fly...")
    }
};

var xiaoming = {
    name: "xiaoming"
}

//小明的原型是Student
xiaoming.__proto__ = Student;
//小明的原型变为Bird
xiaoming.__proto__ = Bird;

function Student1(name) {
    this.name = name;
}
//给Student1新增一个方法
Student1.prototype.hello = function () {
    alert("hello")
}

6.2、面向对象class继承

//ES6之后，定义一个Student类
class Student{
    constructor(name) {
        this.name = name;
    }
    hello(){
        alert("hello")
    }
}

class juniorStudent extends Student{
    constructor(name,grade) {
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert("我是一名小学生");
    }
}
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");

6.3、原型链

• prototype：在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。
• _proto_：这是每个对象(除null外)都会有的属性，叫做**_proto_**，这个属性会指向该对象的原型。
• 原型链的基本概念：
  • 简单的回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。

七、操作BOM对象（重点）

7.1、浏览器介绍

• JavaScript和浏览器的关系：JavaScript的诞生就是为了能够让他在浏览器中运行！

• BOM：浏览器对象模型

  • 内核：IE 6~11、Chrome、Safari、FireFox、Opera(忽略)
  • 三方：QQ浏览器、360浏览器

7.2、window对象（重要）

• window，代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
620
window.innerWidth
1920
window.outerHeight
1040
window.outerWidth
1920

7.3、navigator对象（不建议使用）

• navigator，封装了浏览器的信息
• 大多数情况下，我们不会使用navigator对象，因为它可以被认为修改。
• 不建议使用这些属性来判断和编写代码。

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.72 Safari/537.36 Edg/89.0.774.45"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.72 Safari/537.36 Edg/89.0.774.45"
navigator.platform
"Win32"
navigator.appCodeName
"Mozilla"

7.4、screen对象

• screen，代表了屏幕尺寸

screen.width
1920  px
screen.height
1080  px

7.5、location对象（重要）

• location，代表当前页面的URL信息

Location {
    ancestorOrigins: DOMStringList, 
    href: "https://www.baidu/?tn=80035161_1_dg", 
    origin: "https://www.baidu", 
    protocol: "https:", 
    host: "www.baidu", 
    reload: ƒ reload(), //刷新网页
     …}
location.assign("https://blog.csdn/coder_lcw?t=1")

7.6、document（后续DOM中详述）

• document，代表当前的页面，HTML，DOM文档树

document.title
"百度一下，你就知道"
document.title = "cwlin"
"cwlin"

• 获取具体的文档数节点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
    var dl = document.getElementById("id");
</script>

• 可以获取网页的cookie

document.cookie
"H_BD_CS_TAG=n3vGfTfjyjwDNgMAMFMRaFXB; BIDUPSID=37D0F543E15DD16E2A3843153DF7FF65; PSTM=1615540243; BDRCVFR[MNExswbjlf3]=mk3SLVN4HKm; BAIDUID=37D0F543E15DD16E2BE9CF7B6561362E:FG=1; delPer=0; BD_CK_SAM=1; PSINO=1; H_PS_PSSID=; BD_UPN=12314753; BDORZ=FFFB88E999055A3F8A630C64834BD6D0; BAIDUID_BFESS=37D0F543E15DD16E2BE9CF7B6561362E:FG=1; re__f=%20"

• 劫持cookie的原理
• 服务器端可以设置cookie：httpOnly

<script src="aa.js"></script>
<!--恶意人员：获取你的cookie上传到他的服务器-->

7.7、history（不建议使用）

• history，代表浏览器的历史记录

history.forward() //前进
history.back() //后退

八、操作DOM对象（重点）

8.1、概述

• DOM：文档对象模型

• 整个浏览器网页就是一个DOM树形结构！

  • 更新：更新DOM节点
  • 遍历DOM节点，得到DOM节点
  • 删除：删除一个DOM节点
  • 添加：添加一个新的节点

• 要操作一个DOM节点，就必须先获得DOM节点。

8.2、获得DOM节点

• 以下是原生代码，以后我们尽量使用jQuery。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    //对应CSS选择器
    var h1 = document.getElementsByTagName("h1");
    var p1 = document.getElementById("p1");
    var p2 = document.getElementsByClassName("h1");
    var father = document.getElementById("father");
    var childrens = father.children; //获取父节点下的所有子节点
    // father.firstChild
    // father.lastChild
    // p1.lastChild
    // p1.nextSibling
</script>

</body>
</html>

8.3、更新DOM节点

• 操作文本和CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="id1">

</div>

<script>
    var id1 = document.getElementById("id1");
    id1.innerText = "456"; //修改文本的值
    id1.innerHTML = "<strong>123</strong>" //解析HTML文本标签
    id1.innerText = "abc";

    id1.style.color = "red"; //属性使用字符串包裹
    id1.style.fontSize = "50px"; //下划线转驼峰命名法
    id1.style.padding = "25px";
</script>

</body>
</html>

8.4、删除DOM节点

• 删除节点的步骤：先获取父节点，再通过父节点删除自己。
• 删除多个节点时，children是时刻变化的。

//基于8.2代码
var p1 = document.getElementById("p1");
var father = p1.parentElement;
father.removeChild(p1);

//删除是一个动态的过程
father.children
HTMLCollection(3) [h1, p#p1, p.p2, p1: p#p1]
father.children[0]
<h1>​标题一​</h1>​
father.children[1]
<p id=​"p1">​p1​</p>​
father.removeChild(father.children[0]);

8.5、创建和插入DOM节点

• 我们获得某个DOM节点后，假设该节点是空的，我们通过innerHTML就可以增加一个元素了，但是该节点已经存在元素了，就会产生覆盖。
• 因此，对于一个已有的标签，通常使用append进行追加；对于一个新的标签，通常用document.createElement(“p”)创建新的标签后再进行追加。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var js = document.getElementById("js"),
        list = document.getElementById("list");
    //追加一个节点
    list.appendChild(js) //<p id="js">JavaScript</p>
    //创建一个新的节点
    var newP = document.createElement("p"); //创建一个p标签
    newP.id = "newP"; //等价于newP.setAttribute("id","newP");
    newP.innerText = "hello,cwlin";
    list.appendChild(newP);

    //创建一个script标签节点，通过setAttribute属性可以设置任意的值
    var myScript = document.createElement("script");
    myScript.setAttribute("type","text/javascript"); //通用写法
    list.appendChild(myScript);
    //可以创建一个style标签
    var myStyle = document.createElement("style"); //创建一个空的style标签
    myStyle.setAttribute("type","text/css"); //通用写法
    myStyle.innerHTML = 'body{background-color: yellow;}'; //设置标签内容
    var head = document.getElementsByTagName("head")[0]; //注意返回值，加上索引[0]
    head.appendChild(myStyle);
    //插入某个元素前面：.insertBefore(newNode,targetNode)
    var ee = document.getElementById("ee");
    list.insertBefore(js,ee);
</script>

</body>
</html>

九、操作表单（验证）

9.1、表单

• 文本框 text
• 下拉框 select
• 单选框 radio
• 多选框 checkbox
• 隐藏域 hidden
• 密码框 password

9.2、表单的目的

• 获得并修改要提交的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="post">
    <p>
        <span>用户名：</span> <input type="text" id="username"/>
    </p>
    
    <p>
        <!--多选框的值就是定义好的value-->
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy"> 男
        <input type="radio" name="sex" value="woman" id="girl"> 女
    </p>
</form>

<script>
    let input_text = document.getElementById("username");
    let boy_radio = document.getElementById("boy");
    let girl_radio = document.getElementById("girl");
    //得到输入框的值
    console.log(input_text.value);
    //修改输入框的值
    input_text.value = '123456';

    //对于单选框、多选框等等固定的值，用.value只能取到固定的值
    //查看返回结果，若为true，则被选中；反之，没有被选中
    console.log(boy_radio.checked);
    //修改值
    boy_radio.checked = true;
</script>

</body>
</html>

9.3、提交表单

• 提交表单、MD5加密、表单优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
    <script src="https://cdn.bootcss/blueimp-md5/2.10.0/js/md5.min.js"></script>

</head>
<body>

<!--表单绑定提交事件
onsubmit = 绑定一个提交检测的函数，返回true/false
将这个结果返回给表单，使用onsubmit接收
-->
<form action="http://www.baidu/" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username"/>
    </p>
    <p>
        <span>密码：</span> <input type="password" id="input-password"/>
    </p>
    <input type="hidden" id="md5-password" name="password">
    <!--绑定事件 onclick 被点击-->
    <button type="submit">提交</button>
</form>

<script>
    function aaa(){
        alert(111)
        var uname = document.getElementById("username");
        var pwd = document.getElementById("input-password");
        var md5pwd = document.getElementById("md5-password");
        // pwd.value = md5(pwd.value);
        md5pwd.value = md5(pwd.value); //通过隐藏域提交
        //可以校验判断表单内容，true表示通过提交，false表示阻止提交
        return true;
    }
</script>

</body>
</html>

十、jQuery

• JavaScript
• jQuery库，里面存在大量的JavaScript函数

10.1、获取 jQuery

• 官网下载：https://jquery/download/
• 在线链接：https://www.bootcdn/jquery/
  • <script src="https://cdn.bootcdn/ajax/libs/jquery/3.5.1/jquery.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--CDN引入-->
    <script src="https://cdn.bootcdn/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>

<!--
    公式：$(selector).action()
-->
<a href="" id="test-jquery">点我</a>
<script>
    document.getElementById('test-jquery'); //标准js
    //selector就是css的选择器
    $('#test-jquery').click(function () {
        alert('hello, jquery!');
    })
</script>

</body>
</html>

10.2、选择器

• 文档工具站：https://jquery.cuishifeng/

//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//ID
document.getElementById();
//类
document.getElementsByClassName();

//jQuery，包含css中的全部选择器
$('p').click(); //标签选择器
$('#id1').click(); //ID选择器
$('.class1').click(); //类选择器

10.3、事件

• 鼠标事件
  • 按下：mousedown( )
  • 离开：mouseleave( )
  • 移动：mousemove( )
  • 点击结束：mouseover( )
• 键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
    点击这里移动鼠标试试
</div>

<script>
    //当网页元素加载完毕之后，响应事件：$(document).ready(function () {})
    //简写如下：
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX+', y:'+e.pageY)
        })
    })
</script>

</body>
</html>

10.4、操作DOM元素

• 节点文本操作
• CCS操作
• 元素的显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>

<div>
    <ul id="test-ul">
        <li class="js">JavaScript</li>
        <li id="py">python</li>
    </ul>
</div>

<script>
    $('#test-ul li[id=py]').text(); //获得值
    $('#test-ul li[id=py]').text("Python"); //设置值
    // $('#test-ul').html(); //获得值
    // $('#test-ul').html('<strong>123</strong>'); //设置值

    $('#test-ul li[id=py]').css("color", "red");

    $('#test-ul li[id=py]').show();
    $('#test-ul li[id=py]').hide(); //本质就是 display: none;
    $('#test-ul li[id=py]').toggle(); //切换
</script>

</body>
</html>

• 娱乐测试

$(window).width()
$(window).height()
$(document).width()
$(document).height()

10.5、Ajax（未来）

$('#form').ajax();
$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});

10.6、小技巧

• 巩固JS，看jQuery源码，看游戏源码
• 巩固HTML、CSS，扒网站，全部down下来，然后对应修改看效果
• Layui弹出层：https://layer.layui/
• Element UI：https://element.eleme/#/zh-CN/component/installation
• Ant Design：https://ant.design/components/overview-cn/

本文标签： javascript