- 博客(44)
- 收藏
- 关注
RSS订阅原创 回流和重绘
资料你真的了解回流和重绘吗 - SegmentFault 思否回流与重绘 - 掘金 (juejin.cn)面试官：怎么理解回流跟重绘？什么场景下会触发？ | web前端面试 - 面试官系列 (vue3js.cn)浏览器渲染过程渲染页面：浏览器的工作原理 - Web 性能 | MDN (mozilla.org)解析HTML，形成DOM树，当遇到非阻塞资源时，如图片则会继续解析，当遇到css文件时，也会继续解析。当时遇到了js文件（特别是没有defer和async）的阻塞渲染并停止HTML的
2022-02-08 16:23:44
5927
5
原创 JavaScript之洗牌算法
参考资料JavaScript专题之乱序 · Issue #51 · mqyqingfeng/Blog (github.com)Fisher–YatesFisher–Yates shuffle - Wikipedia洗牌算法Fisher_Yates原理 - dodng - 博客园 (cnblogs.com)Fisher-Yates洗牌算法！来自算法理论的创始人！ - 知乎 (zhihu.com)其原理就是保证了每一次选取元素的概率的是一样的。如:1 2 3 第一次选取2的概率：1/31
2022-01-12 14:40:42
264
原创 JavaScript之函数柯里化
参考资料[面试官：什么是函数柯里化？能手写实现吗？ - 蜜瓜 - 博客园 (cnblogs.com)](https://www.cnblogs.com/bidong/p/15498133.html#:~:text=在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数 (最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。 这个技术以逻辑学家 Haskell,Curry 命名的。 什么意思？ 简单来说，柯里化是一项技术，它用来改造多参数的函数。)
2022-01-11 16:45:19
299
原创 JavaScript之数组扁平化
参考资料JS实现数组扁平化的 6 种方式 - 掘金 (juejin.cn)JavaScript专题之数组扁平化 · Issue #36 · mqyqingfeng/Blog (github.com)Array.prototype.reduce() - JavaScript | MDN (mozilla.org)递归let arr = [1,2,[3,[4,5,[6,7]],8],9];function flatten(arr = []){ let res = []; arr.
2022-01-10 21:33:43
186
原创 JavaScript之判断数据类型
参考资料JavaScript专题之类型判断(上) · Issue #28 · mqyqingfeng/Blog (github.com)typeoftypeof 是一元操作符，放在其单个操作数的前面，操作数可以是任意类型。返回值为表示操作数类型的一个字符串。但是呢，它除了对基本数据类型（undefined、Number、String、Boolean）可以做出精确的判断，但是对于null是不能的。对于引用类型几乎无法做出精确的判断。console.log(typeof 123);//numb
2022-01-10 15:23:00
160
原创 JavaScript之防抖和节流
参考资料面试官：什么是防抖和节流？有什么区别？如何实现？ | web前端面试 - 面试官系列 (vue3js.cn)JavaScript专题之跟着 underscore 学节流 · Issue #26 · mqyqingfeng/Blog (github.com)throttle | Underscore.js 中文文档 | Underscore.js 中文网 (underscorejs.com.cn)特别注意：从下面的代码，我们也可以的出JavaScript的各种事件是异步的，要不然，setT
2022-01-10 11:30:24
407
原创 JavaScript之继承方式
参考资料(22条消息) JavaScript各种继承，原型继承，构造函数继承，组合继承，寄生组合，ES6继承，我能学会你也可以_不见浅诗的博客-CSDN博客面试官：Javascript如何实现继承？ | web前端面试 - 面试官系列 (vue3js.cn)JavaScript深入之继承的多种方式和优缺点 · Issue #16 · mqyqingfeng/Blog (github.com)《JavaScript高级程序设计》原型链继承function father(){ this.
2022-01-08 22:42:26
194
原创 JavaScript之手动模拟new关键字
参考资料new 运算符 - JavaScript | MDN (mozilla.org)Object.create() - JavaScript | MDN (mozilla.org)new 关键字new 关键字会进行如下的操作：创建一个空的简单JavaScript对象（即{}）；为步骤1新创建的对象添加属性__proto__，将该属性链接至构造函数的原型对象 ；将步骤1新创建的对象作为this的上下文 ；如果该函数没有返回对象（null可不是对象），则返回this。代码如下：f
2022-01-08 17:22:20
178
原创 JavaScript之deepClone（包含对时间和正则深克隆）
面试官：深拷贝浅拷贝的区别？如何实现一个深拷贝？ | web前端面试 - 面试官系列 (vue3js.cn)如何写出一个惊艳面试官的深拷贝? - 掘金 (juejin.cn)如何 clone 一个正则？ - 掘金 (juejin.cn)WeakMap - JavaScript | MDN (mozilla.org)// 拷贝时间function cloneDate(date) { let constructor = date.constructor; return new cons
2022-01-08 15:05:50
411
原创 JavaScript之call、apply和bind的手动模拟实现
文章目录1. call的实现1.1 设计思路1.2 实现改变上下文1.3 传递参数1.4 null和undefined处理，返回值的处理2. apply的实现3. bind() 的实现3.1 改变this并返回函数3.2 传参的实现3.3 构造函数效果的模拟实现3.4 最终代码1. call的实现参考资料：js 实现call和apply方法，超详细思路分析 - 听风是风 - 博客园 (cnblogs.com)MDN的解释：Function.prototype.call() - JavaScript |
2022-01-05 18:55:44
539
1
原创 ES6中class的执行顺序问题和一些个人理解
执行顺序众所周知，ES6的class只不过是ES5定义对象的语法糖，今天学习的时候突然想到它的执行顺序是什么？我们知道的class在ES6中就是一个函数，且只能通过new才能执行，执行的时候会自动调用里面的构造函数，那么对于里面的方法它们是什么时候被放入class xx 的prototype中的呢？下面用到代码验证一下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2021-12-06 18:14:57
935
原创 JavaScript模块化学习
JavaScript模块化学习资料JavaScript modules 模块 - JavaScript | MDN (mozilla.org)Module 的语法 - ECMAScript 6入门 (ruanyifeng.com)什么是模块把一些复杂的程序根据一定的规则拆分乘多个单个文件，并最终组合在一起。这些被拆分出来的文件是模块，模块内部数据是私有的，只有向外部暴露一些方法才能与外部其他模块进行通行。Node.js 已经提供这个能力很长时间了，还有很多的 Javascript 库和框架
2021-11-28 14:57:57
380
原创 《JavaScript高级程序设计第4版》第4章-变量、作用域与内存学习笔记
变量、作用域与内存本文是作者在阅读《JavaScript高级程序设计第4版》的读书笔记。1.1 原始值和引用值在JavaScript中有六种原始数据类型：Undefined、Null、String、Boolean、Number、Symbol，保存他们的变量都是按值访问的，也就是它们是存储在栈当中的，我们操作的是实际的值。引用值是保存在内存中的对象。JavaScript 不允许直接访问内存位置，不能直接操作对象所在的内存空间。在操作对象时，实际上操作的是对该对象的引用（reference）而非实际的对
2021-11-21 17:58:06
826
2
原创 同源问题及解决方案
同源策略（same origin policy）浏览器的同源策略 - Web 安全 | MDN (mozilla.org)浏览器同源政策及其规避方法 - 阮一峰的网络日志 (ruanyifeng.com)跨域资源共享 CORS 详解 - 阮一峰的网络日志 (ruanyifeng.com)同源策略规定了不同域不能获取Cookie、LocalStorage 和 IndexDB 无法读取。对于cookie来说可以使用 document.domain 来允许子域安全访问其父域时，您需要在父域和子域中设
2021-11-20 16:02:18
5377
原创 AJAX基础学习
Ajax学习记录该文章仅作为笔者的学习笔记。参考资料尚硅谷AJAX 教程 | 菜鸟教程 (runoob.com)AJAX 简介 (w3school.com.cn)AJAX – JavaScript 标准参考教程（alpha） (ruanyifeng.com)什么是AJAXAJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整
2021-11-20 16:00:57
879
原创 MongoDB和mongoose学习笔记
MongoDB基础学习和mongoose学习笔记本文仅作为作者的学习过程记录。参考资料MongoDB 概念解析 | 菜鸟教程 (runoob.com)MongoDB CRUD操作_MonogDB 中文网MongoDB聚合 - MongoDB-CN-Manual (mongoing.com)MongoDB是一个基于分布式文件存储的数据库。它是一个非关系数据库。MongoDB 将数据存储为一个文档。MongoDB是一个基于分布式文件存储的数据库。NoSQL非关系型数据库，主要指那些非关系型的
2021-11-16 20:14:47
1133
原创 Nodejs之会话控制学习（cookie和session）
会话控制学习资料Cookie - JavaScript 教程 - 网道 (wangdoc.com)HTTP协议是一个无状态的协议，它无法区分多次请求是否发送自同一客户端。而我们在实际的使用中，却又大量的这种需求，我们需要通过会话的控制来解决该问题。cookieCookie 是服务器保存在浏览器的一小段文本信息，一般大小不能超过4KB。浏览器每次向服务器发出请求，就会自动附上这段信息。HTTP 协议不带有状态，有些请求需要区分状态，就通过 Cookie 附带字符串，让服务器返回不一样的回应。
2021-11-13 18:48:53
1433
原创 Nodejs之express框架学习
Express框架学习笔记MDN永远的神参考资料安装 Express - Express 中文文档 | Express 中文网 (expressjs.com.cn)[express框架 - 小火柴的蓝色理想 - 博客园 (cnblogs.com)](https://www.cnblogs.com/xiaohuochai/p/7189074.html#:~:text=Express是一个简洁、灵活的 node.js Web 应用开发框架%2C 它提供一系列强大的特性，帮助开发者创建各种 Web 和移
2021-11-11 21:18:40
1171
原创 nodejs模块化学习
Nodejs模块化（组件）学习参考资料(1条消息) Nodejs模块化_lhrdlp的学习笔记-CSDN博客(1条消息) nodejs的模块化概念_kerryqpw的博客-CSDN博客_node模块化前端科普系列-CommonJS：不是前端却革命了前端 - 知乎 (zhihu.com)(1条消息) nodejs的require加载模块的路径搜索顺序_itas109的专栏-CSDN博客_nodejs require 路径查找模块化指的就是将一个大的功能拆分为一个一个小的模块，通过不同的模块的组
2021-11-08 18:36:00
749
原创 Nodejs文件操作学习
Nodejs学习笔记中文文档-API 文档 | Node.js 中文网 (nodejs.cn)官方教程-Node.js 简介 (nodejs.cn)Node.js是一个基于V8 JavaScript engine的JavaScript运行环境，是一个应用程序。在使用JavaScript代码时，要清楚它到底是在前端运行还是在后端运行。作用解析并运行js代码操作系统资源（内存等），如果是浏览器就不能操作硬盘等。应用场景app接口服务网络聊天室动态网站、个人博客等后端的web服务（服
2021-11-07 19:50:07
506
原创 NPM学习
Nodejs学习之npm这是学习npm的学习笔记。npm --> node package manager，也就是node的包管理工具（一个应用程序）。教程Getting started | npm Docs (npmjs.com)NPM 使用介绍 | 菜鸟教程 (runoob.com)packagenodejs的包是基本遵循CommonJS规范，将一组相关的模块组合在一起，形成一个完整的工具。想c语言的头文件作用对node工具包搜索、安装、删除、上传。这样我们可以是用别人已经开
2021-11-07 19:46:51
279
原创 使用nodejs创建HTTP基础知识
使用Nodejs创建HTTP服务创建HTTP服务初体验//1. 引入HTTP模块const http = require('http');//2. 调用方法 创建服务对象/** * request 请求报文的封装对象 * response 响应报文的封装对象 */const server = http.createServer(function(request,response){ /* 此方法向服务器发出信号，表明所有响应头和正文都已发送；该服务器应认为此消息已完成。
2021-11-06 19:06:14
471
2
原创 JavaScript中this的指向问题
JavaScript中this的指向问题参考资料：JavaScript 的 this 原理 - 阮一峰的网络日志 (ruanyifeng.com)Javascript 的 this 用法 - 阮一峰的网络日志 (ruanyifeng.com)JS中的this指向问题(详细版)_LoveyL0201的博客-CSDN博客《你不知道的JavaScript》-上，推荐读这本书本文记录了JavaScript中this指向问题的学习心得，为以后的复习做准备。讨论this的时候要注意是否在严格模式下。下
2021-11-02 18:38:30
429
原创 Git学习笔记
Git学习Git就是一个分布式的版本控制工具。它具有代码备份、版本回退、协作开发和权限控制等工作。Linux 常用命令ls：(list) 查看文件夹下的列表。cd：(change directory)。进入某一个文件夹内的。cd .. 回到上一级。使用tab可以自动补全。clear：清屏（也可以使用ctrl + L）mkdir：创建文件夹（make directory）touch：创建文件rm：删除文件（remove）rm dir -r：强制删除文件夹(-r 删除文件夹选项 -f 强
2021-10-31 14:00:20
127
原创 JavaScript之闭包
闭包学习记录后盾人JavaScript闭包的学习过程，以便后续复习。资料：深入理解作用域和闭包 - 掘金 (juejin.cn)第九章 这次把JS闭包给你讲得明明白白_哔哩哔哩_bilibili语法环境和作用域语法环境深入理解JavaScript-词法环境在我看来环境就是用来包裹用的，一个范围，比如说一个小镇，这就是一个环境，里面包含了各种环境和变量。函数也是一个环境。作用域元素的最用范围就是作用域。变量的作用范围就是包裹它环境的范围。<script>
2021-10-26 20:47:13
126
原创 JavaScript之实现秒杀倒计时
需求分析用户自定义一个时间，开始倒计时。效果展示思路利用时间戳来判断当前时间和设定时间的差值，然后分别求出时分秒即可。JavaScript获得时间戳的方式有+new Date()obj.vauleofobj.getTimeDate.now()代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="
2021-10-17 21:28:46
1082
1
原创 2021小米商城主页模仿(HTML，CSS，JavaScript)
用时两天模仿的小米商城主页。没有设计图失真的很烦，各个距离都要慢慢找。演示地址大米商城代码大米商城代码总结通过这个的项目，发现在css的的熟练度还是很不足，对于许多的特性虽然知道，但是做的时候没想起来。代码也不是很规范，有一些可以写在一起的代码分开写了，浪费了资源，增加了代码的耦合度。如果两个或者两个元素的元素向右浮动时，若要保证元素的显示顺序，那么在书写元素是应该将元素顺序反着书写，应该代码是从上向下执行的，所以反正写那么就意味着原本在最后的元素先向右浮动，这才能保证顺序。清除浮动的
2021-10-17 13:45:14
1497
原创 前端之移动web开发学习
移动端浏览器的现状移动端的浏览器基本上是由webkit发展而来的，所以只需要采用处理webkit浏览器的方法即可，也就是说移动端的没有pc那么多的兼容性问题。手机屏幕现状做为开发人员来说，对于分辨率不予要太多的关注，因为我们常用的单位是px物理像素比参考博客移动端的调试方法视口视口(viewport)就是浏览器显示内容的屏幕区域。分为：布局视口、视觉视口和理想视口。布局视口（layout viewport）视觉视口（visual viewport）理想视口（ideal v
2021-10-10 20:28:15
308
2
原创 Javascript之实现登录框拖拽效果
需求分析点击弹出登录框在登录框的特定区域可以将登录框拖拽至任意位置可以关闭登录框，并且下一次点击弹出登录框归位具体实现完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport
2021-10-02 09:37:48
516
2
原创 CSS之BFC、高度塌陷和外边距重叠
BFC块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。也就是说具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。BFC 是一个隐藏的属性，无法使用一般的方法开启开启BFC的方法body 根元素浮动元素：float 除 none 以外的值绝对定位元素：position (
2021-10-01 16:32:17
239
原创 《JavaScript高级程序设计》学习笔记（一）
文章目录一、什么是JavaScriptJavaScript的组成二、HTML中的JavaScript2.1 <script>元素2.1.1 标签位置2.1.2推迟执行脚本2.1.3 异步执行脚本2.1.4 动态记载脚本2.2 行内代码和外部文件2.3 文档模式2.4 <noscript>元素三、JavaScript的语言基础本文是作者在学习《JavaScript高级程序设计》第四版时所总结的笔记。一、什么是JavaScriptJavaScript是由网景公司和Sun公司联合
2021-08-21 12:19:56
309
原创 CSS是如何工作的（来自MDN）
基本步骤浏览器载入HTML文件（比如从网络上获取）。将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式。接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理。浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择
2021-08-21 11:39:46
66
原创 HTML+CSS静态实现学成在线网站
来自B站Pink老师的教学效果图HTML代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal.
2021-03-24 17:15:07
450
原创 快速排序之JavaScript实现
原理不再赘述。/* 使用JavaScript实现快速排序 */let array = [1,6,2,342,352,423,2352,334,645,78,56,34,23,45,23,5,57,58];//待排序数组function quickSort(array,l,r){ if(l < r){ //递归结束条件 let i = l, j = r, temp = array[i]; while(i < j){ whi.
2021-03-15 20:10:45
66
原创 vscode使用code runner运行乱码的解决方法
我这里原因是没有下载node.js。下载node.js后，重启vscode即可。可以使用node -v 查看是否安装成功。
2021-03-15 18:04:27
647
原创 JS脚本调用策略小结（defer and async）
如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。如果脚本需要等待页面解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。如果使用async则无法确定脚本加载的顺序。...
2021-03-15 17:16:33
118
原创 小米官网手机显示布局
效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
2021-03-14 20:04:56
149
原创 CSS浮动练习之列表浮动
善用浮动的特性。浮动元素会脱离标准流（脱标）。浮动的元素会在一行内显示并且元素顶部对齐。浮动的元素会具有行内块元素的特性。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co.
2021-03-14 19:18:34
707
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人