繁依Fanyi0

这个屌丝很懒，什么也没留下！

热门标签

2024年JavaWeb快速入门--JavaScript(2)，前端插件化开发

作者：繁依Fanyi0 | 2024-05-18 17:51:43

踩

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

birthday=new Date(1999,12,06);//按年、月、日设置对象

birthday=new Date(1999,12,06,3,22,30);//按年、月、日、时、分、秒设置对象

获取日期的方法：

getTime();//获取当前时间，到毫秒

toLocaleString()//字符串格式返回时间

getDate();//返回一个月中的某一天

getDay();//返回一周中的某一天

getMonth();//返回月份

getFullYear();//按四位数字返回年份

getHours();//返回小时

getMinutes();//返回分钟

getSeconds();//返回秒数

getMillisecinds();//返回毫秒

4. Math：数学对象

Math对象提供多种算术常量和函数，执行普通的算术任务，使用Math对象不用创建，可以直接使用（ Math.方法名();）

Math中的常量：E、LN2、LN10、LOG2E、LOG10E、PI、SQRT1_2、SQRT2

Math中的方法：

random()：返回 0 ~ 1 之间的随机数,含0不含1

sqrt()：返回平方根

max()：最大值

min()：最小值

ceil(x)：对数进行上舍入。

floor(x)：对数进行下舍入。

round(x)：把数四舍五入为最接近的整数。

exp()：返回e的指数

log()：返回自然对数

pw()：返回x的y次幂

5. Number：数值对象

Number用来表示数值对象，JavaScript会自动在原始数据的对象之间转换。同时Number也不用创建对象，直接使用数值变量名即可var s=x.方法名(参数)。

Number中的方法：

toString(redix);//按照指定的进制数转化为字符串，默认为十进制

toFixed();//将Number四舍五入为指定小数位数的数字

6. String：字符串对象

字符串是JavaScript中使用不叫普遍的一个类型，我们可以通过var s1="Hello World";或var s2=new String("Hello World");两种方式定义字符串。

字符串中常用的属性和方法：

length;//获取字符个数

charAt(n);//获取指定位置的字符

indexOf(search,index);//从指定位置开始，搜索字符串第一次出现的位置

lastIndexOf();//字符串最后出现的位置

split();//将字符串分割成字符串数组

toLowerCase();//把字符串转换为小写

toUpperCase();;//把字符串转换为大写

7. RegExp：正则表达式对象

正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

定义字符串的组成规则。

单个字符:[],如：[a] [ab] [a-zA-Z0-9_]
特殊符号代表特殊含义的单个字符:

\d:单个数字字符 [0-9]

\w:单个单词字符[a-zA-Z0-9_]

量词符号：

?：表示出现0次或1次

*：表示出现0次或多次

+：出现1次或多次

{m,n}:表示 m<= 数量 <= n

m如果缺省： {,n}:最多n次

n如果缺省：{m,} 最少m次

开始结束符号

^:开始 $:结束

创建方式：

var reg = new RegExp(“正则表达式”);

var reg = /正则表达式/;

方法:

test(参数):验证指定的字符串是否符合正则定义的规范

8. Global：全局对象

Global是全局对象，封装的方法不需要对象就可以直接调用。方法名();

encodeURI():url编码

decodeURI():url解码

encodeURIComponent():url编码,编码的字符更多

decodeURIComponent():url解码

parseInt():将字符串转为数字，逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number

isNaN():判断一个值是否是NaN，NaN自己无法识别自己,NaN参与的==比较全部问false

eval():讲 JavaScript 字符串，并把它作为脚本代码来执行。

URL编码：

传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

DOM：

DOM(Document Object Model)：文档对象模型，用来控制文档的内容，将标记语言文档的各个部分封装为对象，通过使用这些对象对标记语言文档进行操作，使用户和网页之间的交互更加丰富。JavaScript可以通过document对象访问这个模型中的所有页面元素。

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型

Document：文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment:注释对象

Node：节点对象

XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

理解结点：

Node：结点对象，其他5个的父对象，document实际上是该页面上所有页面元素的集合，通过它可以访问页面中所有的元素，DOM中的每一个对象都可以被认定为一个节点，指该页面上的某个元素。<html>是页面的结点，是所有元素的根，可以通过document.documentElement;来获得，同时结点还包括：子结点、父结点、兄弟结点，可以通过相关方法来访问：

