- 博客(38)
- 收藏
- 关注
RSS订阅原创 JS常见数组方法
迭代 Array.forEach()可通过对每个数组元素执行函数进行遍历，但不会返回新数组，不改变原数组Array.map()可通过对每个数组元素执行函数返回新的数组，不改变原数组，不会对没有值的数组元素（元素为undefined时返回NAN）执行map方法Array.every()判断数组是否所有元素都符合判断条件，返回 boolean 类型Array.some()判断数组是否有元素符合判断条件Array.filter()返回数组中符合条件的元素Array.redu..
2022-05-29 15:27:14
172
原创 在码云创建仓库并关联到本地
网址：https://gitee.com/登录账号后选择 “新建仓库”将Git 仓库的项目与本地项目文件关联在安装Git 之后在码云的个人设置中选择SSH公钥点击“怎样生成公钥”，按照步骤生成SSH 公钥并添加-- 注意此处的相关命令不要在CMD中运行，而是应该在安装好的 Git Bash 中运行将这个创库和本地项目关联切换到该仓库下，“克隆/下载” -> “SSH” -> “复制”在CMD下跳到想要的目录下，运行命令： git...
2022-03-21 17:01:55
1094
原创 Vue生命周期
在一个Vue实例中，生命周期函数的执行节点<div id="app1"></div><script> // 生命周期函数就是Vue 实例在某一个时间点会自动执行的函数 const vm = new Vue({ el: '#app1', data: { }, // 声明Vue， 进行事件和生命周期的初始化之后 be
2022-03-18 22:45:04
94
原创 事件捕获、事件冒泡以及阻止冒泡
事件捕获 -- 点击底层容器，事件从表层向底层触发 <div id="top">表层 <div id="bottom" style="margin: 10px;border: 1px solid red;">底层</div> </div> <script> const surface = document.getElementById('top') const bottom
2022-01-21 08:46:50
186
原创 前端性能优化及节流和防抖
性能优化原则多使用内存、缓存或其他方法 减少 CPU 计算量，减少网络加载耗时 （适用于所有编程的性能优化—— 空间换时间）优化方式 让加载更快 减少资源体积：压缩代码 减少访问次数：合并代码，SSR服务器端渲染，缓存 使用更快的网络：CDN（根据区域匹配服务器，更快链接网络） 让渲染更快 CSS 放在 head，JS 放在body 末尾 今早开始执行JS，用 DOMContentLoaded 触发 懒加载（图片懒加载，上划加载更多） 对 DOM
2022-01-21 08:46:22
183
原创 网页的加载和渲染
从输入 url 到渲染出页面的整个过程（无标准答案） window.onload 和 DOMContentLoaded 的区别 网页是如何加载并渲染的加载页面的形式html 代码 媒体文件，如图片、视频等 JavaScript、css加载资源的过程DNS解析：域名 -> IP地址（在不同的地域，相同域名（如百度）解析得到不同的IP，使得访问更快） 浏览器根据 IP 地址向服务器发起 http 请求 服务器处理http请求，并返回给浏览器渲染页面的过程..
2022-01-19 14:42:14
715
原创 cookie简单介绍
cookie-- 包含许多个人信息，每次html请求都会携带cookie本身用于浏览器和server通讯（主要功能） 被"借用"到本地存储 前端可用 document.cookie = '...' 来修改缺点存储大小，最大4kB http 请求时需要发送到服务端，增加请求数据量 只能用 documnet.cookie = '...' 来修改，过于简陋localStorage 和 sessionStoragelocalStorage 数据会永久...
2022-01-17 09:07:20
242
原创 Fiddler移动端抓包及web调试
Fiddler是一个http调试代理，它能 够记录所有的你电脑和互联网之间的http通讯，Fiddler 可以也可以让你检查所有的http通讯，设置断点，以及Fiddle 所有的“进出”的数据（指cookie,html,js,css等文件，这些都可以让你胡乱修改的意思）。 Fiddler 要比其他的网络调试器要更加简单，因为它仅仅暴露http通讯还有提供一个用户友好的格式。移动端h5页，查看网络请求，需要用工具抓包 Windows一般用 fidder Mac OS 一般用 ch...
2022-01-17 09:06:16
364
原创 BOM操作（Browser Object Model）
Window 对象所有浏览器都支持window对象。它代表浏览器的窗口。所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至（HTML DOM 的）document 对象也是 window 对象属性：一些其他方法：window.open()打开新窗口window.close()关闭当前窗口window.moveT...
2022-01-11 17:36:13
51
原创 DOM操作及性能优化
DOM节点操作prototype 和 attribute 的区别prototype：修改对象属性，不会体现到 html 结构中 attribute：修改 html 属性，会改变 html 结构 两者都有可能引起 DOM 重新渲染const pList = document.querySelectorAll('p')const p1 = pList[0]// prototypep1.style.width = '100px'console.log(p1.style.width.
2022-01-11 17:27:59
351
原创 异步（进阶）--event loop，promise进阶，async/await
event loop（事件循环/事件轮询JS是单线程运行的异步是基于回调来实现的event loop就是异步回调的基本原理简单图示
2022-01-10 20:44:23
335
原创 git的常见命令
在Windows安装Git，可以从官网上直接下载程序，然后按默认选项安装即可安装完成后，可以在开始菜单找到 “Git” -> “Git Bash”，弹出类似命令行窗口的东西，说明安装成功然后在命令行输入以下命令，完成设置$ git config --global user.name "Your Name"$ git config --global user.email "[email protected]"因为Git是分布式版本控制系统，所以，每个机器都必须自报家门：你的名字和E
2022-01-10 20:14:46
182
原创 前端常用的 linux命令
公司的线上机器一般都是 linux（例如阿里云） 测试机也需要保持一致，用 linux 测试机或者线上机出现了问题，本地不能复现，就需要去排查 ssh [email protected] --登录账户 （验证+ 用户名（root为最高权限）@IP地址）ls --查看目录下的可见的文件和文件夹（不加文件夹名默认为根目录）ls -a -- 查看目录下的所有文件和文件夹（包括隐藏文件）ll --以列表...
2022-01-05 10:09:51
166
原创 http基础
常见状态码1xx 服务器收到请求2xx 请求成功，例如2003xx 重定向，例如3014xx 客户端错误（例如请求无效地址），例如4045xx 服务端错误（例如后端代码用bug），例如500常见状态码-2200 请求成功301 永久重定向（与 location 配合，浏览器自动处理）--例如废弃的网址，用location配合，实现跳转，下次访问不再访问老的域名，直接访问 location 记录的地址302 临时重定向（与浏览器配合，浏览器自动处理）--例如百度...
2022-01-05 10:05:23
878
原创 异步（基础）
一、同步和异步有何不同单线程和异步js是单线程语言，只能同时做一件事 浏览器和node.js已支持JS启动进程，如Web Worker JS和DOM渲染共用同一个线程，因为JS可修饰DOM结构 遇到等待（网络请求，定时任务）时不能卡住，就需要异步 回调callback函数的形式同步 //同步 console.log(111); alert(222) console.log(333);异步 //异步
2021-12-02 15:03:42
98
原创 axios实现上拉下拉演示
官网：https://better-scroll.github.io/docs/zn-CN1、准备工作koa2搭建后端环境并启动项目：https://blog.csdn.net/lq_1999/article/details/121488312 在项目中安装axios以便于后端（router）引用在终端输入 npm i -S axios2、html头部引用前端模板 <script src="javascripts/template-web.js">&l...
2021-11-28 12:11:55
655
原创 MySQL8.0基础
SQL语句1、DDL语句 -- 操作数据库以及表的create，drop，alter等2、DML语句 -- 对表数据进行insert，delete，update3、DQL语句 -- 对表数据进行各种维度select查询（简单查询、条件查询、模糊查询、分组查询）4、DCL语句 -- 关于数据库权限设置，这里不介绍MySQL数据库约束 -- 保证数据的正确性、有效性和完整性主键约束，唯一约束，非空约束数据库的安装与使用数据库的卸载1、打开电脑服务窗口，关闭MySQL服务
2021-11-28 10:59:39
578
原创 axios简单介绍
axios是一个基于promise的HTTP库，可以用在浏览器和Node.js中。从浏览器中创建XMLHttpRequest，从Node.js创建http请求；中文官网：https://www.axios-http.cn/axios的GET和POST请求可向后端发送数据同时接收后端的响应数据axios GET请求--两个参数,（可省略）第二个参数可配置请求和响应参数1、形式一 //也可以用url"?...的形式向后端发送数据，例...
2021-11-24 10:58:21
2253
原创 Ajax+koa2简单实例演示
1、html头部引用前端模板<script src="javascripts/template-web.js"></script>2、简单样式 <style> *{ padding: 0;margin: 0; } ul,ol{ list-style: none; } img{ display: block; } #sports-header{ position
2021-11-23 10:58:53
500
原创 Ajax+koa2简单介绍
Koa搭建后端平台什么是Koa? ———基于Node.js平台的下一代web开发框架官网：https://www.koajs.com.cn环境搭建1、安装node.s2、脚手架安装：npm i -g koa-generator3、创建项目：koa2 projectname(项目名)4、安装依赖：npm i5、项目启动：npm run dev6、访问：http:localhost:3000;访问资源(根目录)：/publicAjax基本框架前端/h...
2021-11-23 10:30:12
626
原创 深入解析DOM树的加载
DOM树在介绍 DOM 树之前，首先要清楚，DOM 规范中，对于文档的表示方法并没有任何限制，因此，DOM 树只是多种文档结构中的一种较为普遍的实现方式。DOM 结构构成的基本要素是 “节点“，而文档的结构就是由层次化的节点组成。在 DOM 模型中，节点的概念很宽泛，整个文档 （Document） 就是一个节点，称为文档节点。除此之外还有元素（Element）节点、属性节点、Entity节点、注释（Comment）节点等。了解了 DOM 的结构是由各种的子节点组成的，那么以 HT...
2021-11-21 11:20:35
1095
原创 面试常见-- 装箱和拆箱的理解
装箱：把基本数据类型转化为对应的引用数据类型的操作 var num = 123; //number类型 var objNum = new Number(123); console.log(typeof objNum); //object拆箱：将引用类型对象转化为对应的值类型对 --valueOf() var objNum= new Number(123); console.log(typeof objNum.valueOf()); .
2021-11-19 15:57:42
218
原创 js的三种包装对象（内置对象）
js常见的内置对象有：三种包装对象：String、Number、Boolean 其他常用的标准内置对象：Object、Array、Function、Math、Date ...三种包装对象：--值本身是基本类型数据例如：定义一个字符串变量，并调用chatAt()方法用new方法创建包装对象 var str = new String('hello'); console.log(str); //String{'hello'} console.log(...
2021-11-19 15:28:34
598
原创 数组的排序
sort方法排序 1、默认升序2、将排序的元素转化为字符串['3','22','18','9'],找字符串对应的Unicode码表//Unicode码表 排序 1234(数字) ABC(大写) abc(小写) 好(字符串) var arr1 = ['二','a',5,'A'] console.log(arr1.sort()); //[5, 'A', 'a', '二'] var arr2=[1,5,6,2,4,3]; co...
2021-11-18 20:46:42
316
原创 this指针
this的用法指代当前调用的这个对象：4种绑定规则分别是：默认绑定、隐士绑定、new绑定。优先级从低到高 var name='tom'; var obj= { getName: function(){ console.log(this+' '+this.name);//this指向对象本身 }, getAge: function(){ .
2021-11-18 19:40:36
211
原创 自调用函数（立即执行函数）
写法一： !function() { alert("写法一") }()写法二： (function() { alert("写法二") })() 应用-- 闭包 for(var i =0;i < 3 ;i++) { !function(num){ alert(num) }(i) }...
2021-11-18 16:17:26
114
原创 闭包的理解
闭包：理解关键--作用域闭包是引用了自由变量的函数，这个被引用的自由变量将和这个函数一同存在，即使已经离开了创造它的环境也不例外。所以，有另外一种说法认为闭包是由函数和其相关的引用环境组合而成特点/ 好处： 实现了信息的驻留（信息的保持，引用依旧存在，空间不销毁）简单的闭包： var Person = function() { var count = 0; return function add(){ return cou.
2021-11-18 15:46:59
55
原创 图解JS执行环境
浏览器环境栈：JS是一个单线程执行执行环境：EC execution context；分为全局执行环境 、局部执行环境变量对象：VO --一般是全局环境中保存变量的对象活动对象：AO --函数的执行环境是在调用时创建的，该对象将代替VO来保存当前函数环境中的变量、参数、函数，所以在函数执行环境中VO就是AO var arr = [{name: 'a1'},{name: 'a2'},{name: 'a3'}]; function fn() { ...
2021-11-18 11:47:54
345
原创 作用域和作用域链
作用域scope：一个变量的可用范围作用域链scope chain：以当前作用域的scope属性为起点依次引用每个AO,直到window结束，形成了多级引用关系js作用域：ES5 (这里不讨论ES6的块级作用域)两大类：全局作用域 和 函数作用域解释执行：在执行过程中，JavaScript引擎是严格按着作用域机制（scope）执行的，并且JavaScript变量和函数的作用域是定义时决定的，而不是执行时决定的；JavaScript的变量在函数体内有效，无块级作用域图解例如，创建一个
2021-11-18 11:03:55
52
原创 css面试
1、如何理解HTML语义化必要性：让人更容易读懂（增加代码可读性） 让搜索引擎更容易读懂（SEO）例如：全部由<div>组成的网页和由<h1><p><table>等多种语义化标签组成的网页对比2、块状元素和内联元素块状元素 -- display：block/table，独占一行--有 div h1 h2 table ul ol p等行内元素 -- dispay：inline/inline-bl...
2021-11-17 09:55:26
48
原创 for循环的优化
一、嵌套for循环--外小内大原则 //优化前 for(var j=0;j<100;j++{ for(var i=0;i<10;i++){ } } //优化后 for(var i=0;i<10;i++){ for(var j=0;j<100;j++){ } }二、消除循环终止判断时的方法调用 /* 优化前 */ for(va..
2021-11-16 14:56:37
1060
原创 js舍入误差
浮点数小数相加时出现误差 console.log(0.1 + 0.2) //0.30000000000000004 /** * 根据IEEE二进制浮点数算术标准（IEEE 754） * 0.1 => 0.1110101111 0.2 => 0.0000110101 * console.log(0.1.toString(2)); //0.000110011001100110011001100110.
2021-11-16 14:33:37
78
原创 常见类型转换有哪些坑
特殊类型的隐形转换(5种)--NaN, 0, undefined, null, "" ==> false 在条件判断时，判断参数的类型为这五种时，返回flase,例如if(val) {//val为NaN, 0,...的时候执行else}else{ }类型转换 var bool = Boolean(NaN); console.log(bool); // false 逻辑运算符 && 和 || 在隐式转换下的...
2021-11-16 13:51:26
60
原创 type of 和 instanceof
typeof可以检测那些类型识别所有值类型--undefined/ number/ string/ symbol/ 识别函数类型
2021-11-16 11:31:49
224
原创 深拷贝和浅拷贝的几种方式
js 值类型的存储形式--值类型以栈（后进先出）的形式存储；引用类型以栈和堆相结合的形式存储代码演示 /* 值类型在栈中存储的value是值，b复制了a，只是拷贝了a的值，b重新赋值对a没有影响 */ var a = 'hello'; var b = a; b = 'world' console.log(a,b);//hello world /** * 引用类型的值存储在.
2021-11-16 11:30:44
2146
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人