- 博客(53)
- 收藏
- 关注
RSS订阅原创 router模式核心原理
<a href="#/menu" data-href="/menu">menu<a> <div class="targetNode"></div>history 模式class historyRouter{ constructor(){ this.currentPath = '/'; this.router = {}; } init(){ // 首次加载 w..
2020-12-20 18:57:57
316
原创 原生 js 实现弹窗
这里只实现了一些简单主要的功能，弹窗中的详细功能可以根据不同业务实现css： .mask-wrapper{ position: fixed; background: rgba(0,0,0, 0.5); z-index: 100001; width: 100%; height: 100%; top: 0; left: 0;
2020-11-01 15:31:29
3022
原创 简单好用的js 压缩工具
1.npm 全局安装： npm i uglify-js -g2.新建一个目标文件test.js3.uglifyjs 源文件 -c -m -o test.js
2020-10-31 14:15:17
276
原创 查看页面布局及层级小技巧
新建一个书签，然后把一下代码保存到内容中:利用outline属性代替borderjavascript:()=>{ var eles = document.body.getElementsByTagName("*")； var item = []; for (let i = 0; i < eles.length; i++) { if(eles[i].innerHTML.indexOf("html*{outline:1px solid red}") != -1
2020-10-13 23:46:42
419
原创 判断一个对象是不是数组
1.判断一个构造函数是否为数组类型let obj = [] obj.constructor == Array; //true console.log(obj instanceof Array)2.instanceof obj instanceof Array//缺点：继承自数组 或者原型上有数组的原型也会认为是数组 function test(){}test.prototype = [];let T = new test();T instanceof Array //true3.Object.
2020-10-13 23:35:45
250
原创 typescrip基础入门
node 环境配置安装npm i -g typescript （自带编译工具tsc）ts 中的基本类型number:数字-string：字符串-boolean:布尔-Array：数组let num:Array<number>//数字类型的数组 约束 或者 let num:number[]-object：对象-null 和 undefined 是所有类型的子类型 可以通过tsconfig进行配置 进行严格判断let obj:object = {}#其他常用类型-
2020-10-11 16:39:41
131
原创 前后端分离 用nginx反向代理联调
//nginx.conf 中 server 中配置 server { liseten 3000; #nginx 服务端口； server_name localhost; location / { root html/url #网站根目录 index index.html index.html #默认首页文件 ...
2020-10-01 15:26:17
138
原创 文件下载携带token鉴权处理
blobDownload(src){ let url = src; let xhr = new XMLHttpRequest(); xhr.open("GET",url,true);//可使用post //此处可设置相应请求头 token xhr.setRequestHeader("token",token) xhr.responseType = "blob";//返回类型； //请求完成处理函数 .
2020-09-28 23:41:51
2550
2
原创 原生ajax 请求
const request = { ajax(options){ options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || 'json'; options.async = options.async === undefined?true:options.asyn
2020-09-24 23:29:04
70
原创 css 小技巧
1.css hover 显示边框导致整个盒子的尺寸变化可以使用 outline: 1px solid #ff0036;2. 文本溢出处理、//单行.single { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}//多行.more { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis;
2020-09-23 23:39:57
179
原创 滚动条样式调整
1.滚动条设置<style type="text/css"> /* 设置滚动条的样式 */ ::-webkit-scrollbar { width:8px; background-color: #ededed; } /* 滚动槽 */ ::-webkit-scrollbar-track { border-radius:10px; } /* 滚动条滑块 */
2020-09-23 23:37:41
407
原创 webpak react 工程搭建
##1.前置条件：已安装webpack项目中官方的打包与实际不相匹配，所以重新构建了项目1）npm init 创建package.json 文件。（name 需小写）2）创建webpackage.config.js// 由于 webpack 是基于Node进行构建的，所有，webpack的配置文件中，任何合法的Node代码都是支持的var path = require('path')var htmlWebpackPlugin = require('html-webpack-plugin')/
2020-09-20 21:39:15
136
原创 弹窗drag 拖拽
let drag = { init(Dom) { this.targetDom = Dom this.dragDrop(); }, dragDrop() { this.targetDom.onmousedown = (e) => { console.log(e) ...
2020-09-20 14:10:11
72
原创 fetch 踩坑
fetch 在低版本谷歌浏览器使用调用后台接口302fetch 默认不携带cookie ，应该配置参数 credentials：same-origin，详细各种坑：https://www.cnblogs.com/wonyun/p/fetch_polyfill_timeout_jsonp_cookie_progress.html
2020-09-16 23:59:26
201
原创 好用的时间格式化函数
Date.prototype.format = function (fmt){ var o = { "M+":this.getMonth()+1, "d+":this.getDate(), "h+":this.getHours(), "m+":this.getMinutes(), 's+':this.getSecon...
2020-09-16 23:52:10
393
原创 了解 node cookie 状态保持
cookie在浏览器端，cookie实际上是一些小文件，可以持久的保存一些数据，通常用它来保存token浏览器可以保存很多的cookie，每个cookie包含下面的信息：key：键value：值domain：域，表达这个cookie是属于哪个网站的，比如duyi.ke.qq.com，表示这个cookie是属于duyi.ke.qq.com这个网站的path：路径，表达这个cookie是属于该网站的哪个基路径的。比如/news，表示这个cookie属于/news这个路径的。secure：是否使用
2020-09-14 23:47:39
141
原创 函数防抖和节流
防抖 let time= null; document.onmousemove = function (ev) { if (time) { clearTimeout(time) } time = setTimeout(() => { // fn(ev) }, 500) ) };节流 let previous= 0; document.onmousemove = function (ev) { let no
2020-09-14 23:45:57
46
原创 node 中间件 了解
express中间件模型在某些场景中，对请求的处理可能会经过多个步骤，比如：日志记录、安全验证、权限验证、业务处理，为了分割这些不同的处理，express提供了中间件的模型app.use(function(req, res, next){ console.log("中间件1的处理"); next(); //交给下一个匹配的中间件})// 注意：use中的路径匹配的是基路径，下面的处理函数可以匹配所有以 /news 开头的路径app.use("/news", function(req, re
2020-09-14 00:15:22
99
原创 窗口拖拽resize
class DragResize { constructor(obj) { // this.rightBottom = obj.rightBottom || true; this.currentDrag = obj.currentDrag; this.isDown = false; } init() { this.handerMove(); this.handerMoveDrag(); this.cancle() } hande.
2020-09-14 00:13:12
96
原创 拖拽事件API
设置元素属性 draggable=true 即可让元素能够拖放拖放源：被拖放的元素拖放目标：被拖放的元素到达的目标元素拖放源事件：dragstart：拖放源开始被拖放时触发drag：拖放源被拖放的过程中触发dragend：拖放源在拖放结束时触发拖放目标事件：dragenter：拖放源进入元素边界时触发dragleave：拖放源离开元素边界时触发dragover：拖放源在元素内部时不断被触发drop：拖放源被释放到元素内部时触发dataTransfer是拖放事件对象中的一个属性
2020-09-13 21:20:00
159
原创 使用express 创建web服务器
##http协议简单了解例如：`http://localhost:9527/news?paprotocal：httphostname: localhostport: 9527，如果没有写端口号，默认为80path: /newsquery: ?page=1&limit=10，表示有两个信息传递过来{page:1, limit:10}hash：2，hash一般用作锚链接，服务器一般不需要这个信息如果url地址成功的找到了服务器，客户端会组装一个特别的消息格式发送给服务器，称之为请求
2020-09-12 22:37:52
512
原创 判断有滚动条时，元素是否在视口内
// currentDOM 目标元素 parentDom 父元素 function calScroll(currentDOM,parentDom){ let bottom = parentDom.scrollTop + parentDom.clientHeight; console.log(bottom,parentDom.scrollTop,parentDom.clientHeight)//父元素高度 滚动距离 可视高度 ..
2020-09-12 22:29:49
246
原创 css实现漂亮switch 开关
<style> .switch-wrapper{ display: block; right: 68px; border-radius: 2px; text-align: center; color: #36383c; cursor: pointer; padding: 4px 8px; ..
2020-09-11 00:12:16
324
原创 node 关于 mongoose 使用
安装mongoosenpm i mongoose创建连接var mongoose = require("mongoose");mongoose.set("useCreateIndex", true); // 新版本对索引的处理方式有所变化，无此代码会有警告mongoose.connect("mongodb://localhost/test", { useNewUrlParser: true, // 新版本对连接字符串的解析有更好的支持，无此代码会有警告 useUnifiedTopolog
2020-09-10 23:45:10
147
原创 node 关于common.js 模块化
common.js 伪代码//缓存 let cache = { "D:node\a.js":34, };function require(modulePath){ //获取模块绝对路径 let moduleId = getModuleId(modulePath); if (cache[moduleId]) { // 是否有缓存 return cache[moduleId]; }// 该函数用于执行一个模块 function execM
2020-09-09 23:26:32
76
原创 echarts 数据过多添加缩放datazoom 配置
##简单配置 dataZoom: [{ type: 'slider', show: true, startValue: 0, endValue: 5, height: '15', bottom: '3%', zoomLock: true }],##type：
2020-08-21 00:42:03
1646
原创 js 原生dom操作方法集合 想要的都在这里
一.遍历节点树（非方法类操作）1.parentNode 获取父节点；2.childNodes 子节点们 类数组； 包括文本节点，元素节点，注释节点，属性节点；通过nodeType区分3.firstChild/lastChild 第一个子节点/最后一个子节点4.nextSibling/previousSibling 后一个兄弟节点/前一个兄弟节点二.遍历元素节点树1.parentNode 父节点；2.children 元素子节点3.childElementCount === ch
2020-08-21 00:40:32
223
原创 获取iframe里面和外面的dom
获取iframe 里面的内容**let iframe1 = document.querySelector('iframe');//let iframe1 = window.frames["iframe的name值"]let html1 = .contentWindow.document;//拿到iframe里的document获取iframe 父窗口let parentWindow = window.parent.document;//父窗口的文档...
2020-08-16 18:41:46
1139
原创 react 请求本地json文件 返回一个html
在项目中我们有时候回会去请求本地hjson文件来调试数据，最近刚入手react 做项目，请求本地json 的时候返回的值是一个html，然后再添加了相应的json请求头之后还是一样的情况，最后试了好像种方法，发现要把json文件放到静态资源文件目录下，即public 目录下就ok了。...
2020-08-16 17:56:37
815
1
原创 纯css 实现跑马灯效果
重点：使用 inline-block 获取实际文本的宽度由于p标签的宽度为父元素的 100%，如果是这样，我们很难进行下面的操作。我们首先需要拿到实际文本的宽度，这里可以借助 inline-block 的特性，做到这一点.**<style> .wrap { position: relative; width: 200px; height: 100vh; background: #d
2020-08-16 17:46:49
784
原创 js如何判断浏览器是刷新还关闭
对于ie，谷歌，360：//页面加载时只执行onload//页面刷新时，刷新之前执行onbeforeunload事件，在新页面即将替换旧页面时onunload事件，最后onload事件。//页面关闭时，先onbeforeunload事件，再onunload事件。对于火狐：//页面刷新时，只执行onunload；页面关闭时，只执行onbeforeunload事件刷新的时候先onbeforeunload，然后取服务端请求数据，在新页面即将替换旧页面时onunload事件，而页面关闭时，先onbefo
2020-08-10 23:47:43
970
1
原创 图片上传base64，blob，image间那点事
文件对象转base64<input type="file" onchange="change(event)"> <script> //转化为base64 字符串 function file2DataUrl(file, callback) { var reader = new FileReader(); reader.onload = function () { callback(reader.result);
2020-08-10 00:29:28
515
原创 phaser 基本入门使用
初始化项目npm init -y安装webpacknpm i webpack@next -D //yarn add webpack@next安装webpack clinpm i webpack-cli@next -D //yarn add webpack-cli@next配置 “dev”: “webpack --mode development”安装phasernpm i phaser -D //yarn add phaser安装babel-loadnpm i @
2020-08-08 23:40:13
932
原创 js对象深克隆
对象深度克隆// function myclone(origin,target){ if(!origin || origin instanceof Array ){ return } target = target || {}; for (const prop in origin) { if (!Object.hasOwnProperty(..
2020-08-07 00:28:51
74
原创 常见的几种三栏布局
1.定位// 左右栏定宽 中间宽度自适应 <style> .left{ float: left; width: 300px; height: 300px; background-color: red; } .right{ float: right; width: 300px;
2020-08-07 00:27:21
161
原创 简单了解二叉树diff算法
/** * 得到两棵树的差异 * @param {*} originRoot * @param {*} newRoot */function diff(originRoot, newRoot) { var results = []; //记录所有的差异 if (!originRoot && !newRoot) { return [];//两个结点没东西，无差异 } else if (!originRoot &&
2020-08-04 23:57:44
599
原创 数据结构之图结构
图结构中，一个结点可以链接到任意结点，所有结点链接而成的结构，即为图结构图结构中的链接可以是有向的，也可以是无向的（双向链接），本文仅讨论双向链接树结构是一种特殊的图结构图结构没有根，可以有环，但是在一个图结构中，不能存在两个或以上的孤立结点可以使用图中任何一个结点表示整个图结构图结构是一种常见的数据结构，例如网络爬虫抓取的网页就是一种典型的图结构图结构的代码可表示为：function Node(value){ this.value = value; this.neighbor
2020-08-04 23:54:04
315
原创 数据结构之树结构
树树是一个类似于链表的二维结构，每个节点可以指向0个或多个其他节点树具有以下特点：单根：如果一个节点A指向了另一个节点B，仅能通过A直接找到B节点，不可能通过其他节点直接找到B节点无环：节点的指向不能形成环树的术语：结点的度：某个节点的度 = 该节点子节点的数量树的度：一棵树中，最大的节点的度为该树的度结点的层：从根开始定义起，根为第1层，根的子结点为第2层，以此类推；树的高度或深度：树中结点的最大层次叶子节点：度为0的结点称为叶结点；分支节点：非叶子节点子节点、父节点：相对概
2020-08-04 00:15:51
107
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人