childNodes;//获取自己的子结点

firstChild;//获取第一个子结点

lastChild;//获取最后一个子结点

parentNode;//获取结点的父结点

previousSibling;//返回结点的前一个结点

nextSibling;//返回结点的后一个结点

CRUD dom树：

appendChild(); //向节点的子节点列表的结尾添加新的子节点

removeChild(); //删除（并返回）当前节点的指定子节点

replaceChild(); //用新节点替换一个子节点

访问页面元素：

获取页面标签(元素)对象：Element

通过ID访问页面元素：document.getElementById("id值"); ，可以通过.value访问标签中的内容
通过Name访问页面元素：getElementsByName();，返回值是一个数组
通过标签名访问页面元素：getElementsByTagName();，返回值是一个数组
通过Class属性值访问页面元素：getElementsByClassName();，返回值是一个数组
另外我们还可以通过document.froms方法获得页面中的所有from对象

创建其他DOM对象：

createAttribute(name)
createComment()
createElement()
createTextNode()

修改属性：

removeAttribute()：删除属性
setAttribute()：设置属性

操作Element对象：

上面介绍了获取页面元素的方法，获取元素之后，我们就可以可以通过修改元素的属性值来达到动态修改页面的效果。这里我们提供一个属性值：innerHTML，这个属性可以用来修改标签提的内容。同时我们也可以直接对元素属性就行修改：

BOM:

=================================================================

BOM(Browser Object Model) 浏览器对象模型，将浏览器的各个组成部分封装成对象。由Window：窗口对象、Navigator：浏览器对象、Screen：显示器屏幕对象、History：历史记录对象、Location：地址栏对象五部分组成。

Window：窗口对象

Window对象是JavaScript层级中的顶级对象，在浏览器的网页中会自动的拥有Window对象，我们可以直接使用。Window中提供了一些重要的属性 方法名();或window.方法名();，象上面用到的document对象就属于Window对象所有，另外还有：

history：该对象记录一系列用户访问的网址，可以通过back()、forward()、go()放法重复执行以前的访问，同时可以通过leagth属性返回当前窗口历史列表中的URL数量。
location：表示当前显示文档的Web地址，可以用它修改显示当前窗口,如果把一个含有URL的字符串赋予location或它的href属性，就可以在当前窗口显示内容
navigator：有关客户机浏览信息的对象
screen：存放关于浏览器屏幕的信息
parent：获取当前窗口的父窗口引用

Window对象中的主要方法：

与弹出框有关的方法：

alert()：显示带有一段消息和一个确认按钮的警告框。

confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。如果用户点击确定按钮，则方法返回true，如果用户点击取消按钮，则方法返回false；

prompt()：显示可提示用户输入的对话框，返回值：获取用户输入的值

与打开关闭有关的方法：

close()：关闭浏览器窗口。

open()：打开一个新的浏览器窗口，返回新的Window对象

与定时器有关的方式

setTimeout()：在指定的毫秒数后调用函数或计算表达式，参数：js代码或者方法对象或毫秒值，返回值：唯一标识，用于取消定时器

clearTimeout()：取消由 setTimeout() 方法设置的 timeout。

setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。

clearInterval()：取消由 setInterval() 设置的 timeout。

事件编程

事件是可以被浏览器监听到的行为，HTML对一些页面元素规定了可以响应的事件。将事件，事件源，监听器结合在一起，当事件源上发生了某个事件，则触发执行某个监听器代码。

监听的概念： 某些组件被执行了某些操作后，触发某些代码的执行。

网页访问中常见的事件：

点击事件：

onclick：单击事件

ondblclick：双击事件

焦点事件

onblur：失去焦点

onfocus:元素获得焦点。

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

某个事件，则触发执行某个监听器代码。

监听的概念： 某些组件被执行了某些操作后，触发某些代码的执行。

网页访问中常见的事件：

点击事件：

onclick：单击事件

ondblclick：双击事件

焦点事件

onblur：失去焦点

onfocus:元素获得焦点。

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/589302