javascript
十八流选手益达张
这个作者很懒,什么都没留下…
展开
-
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 · 365 阅读 · 0 评论 -
原生 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 · 3108 阅读 · 0 评论 -
简单好用的js 压缩工具
1.npm 全局安装: npm i uglify-js -g2.新建一个目标文件test.js3.uglifyjs 源文件 -c -m -o test.js原创 2020-10-31 14:15:17 · 304 阅读 · 0 评论 -
查看页面布局及层级小技巧
新建一个书签,然后把一下代码保存到内容中:利用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 · 443 阅读 · 0 评论 -
判断一个对象是不是数组
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 · 310 阅读 · 0 评论 -
文件下载携带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 · 2664 阅读 · 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 · 78 阅读 · 0 评论 -
滚动条样式调整
1.滚动条设置<style type="text/css"> /* 设置滚动条的样式 */ ::-webkit-scrollbar { width:8px; background-color: #ededed; } /* 滚动槽 */ ::-webkit-scrollbar-track { border-radius:10px; } /* 滚动条滑块 */原创 2020-09-23 23:37:41 · 465 阅读 · 0 评论 -
弹窗drag 拖拽
let drag = { init(Dom) { this.targetDom = Dom this.dragDrop(); }, dragDrop() { this.targetDom.onmousedown = (e) => { console.log(e) ...原创 2020-09-20 14:10:11 · 87 阅读 · 0 评论 -
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 · 232 阅读 · 0 评论 -
好用的时间格式化函数
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 · 487 阅读 · 0 评论 -
函数防抖和节流
防抖 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 · 55 阅读 · 0 评论 -
窗口拖拽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 · 112 阅读 · 0 评论 -
拖拽事件API
设置元素属性 draggable=true 即可让元素能够拖放拖放源:被拖放的元素拖放目标:被拖放的元素到达的目标元素拖放源事件:dragstart:拖放源开始被拖放时触发drag:拖放源被拖放的过程中触发dragend:拖放源在拖放结束时触发拖放目标事件:dragenter:拖放源进入元素边界时触发dragleave:拖放源离开元素边界时触发dragover:拖放源在元素内部时不断被触发drop:拖放源被释放到元素内部时触发dataTransfer是拖放事件对象中的一个属性原创 2020-09-13 21:20:00 · 174 阅读 · 0 评论 -
判断有滚动条时,元素是否在视口内
// 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 · 276 阅读 · 0 评论 -
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 · 246 阅读 · 0 评论 -
获取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 · 1223 阅读 · 0 评论 -
js如何判断浏览器是刷新还关闭
对于ie,谷歌,360://页面加载时只执行onload//页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后onload事件。//页面关闭时,先onbeforeunload事件,再onunload事件。对于火狐://页面刷新时,只执行onunload;页面关闭时,只执行onbeforeunload事件刷新的时候先onbeforeunload,然后取服务端请求数据,在新页面即将替换旧页面时onunload事件,而页面关闭时,先onbefo原创 2020-08-10 23:47:43 · 1020 阅读 · 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 · 552 阅读 · 0 评论 -
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 · 83 阅读 · 0 评论 -
初识angluar
##环境准备安装angular cli 版本号npm i -g @angular/cli 8.00 创建一个angular项目ng new projectangular 特性1.angualr 基本构造是NgModule。2.组件定义视图。3.组件使用服务。4.组件类的元数据用定义视图的模板相关联,模板吧ng指令与绑定标记相结合。##基本目录结构app/ 包含逻辑和数据组件的文件assets 包含要构建的图像文件和其他静态文件原创 2020-07-30 01:09:07 · 111 阅读 · 0 评论 -
js 圣杯模式继承
let fs = (()=>{ let fn = function middle(){ } return function(target,father){ fn.prototype = father.prototype; let ov= new fn(); target.prototype = ov; target.prototype.constuctor = target; //重新定义constuctor原创 2020-07-28 00:50:33 · 97 阅读 · 0 评论 -
前端应该了解数据结构基础知识
线性结构线性结构是数据结构中的一种分类,用于表示一系列的元素形成的有序集合。常见的线性结构包括:数组、链表、栈、队列数组特别注意:这里所说的数组是数据结构中的数组,和JS中的数组不一样数组是一整块连续的内存空间,它由固定数量的元素组成,数组具有以下基本特征:整个数组占用的内存空间是连续的数组中元素的数量是固定的(不可增加也不可减少),创建数组时就必须指定其长度每个元素占用的内存大小是完全一样的根据数组的基本特征,我们可以推导出数组具有以下特点:通过下标寻找对应的元素效率极高,原创 2020-07-28 00:35:08 · 114 阅读 · 0 评论 -
一文带你了解 https 协议
##http协议组成例如:`http://localhost:9527/news?paprotocal:httphostname: localhostport: 9527,如果没有写端口号,默认为80path: /newsquery: ?page=1&limit=10,表示有两个信息传递过来{page:1, limit:10}hash:2,hash一般用作锚链接,服务器一般不需要这个信息如果url地址成功的找到了服务器,客户端会组装一个特别的消息格式发送给服务器,称之为请求GE原创 2020-07-26 23:58:40 · 522 阅读 · 0 评论 -
VUE 2.X 响应式 核心实现
直接上代码 :点击传送门 https://github.com/a635273670/vue-responsive-principle原创 2020-07-26 23:55:20 · 100 阅读 · 0 评论 -
浅谈 js 事件机制
1.进程 和 线程进程:操作系统在启动一个应用程序时,会给它分配一个进程,本质上是一块独立的内存空间线程:一个应用程序在运行的过程中,可能出现很多任务(监听事件,渲染页面,网络通信,执行JS代码),每个相对独立任务,会分配到某个线程执行。线程与线程之间共享内存。2. 为什么说JS语言是一个单线程的语言浏览器执行JS的时候,只有一个线程在执行3. 为什么说JS是一个基于异步的语言当某个时机到达后,执行某一段代码4. *执行栈 call stack当JS代码开始运行时,会在执行栈中加入一原创 2020-07-26 21:01:36 · 125 阅读 · 0 评论 -
发布_订阅模式 实现
发布—订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知不多说直接上代码,详细了解请自行百度~这里就不多说了//发布-订阅模式 function Observer() { let _map = new Map(); function isFunction(fn) { if (!(fn instanceof Function)) {原创 2020-07-26 11:11:07 · 182 阅读 · 0 评论 -
一文带你了解原型链相关知识
基础知识- 所有的对象都是通过new 函数()创建的,该函数叫做构造函数1. 函数可以产生对象2. 所有对象都是靠函数产生的- 函数也是一个对象,它是通过new Function创建的- 对象赋值给变量后,变量中保存的是地址,地址指向对象所在内存原型原型的本质:对象- 所有的函数都有原型属性prototype- 默认情况下,prototype是一个Object对象prototype中默认包含一个属性:construct原创 2020-07-25 14:03:06 · 122 阅读 · 0 评论