前端
文章平均质量分 67
阿门阿前下的蜗牛
这个作者很懒,什么都没留下…
展开
-
this判断+异步任务执行顺序-闭包/Promise复习
1.闭包var result = [];var a = 3;let total = 0;function foo(a) { var i = 0; for (; i < 3; i++) { console.log('i', i); //都是同步, 所以会输出0,1,2 result[i] = function() { //一直到赋值语句都是同步的,所以result[0,1,2]都被赋值成功,但执行时内部i是闭包 total += i * a; c原创 2021-09-20 20:24:36 · 189 阅读 · 0 评论 -
手动搭建Vue CLI(用webpack 配置vue项目)---练习使用webpack打包
Vue CLI安装过程(用webpack 配置vue项目的安装过程)—1. 练习使用webpack打包文章目录1. Node环境2. 安装并使用webpack2.1 webpack的全局安装2.2 练习webpack使用2.3配置webpack文件以简化命令2.4 package.json映射到npm run指令2.5 局部安装webpack1. Node环境webpack基于node环境, 所以先在官网下载安装node; 一路点确定即可;打开终端:win+R; 然后输入cmd确认node已经原创 2021-06-13 16:39:19 · 295 阅读 · 1 评论 -
Vue组件记录, 待看源码解决/补充
[ 1 ] Vue对象的component方法,为什么不能用如下方法注册组件? const app = new Vue({ el: '#app', data: { }, }); app.prototype.component('my-cpn', cpnC);原创 2021-06-08 17:08:05 · 110 阅读 · 0 评论 -
数组常用方法总结:filter/map/reduce/...
这里写目录标题a.强大的reduce1.常用来求和/求积:2. 数组去重3.数组扁平化4.对象属性求和b. mapc. filtera.强大的reducedetail:浅谈JS中 reduce() 的用法JS数组reduce()方法详解及高级技巧arr.reduce(callback,[initialValue])callback (执行数组中每个值的函数,包含四个参数) 1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))原创 2021-06-08 13:46:53 · 306 阅读 · 0 评论 -
Vue里的methods怎么写(未解决)
previously: 写methods时没按照官方格式来写,结果居然没报错?但是为什么不会报错还没弄懂,到时候看源码再回头解决吧代码大概是这样: methods: { getFinalPrice1: function(price) { return '$' + price.toFixed(2); }, getFinalPrice2: function abcd(price) { return '$'.原创 2021-06-07 17:20:21 · 547 阅读 · 0 评论 -
rest运算符和扩展运算符的区别
rest运算符和Array扩展运算符的区别文章目录rest运算符和Array扩展运算符的区别扩展运算符:[...]rest运算符 […arguments]这里用的是哪种运算符?得到什么?扩展运算符:[…]将数组转换为逗号分隔的[参数序列]常见用途:1.数组合并2.数组克隆注意克隆时候是浅拷贝3.将伪数组转为真正的数组比如,document.querySelectorAll(‘div’)是个伪数组:不过有rest存在,所以没什么必要用这个4.字符串转数组以前字符串转数组用s原创 2021-06-03 15:39:06 · 206 阅读 · 0 评论 -
复习3-三栏布局/htttp/判断登录
大复习文章目录大复习三栏布局js获取url中的某个参数值闭包的作用WEB攻击(说了SQL注入,XSS,CSRF 让细讲了CSRF的过程)前端安全这块(问题,防范)事件循环,宏任务微任务http头部信息http状态码TLS握手Async,promise和generatorES6的新特性(说了块级作用域、箭头函数、promise顺便问了事件循环,扩展运算符,Symbol和新增的几个API排序-快排/冒泡/插入CSS的position(重点relative 和absolute的区别)css垂直水平居中ES6中,原创 2021-05-26 00:06:33 · 465 阅读 · 0 评论 -
防抖,节流,柯里化
柯里化 var sum = function() { let arg = Array.prototype.slice.call(arguments); // let total = arg[0]; let inner = function(y) { let total = 0; arg.push(arguments[0]);原创 2021-05-21 11:01:25 · 151 阅读 · 0 评论 -
练习-原生js写的颜色选择器colorpicker
colorpicker需求分析:以下四种方案, 前三种为点击色块选择颜色, 第四种为滑动/拖拽选颜色, 所以分为两种实现类型-色块或者色带, 做出两种colorpicker.第一种方案的颜色选择器: 点击色块选择颜色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="原创 2021-05-14 18:00:11 · 1684 阅读 · 0 评论 -
区别this/event/event.target/event.currentTarget
用闭包打印li时候发现,为什么不利于冒泡实现呢?然后复习一下冒泡时候this/event/event.target/event.currentTarget这几个对象的不同.先不考虑IE兼容, 打印看看. 区别就一目了然了:ul.onclick = function(e) { console.log(this); console.log(e); console.log(e.target); console.l原创 2021-05-02 16:22:11 · 106 阅读 · 0 评论 -
前端性能优化
前端性能优化一,加快通信(请求)速度二,加快数据处理速度渲染方式、数据处理,后端、网络通信相关的所有内容;入手:基于http请求响应的这一系列过程,有两个方面入手:一,如何让网络通信更快,发请求更快?尽量用http2不要用http1;首先http2有头部压缩机制,谷歌专门提出一个HPACK压缩算法,传一个索引表(只存常用头信息),辅助哈夫曼编码来encode头id;其次http2真正实现了多路复用(2进制帧传数据);服务器层面:物理距离无法更改,但是如果有多个服务器,选择近距离的服务原创 2021-05-01 18:52:12 · 69 阅读 · 0 评论 -
箭头函数
箭头函数文章目录箭头函数跟普通函数一样,箭头函数也会被提前声明跟普通函数不一样的地方:1.this静态声明2.箭头函数不是Function对象,没有原型链3.箭头函数无arguments伪数组箭头函数的简写箭头函数常见应用练习跟普通函数一样,箭头函数也会被提前声明console.log(fun(5, 4));function fun(c, d) { return c - d;}let fun = (a, b) => { return a + b;}//Uncaught原创 2021-04-30 21:31:25 · 226 阅读 · 0 评论 -
手写深拷贝>/遍历对象的方法
深拷贝写法>遍历对象的方法手写深拷贝如下:function deepCopy(obj) { //判断是否是简单数据类型, if (typeof obj == "object") { //复杂数据类型 var result = obj.constructor == Array ? [] : {}; //对于数组和对象,result的类型不一样,不过调用方式一样,都是result[i] for (let i in obj)原创 2021-04-25 16:47:00 · 278 阅读 · 0 评论 -
js牛客网输入输出调试-(leetcode, yes!)
牛客网输入输出调试难搞啊, 5道题写完没有1道通过, 怀疑人生… 感觉有必要专门总结下怎么应付牛客.文章目录牛客网输入输出调试1. 输入已知行数的输入:未知行数的输入:2. 输出首先, 输出的格式也应是字符串格式! '4 6';其次: 不像leetcode只用写函数体不用调用, 牛客里不仅要手动获取输入输出, 还要手动打印, 要么不要封装成函数, 如果封装成了函数一定要手动调用;最后, 牛客的输入不是函数里的return! 而要手动print或者console.log;3. 做道题练习下1. 输入例原创 2021-04-21 16:13:04 · 1405 阅读 · 0 评论 -
RegExp类型/正则匹配笔记
RegExp构造函数文章目录RegExp构造函数1. 正则匹配式怎么写2. RegExp实例方法exec()3. RegExp实例属性4. RegExp构造函数属性1. 正则匹配式怎么写//写法1:var expression = / pattern1 / flags ;//写法2: 构造函数实例var expression = new RegExp("pattern2", "flags");注意:由于 RegExp 构造 函数的模式参数是字符串,所以在某些情况下要对字符进行双重转义. 基本原创 2021-04-20 16:41:52 · 194 阅读 · 0 评论 -
js里的所有对象都有原型吗?
不是的, 用Object.create(null)创建的对象没有原型:var emObj = Object.create(null);console.log(emObj);console.log([]);console.log({});打印结果如下:空对象都有原型, 但Object.create(null)没有.因为Object.create(null)没有继承任何原型方法,也就是说它的原型链没有上一层。猜想是堆内存里并没有放内容,而只是在栈内存里放了这个指针, 然后告诉内存分配空间.原创 2021-04-19 09:19:39 · 3458 阅读 · 0 评论 -
空数组的布尔值到底是true还是false/比较符两边
做题碰到一个bug, 用if(arr)判断数组是否为空无效, 即使是空数组也会进入if内层语句:var arr=[];if(arr){ console.log('判定失效了');//总能输出}后来尝试打印了几次,发现问题不简单:console.log(![]); //falseconsole.log(!''); //true按照一般的惯性思路, 空数组就像空字符串, 其Boolean为false, 所以!为true.但上面![]==false, 这跟平时想的不一样. 但难道[]的布尔值原创 2021-04-19 09:11:38 · 5554 阅读 · 1 评论 -
\<script>标签的属性async/defer异同
已知js文件最好放在body最后面:在文档的元素中包含所有 JavaScript文件,意味着必须等到全部 JavaScript代码都被下载、解析和执行完成以后,才能开始呈现页面的内容(浏览器在遇到标签时才开始呈现内容)。对于 那些需要很多 JavaScript代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟 期间的浏览器窗口中将是一片空白。为了避免这个问题,现代Web应用程序一般都把全部 JavaScript引 用放在元素中页面内容的后面… …<红宝书第2章>原创 2021-04-11 11:30:38 · 109 阅读 · 0 评论 -
基础复习2
JS基础js的数据类型null/undefined/NaN区别NaN是一种特殊的number, null特殊的object, 未声明或声明未赋值undefinedJS中成员(属性)查找机制原型链查找JS中变量查找机制作用域链查找(左查找/右查找)-- https://www.jianshu.com/p/2f5839edc63fLHS: LHS查询会自动创建未找到的目标变量; RHS查询时,如果在作用域链中都无法找 到目标变量,那么,引擎会抛出ReferenceError异常原创 2021-04-08 20:27:50 · 109 阅读 · 0 评论 -
JS的继承
一,主要是靠原型链继承,像类extend到类,实例对象和类,实例对象和构造函数之间会自动生成原型链; 还可以手动给两个对象(or构造函数)之间添加原型链,但有坑要注意坑1:obj.prototype也是指针,如果son.prototype=obj.prototype直接把父亲的也改了,所以不能直接赋值原型对象,得通过new实例对象来建桥: 让son.prototype = new Father();利用这个Father实例对象的__proto__指向Father.prototype, son实例也能够原创 2021-04-07 22:46:56 · 93 阅读 · 0 评论 -
挖个刷题坑
题目必考题目js部分:dom的操作,删除,移动,复制,插入,前插后插,指定插一类。事件的处理,兼容性写法,参数作用,扑获冒泡,委派代理。ie下的一些兼容性问题,js的,举例。动画方面,加速度,重力模拟实现。正则,基本的用法和相关函数作用考查。闭包,原型链,作用域,变量引用,类继承方法。内存泄露的原因和场景。h5里一些新增api的了解。性能优化和重构知识。一,数据结构与算法1.二叉树的遍历改非递归2. 排序[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(im原创 2021-04-03 19:15:09 · 138 阅读 · 0 评论 -
web 前端安全
web 前端安全参考:MDN:https://developer.mozilla.org/zh-CN/docs/Web/SecurityCORS:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS博客: https://blog.csdn.net/ppxin/article/details/94717173XMLHttpRequest:文章目录web 前端安全三, 常见攻击类型1.CSRF跨站请求伪造(Cross-site Reque原创 2021-04-01 21:24:43 · 199 阅读 · 0 评论 -
HTML/CSS/JS基础大复习
HTML/CSS/JS基础大复习文章目录HTML/CSS/JS基础大复习一, 浏览器1. 什么是内核2. 常见内核二, 网页1. 什么是网页2. 什么是HTML3. 网页请求与显示( 输入网址到网页显示的整个流程)4. Web标准Web标准的构成标准化组织三, 协议1. TCP连接的三次握手四次挥手2. 网页用什么协议传输3. HTTP协议简介4. https与http区别, 加密的原理是什么5. 页面当中怎么强制使用https6. http状态码四, HTML1. 视口标签viewport里面都是什么1原创 2021-04-01 14:22:33 · 305 阅读 · 0 评论 -
Vue/axios-基础练习(天气预报/音乐播放器)
Vue/axios-基础练习参考:v-on修饰符axios官网文章目录Vue/axios-基础练习vue基础指令axios基础使用方法axios怎么与vue结合练习1: 点击按钮加减数字练习2: 点击切换显示or隐藏练习3: 点击更改目标的样式练习4: 响应式生成列表练习5: 点击获取一则笑话综合练习练习1: todoList,输入任务回车后,自动添加进列表,可删除练习2: axios+vue实现网络应用: 天气预报练习3: 音乐播放器vue基础指令vue实例的作用范围是什么: el原创 2021-04-01 01:20:20 · 566 阅读 · 0 评论 -
HTML/CSS/JS基础-容易混淆的属性们
很容易搞混的属性们文章目录很容易搞混的属性们1. mouseenter 和 mouseover2. vertical-align和text-aligna. vertical-align和text-align区别总结b. text-align 属性到底怎么用c. vertical-align属性到底怎么用-设置img3. window.onload和document.addEventListener('DOMContentLoaded', function(){})的区别4. document.body和原创 2021-03-31 15:46:52 · 169 阅读 · 0 评论 -
JS-WebAPIs-PC端特效练习(拖拽/缓动动画/轮播图/返回顶部)
PC端网页特效练习题文章目录PC端网页特效练习题重点1.重点: 拖拽原理2.重点: 缓动动画注意: 多个目标之间缓速移动实现时候注意取整一, offset系列属性练习1. 拖拽弹出框(模态框)3. 商品放大镜二, scroll属性练习1. 淘宝固定右侧侧边栏注意区分window.pageYOffset和element.scrollTop三, 动画1. 飘动的盒子们2. 轮播图重点1.重点: 拖拽原理2.重点: 缓动动画// 匀速动画 就是 盒子是当前的位置 + 固定的值 10// 缓动动画就是原创 2021-03-26 19:01:38 · 243 阅读 · 2 评论 -
CSS-父盒子跟子盒子之间的缝隙问题
父盒子跟子盒子之间的缝隙问题Remove single pixel gap between child and parent div即使给父子盒子设置相同大小, 给子盒子填色后会发现随着浏览器窗口缩放, 父子盒子之间有个小缝隙.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> &原创 2021-03-23 12:29:19 · 5374 阅读 · 5 评论 -
JS-WebAPI-BOM练习题(定时器/页面跳转)
JS-API第5天-BOM练习题文章目录JS-API第5天-BOM练习题一, 定时器练习练习1. 3秒后自动关闭广告练习2. 京东秒杀倒计时牌一, 定时器练习练习1. 3秒后自动关闭广告<body> <img src="images/cj.jpg" alt="" class="ad"> <script> var ad = document.querySelector('.ad'); setTimeout(functi原创 2021-03-17 18:14:34 · 488 阅读 · 0 评论 -
JS-WebAPIs-事件高级(监听/删除事件/事件对象/冒泡/鼠标键盘事件)
JS-API第3天-事件高级解读参考:pink老师JS基础 JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程(持续更新)文章目录JS-API第3天-事件高级解读一, 注册事件1.1 注册(绑定)事件的方式传统方式: div.onclick = function(){}方法监听: div.addEventListener('click', fnName(){}, true)IE-6-8: div.at原创 2021-03-16 19:32:46 · 180 阅读 · 0 评论 -
CSS框盒模型>外边距重叠/BFC
CSS框盒模型>外边距重叠(Mastering margin collapsing)写京东倒计时模块时碰到此问题, 文字title作为子盒子一移动会牵制父盒子背景一起移动.原因是外边距重叠(Mastering margin collapsing).更多详细知识请参考:MDN 边距重叠(Mastering margin collapsing)深入理解BFC和Margin CollapseCSS外边距(margin)重叠及防止方法块的上外边距(margin-top)和下外边距(margi原创 2021-03-15 15:52:02 · 192 阅读 · 0 评论 -
练习-动态生成表格存储学生信息
练习-动态生成表格存储学生信息要求:Part1: 输入学生的 姓名/科目/成绩, 动态生成表格 当已有多个学生信息时, 一次导入生成表格 每一项学生信息, 都有删除选项基本样式:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i原创 2021-03-11 12:23:50 · 537 阅读 · 0 评论 -
练习-留言板
关键词: 操作节点实现如下:<!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">原创 2021-03-09 21:43:05 · 209 阅读 · 1 评论 -
练习-tab切换栏
<!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>ta原创 2021-03-09 17:01:46 · 178 阅读 · 0 评论 -
JS-WebAPIs-DOM练习题(tab栏/输入框)
JS-WebAPIs第1天-DOM练习题参考:pink老师JS基础 JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程(持续更新)MDN-Web API接口参考 文档对象模型文章目录JS-WebAPIs第1天-DOM练习题一, 常用元素属性操作练习练习1: 点击按钮显示现在的时间练习2: 根据不同时间显示不同提示语二, 表单的属性操作练习练习3: 点击显示密码练习4: 京东关闭顶部/底部广告练习5:原创 2021-03-07 20:47:48 · 418 阅读 · 0 评论 -
JS-WebAPIs-DOM基础
JS-WebAPIs第1天-DOM参考:pink老师JS基础 JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程(持续更新)MDN-Web API接口参考 文档对象模型文章目录JS-WebAPIs第1天-DOMWeb APIs 和JS基础的关联性一. 什么是DOM(Document Object Model)二. 事件-获取页面元素当事件源2.1 document.getElementById()根原创 2021-03-07 15:18:10 · 295 阅读 · 0 评论 -
JS基础第5天-内置对象
JS基础5.1-内置对象参考:https://www.bilibili.com/video/BV1Sy4y1C7ha?p=170&spm_id_from=pageDriver文章目录JS基础5.1-内置对象1.Math2.Date3.倒计时案例1.Math// Math数学对象 不是一个构造函数 ,所以我们不需要new 来调用 而是直接使用里面的属性和方法即可console.log(Math.PI); // 一个属性 圆周率console.log(Math.max(1, 99, 3)原创 2021-03-04 14:55:38 · 148 阅读 · 0 评论 -
JS基础第4天-预解析
JS基础第4天-预解析参考:https://www.bilibili.com/video/BV1Sy4y1C7ha?p=170&spm_id_from=pageDriver1.我们js引擎运行js 分为两步: 预解析 代码执行// (1). 预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面// (2). 代码执行 按照代码书写的顺序从上往下执行2.预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)// (1) 变量提升 就转载 2021-03-04 13:49:18 · 93 阅读 · 0 评论 -
JS基础第3天-练习题(语法循环函数)
JS基础3-练习题(语法循环函数)练习题目参考:答案边学边写, 会有不足, 以后提升文章目录JS基础3-练习题(语法循环函数)一, 基础语法练习练习1:华氏温度转换为摄氏温度。练习2:输入圆的半径计算计算周长和面积。练习3:输入年份判断是不是闰年。二, 分支循环练习练习1:英制单位英寸与公制单位厘米互换。练习2:打印如下所示的三角形图案。练习3:猜数字游戏三, 函数练习练习1: 利用函数封装数学对象, 包括PI和求最大最小值练习2:**CRAPS赌博游戏**。一, 基础语法练习练习1:华氏温度转换原创 2021-03-03 22:49:32 · 240 阅读 · 0 评论 -
JS基础第2天-函数
JS基础2-函数文章目录JS基础2-函数声明函数调用函数arguments的使用练习:声明函数function func(){ //此时func为函数名 //操作}var func = function() { //此时func为变量名 //操作}说明:(1) function声明函数的关键字 全部小写(2) 函数名一般是动词, 表示做某件事(3) 函数定义完后需要调用才能执行调用函数func();arguments的使用function fn() {原创 2021-03-01 16:12:48 · 87 阅读 · 1 评论 -
JS基础第1天-变量和循环
JavaScript基础1-变量和循环参考:一、变量:定义变量:var myname = '佩奇'; //变量不区分数字、字符、字符串等等var PI = 3.14;var octal = 010; //0开头表示八进制,转换为10进制输出var hex = 0xf // 0x开头表示16进制输入变量:var myname = prompt('请输入您的名字:'); //浏览器弹出框内输入,同scanf使用表单、prompt获取的数据默认都是字符串类型,不能直接加减。输出变量:a原创 2021-02-27 10:34:32 · 164 阅读 · 1 评论