- 博客(57)
- 收藏
- 关注
RSS订阅原创 服务器用nginx部署环境挂载vue项目
所涉及到的环境与工具：shellnginxxftplinux环境服务服务器使用nginx部署挂载vue项目这里vue项目打包命令：npm run build 会生成一个dist文件一、安装nginxyum install -y nginx**注意:**安装成功后：默认的默认的网页路径为：、usr/share/nginx/html默认的配置文件为/etc/nginx/nginx.conf二、开启端口80和443前提：先打开防火墙 systemctl start firewal
2022-05-06 18:31:34
1350
原创 面试重点 --forEach for in for of三者的区别
在开发过过程中经常需要循环遍历数组或对象,使用到最多的大概就是for forEach for of for in 今天来整理下他们的用法及异同点。for 循环for循环是javascript诞生就一直使用遍历数组 var arr = [1,2,3,4,5,6,7,8,9]; for(var i = 0;i< arr.length;i++){ console.log(arr[i]) }for循环中还可以使用b
2020-08-02 23:16:28
829
原创 数组去重 --ES6新增方法
js中的数组去重是面试必考点，这里来 浅谈下ES6中的新增方法1.利用Map对象和数组filter方法 let arr = [1,2,2,1,3,6,5,3,6,12,89] function unique(arr1){ const a = new Map(); return arr1.filter((b)=>!a.has(b) && a.set(b,1)) } let newArr
2020-07-20 00:28:24
640
原创 mongodb的安装与配置
在前后端的交互中，所有的数据都是后端编写。但是自己练习项目，却没有数据，而是写一些假数据，我们MongoDB来搭建一个真正的数据库，来实现前后端数据交互。什么是MongoDB ?MongoDB 是由C++语言编写的，是一个基于分布式文件存储的开源数据库系统。在高负载的情况下，添加更多的节点，可以保证服务器性能。MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB 将数据存储为一个文档，数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JS
2020-07-19 21:53:12
272
原创 面试必考——js中的深克隆与浅克隆
在js中，我们通常创建一个json对象来方便储存数据。let json = { user:"张三", password:"", tem:['1','2'] }一般这种方式为标准数据格式首先来看看浅克隆的实现let json = { user:"张三", password:"", tem:['1','2'] } function setObject(obj){ let newObj = {}; for(let i in obj)
2020-07-12 17:45:26
237
原创 js中的防抖与节流的用法与区别
概念函数防抖：触发搞频率事件后n秒内函数只会执行一次，如果n秒内高频率事件再次被执行则重新计算时间函数节流：高频率事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。节省浏览器消耗内存，给用户良好的体验应用场景在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的
2020-07-12 16:28:17
1277
1
原创 ES6中的解构之对象解构赋值
解构赋值解构赋值是javascript表达式，这使得可以将好数据从数组或对象提取到不同的变量中。（可以看出解构主要用在数组和对象上）。简单点来讲就是解析等号两边的对应的赋值给左边，如果解构不成功，变量的赋值就等于undefined。对象的解构与数组有一个重要的不同。数组的元素是按顺序排的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值基本使用语法注意：对象解构赋值的键名对应很重要。不然不会找到。因为对象时无序的，必须通过键名来识别1.未先声明变量再进行对象解
2020-07-04 15:42:03
1613
原创 了解js字符串的码元与码点
charCodeAt与codePointAt的用法相同点： charCodeAt与codePointAt都是字符串实例的方法，用途都是返回指定索引位字符的Unicode编码不同点：charCodeAt与codePointAt匹配索引位的规则不一样，charCodeAt是根据码元来匹配，而codePointAt是根据码点来进行匹配的码元与码点这两点都与计算机编程有关，早期的时候，存储空间比较宝贵，unicode存储文字，16位2进制叫做一个码元（code unit）计算机发展，对unicode文字
2020-07-04 11:32:39
1803
原创 关于ES6中临时性死区
什么是临时性死区在es6中，代码块内，使用let/const声明之前，该变量都是不可用的，在变量声明之前属于该变量的“死区”、在语法上，称之为“暂时性死区”也叫临时性死区，（temporal dead zone，简称 TDZ）。ES标准并没有明确提出TDZ，但我们常用其描述let、const的不提升效果。let、const和var的区别let、const是块级作用域，var是全局作用域let、const不存在变量提升，在声明前使用会报错：Uncaught ReferenceError，var会进行变
2020-06-27 23:46:40
716
原创 let解决的闭包问题
闭包在Javascript里面是很重要的一个环节，下面看一个简单的例子var f = function(){ var i = 0; return function(){ i++; console.log(i) } } var s = f(); s();//1 s();//2 s();//3闭包简单来说，就是函数f内的变量 i 被外部函数s引用到了，而且i不能释放，一直在内存中，形成了闭包<ul> <li>1</
2020-06-26 19:09:58
1573
原创 使用Jquery实现ajax的请求
关于Jquery封装的ajax数据请求方式具体写法：$.ajax({ //请求的地址 url : '', //请求类型，get,post type:'GET', // 请求的数据类型，可以是html,json,xml等 dataType:'json'， //传输的数据 data:{ uname:username, upassword: upassword }, //选择是否支持异步刷新
2020-06-21 23:02:35
711
原创 关于TyppeScript的安装与编辑
关于TypeScipttypescript是JavaScript的一种超集，支持ECMAScript 6 标准，同样是有微软开发的自由和开源的编程语言，TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。对比与javascript的优点ts完美兼容es7的语法之外有着更完美的模块系统，给Javascript添加特性的语言扩展，有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，Typ
2020-06-21 21:37:03
325
原创 一个完整的Ajax请求
Ajaxajax 全名 async javascript and XML(异步JavaScript和XML)是前后台交互的能⼒ 也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必需重载整个网页面Ajax的操作流程具体的使用及实现步骤1.创建XMLHttpRequest对象,也就是创建一个异步调用对象.
2020-06-13 22:17:03
484
原创 懒加载的实现原理
在我们浏览电商网站时，商品的图片多之又多，这样一下加载那么多的图片服务器的压力就很大，不仅影响渲染速度，还浪费宽带。为了解决这个问题，提升客户端的体验，出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他不部分进入可视区再加载。懒加载原理浏览器是否发送请求是根据的src属性，懒加载的关键在于图片没有进入可视区域时，先不给的src赋值，这样就不会发送请求了，等图片进入可视区时再给src给值。懒加载实现的思路1.加载loading图片2.重点在于判断哪些图片需要加载（进入可视区的部分需.
2020-06-13 14:31:25
1137
原创 js中call,apply与bind使用和区别
在javascript中所有的函数在别调用时会默认传入两个参数：this argumentthis：当前的调用函数的对象，有时需求取药改变this指向–也就是是函数可以被其他 对象来调用这时就需要用到apply,call与bind方法了call,apply,bind方法的来历在js中所有的函数都是Function的实例，而且对于Function来说，它的原型即Function.prototype中含有很多东西，其中call,apply和bind方法就是Function原型中的方法，所以根据原型的规
2020-06-08 00:07:55
152
原创 js回调函数的两种写法
回调函数应用程序时常会通过API调用库里所预先备好的函数。但是有些库函数（library function）却要求应用先传给它一个函数，好在合适的时候调用，以完成目标任务。这个被传入的、后又被调用的函数就称为回调函数（callback function）。总结一下回调函数的两种写法与用法：非参数回调函数：这种回调比较简单 ，往往只需传一个函数名就可以。function demo(arg,callback){}再来看看怎么写这个函数 在js中是可以通过函数名来调用函数的例如：var
2020-06-07 15:24:39
2941
原创 计算机五层网络详解
两台计算机相隔甚远如何实现通信？在成千上万的计算机中，为什么一台计算机能够准确着寻找到另外一台计算机，并且把数据发送给它？网络通信的五层模型：通过网络通信的五层模型来阐述一台计算机是如何找到另外一台计算机并且把数据发送给另一台计算机的。1. 物理层一台计算机与另一台计算机要进行通信，第一件要做的事是什么？当然是要把这台计算机与另外的其他计算机连起来啊，这样，我们才能把数据传输过去。例如可以通过光纤啊，电缆啊，双绞线啊等介质把他们连接起来，然后才能进行通信。 .
2020-05-31 23:08:44
4038
1
原创 学习fullpage的使用
关于fullpagefullPage.js 是一个基于jQuery的插件 ，它用起来非常方便，在是开发网页时通过css的加工可以很轻松的制作一个高大上的全屏网站支持的功能1. 支持鼠标滚动与键盘上下移动页面2.多个回调函数函数3.支持手机，平板灯触摸事件4.支持css3动画5.窗口缩放时自动调整6.可以设置滚动高度，背景色，滚动速度，回调，文本对齐等在引入时需要引入jquery1.6以上的版本引入fullPage.css与fullpage.js我在写网页的时候引入的是下载好的插件，当然
2020-05-31 19:05:14
1588
1
原创 jquery文档添加操作之 insertAfter() ，insertBefore() .appendTo() .append()方法的使用与区别
先看看上述方法的用法定义：.appendTo() .append() 剪切操作：将元素追加到父元素的最后.prependTo() .prepend() 剪切操作：元素的开头添加元素.insertBefore().before() 剪切操作：都是将某个元素插入到指定元素的前面 .insertAfter() .after() 剪切操作：都是将某个元素插入到指定元素的后面 上述方法的效果一致 在jQuery需要用到链式操作的是，就有区别：
2020-05-24 23:21:36
1210
原创 jquery的包裹节点的简单理解 wrap() wrapAll() wrapInner()的用法及其区别
在jQuery中有三总包裹节点的方法1.wrap()：将每一个匹配到的子元素进行包裹(一对一 单独包裹，直接添加父元素)2.wrapInner()： 给一堆同级别的元素添加父元素3.wrapAll(): 给一堆元素添加同一个父元素三者中比较好理解的就是wrap()和wrapInner()例如：body中存在1个hello world！此时分别执行$(‘em’).wrap(’’);$(‘em’).wrapInner(’’);得到的结果：从html结构可以看出：wrap是在选定元素外面包
2020-05-23 23:03:06
1405
原创 jQuery对象与DOM对象的区别与联系
jQuery对象jQuery对象是通过jQuery封装后的DOM对象后产生的对象jQuery对象是通过jQuery封装后的DOM对象后产生的对象例如：(“#boximg”).attr(“src”,”01.png”) (“#boximg”)就是 jQuery 对象。DOM对象JavaScript固有的一些对象操作DOM 对象能使用Javascript 固有的方法，但是不能使用 jQuery 里的方法例如：document.getElementById(“wapper”)document.get
2020-05-17 19:19:31
243
原创 jquery增、删实例——用户信息注册界面
我们看看该用户信息注册界面的结构与需要实现的功能页面要求1.页面的布局2.用户与email邮箱的判断3.添加功能3.1数据的获取3.1数据的动态加入4.删除功能业务逻辑1. 页面的布局不需要过多说明 HTML + css可以实现2. 添加功能实现之前我们需要给用户名与email做正则判断与非空判断所以在添加按钮之后先写个一函数开关msg()来做判断3. 当用户输入的用户名与邮箱格式正确后再执行数据的获取与添加以及删除，该部分用一个函数来完成(push())简单的逻辑就是 ：用户
2020-05-17 18:05:32
1008
原创 Bootstarp中container类与container-fluid
关于container类与container-fluid的区别：我们用过demo来看看两者的区别：<!DOCTYPE html><html lang="zn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
2020-05-11 10:06:18
508
原创 Bootstrap3与Bootstarp4中的区别
Bootstrap3与Bootstarp4中的区别Bootsrap3采用的float布局，而Bootstrap采用的flex布局Bootstrap4中的栅格系统可以不用添加指定的列数 如row 里面有2个col 会任何尺寸下均分rowBootstrap3只有4种栅格类 分别为（col-xs特小，col-sm小,col-md,中col-lg大）Bootstrap4有5种栅格类，（col-特小，col-sm-小，col-md-中，col-lg-大，col-xl-超大）Bootstrap4使用rem为单
2020-05-11 08:35:27
679
原创 DOM事件流之js事件冒泡与事件捕获
DOM事件流模型dom兼容浏览器汇中，事件流分为三个阶段：（1）捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；（2）目标阶段：真正的目标节点正在处理事件的阶段；（3）冒泡阶段：事件从目标节点自下而上向Document节点传播的阶段。DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的捕获阶段最先开...
2020-05-05 23:17:44
220
原创 汇总一波——js常用鼠标事件
js常用鼠标事件汇总onclick 单击事件（相继触发mousedown与mouseup事件）onmousedown 鼠标按下事件onmouseup 鼠标抬起事件onmousemove 鼠标移动事件onmouseout 鼠标移出事件onmouseover 鼠标指针移动到元素（被选元素或其子元素）上时触发常与onmouseout一起用onmouseenter 只有在鼠标指针穿过被选元素...
2020-05-05 18:06:46
1314
原创 Bootstarp之jquery操作增、删、改的使用
Dom插入现有元素内：.append：在每个匹配元素里面的末尾处插入参数内容.append()函数将特定的内容插入到每个匹配元素里面的最后面，作为他的最后一个子元素，（如果要作为第一个元素用.prepend()）.appendTo:将匹配的元素插入到目标元素的最后面实例：HTML部分： <p>How are you?</p> ...
2020-05-04 18:51:40
171
原创 Bootstarp全局样式之表格
很多人不喜欢表格布局，但是在现实开发中表格布局还是十分常见的，个人觉得在简单的布局表格布局韩式十分实用的。下面看看Bootstarp中给出的表格：基本实例：为任意table标签添加.table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。<div class="container"> <table class="table...
2020-05-04 11:47:15
261
原创 css3之keyframes简单使用--绘制日月轮回过程
日月轮回动画日月轮回：顾名思义就是每天白天太阳升起，傍晚落下，月亮升起，天亮之前月亮落下，太阳升起的交替过程.我们利用css绘制天空，太阳，月亮然后结合keyframes与animation动画，绘制出日月轮回的画面.我们结合模型图更深的了解太阳与月亮的交替其实日月轮回的重点有三点：1.天空的变化与太阳的升起下落，月亮的升起下落相吻合.2.太阳，月亮运动的起始点与运动的终点的确定这...
2020-04-27 00:08:46
908
原创 用纯C3制作一个3d立方体动态相册送给你的女朋友
今天我们制作一个3d立方体相册制作之前我们先了解下3D3D立体空间利用3d时必须要了解3d的一些属性以及功能函数熟练运用属性：prespective ：景深(近大远小) 是我们观察物体的一个视角距离，距离越小效果越明显人们一般观察的距离为800px–1200px效果最为明显使用方法prespective :800px（在父元素中使用）transfrom:prespective (...
2020-04-26 02:07:47
1507
原创 程序员的浪漫教你表白——用纯css绘制爱心
分享一篇娱乐博客,最为程序员每天与枯燥的代码打交道其实我们也可以浪漫。代码核心是利用 ::before ::after 这两个CSS伪类来辅助画爱心的两个半圆。以及@keyframes使用规则@keyframes标签定义及使用说明使用@keyframes规则，你可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中，您可以更改CSS样式的设定多次。指定的变化时发...
2020-04-20 02:26:04
1004
原创 CSS3弹性盒子——flex-wrap属性
flex-wrap属性默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。在默认情况下flex会让容器中的子项尝试一行，根据个人需求，我们可以对容器设置flex-wrap实现自动换行.flex-warp: 的取值:1）nowrap 默认值。规定灵活的项目不拆行或不拆列。2）wrap 规定灵活的项目在必要的时候拆行或拆列。3）wra...
2020-04-18 22:08:54
2020
原创 【小demo】 利用two.js绘制月亮围绕地球转，地球绕着太阳转
一 原理在Two.js中和Canvas、SVG都不同的有这么几个地方：Two.js中所有的旋转都是以自己为中心Two.js中的旋转不会累加Two.js中不使用定时器，使用Two.play()方法，类似于Flash动画（但它的底层是有定时器的，该方法每秒钟调用60次two.update()方法）二：注意点1: two.js 中, 图像默认的旋转中心是该图形的定位点( 图形的中心点 )2...
2020-04-12 21:27:59
958
原创 在html页面中用js引入百度地图
如何使用百度地图？当我们在第一次使用时，必须要申请申请密钥引入api后才能实现具体流程申请账号->获得秘钥->引入API在书写代码时引入API： <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的秘钥"></script>注：ak=每...
2020-04-12 15:43:55
3484
原创 ES6 之Set集合
集合：集合是由一组无序且唯一的项组成的。集合的特点：key 和value的个数相同，没有重复的value。类似于数组 但是成员的值都是唯一的，没有重复的值创建一个set：const s = new Set([1,2,3]);console.log(s);1.set用于存放不重复的数据const s1 = new Set([1,2,3,4,5,6,7,8,9,1,23,4,5,6]...
2020-03-28 00:09:35
308
原创 ES6 箭头函数
箭头函数：语义化函数基础语法;//传统的函数function fun(a,b){console.log(a*b);//6}fun(2,3)//箭头函数var fun1 = (a,b) =>{console.log(a*b);//6}fun1(2,3);参数的传递：1.若参数只有一个，小括号可以省略。若参数有0个或者两个以上必须要有()```javascript...
2020-03-27 21:22:37
163
原创 Es6之 let和const命令与var的区别
let一.基本用法ES6新增了let和const命令，用来声明变量，let的用法类似于var，但是所有的声明变量，只在let所在的代码块内有效。{let a = 10;var b = 10;}console.log(b); //10console.log(a);//Uncaught ReferenceError: a is not defined二.不存在变量提升var 命令会...
2020-03-27 16:31:41
154
原创 es6基础
Es6：什么是es6ES6是ECMA Script 6.0 的简称，新语言的标准，发布于15年目标让js语言成为能支持去编写大型复杂的应用语言，成为企业开大语言JavaScript ECMAscript + WEBapi（DOM、BOM） = JavaScriptActionScript + WEBapi（DOM、BOM）= flashES是定义标准的，js是实现者es的历史 ...
2020-03-22 13:49:08
124
原创 Javascript加载时间线精解
js在加载开始的时候，浏览器会记录js执行的这段过程。 1.创建Document对象，开始解析web页面，解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段Document.readyState = "loading"; 2.遇到link外部css，创建线程加载，并继续解析文档。 3.遇到script外部js，并...
2020-03-11 13:12:03
126
原创 JavaScript异步加载
异步加载：按需要加载，用到的时候再加载，不用到不加载。异步加载的三种方案：defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用。（IE9以下）async 异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script 标签里。 （不兼容IE9以下）创建script，插入到DOM中，加载完毕后callBack方式一：
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人