前端学习基础记录
关注
分享
扫一扫
文章平均质量分 70
Endless Daydream233
一步一步往上爬
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
JavaScript数据结构之哈希表
????哈希表????????哈希表的介绍???? 哈希表是一种非常重要的数据结构。???? 几乎所有的编程语言都有直接或者间接的应用这种数据结构???? 哈希表通常是基于数组进行实现的⭐️ 相对于数组，它的优势:.它可以提供非常快速的插入-删除-查找操作 （数组进行插入操作时效率低；数组进行查找操作时，如果基于索引查找，效率非常高，如果基于内容查询，效率低；数组进行删除操作时，效率也不高；数组进行修改操作同查找）无论多少数据，插入和删除需要接近常量的时间：即O(1)的时间级。实际上，原创 2021-09-07 14:41:11 · 1931 阅读 · 0 评论 -
JavaScript数据结构之链表
????链表???? 链表和数组一样，可以用于存储一系列的元素，但是链表和数组的实现机制完全不同。???? ???? 回顾数组：⭐️ 要存储多个元素，数组可能是最常用的数据结构⭐️ 几乎每一种语言都有默认实现的数据结构???? 但数组也有一些缺点：???? 数组的创建通常需要申请一段连续的内存空间（一整块内存），并且大小是固定的（大多数编程语言的数组都是固定的），所以当当前数组不能满足容量需求时，需要扩容。????在数组的开头或中间位置插入数据的成本很高，需要进行大量元素的位移????原创 2021-09-03 10:28:34 · 528 阅读 · 0 评论 -
JavaScript数据结构之队列
????常见的数据结构- 数组 ????- 栈 ????- 链表 ????- 图 ????- 散列表 ????- 队列 ????- 树 ????- 堆 ???????? 这里先说队列???? 队列 Queue???????? 普通队列???? 是一种受限的线性表，先进先出（FIFO） first in first out???? 受限之处在于它只允许在表的前端（front）进行删除操作???? 而在表的后端（rear）进行插入操作???????????? 普通队列的封装（原创 2021-08-31 17:35:42 · 161 阅读 · 0 评论 -
JavaScript数据结构之栈结构
终于开始数据结构的学习。。。拖延症要不得上一次学习数据结构大约在大学时期，哦吼，完全应试学习，考完忘的干干净净。。。????????数据结构：在计算机中，存储和组织数据的方式。????常见的数据结构- 数组 ????- 栈 ????- 链表 ????- 图 ????- 散列表 ????- 队列 ????- 树 ????- 堆 ???????? 这里先说栈结构????栈结构???? 实际开发过程中，数组应该是最常使用的数据结构。那么我们知道数组是一种线性结构，并且可以在数组的任意原创 2021-08-31 16:43:26 · 166 阅读 · 0 评论 -
前端基础学习之高阶函数（currying、uncurrying、分时函数等等）
去年在过前端基础技术栈的时候有简单记录过一点高阶函数笔记 前端基础学习之js高级在看js设计模式与开发实践的时候，第一章节都在讲一些基础，比如this、call、apply、闭包等等。在看到高阶函数的时候，有些高阶应用比如节流是比较常见的，而有一些高阶函数的应用之前没有了解过，比如currying、分时函数等等，个人而言比较新奇，记录一下子~高阶函数满足以下两种条件之一的函数即高阶函数函数可以作为参数传递函数可以作为返回值输出高阶函数的应用1.回调函数 - 作为参数传递 （之前笔.原创 2021-06-22 17:24:58 · 322 阅读 · 0 评论 -
js基础之关键字new运算过程
从面试离职面试休息再入职的过程中逐渐习惯新的生活工作模式，生活趋于稳定，于是重新上手捡起前一段时间落下的学习计划。从《javascript设计模式与开发实践》看起，说来惭愧，这本书朋友一年前就推荐给我，因为一些其他的基础学习计划耽搁到现在，学习进程缓慢而艰巨啊~~~书中讲到的第一个设计模式–原型模式，应该是在不接触设计模式时最最最熟悉的一个模式了吧，其中讲到new运算的过程，记录一下方面后续回顾啦。在es6之前，javascript中是没有类的概念的，js是基于原型的面向对象。那么例如 ne.原创 2021-06-22 14:19:23 · 169 阅读 · 0 评论 -
前端基础学习之防抖（debounce）和节流（throttle）
1.防抖（debounce）例如在实现移动端的列表条件查询时，文本框中如果每输入一个字符都去后台查询一次，即短时间内大量触发同一事件，非常影响性能。解决办法：在第一次触发事件时，不立即执行查询，设置一个延迟执行的时间限制，若在这时间范围内再次触发，则清除当前的定时器，开启新的延迟执行查询，以此类推，直到这段时间范围内不再触发事件，执行查询函数。防抖函数： （其实就是返回一个延时定时器，在下一次调用时看是否有值，有则清空开启下一个，直到没有了，顺利执行延迟器中的函数）let debounce=fu原创 2021-04-12 13:15:12 · 458 阅读 · 0 评论 -
使用vue+weixin-js-sdk实现公众号页面的扫码功能
vue+barcode 实现app端的扫码功能同样的，详细的api文档描述可以看微信官方文档，这里就简单列一下用到的点。1.引入weixin-js-sdk 依赖 vue全局使用npm install weixin-js-sdkimport wx from "weixin-js-sdk";Vue.prototype.wx = wx;2.通过config接口注入权限验证配置此处的appId、timestamp、nonceStr、signature都是从后端接口获得。(大部分调试时间都原创 2021-03-22 11:22:04 · 1101 阅读 · 0 评论 -
使用vue+barcode 实现app端的扫码功能
开年事情有些多，最近刚好在用vue写app和公众号的移动端，两者都有扫码的功能，在这记录一下子。Barcode模块管理条码（一维码和二维码）扫描识别，支持常见的一维码（如EAN13码）及二维码（如QR码）。通过调用设备的摄像头对条码进行扫描识别，扫描到条码后进行解码并返回码数据内容及码类型。Barcode模块可使得Web开发人员能快速方便调用设备的摄像头进行条码扫描识别，而不需要安装额外的扫描插件。规范建议条码识别引擎的支持规范定义的所有条码常量类型。app端使用的是h5+的api barcode原创 2021-03-22 10:26:01 · 3724 阅读 · 11 评论 -
前端基础学习之零碎小点-父级容器高度不设置的情况下，子级高度百分百继承父级高度
在写一个步骤条的时候，发现用一个继承父级高度的子级的border就可以搞定。此时父级高度并没有设置，即此时父级的高度是由子级容器的高度决定的，而如果这个时候单单给子级设置个height:100%,并不会起作用。父级的高度依赖于子级容器，子级又想继承父级的高度，两相矛盾。解决方案：第一步：给父级容器设置定位（relative、absolute、fixed都可）以作为子级的参照容器；第二步：给子级容器一个绝对定位 （这样的子级其实已经脱离了文档流，父级的高度不依赖于脱标的子级，且此时父级是子级的参照容原创 2021-02-18 17:25:05 · 1643 阅读 · 0 评论 -
前端基础学习之背景裁剪（background-clip）
以往写页面，若要给一个有padding的盒子内容填充背景，通常做法就再加了一个div…(汗哒哒，dom冗余，还是基础知识积累不够啊…) 今天刚好看见这个裁剪的用法，记录一下子。1.background-origin规定 background-position 属性相对于什么位置来定位。值描述border-box背景图像相对于边框盒来定位padding-box背景图像相对于内边距框来定位content-box背景图像相对于内容框来定位2.backgroun.原创 2021-01-29 14:55:46 · 1381 阅读 · 0 评论 -
前端基础学习之移动端触摸事件touch
1. touch是移动端的触摸事件，是一组事件1.1 touchstart 当手指触摸屏幕时触发1.2 touchmove 手指在屏幕上来回滑动时触发1.3 touchend 手指离开屏幕时触发1.4 touchcancel 被迫终止滑动时触发（比如玩游戏的时候突然有来电显示，或者突然弹出一条消息）2.利用touch相关事件来实现移动端常见的滑动效果和常见的手势事件使用touch绑定事件:推荐使用 addEventListenertouch事件对象中关注三个对象值：cha原创 2021-01-29 10:22:11 · 1126 阅读 · 0 评论 -
前端基础学习之手写基础轮播图（pc端、移动端）
最近在看移动端开发知识点的时候，刚好看到移动端轮播图，想着不如和之前pc端的轮播图放在一起做个记录，再回顾一遍一些基础知识点。轮播图的几个基础功能点：自动无缝切换轮播图片点击按钮切换图片移动端手指滑动切换图片移动端手机滑动短距离图片吸附回去指示器随着图片滚动而改变1.无缝轮播图（仅简单自动轮播，通过改变绝对定位left值来实现滚动的效果，无其他任何功能点）<!DOCTYPE html><html><head lang="en"> .原创 2021-01-28 18:05:04 · 1222 阅读 · 0 评论 -
前端基础学习之h5-canvas入门5-坐标转换（translate、scale、rotate）
1.直线绘制及绘制折线图2.矩形绘制及绘制渐变矩形3.曲线绘制及绘制饼状图4.图片绘制及绘制帧动画坐标变换平移 移动画布的原点translate(x,y) 参数表示移动目标点的坐标缩放 坐标轴缩放scale(x,y) 参数表示宽高的缩放比例旋转 旋转画布原点rotate(angle) 参数表示旋转角度实例1.translate 变的是坐标的原点位置，而不是绘制物的位置这里先绘制一个起始位置（100,100），宽300，高300的矩形，再使用trans.原创 2021-01-22 14:05:13 · 1944 阅读 · 0 评论 -
前端基础学习之h5-canvas入门4-图片绘制、帧动画
1.直线绘制及绘制折线图2.矩形绘制及绘制渐变矩形3.曲线绘制及绘制饼状图绘制图片首先得知道html中图片加载的几种方式<!--1.dom中直接加载--><img src="img/1EF971FD.jpg" alt="">//2.加载图片到内存中 let img=document.createElement('img'); img.src='img/1EF971FD.jpg'; document.body.append(img); //3.使用图片.原创 2021-01-21 13:37:03 · 483 阅读 · 0 评论 -
前端基础学习之h5-canvas入门3-曲线的绘制及绘制完整饼状图
canvas直线绘制及绘制完整折线图canvas一些基础的概念在直线绘制中已经提过。下面主要提曲线和文本绘制，以完成一个完整饼状图的绘制。（一）曲线的绘制弧度概念1 弧度 = 1 r(半径)圆的周长=2πr原的总弧度=2π确定圆心确定半径确定圆弧的起始位置和结束位置 (以弧度为单位，0====水平右边)确定圆弧的绘制方向 默认false 顺时针arc() 圆弧绘制函数x 圆心横坐标y 圆心纵坐标r 半径startAngle 开始角度endAngle 结束角度a.原创 2021-01-20 10:58:18 · 1385 阅读 · 1 评论 -
前端基础学习之h5-canvas入门2-矩形绘制及渐变色矩形
canvas绘制矩形的基本使用方法：rect(x,y,w,h) 没有独立路径strokeRect(x,y,w,h) 有独立路径，不影响别的绘制fillRect(x,y,w,h) 有独立路径，不影响别的绘制clearRect(x,y,w,h) 擦除矩形区域实例绘制矩形的几种方式1.使用前面一篇文章所讲的直线来画矩形2.直接使用绘制矩形路径工具rect()3.使用独立矩形路径strokeRect()fillRect()let myCanvas=document.query原创 2021-01-14 15:35:03 · 523 阅读 · 0 评论 -
前端基础学习之h5-canvas入门1-直线绘制及绘制完整折线图
canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。<canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。（一）什么是Canvas？HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制.原创 2021-01-14 14:43:04 · 2688 阅读 · 0 评论 -
前端基础学习之h5-canvas中的非零环绕规则
最近在看canvas,canvas在对某一区域进行填充操作的时候，根据非零环绕规则来判断是否填充。具体怎么判断一块区域是否填充呢？1.从这个区域拉一条直线2.看和这条直线相交的轨迹3.如果是顺时针轨迹 +14.如果是逆时针轨迹 -15.所有的值相加6.如果是非0 那么就填充7.如果是0 那么就不填充具体示意图1：具体示意图2：简单案例：canvas描绘镂空正方形<!DOCTYPE html><html lang="en"><head>原创 2021-01-08 16:54:00 · 277 阅读 · 0 评论 -
前端基础学习之h5-dom操作、新增api（全屏操作、video多媒体、history、web存储等）
1.获取dom的方式H5 api有效选择器:在css当中能使用的都是有效选择器document.getElementsByClassName (‘class’);通过类名获取元素，以伪数组形式存在。document.querySelector(‘selector’);通过CSS选择器获取元素，符合匹配条件的第1个元素。document.querySelectorAll(‘selector’);通过CSS选择器获取元素，以伪数组形式存在。2.类操作H5 api 基于对象的classLis原创 2021-01-07 15:25:22 · 667 阅读 · 0 评论 -
前端基础学习之h5c3--3D切割轮播图（立体布局、transform）
常见的轮播图通常是整张图切换，在每个li中放入想要的image。原创 2020-11-25 10:27:19 · 1025 阅读 · 0 评论 -
前端基础学习之css3-(border-image)实现边框图片自适应填充
border-image 属性允许在元素的边框上绘制图像。语法：/* border-image: image-source image-height image-width image-repeat */border-image: url("/images/border.png") 30 30 repeat;border-image: url("/images/border.png") 30 30 stretch;值描述border-image-source用在边框的图片原创 2020-11-06 14:37:50 · 3126 阅读 · 2 评论 -
前端基础学习之h5c3-购物车宣传页动画小练习
index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>购物车宣传页</title> <link rel="stylesheet" hre.原创 2020-11-06 09:48:08 · 1063 阅读 · 0 评论 -
前端基础学习之css-手写优惠券样式（radial-gradient）
最近组内设计师总喜欢设计类似优惠券内凹的样式UI。因此，从头开始捋一遍这种优惠券的样式。如下：1.linear-gradient 线性渐变线性渐变使用的频率要比径向渐变高的多，因此在学习径向渐变之前，可以先再熟悉一遍线性渐变，依次类推再看径向渐变就简单的多。linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从下到上渐变。使用方法：background-原创 2020-10-24 00:17:49 · 1337 阅读 · 2 评论 -
前端基础学习之js-正则表达式基本语法及练习
正则表达式:也叫规则表达式,按照一定的规则组成的一个表达式,这个表达式的作用主要是匹配字符串的.正则表达式的作用:匹配字符串的在大多数编程语言中都可以使用正则表达式的组成:是由元字符或者是限定符组成的一个式子(一) 元字符1.元字符 .. 表示任意一个除了\n以外的字符2.元字符 [][]表示任意的单个字符。[0] 就是0[0-9] 表示0-9之间的任意一个数字[a-z] 表示二十六个小写字母中任意一个字母[a-zA-Z] 表示二十六个大小写字母中的任意一个字母[0-9..原创 2020-09-15 14:56:12 · 649 阅读 · 0 评论 -
前端基础学习之js高级-函数（高阶函数、闭包、沙箱、递归）
(一) 创建函数的两种方式1.函数声明f1();//可以调用//函数声明function f1() { console.log("我是f1的函数内容");}2.函数表达式 f2();//报错//函数表达式 let f2=function () { console.log("我是f2的函数内容"); }因为预解析的原因，用函数声明的方式创建函数，在函数声明前也可以调用，而用函数表达式的时候则会报错。 if(true){ function f2() { console.l原创 2020-09-11 15:33:55 · 301 阅读 · 0 评论 -
前端基础学习之js高级-apply()、call()、bind()使用
1.函数简要说明首先简单说一下，对象中都有__ptoto__属性，而函数中也有__proto__，因此函数也是对象。函数其实是Function构造函数的实例对象。即：如下的addFun1的调用效果和addFun2的调用效果是一样的。addFun1:function add(num1,num2) { return num1+num2;}console.log(add(20,30))addFun2let f2=new Function("num1","num2","return num1+nu原创 2020-09-11 09:52:43 · 387 阅读 · 0 评论 -
前端基础学习之js高级-面向对象-实现继承的几种方式
首先简单说一下构造函数、实例对象、原型对象之间的关系：通过构造函数可以创建实例对象。构造函数中有一个prototype属性，这个属性指向构造函数的原型对象。通过构造函数创建的实例对象中有一个__proto__属性，这个属性指向这个实力对象对应的构造函数的原型对象。构造函数的原型对象中有一个constructor构造器属性，这个属性指向这个原型对象所在的构造函数。原型对象中的属性和方法可以被实例对象共享原型对象的作用：实现数据共享，节省内存空间；实现继承，节省内存空间构造函数的原型对象(pro原创 2020-09-10 15:51:55 · 281 阅读 · 0 评论 -
前端基础学习之js-贪吃蛇游戏（面向对象思维）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .map{ width: 800px; height: 600px; background-color: #ccc; position: relative; } </style><原创 2020-09-09 09:56:01 · 238 阅读 · 0 评论 -
前端基础学习之js-setInterval（定时器）、setTimeout（一次性定时器）
1.setInterval()和clearInterval()setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。setInterval(code,millisec[,“lang”])clearInterval(id_of_setinterval)2.setTimeout()和clearTimeout()setTimeout() 方原创 2020-08-31 13:40:57 · 810 阅读 · 0 评论 -
前端基础学习之js-DOM（节点node、元素element、事件event相关操作）
1.DOM概念文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。DOM又称为文档树模型：文档：一个网页可以称为文档节点：网页中的所有内容都是节点（标签、属性、文本、注释等）元素：网页中的标签属性：标签的属性DOM经常进行的操作：获取元素对元素进行操作(设置其属性或调用其方法)动态创建元素事件(什么时机做原创 2020-08-26 18:45:38 · 539 阅读 · 0 评论 -
前端基础学习之js-函数练习案例汇总
1.求圆的面积 function getArea(r){ return Math.PI*r*r; } console.log(getArea(2));2.求2个数中的最大值function getMax(a,b){ return a>b?a:b; }console.log(getMax(10,20));3.求3个数中的最大值 function getMaxT(a,b,c){ return a>b?(a>c?a:c):(b>c?b:c); } co原创 2020-08-18 10:50:14 · 1456 阅读 · 0 评论 -
前端基础学习之js-创建对象（工厂模式、构造函数、原型模式、字面量）
创建对象的三种方式使用系统的构造函数创建对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><script>//练习:有一个黄色的小狗,叫大黄,今年已经三岁了,250斤的重量每次走路都很慢,喜欢吃大骨头var dog=new Obj原创 2020-08-07 10:20:13 · 222 阅读 · 0 评论 -
前端学习基础之js-for循环打印直角三角形、等腰三角形、菱形
打印五行五角星//*****//*****//*****//*****//*****for(let i=0;i<5;i++){ for(let j=0;j<5;j++){ document.write("*"); } document.write("<br/>");}document.write(" ");打印直角三角形//*//**//***//****//*****for(let i=1;i<=5;i++){.原创 2020-08-03 16:02:13 · 5326 阅读 · 0 评论 -
前端基础学习之二进制、八进制、十进制、十六进制简单表示
二进制 遇2进1 *00000001------1 *00000010------2 *00000011------3 *00000100------4 *00000101------5 *00000110------6 *00000111------7 *00001000------8 *00001001------9 *00001010------10 *00001011------11 *00001100------12 *00001101------13 *0000111原创 2020-07-30 09:43:15 · 570 阅读 · 0 评论 -
前端基础学习之js-交换两个变量的值的三种方法
方法1.使用临时变量temp//使用临时变量let num1=10;let num2=20;let temp=num1;num1=num2;num2=temp;console.log("num1:"+num1,"num2:"+num2);//num1:20 num2:10方法2.使用加减法则// 加减法let num1=10;let num2=20;num1=num1+num2;num2=num1-num2;num1=num1-num2;console.log("num1:"原创 2020-07-29 14:47:42 · 665 阅读 · 0 评论 -
前端基础学习之css3-animation(动画)
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向;属性描述@keyframes规定动画（类似函数的声明）【0-100% / from（与 0% 相同）to（与 100% 相同）】animation所有动画属性的简写属性，除了 animation-play-state 属性。animation-name规定 @ke原创 2020-07-27 16:48:52 · 351 阅读 · 0 评论 -
前端基础学习之CSS3-过渡（transition）
过渡动画：从一个状态渐渐的过渡到另外一个状态帧动画：通过一帧一帧的画面按照固定顺序和速度播放。在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡transition: 要过渡的属性 花费时间 运动曲线 何时开始;如果有多组属性变化，还是用逗号隔开 ：transition:width .4s ease 0s, height .4s;；如果所有属性都是同样的变化，那么只需要用al..原创 2020-07-23 17:19:21 · 812 阅读 · 0 评论 -
前端学习基础之css3盒子模型(box-sizing:border-box)
之前给div一个300的宽高，最后盒子的宽度=width+padding+border;高度同理。而如果不想盒子宽高被padding和border影响，可以使用：box-sizing:content-box;效果如下图:此时盒子的宽高就是所设置的width和height. padding和border包含其中。...原创 2020-07-20 18:04:20 · 526 阅读 · 0 评论 -
前端基础学习之css3 新增选择器(:nth-child(n)/:[attribute^=value]/::before...)
一、结构(位置)伪类选择器:first-child 选取属于其父元素的首个子元素的指定选择器:last-child 选取属于其父元素的最后一个子元素的指定选择器:nth-child(n) 匹配属于其父元素的第 N 个子元素，不论元素的类型 n可以是数字、关键词、公式nth-last-child(n) 选择其父元素的第n个子元素，从最后一个子元素开始计数<!DOCTYPE html><html lang="en"><head> <meta cha原创 2020-07-20 16:46:15 · 487 阅读 · 0 评论