- 博客(50)
- 问答 (4)
- 收藏
- 关注
RSS订阅原创 express路由
express路由表express 这个对象身上, 有一个成员叫做 Router, 是一个函数=> 当这个函数执行的时候会返回一个路由表(一个空的表格)=> 我们就可以在这个表格上进行各种的路由配置得到空的表格以后, 我们向表格上添加内容=> get(), post(), delete(), …=> 语法: xxx(路径标识符, 回调函数)告诉 app 服务, 你要使用这个表格=> 方法 app.use(要使用的内容)就可以按照模块化开发的方式, 把路由表配
2020-09-05 17:24:20
231
原创 express框架基础
express的使用下载, npm i express导入使用, const express = require(‘express’)创建服务,=> express 导入进来以后就是一个函数, 执行就会返回一个服务=> express()=> 返回值就是一个服务监听端口=> listen(8080, () => {})=> 依靠 express 创建的服务去监听端口express 返回响应express 框架把所有的请求分类=> 按照
2020-09-05 16:40:05
216
原创 mongodb的相关操作
mongodbmongodb与mysql的区别mysql 都是关系型数据库-> 存储, 多表存储, 每一个表里面可以写一个信息, 和其他表关联-> 多表联合查询-> 多表之间可以存在联系, 可以使用 sql 语句让多张表联合在一起mongodb 是非关系型数据库-> 存储, 以集合(库 database)的形式存储-> 集合里面都是以 json 文件的格式在存储-> 多个表之间没有联系, 不能通过语句来产生联系(因为根本没有固定语句)操作mongo
2020-09-05 16:30:26
211
原创 nodejs与其模块
nodenode概念官方解释: 基于 Chrome V8 的 JS 运行时环境私人解释: 就是一个 “软件”, 只不过这个软件是用来执行 js 文件环境: 配置在你电脑里面的一个程序, 不存在桌面图标, 依靠命令行运行nodejs模块化nodejs模块化共有3类1、自定义模块2、内置模块3、第三方模块经常使用内置模块和第三方模块内置模块fs模块fs 模块 - file system 文件系统模块这个模块里面封装的方法都是和操作 文件 和 文件夹 相关的内容node
2020-09-05 16:05:54
160
原创 gulp3与gulp4
gulp安装与插件的安装 npm i gulp@3 -g 全局安装gulp@3 npm i gulp -g 全局安装gulp npm i gulp@3 --save-dev 安装本地的gulp@3 npm i gulp --save-dev 安装本地的gulp npm init -y 初始化gulp的package.jsonnpm i gulp-load-plugins --save
2020-08-19 17:53:33
200
原创 sass、scss
sass安装环境gem install sassgem install compasssass文件的使用将sass转成csssass ./sass/a.sass ./css/a.css 将sass转成css文件link href="./css/a.css"改变sass自动更新对应的csssass --watch ./sass:./css 之后当前终端暂且不要使用。scsssass --watch ./scss:./css 监听scss下的scss文件，自动更新对应的css文件但注意只有
2020-08-19 17:42:11
208
原创 对象的放大、AMD
放大var Utils=(function(){ var c=10; return { a:function(){ } }})()//给源对象放大，给Utils添加了d属性var obj=(function(Utils){ Utils.d=function(){ } return Utils})(Utils)//宽放大var obj=(function(Utils){ Utils.d=function
2020-08-19 17:36:05
116
原创 面向对象的类中封装一个拖拽的方法
var Utils=(function(){ return { randomColor:function(){ var col="#"; for(var i=0;i<6;i++){ col+=Math.floor(Math.random()*16).toString(16); } return col; }, ce:fu
2020-08-16 16:12:14
157
原创 ES5中的继承
ES6中的继承直接采用extends class A { constructor(v) { this.v = v; console.log(v); } run() { console.log("a"); } } class B extends A { constructor(v) { super(v);
2020-08-15 16:44:35
180
原创 类和原型
类与原型的结合使用function Fn(){}Fn.run=function(){} //这种写法与ES6中的静态方法一样Fn.prototype.play=function(){} //这种写法就是正常的执行方法实例化时会将构造函数的prototype对象下的所有方法和属性添加在实例化对象的原型链中类的原型等于实例化对象的原型链定义一个父类，并利用原型设置类中的方法，同时将被覆盖的构造函数重新设定出来 function Box(){ } Box.proto
2020-08-15 16:41:16
841
原创 柯里化函数
柯里化柯里化的整体思想：将函数拆分为多个部分，首先执行其中的一大部分，比如只处理数据。之后再完成其他的部分，比如处理完数据后在执行利用这些处理后的数据实现的内容function curry(fn){ var arr=[]; return function(){ /* 此时正是处理数据的阶段。 如果传进来的有参数，就将这些参数放一个数组里整合在一起， 该阶段返回的是本函数。 如果传入的参数为空，证明此时进
2020-08-15 15:07:58
126
原创 函数的参数与return
参数1、参数是局部变量，优先级高于同名的全局变量2、是为了解决函数的抽象化，多态化。具备模块化功能3、js因为是弱引用语言，参数可以多样化改变，但也因此造成函数中需要对参数做大量的判断4、参数也可以做为递归函数中初始设置变量5、在多函数中，参数可以被作为中介值来回传递，并且处理。减少全局变量6、js中参数没有初始值（ES5），参数是没有类型区分（所以自己要加上大量判断），参数的先后问题（必要的参数在前，不必要的参数在后），(ES5)参数没有若干(…arg)但是argumentsreturn
2020-08-14 19:56:07
397
原创 set、get(描述对象的第二种写法)
描述对象的第二种写法set get基础ES6中没有静态常量static const EVENT_ID=“Event_Id”;var obj={ a:1, _c:0, b:function(){ }, set有且只有一个参数，而且必须要有参数，参数就是要赋予的值 set c(value){ this._c就是一个临时存储的变量。 this._c=value; }, get中不允许有任何参数 get
2020-08-14 19:54:13
344
原创 函数的执行
函数执行call();apply();call()function fn(a,b,c){console.log(this,a+b+c);}正常执行是：fn();//this windowcall执行时：fn.call(obj);//将obj带入到函数替代函数中this的指向，原有的this会被指向objcall带参数执行时：fn.call(obj,1,2,3);//第一个参数是函数中this指向的对象，后面会按顺序带入参数如果call和apply带入不是对象，会自动转换为对象fn.c
2020-08-14 19:50:11
503
原创 深复制对象
要复制的对象var obj={ a:1, b:2, c:[1,2,3], z:document.createElement("div"), d:{ e:new Date(), f:/a/g, g:function(s){ console.log(s);
2020-08-14 19:47:02
108
原创 对象的属性
Object属性Object.defineProperty();Object.defineProperties();这两种写法分别是设置一个属性与同时设置多种属性。每种写法里的描述对象都有冲突的情况：writable、value与set、get冲突属性的描述对象的两种属性情况：第一种 只存在writable与value的情况。var obj={};设置一个属性：Object.defineProperty(obj,"a",{ configurable:true,//该属性是否可以删
2020-08-14 19:44:18
2078
原创 jQuery的ajax
jQuery封装的ajaxjQuery 采用了三层封装：最底层的封装方法为：.ajax()，而通过这层封装了第二层有三种方法：.load()、.ajax()，而通过这层封装了第二层有三种方法：.load()、.ajax()，而通过这层封装了第二层有三种方法：.load()、.get()和.post()，最高层是.post()，最高层是.post()，最高层是.getScript()和$.getJSON()方法。// 最顶层// $.getJSON();// $.getScript();/
2020-08-14 19:38:37
155
原创 jQuery封装的各种方法
封装widthKaTeX parse error: Expected '}', got 'EOF' at end of input: …); //this是.fn,是一个jQuery对象,经过parseFloat转换后的，即使是带px单位，也会被筛掉，只剩下浮点数字，此时w是一个数值，此时如果w依然是非数字，则证明传进来的参数是一个非数字,则跳出即可。w=parseFloat(w)if(isNaN(w)) return;this.css({width:w+“px” //特别说明：这
2020-08-14 19:16:59
1274
原创 jQuery中的事件
事件添加事件和删除事件$(“div”).on(“click”,clickHandler); //添加事件function clickHandler(e){console.log(“a”);$(this).off(“click”,clickHandler);//删除事件}$(“div”).on(“click.a”,function(e){console.log(“a”);$(this).off(“click”); 将所有click事件的内容全部删除$(this).off(“clic
2020-08-14 19:14:53
224
原创 jQuery的css样式
css样式width$(“div”).css(“width”,50);$(“div”).css(“width”,“50px”);$(“div”).css(“width”,“50”);("div").css("width",function(index,item)return(index+1)∗50;)不但可以获取行内样式的值，也可以获取css设置的计算后样式console.log(("div").css("width",function(index,item){ return (index
2020-08-14 19:13:11
122
原创 jQuery属性
attr获取列表中第一个元素的a属性值$(“div”).attr(“a”)设置属性$(“div”).attr(“b”,“10”);设置一个属性不同属性值$(“div”).attr(“c”,function(index,item){return index+1;})设置多个不同属性$(“div”).attr({b:“1”,c:function(index,item){return index+1;}})attr设置后可以直接获取$(“div”).removeAttr(“a”)
2020-08-14 19:10:33
136
原创 jQuery选择器与过滤器
选择器$(“div”) 标签名选择器$("#div1") id选择器$(".div0") class选择器$("*") 通配符选择器$(“div .div1”) 后代选择器$(“div>.div1”) 子代选择器$(".div1+div") 下一个兄弟选择器$(".div1~div") 下面所有的兄弟选择器$(“div.div1”) div中类名是div1的div$(“div .div1”) div后代中类名是div1的元素$(".div1>") 类名是div1所有的子元素
2020-08-13 18:00:34
144
原创 ajax的其他内容
ajax 的超时问题ajax可以设置超时时间，如果过了一定时间后依然未加载成功，则可以中止加载。import QueryString from "./js/QueryString.js"; var time=0; ajax(); function ajax(){ var xhr=new XMLHttpRequest(); xhr.addEventListener("load",loadHandler); xhr.addEventListener("time
2020-08-13 17:58:20
100
原创 promise方法
promise基础样式var p=new Promise(function(resolve,reject){ var img=new Image(); img.src="./img/17.jpg"; img.onload=function(){ resolve(img); } img.onerror=function(){ reject(img.src+"地址错误"); }})promise对象的连缀函数then有两种
2020-08-13 17:50:49
178
原创 字符串的拓展方法
字符串的拓展方法includes判断字符串中是否存在str.includes(“j”); 返回true，falsestartsWith endsWith“abcde”.startsWith(“a”) 判断a是不是从头开始“abcde”.startsWith(“b”,1) 判断从第1位开始的是不是b“car_0”.startsWith(“car_”); 判断是否以_car开始“abc_car”.endsWith("_car") 判断是否以_car结束“abc_car”.endsWith(“a
2020-08-13 10:57:57
207
原创 箭头函数与this指向
箭头函数的写法箭头函数的省略问题如果函数中仅有一句话，并且这句话是return返回，可以省略{}和returnvar fn=function(a,b){ var fn=(a,b)=>a+b;return a+b}var fn=function(){ var fn=()=>{var a=3; var a=3;var b=4; var b=4;return a+b; return a+
2020-08-13 10:56:01
233
原创 简易的表单验证
表单验证<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body>
2020-08-13 10:53:01
149
原创 正则表达式相关案例
魔塔人物行走/* actor是存放小人的div，code用来记录当前触发按键事件的keycode编码是多少，bool为人物是否行走的开关，dic字符串存放点前前进的方向。 time是防抖参数，避免人物行走摆臂过于频繁，speed控制人物在body页面中left、top值改变的快慢。 num是为了添加人物移动时的摆臂动作，而在X轴上移动精灵图设置的变量 x,y是存放小人div的left与top
2020-08-13 10:51:39
183
原创 面向对象封装元素拖拽组件
面向对象封装元素拖拽组件var Utils=(function(){ return { randomColor:function(){ var col="#"; for(var i=0;i<6;i++){ col+=Math.floor(Math.random()*16).toString(16); } return col; },
2020-08-13 09:11:13
146
原创 鼠标事件
点击事件 click的相关属性Left Top 元素的事件属性X Y鼠标事件的属性在点击事件中e里面存了很多位置数据。clientX 距离可视区域左上角clientYlayerXlayerY如果目标对象是定位方式，值与offset相似，如果目标对象是非定位方式，取父容器的左上角位置，如果父容器未定位，继续向上取offsetX 相对事件目标对象e.target的左上角位置offsetYmovementX 仅用于mousemove事件 这个值是鼠标移动时相对于上次获取坐
2020-08-13 08:13:08
127
原创 常用事件类型
change事件(只针对表单)如果标签内容value值发生改变，并且失去焦距触发input 中的text checkbox radioselect(下拉菜单) select.value是选中的值select会有多选(multiple)的可能性,这样会导致value一直是第一次选中的值select.selectedOptions 被选择的多个元素select.selectedIndex 选择下标load error 用于图片的加载，ajax的通信以及JSON或者其他文件的加载load是加
2020-08-12 08:46:41
431
原创 DOM对象的常用属性
获取div宽高元素.clientWidth 客户宽高元素.clientHeight元素.offsetWidth 偏移宽高元素.offsetHeight元素.scrollWidth 滚动宽高元素.scrollHeight以上所有的宽高，基于元素被加入到DOM渲染树后也就是被添加在页面中以后，才可以获取并且图片这类后加载元素无法获取宽高(异步原因造成)异步 当运行某个需要一段时间完成的内容时、可以先继续向后执行代码，加载和执行后面是同时进行的同步 上一步执行完成再执行下一步元素的宽
2020-08-12 08:43:07
458
1
原创 获取DOM节点及节点关系、DOM操作
DOM节点获取DOM节点document.getElementsByName();(主要用于表单)，通过Name，获取元素。最终获取的是NodeList。所以所有表单最好都加上name属性。NodeList是通过forEach方法遍历的。nodeList是有forEach方法遍历var list=document.getElementsByName(“sex”);list.forEach(function(item){console.log(item);})document.getElem
2020-08-12 08:39:12
334
原创 Date
date获取时间var date=new Date();创建日期对象date.getFullYear()获取年份date.getMonth()+1 获取月份是从0开始的，所以要+1date.getDate()获取日期date.getDay()获取星期 从0开始 0就是星期日 1是星期1date.getHours() 获取小时date.getMinutes() 获取分钟date.getSeconds() 获取秒date.getMilliseconds() 获取毫秒date.getUT
2020-08-12 08:30:36
281
原创 string方法
stringUnicodevar str="";str.charCodeAt(0) 获取下标为0的字符的UnicodeString.fromCharCode(79) 编码转为字符串replacevar str=“abcdef”;str=str.replace(“b”,“z”); 字符串的方法不能修改原字符，返回替换后的新字符。暂时只能替换一个字符str=str.replace(“c”,“c1”) 即使替换又是插入str=str.replace(“cd”,function(item){re
2020-08-12 08:29:05
172
原创 过滤与归并
filter筛选，过滤。筛选就是将满足条件的元素放在一个新数组中，并且返回这个新数组。var arr1=arr.filter(function(item){return item>4})filter重构function filter(arr,fn){ var arr1=[]; if(arr.length===0) return arr1; for(var i=0;i<arr.length;i++){ if(fn(arr[i],i,arr)) a
2020-08-12 08:26:47
132
原创 数组方法相关案例及三种排序
数组去重 var arr=[1,3,3,6,8,2,3,5,6,3,7,9,8,3,6,7,3,8,9]; var arr1=[]; for(var i=0;i<arr.length;i++){ var bool=false; for(var j=0;j<arr1.length;j++){ if(arr[i]===arr1[j]){ bool=true;
2020-08-12 08:25:31
245
原创 splice方法重构(不完全测试)
splice重构<script> function splice(arr){ var arr1=[]; if(arguments.length===1){ return [] }else if(arguments.length===2){ if(arguments[1]<0) arguments[1]=arr.length+argu
2020-08-12 08:21:37
137
原创 数组方法重构
join重构 function join(arr,separator){ if(separator===undefined) separator=","; separator=String(separator); var str=""; for(var i=0;i<arr.length;i++){ if(i!==arr.length-1) str+=arr[i]+separator; else str+=arr[i]; }
2020-08-12 08:19:43
307
原创 数组的push、pop、unshift、shift方法及重构
push可以在数组的尾部添加若干个元素，返回新数组的长度。while(arr.push({})<10); 循环给数组尾部添加10个不同引用关系的对象。push重构function push(arr){ for(var i=1;i<arguments.length;i++){ arr[arr.length]=arguments[i]; } return arr.length;}var arr=[];var len=push(arr,1,2,3)
2020-08-12 08:09:56
374
空空如也
vue 如何解决无法通过hashchange检测路由变化的问题
2022-02-10
前端 谷歌浏览器中http的图片显示不出来
2022-01-04
vue中用video标签解析播放抖音加密的视频src，报403
2021-12-21
在使用v-html渲染富文本时遇到图片显示不出的问题
2021-11-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人