啃犀牛书——浏览器中的JS
犀牛书这里太杂了,我有点跟不上,先去看红宝书理顺一下了。
(面了很多次试,和面试官们的交谈中发现这一块蛮重要的,特来回看(实习时间这个事情真的难以在招聘者和应聘者间达成完美一致,真难受))
BOMbrowser object model 浏览器对象模型,提供了与网页无关的浏览器功能对象,这些是可以与浏览器进行交互的对象。
BOM对象有很多↓
windowwindow对象是BOM的核心,表示浏览器的实例。window对象被复用为ES中的Global对象,又是浏览器窗口中的JS接口。(强烈建议自己F12输出看一下)
Global作用域通过var声明的所有全局变量和函数都会变成window对象的属性和方法。
123456var saySth = () => { alert('Sth')}window.saySth()var newVal = window.oldVal // undefined 虽然没有但是undefined
窗口关系对象top始终指向最上层窗口,parent指向当前窗口的父窗口,self始终指向window(两者是同一个 ...
啃犀牛书——JS标准库
前言基础不牢地动山摇吃不好饭睡不好觉。
↓一些之前没提到的有趣数据结构和API。
Set集合&Map映射众所周知,Object类型是一种万能数据结构,可以把字符串映射为任意值。但是这明显限制了映射和集合的发挥(字符串的约束+不必要的toString属性)。ES6新增了两类数据结构↓
Set特点
没有索引
不重复
可迭代(for/of√;forEach(val)√)
非常之快
创建12let set = new Set()let set1 = new Set([1, 'w']) // 构造函数参数必须是可迭代对象(包括其他集合)
属性1let len = set .size // 获取集合长度,确实有点像数组的length属性
方法1234let s = new Set([1, 2, 3])s.add(1) // 增 => [1, 2, 3]s.delete(1) // 删 => falses.has(1) // 查 => false
需要注意的是:Set成员根据严格相等===判断重复。因此,如果值是对象类型的话,也会根据全等来判重, ...
14Days-JS-Pra
Day1计数器
闭包
创建 Hello World 函数
闭包
Day2计数器 II
闭包
转换数组中的每个元素
数组转换
Day3过滤数组中的元素
数组转换
数组归约运算
数组转换
Day4复合函数
输入输出
只允许一次函数调用
输入输出
Day5-可以多回顾一下 记忆函数
输入输出
柯里化
输入输出
↑这个需要会员,我没做,不过看了一些柯里化函数的使用
123456789101112131415161718192021// 一个接收三个参数的普通函数function add(a, b, c) { return a + b + c}// 柯里化function curry(func) { return function curried(...args) { if (func.length <= args.length) { // 当参数个数满足要求时,即可带着参数返回函数执行 return func(...args) ...
啃犀牛书——函数
函数是啥?
函数大致划分?
普通函数
有初始值的函数
构造函数
箭头函数(变量)
作用域
上下文
闭包
JS——异步
试着将学到的东西讲出来。
什么是异步编程 异步编程是一种编程模式。我们知道,JS是单线程的,如果处理器要处理一个耗时很长的业务,比如说一个到1e10的叠加函数,很容易导致进程阻塞。那么这个时候就可以将一些类似的业务先拿到进程以外,通过一些特定的方式去调用它们,同时又能保证其之后的同步代码可以继续正常运行。
JS中如何处理同步和异步所以说通常JS对于一段代码的运行处理时这样子的:
首先将栈内的所有同步代码挨个执行然后抛出。在这个过程中遇到的异步代码对应放入红宏任务或微任务队列中。当同步代码全部执行完毕后,我们先将微任务队列里的代码执行清空,然后从宏任务队列中拿到一个宏任务块。我们将这个宏任务块放进栈中执行,将里面的微任务再次拿到微任务队列中。执行完毕后再次清除微任务队列。这样不断反复,直到栈和两个队列全部清空,这样JS这一部分的代码就执行完毕了。
异步操作主要有哪些 如果对异步操作按照上述过程所述的话可以划分为像setTimeout,setInterval这样的宏任务,以及Promise,MutationObserver这样的微任务。
异 ...
细小功能收纳盒
细小功能收纳盒简单的猜想-网站迁移提示给点信息提示,然后条性重定向一下↓
1234567<html> .... <script> .... setTimeout(() => location.replace('新网页'), 1000) </script></html>
简易悼念模式-filter: grayscale(100%);
悼念模式 是指在某些特殊场合下,例如国家哀悼、重大灾难等,为了表达对逝者的哀悼和敬意,网站或应用程序会采用特定的方式展示,例如改变网站或应用程序的主题色、添加悼念标志等。
实现哀悼模式的方式可以因具体情况而异,但通常可以通过以下方法之一来实现:
CSS样式变更:使用CSS样式来改变网站或应用程序的主题色、字体颜色、背景图像等,以呈现悼念的氛围。
图像或标志添加:在网站或应用程序中添加悼念标志或图像,例如黑色绸带、蜡烛等,以表达对逝者的哀悼和敬意。
功能限制:在某些场合下,为了避免影响哀悼活动的进行,网站或应用程序会限制一些功能,例如禁止发布带 ...
啃犀牛书——数组
前言基础不牢地动山摇找不到工作吃不饱饭睡不好觉
JS数组数组是JS基础数据类型。
JS数组是值的有序集合,无类型限制
JS数组是动态的,按需增大缩小,最大索引值2^32-2
JS数组可以是稀疏的,不一定连续索引
JS数组是特殊的对象
JS数组从Array.prototype继承属性买这里面很多数组方法都是泛型(用于参数化类型)的,所以同样可以用于任何类数组对象。
1Array.prototype.__proto__ = Object.prototype // true
ES6增加一类新数组,统称为“定型函数”,固定长度、固定数组元素类型。(这种函数具有极高性能,且支持二进制数据字节级访问)
创建数组数组字面量1234let empty = []let a = 0let misc = [1,1, 'm', true, undefined, a+1]let ohno = [,,] // 这个长度是2!因为数组字面量语法允许末尾出现‘,’
new构造函数123let empty = new Array()let arr = new Array(10) // 定长 ...
JS——防抖和节流
重要概念-防抖和节流防抖和节流本质上是优化高频率执行代码的手段。
当浏览器resize/scroll/keypress/mousemove等事件触发时,会不断地调用回调函数,极大地浪费资源、降低前端性能。
↑为了优化体验,需要对此类事件调用次数进行合理限制,这时候我们就可以使用防抖、节流的手段减少调用频率。
防抖-debounce
频繁操作 => 最后一次操作 定时器
定义n秒后再执行该事件,如果在这期间被重复触发,那么重新计时。
栗子电梯等人
实现1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495// 简单实现function debounced(func, wait) { let timeout; // 声明一个变量用于保 ...
啃犀牛书——对象
前言基础不牢,地动山摇
JS对象对象介绍对象是一种复合值,汇聚多个值(原始值/其他对象)且允许按照名字存储这些值。
对象是一个 属性的无序集合,每个属性都有名字和值。对象把字符串映射为值(散列、散列表、字典、关联数组)。
对象除了可以维持自己的属性外,还能够从其他对象(原型)继承属性。
任何数、字符串、符号、布尔值、null、undefined的值都是对象。
JS对象是动态的,不过也可以利用对象模拟静态类型语言中的静态对象和结构体。
对象可修改,按引用操作完成(栈不同而堆同),而非按值操作。
对象属性: 自有属性, 继承属性
对象属性特性: writable可写(是否可设置) enumerable可枚举(是否可for/in遍历) configurable可配置(是否可删/修改)
对象的创建字面量这是创建对象的一个最为简单的方法:简单直接花括号↓
123456789101112let empty = {}let point = {x: 0, y: 0}let p1 = {x: -point.x, y: -point.y}le ...
前端工程化工具和框架的选型研究:以实践案例为基础
摘要:随着前端技术的不断发展和应用,前端工程化已经成为现代Web开发的一个必要组成部分。选择最适合项目的前端工程化工具和框架对于开发效率和代码质量的提升至关重要。本文以实践案例为基础,对常见的前端工程化工具和框架进行了比较和分析,并探讨了如何在实践中进行选择。
关键词:前端工程化,工具,框架,选型,实践案例
引言 随着Web应用的不断发展,前端技术的重要性日益凸显。传统的前端开发方式已经无法满足当前复杂Web应用的开发需求,因此前端工程化应运而生。前端工程化包括构建、打包、自动化测试、代码规范等一系列工作,可以提高代码质量、开发效率和团队协作效率。在实际的开发过程中,选择最适合项目的前端工程化工具和框架非常重要,可以避免不必要的时间和精力浪费。
本文以实践案例为基础,对常见的前端工程化工具和框架进行了比较和分析,并探讨了如何在实践中进行选择。首先,我们介绍了常见的前端工程化工具和框架,包括Webpack、Gulp、Grunt、Vue CLI、Create React App等。然后,我们根据实际的开发需求,从功能、易用性、性能等方面对这些工具 ...