0%

java简介

java的历史

Java是由Sun Microsystems公司(现已被oracle公司收购)于1995年5月推出的Java面向对象程序设计语言和Java平台的总称。由James Gosling和同事们共同研发,并在1995年正式推出,据oracle官方数据指数,目前全球已有上亿的系统是使用Java开发的。Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承、指针等概念,因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表,极好地实现了面向对象理论,允许程序员以优雅的思维方式进行复杂的编程。

Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点 。

Java分为三个体系:

  • Java SE (java Standard Edition) 可以用来开发客户端的应用程序。应用程序可以在桌面计算机中运行
  • Java EE (java Enterprise Edition) 可以用来开发服务端的应用程序
  • Java ME (java Micro Edition) 用来开发移动设备的应用程序

Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承、指针等概念,因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表,极好地实现了面向对象理论,允许程序员以优雅的思维方式进行复杂的编程。

java的特性

简单性

java语言是简单的,java的语法与c语言和c++语言非常接近,使得大多数程序员非常易学习和使用。另一方面,Java丢弃了C++中很少使用的、很难理解的、令人迷惑的那些特性,如操作符重载、多继承、自动的强制类型转换。特别地,Java语言不使用指针,而是引用。并提供了自动的废料收集,使得程序员不必为内存管理而担忧。

面对对象

Java语言提供类、接口和继承等原语,为了简单起见,只支持类之间的单继承,但支持接口之间的多继承,并支持类与接口之间的实现机制(关键字为implements)。Java语言全面支持动态绑定,而C++语言只对虚函数使用动态绑定。总之,Java语言是一个纯的面向对象程序设计语言。

健壮性

Java的强类型机制、异常处理、垃圾的自动收集等是Java程序健壮性的重要保证。对指针的丢弃是Java的明智选择。Java的安全检查机制使得Java更具健壮性。

安全性

Java通常被用在网络环境中,为此,Java提供了一个安全机制以防恶意代码的攻击。除了Java语言具有的许多安全特性以外,Java对通过网络下载的类具有一个安全防范机制(类ClassLoader),如分配不同的名字空间以防替代本地的同名类、字节代码检查,并提供安全管理机制(类SecurityManager)让Java应用设置安全哨兵。

跨平台的

Java程序(后缀为.java的文件)在Java平台上被编译为体系结构中立的字节码格式(后缀为.class的文件),然后可以在实现这个Java平台的任何系统中(windows,mac,linux等)运行,真正的实现了一次编译多处运行的效果。这种途径适合于异构的网络环境和软件的分发。

高性能的

与那些解释型的高级脚本语言相比,Java的确是高性能的。事实上,Java的运行速度随着JIT(Just-In-Time)编译器技术的发展越来越接近于C++。

多线程

在Java语言中,线程是一种特殊的对象,它必须由Thread类或其子(孙)类来创建。通常有两种方法来创建线程:其一,使用型构为Thread(Runnable)的构造子将一个实现了Runnable接口的对象包装成一个线程,其二,从Thread类派生出子类并重写run方法,使用该子类创建的对象即为线程。值得注意的是Thread类已经实现了Runnable接口,因此,任何一个线程均有它的run方法,而run方法中包含了线程所要运行的代码。线程的活动由一组方法来控制。Java语言支持多个线程的同时执行,并提供多线程之间的同步机制(关键字为synchronized)。

动态的

java的类能够动态的被载入到运行环境,也可以通过网络来载入所需要的类。这也有利于软件的升级。另外,java中的类有一个运行时刻的表示,能进行运行时刻的检查。

java用途

  1. 桌面GUI应用程序

  2. 移动应用程序

  3. 嵌入式系统

  4. Web应用程序

  5. Web服务器和应用程序服务器

  6. 企业应用程序

  7. 科学应用

java关键术语

java Development Toolkit (JDK) (java开发工具包)

java Runtime Environment(JRE)(java运行环境)

java Virtual Machine(JVM) (java虚拟机)

​ javac 把源文件(java文件)编译生成class文件

​ Java 执行java字节码

​ Javap 可以查看java编译器生成的字节码(反汇编)

​ Jshell java的交互式命令环境

​ Jconsole 一个内置的java性能分析器,用来监控java应用程序性能和跟踪java

JavaScript简介

JavaScript的历史

Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似之处,一些名称和命名规范也借自Java。JavaScript与Java名称上的近似,是当时Netscape为了营销考虑与Sun微系统达成协议的结果。但是就目前来看java与js之间的区别就如同雷锋与雷峰塔的区别。

JavaScript的特性

JavaScript 是一门跨平台、面向对象的脚本语言,它能够让网页具有交互(例如具有复杂的动画,可点击的按钮,通俗的菜单等)。另外还有高级的服务端Javascript版本,例如Node.js,它可以让你在网页上添加更多功能,不仅仅是下载文件(例如在多台电脑之间的协同合作)。在宿主环境(例如 web 浏览器)中, JavaScript 能够通过其所连接的环境提供的编程接口进行控制。

JavaScript组成

  1. ECMAScript - JavaScript的核心

    ​ ECMA 欧洲计算机制造联合会

    ​ 网景:JavaScript

    ​ 微软:JScript

    ​ 定义了JavaScript的语法规范

    ​ JavaScript的核心,描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准与具体实现无关

  2. BOM - 浏览器对象模型

    ​ 一套操作浏览器功能的API

    ​ 通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等

  3. DOM - 文档对象模型

    ​ 一套操作页面元素的API

    ​ DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作

JavaScript的用途

web开发

  • jQuery、BootStrap、Angular、React、Vue

后端开发

  • Node.js

桌面应用(Linux, Mac OS X, Windows)

  • Electorn
  • NW.js

Hybird移动应用开发

  • PhoneGap

Native移动引用开发

  • React Native
  • Weex
  • NativeScript

嵌入式/物联网开发

  • IoT

JavaScript的发展

ECMAScript6(ES6)

