- 博客(34)
- 收藏
- 关注
RSS订阅原创 【ant-design】-upload组件个性化实现上传文件
1.实现ant-design的upload组件个性化定制 beforeUpload() ；2.前端自定义打开文件选择器-Window.showOpenFilePicker()3.File类型限制 excludeAcceptAllOption
2022-05-20 17:39:32
2424
原创 nginx部署项目-入门
Nginx 是什么？Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点开发的。2021年，稳定版本1.20.0目前，我用的是1.18.0版本Nginx 怎么用？先看目录结构：放置项目文件夹当前目录中、html目录中随便放置；我的在html中打开conf文件夹，进入nginx.conf文件中 server { // 端
2021-09-14 19:55:24
214
原创 nvm管理node版本
一、简介在日常工作中，不同的项目对node的版本要求不一样；如果每次都去手动下载和配置不同版本的node,估计得累死；因此，防止优秀的程序员因这…就暴毙而亡，nvm隆重登场；下面，跟随作者的安装步骤，开启对node版本的控制之旅。二、配置本篇讲述我自己安装所遇到的问题，如果你们遇到跟我不同的问题，欢迎讨论和指导。1.安装nvm网址：https://nvm.en.softonic.com/gitHub网址：https://github.com/coreybutler/nvm-windows/rel
2021-08-10 19:39:41
236
1
原创 JS-柯里化函数
柯里化函数1.高阶函数的一种，即接收函数为参数，返回一个处理函数的函数。2.我们在不知道一个函数的参数个数的时候，做收集参数的操作；等待传参的数量达到接收函数的参数个数，再执行这个接收的函数。3.如果这个函数的传参数量没有达到接收函数的参数数量或者我们规定的参数数量，返回一个函数，继续去做收集参数的事情，等到参数收集完毕，执行这个函数。// 柯里化函数封装 function curry(fn,args){ // 保存当前this let _this = this;
2021-06-09 21:11:16
146
原创 JS-对象深克隆
对象深克隆在实际开发过程中，经常遇到需要对引用类型进行深克隆的地方；引用类型的地址存在栈中，而值存在堆中。如果对象浅拷贝，拷贝的对象的属性变化会引起原对象的属性变化，在一些地方我们不希望原对象属性跟随新对象的属性变化；需要我们实现深克隆。function deepClone(obj){ // 判断传参是否是一个有值的对象 function isObj(obj){ return (typeof obj==='object'||typeof obj==='function'
2021-06-09 20:56:12
98
原创 JS-防抖节流函数
防抖节流函数有什么用？当用户疯狂点击按钮时，那个按钮被绑定了一些事件，就会疯狂触发事件的处理函数。又不能阻止用户的疯狂行为，我们就要限制事件触发的频次。如果用户鼠标结实，可以让他一直点下去，还不影响性能；就用到了防抖节流函数。1.防抖在用户疯狂点击的情况下，在点击结束后的规定时间内触发一次事件处理函数。原理：使用一次性计时器，计时器是异步操作，用户的每一次点击会将debonce函数放进事件队列，当debonce函数执行的时候，会在指定时间之后将setTimeout的函数放进事件队列进行排队
2021-06-09 20:28:03
178
原创 ES6--高阶函数之bind函数模拟封装
bind函数模拟封装bind的函数：创建一个新的函数，在bind()被调用时，这个新函数的this被指定为bind()的第一个参数，而其余参数将作为新函数的参数，供调用时使用。作用：call()、apply()和bind()函数都可以改变当前函数this指向；区别于call()和apply()不会立即执行该函数，传参方式和call()方法一样1.初步模拟改变this指向：(function(){ let obj={ name:'XX', age:18 } function A(n1
2021-04-06 00:29:15
412
原创 JS-sequelize（一种ORM框架）
sequelize是什么？1.它是基于 promise 的运行在node环境的ORM框架；2.它具有强大的事务支持, 关联关系, 预读和延迟加载,读取复制等功能。3.本文用操作数据库的例子来描述它用来进行模块化开发的步骤。4.参考网址：https://www.sequelize.com.cn/core-concepts/getting-started5.建议阅读：<<mock.js模拟数据>>中的如何运行“node ./”中和生成package.json文件的方法。
2021-03-29 01:30:59
554
1
原创 JS-mock.js模拟数据
mock.js是什么？官网上说它是用来生成随机数据，拦截 Ajax 请求的。http://mockjs.com/本文主要讲述它如何模拟生成随机数据。一、安装githuab上的文档详细介绍了它的安装。https://github.com/nuysoft/Mock/wiki/Getting-Started本文主要讲述node环境下，mock.js的安装与使用。因为这为了下面的博客中使用：squelize的博客地址二、使用var Mock = require('mockjs');le
2021-03-28 23:42:27
140
原创 node.js事件循环
node.js事件循环Node.js的运行机制（1）V8引擎解析JavaScript脚本。（2）解析后的代码，调用Node API。（3）Node API的执行。是将不同的任务分配给不同的线程，形成一个Event Loop（事件循环），以异步的方式将任务的执行结果返回给V8引擎。（4）V8引擎再将结果返回给用户。分析nextTick和setImmediate（1）process.nextTick方法可以在当前的执行尾部，即下一次读取"任务队列"之前；触发回调函数。也就是说，它指
2021-03-22 01:19:00
138
原创 js--移动端点击事件延迟问题
1.描述：移动端页面若没有加视口标签，则点击事件会比触摸结束事件晚300ms左右触发。2.原因：因为在没有视口标签的情况下，允许用户双击缩放；而为了兼容双击事件，判断300ms以内点击两次为双击事件，点一次为单击事件。解决方案1.加视口标签原理：加视口标签之后，禁止用户双击缩放2.使用touch事件来模拟点击事件 function tap(ele,callBack){ // 定义开关--用于判断是否触发了click事件 var flag=true; .
2021-02-25 16:22:06
448
原创 javascript-数组去重方法合集
数组去重方法合（本章总结七大类）首先，我们制造一些数组来测试我们的去重方法 // 纯数字数组 var arr_1=[1,6,3,3,1,2,2,2,6]; // 字符串数组 var arr_2=['123','asc','qw2','qw2','123','123','qw2','ghh']; // 数字+字符串数组 var arr_3=[1,'a',2,2,'a','a','1']; // DOM对象是类数组--页面至少写一个div v
2021-01-14 21:15:52
148
原创 JavaScript-三级联动的详细操作
三级联动之用户选取省-市-区的案例分析1.基础–html+css布局布局根据实际项目需求，一下仅为案例参考：<ul class="box"> <li><span>省份：</span><select name="pro" id="pro"></select></li> <li><span>城市：</span><select name="c
2020-12-29 20:58:21
740
原创 原生JS--DOM怎么玩？(事件绑定相关)
DOMJavaScript的组成：核心语法（ECMAScript）+文档对象模型（DOM）+浏览器对象模型（BOM）。webAPI = DOM + BOM。ECMAScript：定义了JavaScript的语法规范，描述了语言的基本语法和数据类型，标准。BOM：用于操作浏览器的API集合；通过BOM可操作浏览器窗口。DOM：用于操作页面元素的API集合；DOM将HTML看做文档树，通过DOM提供的API对树的节点进行操作。专业名词文档：一个网页可以称为文档。节点：网页中的所有内容都
2020-12-14 01:03:29
890
1
原创 原生JS--DOM的操作
准备好了吗？基础概念别睡着了喔 。。。查找DOM元素按照HTML查找document.getElementById 通过id获取元素document.getElementsByTagName 通过标签名获取元素 返回类数组document.getElementsByName 通过name属性查找元素 多用于表单 返回动态类数组document.getElementsByClassName 通过类名获取元素document.querySelector 通过css选择器获取元素 得到匹配的第一
2020-12-14 00:21:26
256
1
原创 JavaScript--分支+循环(continue、break、return的区别)
分支使用分支，让程序有选择的执行代码块，可以实现多次调用和节省运行效率if…else// 写法一：if (condition) { console.log('满足条件');}else{ console.log('不满足条件');}// 写法二--如果if后面只有一条语句可简写：if (condition) console.log('满足条件');else console.log('不满足条件');// 写法三--多语句：if (condition_1) { c
2020-11-30 01:38:17
264
原创 JS--构造函数和实例化对象
构造函数在对象的创建过程中，我们发现Object就是构造函数；new关键字调用构造函数就会得到一个对象。var a=new Object('361546');console.log(typeof a);//'object'new关键字做了什么？function Stu(name,age,height){ // var this={};创建新对象 this.name=name; this.age=age; this.height=height; thi
2020-11-29 18:06:26
1943
原创 js---变量与常量声明专区
变量和常量的声明首先，变量的存在是为了存储数据。变量及常量的声明方式：一、var 声明变量：1.变量提升到当前作用域最顶端。2.仅声明变量不赋值时，变量值初始化为undefined；因此在声明语句前面可以打印变量的值为undefined。3.当赋值给未声明的变量, 则执行赋值后, 该变量会被隐式地创建为全局变量（它将成为全局对象的属性）。4.声明多个变量，可以用英文逗号分隔，上述c由var关键字声明，而变量d未声明。 b=6//变量未声明，会造成全局污染 console.log(a)
2020-11-23 00:12:07
364
原创 HTML--(ul+li)元素个性化设计表格实例
为什么不使用table做布局1.Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源)。2.Table会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度，让用户等待更久的时间)。3.Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加HTTP会话数)。4.在某些浏览器中Table里的文字的拷贝会出现问题。(这会让用户不悦)。5.Table会影响其内部的某些布局属性的生效(比如<单元格里的元素的heigh
2020-11-19 21:04:55
2500
原创 HTML+CSS--复杂选择器小案例01
需求：实现从父级内容区最左侧开始排列，后面的元素都有相同的间距<div class="fa"> <ul> <li>01</li> <li>02</li> <li>03</li> <li>04</li> <li>05</li>
2020-11-15 23:16:25
257
原创 HTML--盒模型01(文字溢出处理+伪元素妙用)
一、什么是盒模型任何元素在页面中都会形成一个矩形区域，称为盒display属性值决定盒的类型：1.行盒： 不独占一行，不可设置宽高，margin(上下)、padding(上下)无效。2.块盒：独立成行，可设置宽高。3.行块盒：不独占一行，可设置宽高。常用于切换页面二、盒的组成部分标准盒子由内之外：content：标准盒子设置宽高的区域（蓝色区域）padding：内边距，文字到盒子边缘的距离（绿色区域）border：边框，盒子的描边（黄色区域）margin：外边距，盒
2020-11-08 23:39:55
640
原创 HTML--(table/p/a/form及表单控件元素)的特性分析
HTML某些元素的特性分析一、table元素水平居中问题table元素使用中，发现可以不给定宽度直接使用margin: auto;可使元素水平居中显示<style> table{ border: 1px solid black; margin: 0 auto; } </style><table> <tr> <td>111</td>
2020-11-06 13:13:49
200
原创 CSS--动画（太极案例）
过渡动画transition: all n1s n2s steps(n3);参数1 : 参与过渡动画的属性 all 表示所有的属性都参与过渡动画参数2 : 过渡动画的持续时间参数3 : 动画延迟的时间参数4 : 动画的运动曲线 默认是缓动 linear 匀速(线性变化) steps() 分步！通过和伪类选择器的配合简单使用动画动画剧本@keyframes 动画名{动画过程}1.form{动画开始状态}…to{动画结束状态}2.百分比动画！百分比代表动画时长的百分
2020-10-19 01:12:00
158
原创 H5--画布标签（svg）
svg 和 canvas的区别工具canvassvg绘图类型位图矢量图缩放失真不失真颜色细节丰富单调运用领域图片、游戏图标、地图、统计图内容JS绘图每个图形都是标签事件绑定只能在canvas标签上绑定非常方便svg 矢量图绘制的元素标签包含在svg内部分组标签在分组中的元素可以自动继承公共属性或样式<svg><g>有相同属性的元素</g></svg>动态创建sv
2020-10-08 23:09:33
383
原创 H5--画布标签（canvas）
前端需要用到绘图技术的地方实时的走势图统计图表验证码在线画图板HTML5游戏canvas 像素图绘制位图/像素图（2d）；默认为300*150的inline元素，使用width/height属性指定尺寸，但不要使用CSS样式指定宽高，样式上设置的宽高是将整个画布（包括画布内容）进行改变。使用：获取绘制上下文对象var ctx = 画布对象.getContext('2d');{fillStyle: “#000000”// 填充样式font: “10px sans-serif”/
2020-10-08 22:48:37
277
原创 H5--媒体标签（audio+video）
音视频标签<audio src="链接音频(mp3、wav、ogg)">浏览器不支持音频标签，则显示文字</audio><video src="链接视频(Webm、ogg、mp4)">浏览器不支持视频标签，则显示文字</video>使用音频标签提供至少两种视频格式的文件属性src：链接autoplay ：是否自动播放，设置了如果浏览器的自动播放禁止也是无效的controls ： 是否显示播放控件，不同的浏览器的控件外观不相同currentTi
2020-10-08 22:42:56
360
原创 css--IFC(内联格式化上下文)
新增元素结构标签：header 文档头部nav 导航链接footer 页脚article 文章section 文档节aside 侧边…媒体标签:audio 音频video 视频画布标签:canvas 像素图svg 矢量图其他元素：表单元素type的值：email-邮件 url-地址 number-数值 search-搜索…dataList 使用id来实现和input的连接为input框提供输入建议progress 进度条，value值0-1meter 刻度
2020-10-08 22:36:45
1694
1
原创 SVG---矢量正五角星(喜迎国庆)
绘制矢量正三角形算法图解：图形分析：1.正五角星来自正五边形，正五边形的边长相等且每个角为108度2.在运算过程中某些角度通过等腰三角形结合定角108度计算出36度3.坐标垂直形成直角三角形，可以计算出54度的角4.同样的，等腰三角形腰与第三边形成的夹角度数相同，计算差值得到18度的角补充三角函数：直角三角形内：除了直角sin某角度等于这个角度的对边长度/斜边边长；cos某角度等于这个角度的邻边长度/斜边边长；以上数学问题，若有不懂，请回炉重造。。。代码分析：<svg
2020-09-28 20:28:19
819
原创 JS--程序员必画的DOM树
DOM是什么？DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”W3C DOM 标准被分为 3 个不同的部分：核心 DOM - 针对任何结构化文档的标准模型XML DOM - 针对 XML 文档的标准模型HTML DOM - 针对 HTML 文档的标准模型什么是 HTML DOM？HTML DOM 是：HTML 的标准对象模
2020-08-24 01:51:29
1941
原创 JS 原型、原型链及相关题目
原型隐式原型：每个对象拥有一个原型对象。查看方法：对象.proto。默认情况，对象的隐式原型指向其构造函数的原型。函数原型每个函数都有一个特殊的属性叫作原型（prototype）。查看方法：函数.prototype。构造函数的prototype.construction指向构造函数本身。原型链原型链结构1.p对象的隐式原型（__proto__）等于其构造函数(Per)的 prototype；p对象可以继承Per原型（prototype）上的属性。2.构造函数（Per）的prototyp
2020-08-22 12:08:22
493
原创 JS函数递归及闭包现象
函数递归调用自身的函数称为递归函数。。函数引用自身有三种方式：1.函数名称2.函数参数（arguments）3.引用函数的范围内变量！递归出口：在某些方面，递归类似于循环。它们都多次执行同一代码，并且都需要一个条件（以避免无限循环，或者在这种情况下避免无限递归）。如果递归没有出口，代码一直执行，永远没有结果。因此在写递归函数的时候建议先找到递归的出口再做运算。案例:兔子问题函数闭包...
2020-08-17 00:58:43
357
原创 JavaScript 回调函数面试题
回调函数直接上题：function fun(n, o) { console.log(o); return { fun: function(m) { return fun(m, n); } }; } var a = fun(0); a.fun(1); a.fun
2020-08-15 17:38:11
798
原创 JS函数预编译及函数作用域
JS函数预编译及函数作用域js代码的历程：1. 语法分析（检查所有代码是否存在语法错误，若有直接报错，不执行）2. 预编译（发生在代码执行的前一刻）3. 解释执行（解释一句执行一句）函数预编译创建执行期上下文[Activation Object/ 作用域对象]（AO{}）找形参和变量声明，将形参和变量作为AO对象属性名（变量声明提前）将形参和实参统一函数声明提前，赋值函数体注意事项：变量/函数声明作为AO对象的属性名的时候，如果遇到同名会覆盖案例：函数作用域fun
2020-08-10 03:04:38
171
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人