web基础知识

Yanlililiya

于 2023-12-25 21:21:47 发布

阅读量1.5k

点赞数 38

文章标签： web

本文链接：https://blog.csdn.net/Yanlililiya/article/details/135209402

版权

Http

4.1什么是Http

Http（超文本传输协议）是一个简单的请求-响应协议，它通常运行在TCP之上。

响应状态码

200：请求响应成功 200

3**：请求重定向

404：资源不存在 404

5**：服务器代码错误 500 502网关错误

5、Maven

为什么要学习这个技术

帮我们导入和配置jar包

5.1 Maven项目架构管理工具

目前使用就是方便导入jar包的

Maven的核心思想：约定大于配置

有约束，不要去违反

maven会规定好如何去编写我们的java代码，必须要按照这个规定

5.2 在build中配置resource，来防止我们资源导出问题

<build>

<directory>src/main/resources</directory>

<include>**/*.properties</include> <include>**/*.xml</include>

</includes>

</resource>

<include>**/*.properties</include>

</includes>

</resource>

</resources>

</build>

封装：属性私有化，实现细节私有化，对外提供公共的访问方式。

属性私有化，对外提供操作该属性的方法。

提高了代码的复用性，提高了安全性。

封装原则：把不需要对外提供的内容都隐藏起来，把属性隐藏，提供公共的方法访问。

Private:可以修饰成员变量和成员方法，被修饰的变量或者方法，只能在本类中被使用。

this：调用当前类的属性和方法，跟外部传入的值或者属性做区别引入了该关键字。

继承：子类继承父类，扩展父类的功能。1.7及以下的，单继承，多层继承，不支持多重继承，子类只能继承父类的非私有成员和非构造方法

父类实例化可以调用子类进行实例化。

1如果父类对象使用本类的构造函数进行实例化，在方法调用的时候就只能调用本类类中的方法，并且最终执行的也是本类中的方法。

2如果父类对象使用子类的构造函数进行实例化，在方法调用的时候也只能调用本类中的方法，但是最终执行的确实子类中重写的方法。

3如果子类对象使用本类的构造函数进行实例化，在方法调用的时候既能调用父类中所有的菲斯有成员方法，也能调用本类中所有的非私有方法。

多态：

同一行为的不同实现。

对象的多态：主要体现在父类子类对象的转换，父类转换子类，需要强制转换；子类转换父类不需要强制转换。

方法的多态：方法的重载（overioad）（方法名相同，参数不同）和重写（override）（子类继承父类，（重写）在子类里重新定义一个和父类完全相同的方法）

类：是一组相关的属性和行为的集合，是一个抽象的概念。（成员变量和成员方法）

对象：是该类事物具体表现的形式，具体存在的个体。

成员变量和局部变量的区别：

成员变量：类中方法外、在堆内存中，随着对象的创建而存在，随着对象的消失而消失。有默认初始化值。

局部变量：在方法定义中或者方法声明上，在栈内存中，随着方法的创建而存在，随着方法的调用完毕而消失。没有默认初始化值，必须定义，赋值才能使用。

局部变量和成员变量名称可以一样，在方法中使用的时候采用就近原则调用。

抽象类：抽象类不可实例化，只能由子类去创建。（关键字是Abstarct）

DOM回流

DOM元素在页面的改变布局时触发浏览器的运算。

触发DOM回流的情况：

在页面中插入、删除或更新DOM元素。（appendChild, removeChild方法）
修改页面上的内容。（innerHTML方法）
移动DOM元素。（设置drag属性）
动画DOM元素。（css 动画效果）
测量元素的大小。（设置offsetHeight，scrollWidth属性值，getComputedStyle方法）
更改元素的类名。
添加或删除样式表（add与remove方法）
调整窗口的大小（resize方法）
滚动页面（scroll方法）

DOM重绘

DOM元素在页面不改变布局的情况下，出现不一样的现象。

触发DOM重绘的情况：

1.修改DOM元素显现。（设置outline, visibility, background属性）

回流必定触发重绘，而重绘不一定触发回流。

Dom事件委派机制

事件委派是利用事件冒泡原理，通过公共父级DOM去响应事件。

<button onclick="addLi()">添加li元素</button>

</ul>

function getEventType(e) {

//阻止冒泡事件

e.stopPropagation();

//阻止捕获事件/默认行为

e.preventDefault();

console.log(e.target.innerText);

//函数内部

return false;

}

var ulElement = document.getElementsByTagName("ul")[0];

function addLi() {

var ulLength = ulElement.children.length;

var liElement = document.createElement("li");

liElement.innerText = ulLength;

ulElement.appendChild(liElement);

}

</script>

事件冒泡是点击当前元素触发的事件是由子元素到父元素依次触发事件。

事件捕获是点击当前元素触发的事件是由父元素到子元素依次触发事件。

同时存在事件冒泡与事件捕获情况下，优先触发事件捕获，然后触发事件冒泡。

eventTarget.addEventListener()默认是事件冒泡，如需要使用事件捕获，需要设置eventTarget.addEventListener(type,listener,true);

Virtual DOM

解释：虚拟DOM，一种将DOM元素抽象成为一个JavaScript对象，存放到内存中进行计算，用虚拟DOM表示真实DOM节点的编程概念。

真实DOM

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</ul>

</body>

</html>

虚拟DOM

const vdom = {

tagName: "html",

children: [

{ tagName: "head" },

{

tagName: "body",

children: [

{

tagName: "ul",

attributes: { "class": "list" },

children: [

{

tagName: "li",

attributes: { "class": "list-item" },

textContent: "List 1"

{

tagName: "li",

attributes: { "class": "list-item" },

textContent: "List 2"

}

]

}

]

}

]

}

背景：真实DOM节点操作渲染页面很慢，而且还很耗页面性能。

原理：通过比较DOM元素更新前后之间的差异，然后通过 innerHTML方法直接改变页面内容。

目的：减少DOM节点元素的操作。

虚拟DOM不一定比原生DOM性能快，看具体页面元素复杂度。

Web Components

解释：一种 Web 标准，用于重新定义新的 HTML 元素。

方式：

1. 自定义元素（Custom Elements）

class BaseButton extends HTMLElement {

constructor() {

super();

//...

}

// 定义了一个自定义标签 组件

window.customElements.define('btn-base', BaseButton)

2. 阴影DOM（Shadow DOM）

// 启用Shadow DOM

var shadowRoot = document.getElementById('div').attachShadow({mode: 'open'});

// 制定Shadow DOM

shadowRoot.innerHTML = `

<div id="container">Custom content</div>

3. 模板与插槽（Templates and Slots）

</button>

</template>

优点：

Web Components与框架无关，可以跨框架迁移组件。

2. 标准的 Web Components 可以添加浏览器功能。

缺点：

Web Components不遵循标准HTML行为。

2. 兼容性差，无法 SEO。

vue、reactjs、Angular是Web Components标准的实现。

Web Components是原生组件。

vue、reactjs、Angular是框架封装组件。

Web Components | MDNdeveloper.mozilla.org/en-Udeveloper.mozilla.org/en-US/docs/Web/Web_Components

函数节流与函数防抖

节流与防抖目的是避免回调函数多次执行。

防抖

在一定的时间内，多次执行的按最后一次执行为准，仅执行一次的回调函数。

var btn = document.getElementById("btn");

var submit = function () {

console.log('hello Yu-Root');

};

//监听按钮点击

btn.addEventListener("click", debounce(submit));

/**

* @description 函数防抖。

* @param {Function} fn 必传，回调函数。

function debounce(fn) {

var timer = null;

return function () {

// 第一次点击的时候就会产生一个定时器，如果是多次点击就会清除之前产生的定时器，然后重新开始计时。

if (timer) {

clearTimeout(timer);

}

// 重新开始计时后再执行回调函数

timer = setTimeout(function () {

fn.call(this);

}, 3000);

};

}

</script>

常用于阻止表单的多次提交，文本输入的Ajax验证。

节流

在一定的时间内，将多次执行的合并成一次执行的回调函数。

var btn = document.getElementById("btn");

var submit = function () {

console.log("hello Yu-Root");

};

//监听按钮点击

btn.addEventListener("click", throttle(submit));

/**

* @description 函数节流。

* @param {Function} fn 必传，回调函数。

function throttle(fn, value) {

var flag = true;

return function () {

//第一次点击的时候就会开始计时，计时还没有结束，直接返回空。

if (!flag) {

return;

}

flag = false;

// 等计时结束之后才执行回调函数。

setTimeout(function () {

fn.call(this);

flag = true;

}, 1000);

};

}

</script>

常用于DOM元素拖拽、DOM元素动画、窗口缩放。

1、AJAX

AJAX全称为“AsynchronousJavaandXML”(异步Java和XML)，是指一种创建交互式网页应用的网页开发技术。国内通常的读音为“阿贾克斯”和阿贾克斯足球队读音一样。

2、jQuery

jQuery是继prototype之后又一个优秀的Javascrīpt框架，jQuery是一个快速的，简洁的java库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

3、API

API(ApplicationProgrammingInterface，应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件的以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

4、JavaScript

JavaScript是一种能让你的网页更加生动活泼的程式语言，也是目前网页中设计中最容易学又最方便的语言。你可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及简易的选举，还可以显示浏览器停留的时间。

5、HTML

HTML(HyperTextMark-upLanguage)即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。

6、ASP

ASP是ActiveServerPage的缩写，意为“动态服务器页面”。ASP是微软公司开发的代替CGI脚本程序的一种应用，它可以与数据库和其它程序进行交互，是一种简单、方便的编程工具。ASP的网页文件的格式是。asp，现在常用于各种动态网站中。

7、PHP

PHP，一个嵌套的缩写名称，是英文超级文本预处理语言(PHP:HypertextPreprocessor)的缩写。PHP是一种HTML内嵌式的语言。

8、其他

GoogleWebToolkit(简称GWT)是Google推出的Ajax应用开发包，GWT支持开发者使用Java语言开发Ajax应用。

extjsExtJS是一个Ajax框架，是一个用java写的，用于在客户端创建丰富多彩的Web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用。

HTTP状态码

1xx：指示信息-成功接收，继续处理

2xx：成功-表示已被接收，理解，接受

3xx：重定向-要完成请求必须进行更近一步的操作

4xx：客户端错误-请求有语法错误或请求无法实现

5xx：服务器错误-服务器未能实现合法的请求

Yanlililiya

关注

38
点赞
踩
33

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