Babel(https://babeljs.io/),一个广泛使用的ES6编译器,可以将es6代码转为es5代码,从而在现有的环境中执行

TypeScript(https://www.typescriptlang.org/)是js的强类型版本,ts是js的超集(类似于c与c++的关系)。它为js的生态增加了静态类型检查机制,并最终将代码编译为纯粹的js代码。使用TypeScript有以下几个优点

  • 静态类型检查(编一阶段即可发现类型不匹配的错误)
  • IDE智能提示
  • 类型信息有利于编译器优化

FLow(https://flow.org/)针对js弱类型问题,Facebook也推出了Flow。

javaScript和java的对比

JavaScript 和 Java 有一些共性但是在另一些方面有着根本性区别。JavaScript语言类似 Java 但是并没有 Java 的静态类型和强类型检查特性。JavaScript 遵循了 Java 的表达式语法,命名规范以及基础流程控制,这也是 JavaScript 从 LiveScript 更名的原因。

与 Java 通过声明的方式构建类的编译时系统不同,JavaScript 采用基于少量的数据类型如数字、布尔、字符串值的运行时系统。JavaScript 拥有基于原型的对象模型提供的动态继承;也就是说,独立对象的继承是可以改变的。 JavaScript 支持匿名函数。 函数也可以作为对象的属性被当做宽松的类型方式执行。

与 Java 相比,Javascript 是一门形式自由的语言。你不必声明所有的变量,类和方法。你不必关心方法是否是 共有、私有或者受保护的,也不需要实现接口。无需显式指定变量、参数、方法返回值的数据类型。

Java 是基于类的编程语言,设计的初衷就是为了确保快速执行和类型安全。类型安全,举个例子,你不能将一个 Java 整数变量转化为一个对象引用,或者由Java字节码访问专有存储器。Java基于类的模型,意味着程序包含专有的类及其方法。Java的类继承和强类型要求紧耦合的对象层级结构。这些要求使得Java编程比JavaScript要复杂的多。

相比之下,JavaScript 传承了 HyperTalk 和 dBASE 语句精简、动态类型等精髓,这些脚本语言为更多开发者提供了一种语法简单、内置功能强大以及用最小需求创建对象的编程工具。

javaScript

  1. 面对对象。不区分对象类型。通过原型机制继承,任何对象的属性和方法均可以被动态添加。
  2. 变量类型不需要提前申明(动态类型)
  3. 不懂直接自动写入硬盘

java

  1. 基于类系统。分为类和实例,通过类层级的定义实现继承。不能动态增加对象或类的属性或方法
  2. 变量类型必须提前申明(静态类型)
  3. 可以直接自动写入硬盘

基于类、基于原型的面对对象

基于类的面向对象语言,比如 Java 和 C++,是构建在两个不同实体的概念之上的:即类和实例。

  • 类可以定义属性,这些属性可使特定的对象集合特征化(可以将 Java 中的方法和变量以及 C++ 中的成员都视作属性)。类是抽象的,而不是其所描述的对象集合中的任何特定的个体。例如 Employee 类可以用来表示所有雇员的集合。
  • 另一方面,一个实例是一个类的实例化;也就是其中一名成员。例如, Victoria 可以是 Employee 类的一个实例,表示一个特定的雇员个体。实例具有和其父类完全一致的属性。

基于原型的语言(如 JavaScript)并不存在这种区别:它只有对象。基于原型的语言具有所谓原型对象的概念。原型对象可以作为一个模板,新对象可以从中获得原始的属性。任何对象都可以指定其自身的属性,既可以是创建时也可以在运行时创建。而且,任何对象都可以作为另一个对象的原型,从而允许后者共享前者的属性。

``

定义类

在基于类的语言中,需要专门的类定义符来定义类。在定义类时,允许定义特殊的方法,称为构造器,来创建该类的实例。在构造器方法中,可以指定实例的属性的初始值以及一些其他的操作。你可以通过将new 操作符和构造器方法结合来创建类的实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
//java定义类
public class Dog{ //类名
int age = 5; //数据域
String color;
Dog() {} //构造方法
void barking(){} //方法
void hungry(){}
void sleeping(){}
}
public static void main(String[] args) {
Dog dog1 = new Dog(); //实例化对象
}

JavaScript 也遵循类似的模型,但却不同于基于类的语言。在 JavaScript 中你只需要定义构造函数来创建具有一组特定的初始属性和属性值的对象。任何 JavaScript 函数都可以用作构造器。 也可以使用 new 操作符和构造函数来创建一个新对象。

1
2
3
4
5
6
7
8
9
10
//js自定义构造函数
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayHi = function(){
console.log('Hello,everyBody');
}
}
var p1 = new Person('张三', 22, 'actor'); //对象实例化

子类和继承

基于类的语言是通过对类的定义中构建类的层级结构的。在类定义中,可以指定新的类是一个现存的类的子类。子类将继承父类的全部属性,并可以添加新的属性或者修改继承的属性。例如,假设 Employee 类只有 namedept 属性,而 ManagerEmployee 的子类并添加了 reports 属性。这时,Manager 类的实例将具有所有三个属性:namedeptreports

1
2
3
4
5
6
7
class Employee {
String name = "张三";
String dept = "学生会";
}
public class Manager extends Employee {
String reports = "fa";
}

JavaScript 通过将构造器函数与原型对象相关联的方式来实现继承。这样,您可以创建完全一样的 EmployeeManager 示例,不过需要使用略微不同的术语。首先,定义Employee构造函数,在该构造函数内定义name、dept属性;接下来,定义Manager构造函数,在该构造函数内调用Employee构造函数,并定义reports属性;最后,将一个获得了Employee.prototype(Employee构造函数原型)的新对象赋予manager构造函数,以作为Manager构造函数的原型。之后当你创建新的Manager对象实例时,该实例会从Employee对象继承name、dept属性。

1
2
3
4
5
6
7
8
9
10
11
12
function Employee(name, dept) {
this.name = name
this.dept = dept
}
function Manager(reports) {
this.reports = reports
}
Manager.prototype = new Employee("张三", "学生会") //原型链实现继承
var m = new Manager("记者") //对象实例化

console.log(m.name) //记者
console.log(m.reports) //张三

添加和移除属性

在基于类的语言中,通常在编译时创建类,然后在编译时或者运行时对类的实例进行实例化。一旦定义了类,无法对类的属性进行更改。然而,在 JavaScript 中,允许运行时添加或者移除任何对象的属性。如果您为一个对象中添加了一个属性,而这个对象又作为其它对象的原型,则以该对象作为原型的所有其它对象也将获得该属性。

差异总结(基于java和原型js的对象系统比较)

基于类的java
  1. 类和实例是不同的事物
  2. 通过类定义来定义类;通过构造器方法来实例化类
  3. 通过new 操作符创建单个对象
  4. 通过类定义来定义现存类的子类,从而构建对象的层级结构。
  5. 遵循类链继承属性。
  6. 类定义指定类的所有实例的所有属性。无法在运行时动态添加属性。
基于原型的JavaScript
  1. 所有对象均为实例。
  2. 通过构造器函数来定义和创建一组对象。
  3. 通过 new 操作符创建单个对象。
  4. 指定一个对象作为原型并且与构造函数一起构建对象的层级结构
  5. 遵循原型链继承属性。
  6. 构造器函数或原型指定初始的属性集。允许动态地向单个的对象或者整个对象集中添加或移除属性。

前端知识体系概览

前端开发(front-end development)简单来说,就是将抽象的数据、视觉效果和交互逻辑,结合起来产出用户看到的真实页面的一个过程。

前端开发技术最重要的三个是HTML(超文本标记语言)、CSS(叠层样式表)以及JavaScript。

  1. HTML:提供网页的结构,提供网页中的内容
  2. CSS: 用来美化网页
  3. JavaScript: 可以用来控制网页内容,给网页增加动态的效果

CSS

css是用来表现html或xml等文件样式的语言,使用css可以有效地对页面的布局、字体、颜色、背景以及动画实现控制。

css的发展

使用了一段时间的css以后,会发现很多令人头疼的问题:

  • 样式经常莫名其妙被覆盖
  • 代码复用性差
  • 代码没有层级结构
  • 代码维护性差,遇到问题难以定位

css预处理器,css预处理器是一门专门的编程语言,为css增加了一些编程的特性。常用的css预处理器有

  1. Sass(https://sass-lang.com/)
  2. Less(http://lesscss.org/)
  3. Stylus(http://stylus-lang.com)

Css-in-Js,Css-in-Js是将html、css、javascript写在一起,一个组件封装了样式、结构和逻辑

JavaScript

JavaScript组成

  1. ECMAScript - JavaScript的核心

    ​ ECMA 欧洲计算机制造联合会

    ​ 网景:JavaScript

    ​ 微软:JScript

    ​ 定义了JavaScript的语法规范

    ​ JavaScript的核心,描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准与具体实现无关

  2. BOM - 浏览器对象模型

    ​ 一套操作浏览器功能的API

    ​ 通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等

  3. DOM - 文档对象模型

    ​ 一套操作页面元素的API

    ​ DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作

JavaScript能做什么?

web开发

  • jQuery、BootStrap、Angular、React、Vue

后端开发

  • Node.js

桌面应用(Linux, Mac OS X, Windows)

  • Electorn
  • NW.js

Hybird移动应用开发

  • PhoneGap

Native移动引用开发

  • React Native
  • Weex
  • NativeScript

嵌入式/物联网开发

  • IoT

JavaScript的发展

ECMAScript6(ES6)

Babel(https://babeljs.io/),一个广泛使用的ES6编译器,可以将es6代码转为es5代码,从而在现有的环境中执行

TypeScript(https://www.typescriptlang.org/)是js的强类型版本,ts是js的超集(类似于c与c++的关系)。它为js的生态增加了静态类型检查机制,并最终将代码编译为纯粹的js代码。使用TypeScript有以下几个优点

  • 静态类型检查(编一阶段即可发现类型不匹配的错误)
  • IDE智能提示
  • 类型信息有利于编译器优化

FLow(https://flow.org/)针对js弱类型问题,Facebook也推出了Flow。

HTTP

HTTP (HyperText Transfer Protocol,超文本传输协议)。 Web是建立在HTTP协议通信的。

HTTP 报文

所有的 HTTP 报文都可以分为两类: 请求报文(request message)和响应报文
(response message)。

请求报文的格式

GET /test/hi-there.txt HTTP/1.1
Accept: text/*
Host: www.joes-hardware.com

响应报文的格式

HTTP/1.0 200 OK
Content-type: text/plain
Content-length: 19
Hi! I’m a message!

包括以下三个部分

• 起始行
报文的第一行就是起始行,在请求报文中用来说明要做些什么,在响应报文中说
明出现了什么情况。
• 首部字段
起始行后面有零个或多个首部字段。每个首部字段都包含一个名字和一个值,为
了便于解析,两者之间用冒号(:)来分隔。首部以一个空行结束。添加一个首
部字段和添加新行一样简单。
• 主体
空行之后就是可选的报文主体了,其中包含了所有类型的数据。请求主体中包括
了要发送给 Web 服务器的数据;响应主体中装载了要返回给客户端的数据。起
始行和首部都是文本形式且都是结构化的,而主体则不同,主体中可以包含任意
的二进制数据(比如图片、视频、音轨、软件程序)。当然,主体中也可以包含
文本

一些常见的HTTP方法

HTTP方法 描  述
GET 从服务器向客户端发送命名资源
PUT 将来自客户端的数据存储到一个命名的服务器资源中去
DELETE 从服务器中删除命名资源
POST 将客户端数据发送到一个服务器网关应用程序
HEAD 仅发送命名资源响应中的 HTTP 首部

HTTPS

需要适应的各项要求

• 服务器认证(客户端知道它们是在与真正的而不是伪造的服务器通话)。
• 客户端认证(服务器知道它们是在与真正的而不是伪造的客户端通话)。
• 完整性(客户端和服务器的数据不会被修改)。
• 加密(客户端和服务器的对话是私密的,无需担心被窃听)。
• 效率(一个运行的足够快的算法,以便低端的客户端和服务器使用)。
• 普适性(基本上所有的客户端和服务器都支持这些协议)。
• 管理的可扩展性(在任何地方的任何人都可以立即进行安全通信)。
• 适应性(能够支持当前最知名的安全方法)。
• 在社会上的可行性(满足社会的政治文化需要)。

https分层

HTTP2.0

http是http1.x的升级,它是基于SPDY设计,但与SPDY存在一些不同,比如SPDY是强制使用HTTPS,而HTTP2.0支持HTTP传输(但是现在的主流的浏览器,还是只支持基于TLS部署的HTTP2.0协议,所以要想升级成2.0还是先升级HTTPS好。);HTTP2.0消息头的压缩算法采用HPACK,而SPDY采用的是DEFLATE等。 NGINX配置HTTP2.0官方指南

HTTP2.0的新特性相对于1.x

  • 多路复用: 允许在一个TCP连接上请求多个并发流,这样就可以降低延迟,同时提高带宽的利用率。
  • 请求优先级: 多路复用共享一个TCP连接,会导致关键请求被阻塞,HTTP2允许给每个请求设置优先级。客户端可以为每个请求分配一个优先级,这样就可以防止在网络通道被非关键资源堵塞时,高优先级的请求被挂起。比如浏览器加载首页,首页的html内容应该优先展示,之后才是各种静态资源文件,脚本文件等加载,这样可以保证用户能第一时间看到网页内容。
  • HTTP报头压缩: 采用压缩算法对请求和响应HTTP报头进行压缩,可以减少传输的数据包数量和字节数。
  • Server Push:允许服务主动推送数据给客户端,而不需要客户端发起请求,可以优化网页初次访问性能。例如我的网页有一个sytle.css的请求,在客户端收到sytle.css数据的同时,服务端会将sytle.js的文件推送给客户端,当客户端再次尝试获取sytle.js时就可以直接从缓存中获取到,不用再发请求了。

前端工具

代码编辑器与IDE

常用代码编辑器:windows记事本、nodepad++(推荐用这个)、Emacs、Vim、Sublime Text、Atom、VS code(VS code逐渐成为前端领域的主流选择,因为vs code对TypeScript的支持程度是其他编辑器难以企及的)..

IDE(集成开发环境)。与专注于代码编辑能力相比,IDE的职责要宽泛很多,包括但不限于代码编辑、运行、调试、编译打包甚至设计图形界面,常用IDE有:Visual Studio、WebStorm、Xcode、Dreamweaver等。

页面调试工具

Chrome DevTools(https://developers.google.com/web/tools/chrome-devtools)

其他工具

版本管理工具

在工程化越发复杂、多人协作日常化的今天,版本管理工具早已成为必需品,而Git这是当下的主流选择,搭配Github/Gitlab之类的代码托管工具,即可实现一个功能齐全的代码管理与共享工具

Git官方网站:https://git-scm.com/

设计工具

Mac用户:Sketch,Famer X。

Windows用户:PS,XD

抓包及代理工具

在开发调试移动端的页面时,我们常常苦于无法使用类似于DevTools之类的工具查看网络请求,很多接口问题难以排查,此时我们往往会将无线设备的网络代理到电脑上,然后使用Charles(https://www.charlesproxy.com)之类的工具抓包查看相关请求信息

host管理

作为一个web开发者,绑定hosts可以说是再日常不过了,很多时候可能还要再多个应用/业务之间不断切换。这里推荐几个工具:

  • SwitchHosts:跨平台
  • iHosts:仅限苹果电脑
模拟请求及测试API

因为时常要测试服务端的API,需要模拟各种请求参数或者登录态

  • Paw:仅限苹果电脑
  • Postman:window

前端框架

jQuery

Angular

React

官方文档(https://react.js.org/)

环境搭建,对于初学者来说,建议使用facebook官方提供的脚手架工具Create-React-App,首先确保你已经安装了node.js 打开终端,依次输入一下命令

1
2
3
npx create-react-app my-app
cd my-app
npm start

……….

Virtual DOM

VDOM即是对真正的DOM的模拟,它与DOM一样,同样能够描述页面的结构、样式和内容。不过,VDOM往往以JavaScript对象的形式存储和操作,而不是浏览器提供的接口。

Virtual DOM中的diff算法

Vue

生命周期

vue生命周期图示

Vue是一个构造函数,整个生命周期的入口是对Vue的实例化。在执行new Vue()时,Vue会依次初始化(init),和挂载(mount)两个阶段。

在初始化阶段,Vue会触发生命周期事件、初始化Props、methods、data、computed与watch等。如果Vue的参数对象中没有render方法,则会调用模板编译器从template生成一个新的render函数,值得注意的是编译这一步会比较耗时,所以官方推荐使用离线构建的方式提前把模板编译成静态的render函数,以在线上获取更快的执行速度和更小的运行时体积。

在挂载阶段,Vue会通过执行render方法,获得一个VDOM树,这颗树中的每一个节点对应一个真实的DOM节点,如果Vue的参数中有提供el选项,Vue会把这些节点渲染到el所代表的DOM节点上去,这个过程中Vue会依次触发beforeMount和mounted生命周期。

挂载完成之后,如果数据发生了变更,Vue就会进入更新视图阶段。Vue会重新执行render函数,得到一个新的VDOM对象,并与原先的VDOM对象进行对比,这个对比的过程称之为patch,patch中的diff算法可以得到两个VDOM对象之间的差异。Vue在得到这些差异之后,会把这个变更应用到真实的DOM节点上。如果patch的结果是两者存在差异,在修改DOM之前会触发beforeUpdate生命周期,在修改DOM之后会触发updated生命周期。

当一个Vue组件即将被销毁时,这有可能是父组件发生了重新渲染,删除了本组件。Vue会进入销毁阶段,Vue会触发beforeDestory生命周期,消除vm对象上的关联,包括watchers,事件监听器,data的依赖等,避免发生内存泄漏,同时也会递归的通知它的子组件进行销毁过程,当它的所有子组件完成销毁,会触发destroyed生命周期。

工程化知识

自动化工程工具的使用

  1. 使用前端构建工具
    • gulp、grunt、Broccoli
  2. javascript 编译工具
    • Babel、Browserify、Webpack
  3. 开发辅助工具
    • 数据 mock、livereload
  4. 使用CI集成工具
    • jenkins、Travis CI
  5. 使用脚手架工具
    • yeoman、create-app、vue-cli

Node.js

web服务框架

Node.js最常用的场景之一就是发布Web服务,而对应的框架则有两类

  1. 简单的洋葱模型框架:比如Koa、Express,可以基于其丰富的Middlewares来快速的转配出一个Web服务。
  2. 企业级的Web框架:比如阿里开发的Midway.js、Egg.js,可以基于一定约束多人开发一些中大规模的应用。

数据库

  1. 关系型数据库:Node.js有MySQL,PostgreSQL、Oracle、SQLite等常见关系型数据库产品的连接客户端,相匹配也有一些成熟的ORM产品让操作数据库更加的方便(比如Sequelize、TypeORM等)
  2. NoSQL产品:比如MongoDB、Redis等,更利于编写伸缩性强的分布式应用

构建跨端应用

React Native

架构设计

在rn中,使用JSX来描述界面,使用css的子集Flexbox来申明样式

Virtual Dom:对真实DOM的抽象,作为开发者描述的UI和实际渲染UI之间的桥梁。通过这层设计使得JS控制Native UI成为可能。在React Native中使用JSCore来运行js,将生成的VIrutal DOM以异步的形式传递给底层的渲染引擎。Native渲染引擎将接到手的指令转换为原生组件进行UI绘制。

通信机制

在React Native中运行着以下几类线程:

  • UI线程:即主线程,复杂最终UI界面的渲染
  • JS线程:负责js执行、数据获取和事件处理等工作,也是React Native应用业务逻辑处理的地方
  • Native 模块进程:当我们需要调用底层系统能力的时候,通常是单独开一个Native线程来处理。

为了保证良好的用户体验,确保UI主线程不被阻塞,React Native中js和Native渲染引擎之间通信都是异步的、主要存在以下几类通信:

  • 界面渲染:js线程需要把UI的结构和样式传递给UI线程,并由UI线程渲染出最终的UI界面。这个过程是从js线程到ui线程的通信
  • 事件绑定与触发:由于UI线程组要负责UI界面的渲染和事件的触发,js线程负责事件的处理逻辑,因此js线程需要告诉ui线程需要监听哪些交互行为,当用户特定的交互行为发生时,UI线程需要把交互信息通知到js线程
  • 数据请求:当业务逻辑需要获取服务端数据、获取当前位置、调用摄像头等场景时,需要通知Native模块线程进行处理,然后将相关信息传给js线程。

Weex

Flutter

图形技术

Canvas

WebGL 3D

Web安全

XSS

首先说下最常见的 XSS 漏洞,XSS (Cross Site Script),跨站脚本攻击,因为缩写和 CSS (Cascading Style Sheets) 重叠,所以只能叫 XSS。

XSS 的原理是恶意攻击者往 Web 页面里插入恶意可执行网页脚本代码,当用户浏览该页之时,嵌入其中 Web 里面的脚本代码会被执行,从而可以达到攻击者盗取用户信息或其他侵犯用户安全隐私的目的。XSS 的攻击方式千变万化,但还是可以大致细分为几种类型。

非持久型 XSS 漏洞

也叫反射型 XSS 漏洞,一般是通过给别人发送带有恶意脚本代码参数的 URL,当 URL 地址被打开时,特有的恶意代码参数被 HTML 解析、执行。

非持久型 XSS 漏洞攻击有以下几点特征

  • 即时性,不经过服务器存储,直接通过 HTTP 的 GET 和 POST 请求就能完成一次攻击,拿到用户隐私数据。
  • 攻击者需要诱骗点击
  • 反馈率低,所以较难发现和响应修复
  • 盗取用户敏感保密信息

持久型 XSS

持久型 XSS 漏洞,也被称为存储型 XSS 漏洞,一般存在于 Form 表单提交等交互功能,如发帖留言,提交文本信息等,黑客利用的 XSS 漏洞,将内容经正常功能提交进入数据库持久保存,当前端页面获得后端从数据库中读出的注入代码时,恰好将其渲染执行。

主要注入页面方式和非持久型 XSS 漏洞类似,只不过持久型的不是来源于 URL,refferer,forms 等,而是来源于后端从数据库中读出来的数据。持久型 XSS 攻击不需要诱骗点击,黑客只需要在提交表单的地方完成注入即可,但是这种 XSS 攻击的成本相对还是很高。攻击成功需要同时满足以下几个条件:

  • POST 请求提交表单后端没做转义直接入库。
  • 后端从数据库中取出数据没做转义直接输出给前端。
  • 前端拿到后端数据没做转义直接渲染成 DOM。

持久型 XSS 有以下几个特点

  • 持久性,植入在数据库中
  • 危害面广,甚至可以让用户机器变成 DDoS 攻击的肉鸡。
  • 盗取用户敏感私密信息

CSRF

CSRF(Cross-Site Request Forgery),中文名称:跨站请求伪造攻击

完成 CSRF 攻击必须要有三个条件:

  1. 用户已经登录了站点 A,并在本地记录了 cookie
  2. 在用户没有登出站点 A 的情况下(也就是 cookie 生效的情况下),访问了恶意攻击者提供的引诱危险站点 B (B 站点要求访问站点A)。
  3. 站点 A 没有做任何 CSRF 防御

SQL 注入

SQL 注入漏洞(SQL Injection)是 Web 开发中最常见的一种安全漏洞。可以用它来从数据库获取敏感信息,或者利用数据库的特性执行添加用户,导出文件等一系列恶意操作,甚至有可能获取数据库乃至系统用户最高权限。

而造成 SQL 注入的原因是因为程序没有有效的转义过滤用户的输入,使攻击者成功的向服务器提交恶意的 SQL 查询代码,程序在接收后错误的将攻击者的输入作为查询语句的一部分执行,导致原始的查询逻辑被改变,额外的执行了攻击者精心构造的恶意代码

DDoS 攻击

DDoS 又叫分布式拒绝服务,全称 Distributed Denial of Service,其原理就是利用大量的请求造成资源过载,导致服务不可用。当DDoS攻击者制造高流量无用数据,造成网络拥塞,使受害主机无法正常和外界通讯。因为一直在处理无用的数据,就没有多余资源去处理正常数据了。最后造成的结果,轻则网速变慢,重则网络瘫痪,服务器系统奔溃,导致死机。

面对DDoS,目前不存在彻底解决方法,通常通过提升硬件性能、分布式应用部署、DDoS清洗等方案提高应对DDoS的防御能力。

web安全常用工具

Fiddle:Window常用抓包工具

Charles:常用的网络抓包工具

sqlmap:SQL注入检测工具

curl:命令行网络请求工具

burp suite:请求截获与修改工具

ant-XSS:XSS检测工具

性能优化

缓存策略

网站的缓存策略

常见性能优化措施

javaScript中的数据类型

ECMAScript 变量包含两种不同的数据类型的值:基本类型值和引用类型值 。 基本数据类型指的是简单的数据段,而引用数据类型指那些可能有多个值组成的对

基本类型(值类型)

  • Undefined 在使用var声明变量但未对其初始化时,或者使用了一个并未声明的变量时,又或者使用了一个并不存在的对象属性时,这个变量的值就是undefined。

  • Null 从逻辑上看,null值表示一个空对象指针,独一无二。

  • Boolean true、false

  • Number NaN,即非数值(Not a Number)是一个特殊的数值,这个数值用于表示一个本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误了)

  • String 字符串可以由’’ 或 “” 表示。 ES中字符串是不可改变的,也就是说,字符串一旦创建,它们的值就不能改变。要改变某个变量保存的字符串,首先要销毁原来的字符串,然后再用另一个包含新值的字符串填充该变量。

​ 这五种基本数据类型是按值访问的,因为可以操作保存在变量中的实际的值。

复杂类型(引用类型)

  • Object 对象其实就是一组数据和功能的集合。对象可以通过new操作符后跟要创建的对象类型的名称来创建。 而创建Object的实例并为其添加属性和方法,就可以自定义对象。
    1. Object类型
    2. Array类型
    3. Date类型
    4. RegExp类型
    5. Function类型

​ 引用类型的值是保存在内存中的对象。与其他语言不同,js不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间。 操作对象时,实际上是在操作对象的引用而不是实际的对象。(这种说法不太严谨,为对象添加属性时,操作的是实际的对象)。

值类型与引用类型的差别

  • 基本类型在内存中占据固定大小的空间,因此被保存在栈内存中
  • 从一个变量向另一个变量复制基本类型的值,复制的是值的副本
  • 引用类型的值是对象,保存在堆内存
  • 包含引用类型值的变量实际上包含的并不是对象本身,而是一个指向该对象的指针
  • 从一个变量向另一个变量复制引用类型的值的时候,复制是引用指针,因此两个变量最终都指向同一个对象

判断数据类型

使用typeof

检测基本数据类型的最佳选择是使用typeof

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var bool = true
var num = 1
var str = 'abc'
var und = undefined
var nul = null
var arr = [1,2,3]
var obj = {}
var fun = function(){}
var reg = new RegExp()

console.log(typeof bool); //boolean
console.log(typeof num); //number
console.log(typeof str); //string
console.log(typeof und); //undefined
console.log(typeof nul); //object
console.log(typeof arr); //object
console.log(typeof obj); //object
console.log(typeof reg); //object
console.log(typeof fun); //function

由结果可知,除了在检测null时返回 object 和检测function时放回function。对于引用类型返回均为object

使用instanceof

检测引用型数据类型时的最佳选择是instanceof

1
2
3
4
5
6
console.log(reg instanceof Object); //true
console.log(reg instanceof RegExp); //true 因为根据规定,所用引用类型的值都是Object的实例,因此都是返回true

console.log(bool instanceof Boolean); //false
var bool2 = new Boolean();
console.log(bool2 instanceof Boolean); //true 引用类型与基本包装类型的主要区别就是对象的生存期。使用new操作符创建的引用类型的实例,在执行流离开当前作用域之前都是一直保存在内存中。而自动创建的基本包装类型的对象,则只存在于一行代码的执行瞬间,然后立即被销毁
1
2
3
4
console.log(und instanceof Object); // false
console.log(nul instanceof Object); // false undefined和null没有contructor属性

instanceof它不仅检测构造找个对象的构造器,还检测原型链。所以它可以检测继承而来的属性。

使用constructor

1
2
3
4
5
6
7
8
9
console.log(bool.constructor === Boolean);// true
console.log(num.constructor === Number);// true
console.log(str.constructor === String);// true
console.log(arr.constructor === Array);// true
console.log(obj.constructor === Object);// true
console.log(fun.constructor === Function);// true

undefined和null没有contructor属性
constructor不能判断undefined和null,并且使用它是不安全的,因为contructor的指向是可以改变的 //详情请了解js对象的特性

使用Object.prototype.toString.call

1
2
3
4
5
6
7
8
console.log(Object.prototype.toString.call(bool));//[object Boolean]
console.log(Object.prototype.toString.call(num));//[object Number]
console.log(Object.prototype.toString.call(str));//[object String]
console.log(Object.prototype.toString.call(und));//[object Undefined]
console.log(Object.prototype.toString.call(nul));//[object Null]
console.log(Object.prototype.toString.call(arr));//[object Array]
console.log(Object.prototype.toString.call(obj));//[object Object]
console.log(Object.prototype.toString.call(fun));//[object Function]

DOM

JavaScript 的组成

组成部分 说明
Ecmascript 描述了该语言的语法和基本对象
DOM 描述了处理网页内容的方法和接口
BOM 描述了与浏览器进行交互的方法和接口

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。

DOM 以树结构表达 HTML 文档。

DOM HTML tree

获取元素

getElementById

根据id属性的值获取元素,返回来的是一个元素对象。 还有注意因为js区分大小写,所以写这个元素不能写错了,否者都得不到正确的结果。

document.getElementById(“id属性的值”);

getElementsByTagName

根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

document.getElementsByTagName(“标签名字”);

返回的 HTML集合是动态的, 意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用document.getElementsByTagName(“标签名字”);

getElementsByClassName

document.getElementsByClassName(“类样式的名字”)
* 根据选择器获取元素,返回来的是一个伪数组

getElementsByName

document.getElementsByName(“name**属性的值”)

根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

querySelector

根据选择器获取元素,返回来的是一个元素对象

document.querySelector(“选择器的名字”);

1
document.querySelector`返回第一个匹配的元素,如果没有匹配的元素,则返回 null

语法

1
var element = document.querySelector(selectors);

注意,由于返回的是第一个匹配的元素,这个api使用的深度优先搜索来获取元素。

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
<div>
<div>
<span class="test">第三级的span</span>
</div>
</div>
<div class="test">
同级的第二个div
</div>
<input type="button" id="btnGet" value="获取test元素" />
</body>
<script>
document.getElementById("btnGet").addEventListener("click",function(){
var element = document.querySelector(".test");
alert(element.textContent);
})
</script>
复制代码

两个class都包含“test”的元素,一个在文档树的前面,但是它在第三级,另一个在文档树的后面,但它在第一级,通过querySelector获取元素时,它通过深度优先搜索,拿到文档树前面的第三级的元素。

querySelectorAll

根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

querySelectorAll()方法接受的参数,也是一个css选择器,返回的是所有匹配到的元素。返回的是一个NodeLIst的实例。

document.querySelectorAll(“选择器的名字”)

获取和设置属性

getAttribute

object.getAttribute(attribute)

setArribute

setAttribute(attribute,value)

getAttribute()和setAttribute()方法不属于document对象,所以不能通过document对象调用,它只能通过元素节点对象调用。

这里有一个细节:通过setAttribute对文档做出修改之后,在通过浏览器查看源代码时看到的仍将是改变前的属性值,也就是说setAttribute做出的修改不会反映在文档本身的源代码里,这种“表里不一”的现象源自DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。这正是DOM的真正威力:对页面的内容进行刷新却不需要再浏览器里面刷新。

Node

childNodes属性

1
由childNodes属性返回的数组包含所有类型的节点,而不仅是元素节点。 事实上,文档里几乎每一个东西都是一个节点,甚至连空格和换行都会被解释为节点,而他们也包含在childNodes属性返回的数组中.

firstChild和lastChild属性

firstChild 等价于 node.childNodes[0]

nodeType属性

nodeType属性共有12种可取值,但只有3中具有实用价值。

元素节点的nodeType属性值是1

属性节点的nodeType属性值是2

文本节点的nodeType属性值是3

nodeName和nodeValue

nodeName 返回当前节点的节点名称 节点的名字:大写的标签–标签,小写的属性名—属性,#text—文本

nodeValue 返回或设置指定节点的节点值。 标签—null,属性–属性的值,文本–文本内容

ps: 对于元素节点nodeName 中保存的始终是元素的标签名 大写的标签–标签, nodeValue保存的值始终是NULL

<p>我是p里面的value</p>

怎获取p标签里的文本?

document.querySelector(“p”).childNodes(0).nodeValue

ps: 在编写DOM脚本时,你会理所当然的认为某个节点肯定是一个元素节点,这是一种相当常见的错误。如果没有100%的把握,就一定要检查nodeType属性值。有很多DOM方法只能用于元素节点,如果用在文本节点身上,就会出错。

元素创建

document.write

document.write(“标签的代码及内容”);
document.write(‘新设置的内容

标签也可以生成

‘);
document.write()创建元素缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉

缺点: 违背了“行为与表现分离”的原则

1
2
3
4
5
6
<body>
<script>
document.write("<p>hhh我是p标签</p>")
</script>
...
</body>

innerHTML

及支持读取,也支持写入,它不仅可以用来读取HTML内容,还可以用它把HTML内容写入元素。

对象.innerHTML=”标签及代码”;
var box = document.getElementById(‘box’);
box.innerHTML = ‘新内容

新标签

‘;

innerHTML 会根据指定的值创建新的DOM树,然后用这个DOM树完全替换调用元素的所有子节点。

createElement和appendChild

document.createElement(“标签的名字”);

//创建元素 这个方法只能创建元素节点,这个节点是空白的。

*//document.createElement(“*标签名字”); 对象 //把元素追加到父级元素中

var div = document.createElement(‘div’);

document.body.appendChild(div);

createTextNode

创建文本节点

document.createTextNode(“Hellow world”)

insertBefore

在已有元素前插入一个新元素

parentElement.inserBefore(newElement, targetElement)

(1)新元素: 你想插入的元素 (newELement)

(2)目标元素:你想把这个新元素插入到哪个元素(targetElement)之前

(3)父元素:目标元素的父元素(parentElement)

运用dom设置样式

style属性

文档中的每一个元素都是一个对象,每一个对象都有各种各样的属性。 每个元素节点都有一个style属性。 style属性包含着元素的样式,查询这个属性将返回一个对象而不是一个简单的字符串。样式都存放在这个style对象里。

element.style

element.style.fontFamily

当你需要引用一个中间带减号的css属性时,DOM要求你用驼峰命名法。 css属性font-family 用fontFamily

element.style.border = “1px solid red”

getComputedStyle()

要确定某个元素的计算样式(包括应用给它的所有css规则),可以用这个方法

最重要的一条是要记住所有计算的样式都只是可读的;不能修改计算后样式对象的css属性。

window.getComputedStyle():可以获取当前元素所有最终使用的CSS属性值。

1: window.getComputedStyle(“元素”, “伪类”);

这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例如“:before”) 。如果不需要伪元素信息,第二个参数可以是null。也可以通过document.defaultView.getComputedStyle(“元素”, “伪类”);来使用

1: var ele = document.getElementById(‘ele’);

2: var styles = window.getComputedStyle(ele,null);

3: styles.color; //获取颜色

可以通过style.length来查看浏览器默认样式的个数。IE6-8不支持该方法,需要使用后面的方法。对于Firefox和Safari,会把颜色转换成rgb格式。

相关扩展

innerHTML与innerText

*总结:如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的 *

//总结:innerHTML是可以设置文本内容 //

总结:innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的

  • //总结:想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML
  • //获取的时候: //innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.—获取不到标签的,文本可以获取
  • //innerHTML才是真正的获取标签中间的所有内容*

结论: //如果想要(获取)标签及内容,使用innerHTML //如果想要设置标签,使用innerHTML //想要设置文本,用innerText,或者innerHTML,或者textContent*

ps: innerText 成对的标签都可以用这个改变值

获取元素的宽和高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
,应该使用offset系列来获取

/*

*

* offset系列:获取元素的宽,高,left,top, offsetParent

* offsetWidth:元素的宽,有边框

* offsetHeight:元素的高,有边框

* offsetLeft:元素距离左边位置的值

* offsetTop:元素距离上面位置的值

*

* scroll系列:卷曲出去的值

* scrollLeft:向左卷曲出去的距离

* scrollTop:向上卷曲出去的距离

* scrollWidth:元素中内容的实际的宽(如果内容很少,没有内容,元素自身的宽),没有边框

* scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,元素自身的高),没有边框

*

* client系列:可视区域

* clientWidth:可视区域的宽(没有边框),边框内部的宽度

* clientHeight:可视区域的高(没有边框),边框内部的高度

* clientLeft:左边边框的宽度

*clientTop :上面的边框的宽度

没有脱离文档流:

  • offsetLeft:父级元素margin+父级元素padding+父级元素的border+自己的margin

脱离文档流了

  • 主要是自己的left和自己的margin

Jquery DOM操作

jQuery对象与DOM对象的区别

1
2
3
4
1. DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
3. jQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合(伪数组))
4. DOM``对象与jQuery对象的方法不能混用。

· jquery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;反过来Dom对象也不能使用jquery的方法

Jquery对象与js对象的区别

1.jQuery对象属于js的数组;

2.jQuery对象是通过jQuery包装的DOM对象后产生的;

3.jQuery对象不能使用DOM对象的方法和属性

4.DOM对象不能使用jQuery对象的方法和属性

1
 

DOM对象转换成jQuery对象

1
2
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

jQuery对象转换成DOM对象:

1
2
3
4
5
6
7
8
9
var $li = $(“li”);
//第一种方法(推荐使用)
$li[0]
//第二种方法
$li.get(0)

DOM对象转jquery对象
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

添加css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54


$("li").css({//对象 所以可以添加多个样式

'background-color','fff';

'color','rga(0,0,0)';

//

});



addClass(name);

//给所有的div添加one的样式

$("div").addClass("one");

removeClass();

//移除div中one的样式类名

$("div").removeClass("one");

$("div").hasClass("one");

判断div是否有one的样式





$(function(){

$("input").eq(0).click(function(){

$("li").addClass("bigger"); //在原来的基础上再给我加上名为bigger的一个类。

});

})

$("li").removeClass("bigger") //移除一个名为bigger的css类.

hasClass("类名") // 判断类返回true,fasle;

toggleClass("类名") //切换类



<!--样式:在style里面写的,用css来操作-->

添加属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19


<!--属性:在标签里面写的,用attr来操作--> /*js原生用getAttribute("样式名")获得样式属性 setAttribute("样式名","样式属性")*/

$("img").attr("attr","xx值")

({

"attr":"xx";

"attr":"xx";

"attr":"xx";

})

也可以获得样式的值

/*对于返回布尔值的属性 用prop*/

动画

show() //不传参数,只有显示功能,无动画

show([speed],[callback]) //speed动画持续的时间 单位毫秒

​ //callback 回调函数 动画执行完执行该函数

hide() 隐藏

slideUp() 上滑 slideDown() 下滑 slideToggle() 切换滑入滑出

淡入:fadeIn() 淡出fadeOut()

fadeTo(duration,opacity) duration时间 opacity 0~1 透明度

自定义动画

animate(css属性,[duration],[easing],[callback])

​ {width:100%, {swing:秋千,摇摆速度

​ heigth:100%} linear:匀速 }

动画队列 .animate({left:500px}).animate({top:500px}).animate({}).

​ \一个一个挨个执行

节点

添加节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$("div").append($("p"));    添加到父节点里 最后面

$("p").appendTo($("div")); 把子元素添加到父元素里面(最后) //preappend 添加到最前面

$("p").after($("p")); 兄弟元素后面 (before)



清空一个元素的内容

$("div").empty(); $("div").html(" ");//这个会引发内存泄漏

移除一个元素

$("div").remove();

克隆一个元素

$("div").clone([bool]) //false:默认值 不会复制事件 true:会复制事件

$("<li></li>") 创建了一个li

jQuery特殊属性操作

1.1. val方法

val方法用于设置和获取表单元素的值,例如input、textarea的值

1
2
3
4
5
//设置值
$("#name").val(“张三”);
//获取值
$("#name").val();

1.2. html方法与text方法

html方法相当于innerHTML text方法相当于innerText

1
2
3
4
//``设置内容
$(“div”).html(“<span>这是一段内容</span>”);
//``获取内容
$(“div”).html()

区别:html方法会识别html标签,text方法会那内容直接当成字符串,并不会识别html标签。

vue的DOM 操作

  • 救命稻草, 前端框架就是为了减少DOM操作,但是特定情况下,也给你留了后门
  • 在指定的元素上,添加ref=”名称A”
  • 在获取的地方加入 this.$refs.名称A
    • 如果ref放在了原生DOM元素上,获取的数据就是原生DOM对象
      • 可以直接操作
    • 如果ref放在了组件对象上,获取的就是组件对象
      • 1:获取到DOM对象,通过this.$refs.sub.$el,进行操作
    • 对应的事件
      • created 完成了数据的初始化,此时还未生成DOM,无法操作DOM
      • mounted 将数据已经装载到了DOM之上,可以操作DOM