- 博客(37)
- 收藏
- 关注
RSS订阅原创 js中的性能优化
js性能优化在创建网页或者应用时，性能始终是绕不开的话题，前端作为一个贴近用户的位置，更要注重性能的优化。js作为前端的三大将之一，js也是必须要优化，今天我们来说一说js性能优化相关的方法。1. 图片懒加载如果一个网页加载图片过多，必定会导致http请求的次数增多，但是一个网页展示给用户的始终是出现在显示屏的部分，多出的部分，只有在滚轮轮动时，才会展示给用户，因为屏幕始终就那么一块大小嘛，所以呢没有显示在屏幕上的图片，我们就不进行加载，只有这个图片要进入屏幕时在进行加载，这就是图片懒加载！实现思
2021-05-22 20:49:19
576
原创 使用node crawler模块获取网页信息
Crawler 模块crawler是基于node.js的爬虫工具，爬虫这个词语，一般提出来，想到的都是python相关的，node的crawler模块提供了爬取网站信息的功能。安装第一步肯定是安装 模块，至于说 npm init -y 去初始化，不算在内。首先使用npm去安装模块 npm i crawler。爬取数据后，放在哪里呢？数据库里 所以顺便去安装一下mysql模块 npm i mysql导入模块安装成功后就要准备导入模块了const Crawler = require("crawle
2021-05-22 18:57:02
539
10
原创 js中的函数柯里化
柯里化（Currying）在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数的函数，并且返回接受余下的参数且返回结果的新函数的技术。（返回和原函数相同的结果）来个例子假如我们封装了一个柯里化函数，那么我们能干什么呢？function Curry(fn){}我现在有一个求和函数，如下function add(a, b, c, d) { return a+b+c+d;}这个柯里化函数能做到什么呢？// 封装一个柯里化函数 期待每一次将剩余参数进
2021-05-22 16:12:24
255
原创 js图表插件Echarts
在制作网页的时候，我们有时会需要制作图表，自己画一个很麻烦，这个时候就可以用到echarts。echarts1.下载js文件使用的时候需要下载echarts的js文件（官网链接），可以去官网下载。2.导入js文件就像jQuery一样导入他<script src="echarts.js"></script>3.创建一个容器，需要有一个具备宽高的div先制作一个简易的柱形图<div id="chart1" style="width: 700px; height:
2021-05-10 20:20:11
1021
1
原创 迭代器（iterator）和 生成器（generator）
迭代器（iterator）什么是iterator?迭代器（iterator）是一种统一的接口机制，它是一种接口，为不同的数据结构提供统一的访问机制，任何数据只要定义了iterator接口，就可以完成遍历操作。模拟一个迭代器在js里，一个对象中含有next()方法，并且这个next()方法返回一个对象那么这个对象就是一个迭代器，每一次调用next()方法都会返回一个包含value和done两个属性的对象，value表示数据集合当前成员的值，done是一个布尔值，表示遍历是否结束。let arr
2021-05-06 21:05:13
1230
原创 ES8 async 与 await
async 和 await 目的是为了简化promise中api的使用，两种语法结合可以让异步代码和同步代码一样。之前我们解决异步编程，可以使用像callback，promise这种方法，而在ES8中引入了async和await，我们先了解一下async函数asyncasync简化了在函数返回值中对promise对象的创建，用法就是修饰函数，放在函数声明的最前面，并且async函数的返回值一定是一个Promise对象。使用方法及返回值 async function test() {
2021-05-04 19:13:19
182
原创 ES6变量的解构赋值
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这个过程称为解构赋值。在es6之前我们给一个变量赋值，是直接指定值，而在es6中我们可以这么写。var arr = [1, 2, 4];[a, b, c] = arr;console.log(a, b, c);//1,2,4上面这段代码，从数组中提取值，按照顺序对应，给变量赋值数组的解构赋值在进行数组的解构赋值时我们要注意几个点1.在进行解构赋值时，等号两边的模式一样，就可以成功赋值...
2021-05-03 22:42:33
444
2
原创 let和const关键字使用方法
在我们初学javaScript时使用var来声明变量，但是使用var声明变量会遇到变量提升等问题，而且只有全局作用域和函数作用域这种蛋疼的问题。于是在2015年ECMA组织发布了es6，带来了新的声明变量的关键字。let关键字1. let声明的变量 只在let所在的代码块起作用，形成块级作用域之前我们使用var在if语句或者for语句声明变量时，在if外面的作用域也可以访问到，而使用let声明的变量会形成块级作用域，只在声明的花括号{}内部有效。if (true) { let num
2021-04-25 20:57:30
361
原创 模板引擎是什么？art-template怎么使用？
模板引擎干啥用的？假如说我的后台返回了一串这样的数据，让我们去渲染到界面以表格的形式显示。年龄大于18显示成年小于18显示未成年（这里就直接var来声明了）。 var arr = [ {name : "last", age : 9,message:"s6第一个王者"}, {name : "ning", age : 18,message:"s8Fmvp"}, {name : "ming", age : 16,message:"电竞铁
2021-04-23 17:55:24
1538
7
原创 实现单行和多行文本溢出隐藏变为省略号
最近做项目用到了这个知识点，所以纪录一下实现单行文本溢出方法也就三行代码overflow: hidden;white-space: nowrap;text-overflow:ellipsis;overflow: hidden 溢出隐藏white-space属性是用来设置如何处理元素中的 空白，设置了nowrap之后文本不会换行。我之前写过一篇关于 标签 pre和css的white-space属性 的博客。标签 pre和css的white-space属性text-overflow 用来控制
2021-04-19 02:45:49
246
原创 前端插件swiper基础使用详解&含部分常用API
swiper插件swiper是一款功能强大、开源、免费的的前端轮播图插件。而且面向手机平板等移动终端（更多介绍可以去官网进行查看）。最近做项目时用到了这个插件，官网的文档看的我很难受！使用方法导入文件首先这个插件和其他的插件一样要引入文件，不同Swiper版本用到的文件名略有不同。我下载的版本是swiper-6.4.15版本里面有一堆奇奇怪怪的文件包含了在里面。我们在package文件夹下找到下面这四个文件放入你的项目里就可以了，最后我们导入这两个文件就可以使用了<link rel="
2021-04-19 02:04:39
4965
原创 html5+js制作自己的视频控件(实现弹幕效果，拖动进度条，播放时间) 一
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-04-10 17:17:20
4652
8
原创 js实现异步加载的三种方式
js实现异步加载1.deferdefer 写在script标签中的属性 让script变成异步的记载方式 只能在ie中使用//这两种怎么写都行<script defer></script><script type="text/javascript" defer="defer"> </script> 2.async（HTML5的属性）//和上面的一样3.按需加载动态创建script标签 等到所有的 html文件解析和加载完成之后在添加
2021-04-05 23:57:05
394
原创 浅谈深克隆和浅克隆，如何实现深克隆
在说深浅克隆之前（也可以叫深浅拷贝）我们先了解一下数据类型和它的存储，对后面的克隆会更好的理解。js变量传值在我们写项目的时候经常会将一个变量的值赋给另一个变量。那么他们在我们看不到的地方是怎么实现的呢？我们来看下面两个例子： // 基本数据类型 var a = 10; var b = a; console.log(a, b); a = 12; console.log(a, b); // 数组（引
2021-04-05 23:24:34
303
原创 JavaScript中的伪数组，伪数组转真数组
伪数组什么是伪数组？拥有length属性，无法直接调用数组方法，但可以通过下标对每个元素进行访问的数据集合就是伪数组。有哪些常见的伪数组？1.arguments2.NodeList下面我们来详细的介绍这两种伪数组：argumentsarguments：类数组对象，js中每一个函数都会有一个Arguments的实例对象（arguments）。特点：1.arguments会将实参的值以数组的形式保存，以及传入的实参个数（length）2.arguments的callee属性指向函数自己，（
2021-04-05 21:15:28
379
2
原创 模拟jQuery实现获取元素和修改css样式
jQueryjQuery是一个JavaScript的函数库，可以简便的去操作dom元素以及提供了很多的插件。今天简单的模拟一下jQuery的底层，去操作dom元素，以及修改css样式。首先我们使用一个立即执行函数封装它，封闭它的作用域。在使用jQuery时我们直接使用$符号就可以使用它，是因为将jQuery挂载到了全局对象window上，所以可以直接使用。然后我们在jQuery的原型链上创建一个构造函数。在并返回这个构造函数的实例对象（这个函数仅仅对class，id有效,请自行补充）<d
2021-03-31 20:53:54
615
原创 JavaScript原型、原型链详解
（函数对象是由Function创建的，js引擎启动的时候，直接放在内存中）原型（prototype）js规定，每一个函数都有一个prototype对象属性，在默认情况下prototype是一个普通对象，在prototype中有一个属性，constructor，他指向函数本身图解如下：隐式原型（__ proto __）所有的对象都有一个属性：__ proto __,也就是隐式原型在默认情况下，隐式原型指向创建该对象构造函数的原型图解如下：（per. __ proto __.construc
2021-03-11 11:27:25
157
原创 JS this指向问题 详解
this在JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变.this无法赋值1.在全局作用域中，this指向window2.在函数作用域中this执行取决于函数是如何被调用的（被谁调用的）直接被调用，this指向全局对象。当作为对象属性被调用时，this指向这个对象。下面我们来通过几个例子来深入了解一下thisfunction test(){console.log(this);}test();你在全局对象中定义的函数，相当于给全局对象添加了一个
2021-03-09 10:01:51
279
2
原创 JavaScript闭包
js闭包闭包：闭包就是在提供了一个在外部访问另一个函数内部局部变量的方式。当内部函数被保存到外部时，将会形成闭包。闭包会导致原有的作用域链不会被释放，造成内存泄漏。我们先看一个例子var add; function test(){ var a = 999; add = function(){ a++; }; return function(){
2021-03-07 22:27:47
76
原创 浅谈JavaScript作用域，作用域链，预编译
预编译js是一种解释型语言，解释一句执行一句。js运行有三步一.语法检测：是否有语法问题？二.预编译：变量和函数的提前声明全局预编译1. 创建一个GO对象 Global Object2. 将var关键字声明的变量当作GO对象的属性，赋值为undefined,有重名的直接覆盖3. 将function关键字声明函数 当作GO对象的属性，值为函数体，重名直接覆盖函数预编译函数执行的前一刻开始4. 创建一个AO对象 Activation Object 执行期上下文对象5. 函数的形参
2021-03-07 19:09:54
256
2
原创 DOM事件等级以及事件冒泡、捕获
在学习什么是冒泡、捕获、事件流前我们先了解一下dom事件等级DOM事件等级dom事件等级分别是dom0级（用on搭载事件名称如onclick）：一种是在标签内部写，on加事件名称如：οnclick=“函数名()”第二种如：div1.οnclick=function (){}dom2级(添加监听事件addEventListener()，解绑监听事件removeEventListener()：在学习到**addEventListener()**监听事件时，我们知道监听事件的括号里可以填入三个值d
2021-02-27 17:08:34
448
原创 JavaScript 预编译&&作用域
JavaScript 预编译js三部曲1.语法分析：对js进行全面扫描检查，分析有没有语法错误，并不会立即执行语句。2.预编译：在函数执行之前，在你的内存中申请一点空间，存放变量和函数。看了网上很多的文章，也是有了一个更深的理解，我个人理解简单的来说，就是将你的变量声明和函数声明提到所有代码的最前面。3.解释执行：就是程序读一句执行一句例如上面的例子,先输出了函数然后输出了数字。最后执行第三步的时候实际代码如下：var a;//先定义了a 此时a为undefinedfunction a(
2021-02-24 21:39:51
84
原创 JS获取元素CSS样式
获取元素CSS样式的方法说到在js里修改css样式的属性，我第一个想的是.style属性、然后去具体的修改字体的样式，背景颜色等样式，最近在做一个练习的时候涉及到了这部分的知识。一·首先style属性我们建立两个div，一个给内联样式，一个给行内样式。我们只能获得到写了行内样式的css样式。所以style属性只是修改元素的行内样式。说个题外话： !important，可以提高样式的优先级。并且等级高于行内样式，所以在js中使用style属性修改的行内样式优先级也小于 !important例如下图
2021-01-19 20:01:41
1607
原创 javascript实现输出指定行数图形，打印乘法表
打印一个10行10列的正方形（要求：每一个输出语句中只能输出一个*）通过for循环，来循环使用document.write("*");最后得到一个10行10列的正方形。1.首先我们来考虑判断条件，因为是10行10列，所以 一共要循环输出100次，那么循环结构我们这样写 for (var i = 1; i <= 100; i++) { document.write("*"); }如果不进行更改的话就会得到一整排的星号，如果想得到正方形的话，那么我们每隔10个星号，通过document.w
2021-01-18 20:17:49
2330
原创 CSS选择器（selector）汇总（含c3）
选择器计算权重一：值为 1000 ，内联样式 在标签内写入style属性。二：值为0100，id选择器，如： #id名。三：值为0010，class选择器、伪类选择器、属性选择器，如：.class名。四：值为0001，标签选择器、伪元素选择器 、如：div{}。五：值为0000，通配符选择器、子选择器、相邻选择器，如：*{} >等。等级最高：！important!important 的作用是提升优先级，加了这句的样式的优先级是最高的。大于内联样式（把！important加在分号前面）
2021-01-11 20:24:47
985
原创 纯CSS3制作按钮3D翻转效果
3D按钮翻转具体效果那么我们开始制作3D按钮翻转效果我们先把html的结构写一下<body> <ul> <li> <div class="zheng">首页</div> </li> <li> <div class="zheng">登录</div> </li>
2020-12-30 20:39:47
474
原创 使用css3制作好看的动画效果
今天给大家做两个好看的css3好看的特效字体浮雕效果如下我们来建一个div然后添加一段文字 <div> 这不是摇摆杨嘛？ </div>然后我们准备一些常用的css样式*{ margin: 0; padding: 0; } :root,body{ width: 100%; height: 100%;
2020-12-30 20:39:14
670
原创 使用纯css3制作好看的加载特效
使用css3制作好看的加载特效效果图 <div class="father"> <div id="text">loading....</div> <div class="son1"></div> <div class="son2"></div> <div class="son3"></div> <div cla
2020-12-21 20:34:15
318
原创 纯css3制作简易钟表时钟
使用css3制作简易钟表效果html代码 <div class="clock" > <!-- 指針 --> <div class="hour"></div> <div class="point"></div> <div class="seconds"></div> <!-- 黑点 --> <d
2020-12-21 19:45:05
1110
原创 实现表单元素的placeholder效果
标题在其他元素中添加placeholder效果在h5中给input标签添加了一个占位符属性placeholder用来做提示文本可是我想在其他元素里使用这个属性，那怎么办呢**？**1.新建一个div让它变成可编辑状态//css#test{ width: 500px; height: 500px; border: 1px solid red; }//html <div id="test" conten
2020-12-15 00:17:47
510
2
原创 css4种定位方式（静态定位，相对定位，绝对定位，固定定位）详解
说到定位就要用到 position 属性我们有四种不同的属性值1.static静态定位:使用静态定位时，元素处于普通流中，和未添加的元素一样处在最底层。2.relative相对定位：是相对于该元素在普通流时的位置元素仍保持其未定位前的形状，它原本所占的空间仍保留。就拿这三个div做比喻（这里就不给css代码了） <div class="father"> <div class="son1"></div> <div clas
2020-12-14 20:49:47
4011
原创 使用html5中新添加的全局属性contentEditable制作富文本编辑器
制作一个简单的富文本编辑器（一）h5中新添加了几个全局属性其中contentEditable属性可以让一个元素变为一个可编辑的元素，可以为用户提供在线编辑；两个值true 和 false那么我们来试一下这个属性的效果很简单：在想改变的元素里添加这个属性将值设为true;<body> <div contenteditable="true">我可以编辑啦</div></body>然后再设置点css样式div{ bo
2020-12-08 15:01:08
1504
原创 ＜pre＞＜/pre＞标签和css的white-space属性
标签 pre和css的white-space属性今天看书发现css的段落属性有一个white-space属性，用来处理空白white-space属性有三个值1.normal:默认属性。即将连续的多个空格合并2.pre：将源代码中的空格和换行符保留3.norwrap:强制在同一行显示所有文本突然就想到，这个white-space：pre和pre标签有没有什么不同？如果有需要的话要用哪个？所以我就试了试代码如下：运行效果如下：可以看到两段文字都达到了我们想要的效果，而且在段落里插入的a标
2020-11-30 20:52:17
1483
原创 函数防抖和函数节流
函数防抖和函数节流函数防抖函数防抖：如果一个事件被频繁触发多次，并且触发事件间隔过短，则防抖函数可以使得对应的事件处理函数只执行最后触发的一次，函数防抖可以把多个顺序的调用合并成一次...
2020-11-06 07:08:24
229
原创 使用canvas制作rpg游戏时遇到的一些问题
使用canvas制作rpg游戏时遇到的一些图片加载问题（二）！如果想要制作rpg游戏请下载制作工具如（rpgMaker）简单易上手。前端新人，文章用于纪录学习！上一篇我们完成了一个简单的地图背景，但是一张游戏地图里不可能只有一个背景，所以这次我准备添一点简单的东西装饰一下地图。本文使用的图片资源：那么我们开始装饰地图下面是代码部分：//获取画布和画笔let canv = document.getElementById("canvas");let cont = canv.getCont
2020-11-02 19:07:42
388
原创 使用canvas制作rpg游戏时遇到的一些问题
使用canvas制作rpg游戏时遇到的一些图片加载问题（一）这是我在上次做一个简陋的rpg小游戏的一些遗留问题，最近学了ES6的 Promise，并准备把项目用到的知识复习一遍（第一次写这种文章，如果文章有什么问题欢迎大家指出，或私信我）canvas图片加载canvas添加图片的方式：/* drawImage（）* /因为素材的原因所以使用了drawImage方法游戏的素材都来自rpgmaker，在steam上可以购买到正版！！如果我们想取到图中的一个方格添加到canvas上就要使用d
2020-11-01 19:34:08
620
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人