javascript
文章平均质量分 51
javascript相关技能介绍
华洛
野生程序员,终身学习者。
展开
-
来认识一下前端各种编码、转义格式都长啥样
前端编码与转义格式的样式原创 2023-02-08 13:48:18 · 935 阅读 · 1 评论 -
前端mock数据 - mockjs
mockjs简介Mock.js is a simulation data generator to help the front-end to develop and prototype separate from the back-end progress and reduce some monotony particularly while writing automated tests.Mock.js 是一个模拟数据生成器,帮助前端开发和原型与后端进程分离,减少一些单调,特别是在编写自动化测试时原创 2021-10-13 20:32:21 · 577 阅读 · 0 评论 -
Event Loop - 事件循环详解
事件循环事件循环就是 JavaScript在 引擎等待任务、执行任务、进入休眠状态等待更多任务这几个状态之间转换的无限循环。JavaScript 引擎大多数时候不执行任何操作,它仅在脚本/处理程序/事件激活时执行例如:当外部脚本 <script src="..."> 加载完成时,任务就是执行它。当用户移动鼠标时,任务就是派生出 mousemove 事件和执行处理程序。当安排的(scheduled)setTimeout 时间到达时,任务就是执行其回调。等等…出现任务 —— 引擎原创 2021-09-22 11:18:09 · 232 阅读 · 0 评论 -
typescript实现个HashTable
type Entry = { key: string, value: any}type ListNode = { value: Entry, next?: ListNode}class HashTable { private table: Array<ListNode | undefined> = [] private size = 8 //! 哈希函数 - 计算哈希值必须是一个稳定的函数,同一个值计算出同一个结果 //! 哈希函数 - 可以写多个,.原创 2021-09-08 13:32:28 · 478 阅读 · 0 评论 -
javascript模块化的前世今生
模块化前世今生从前… … … …我们定义各种各样的全局函数 function module(){} function module1(){}↓使用命名空间 var module={ a:2, b:1, }↓自执行函数(闭包) (function (){ //自执行函数 利用闭包 var a =1 ; window.module = { a } })()↓自执行函数添加参数(添加依赖) (function ($){原创 2021-08-25 16:27:19 · 183 阅读 · 0 评论 -
使用队列实现一个异步任务逐一执行的功能
使用队列实现一个异步任务逐一执行的功能 // 简单搞一个队列 class Queue { constructor() { this.arr = []; this.head = 0; this.tail = 0; } push(x) { this.arr.push(x); this.tail++; } top() { return this.arr[this.head]; } pop()原创 2021-05-14 11:21:07 · 374 阅读 · 0 评论 -
手动实现一个Array.reduce 就可以深入理解Array.reduce
手动实现一个Array.reduce 就可以深入理解Array.reduceArray.prototype.myReduce = function(fn,init){ let arr = this; let curent = init??arr[0]; let i = init!=undefined?0:1; for(;i<arr.length;i++){ curent = fn(curent,arr[i]) } return原创 2021-05-12 09:36:54 · 164 阅读 · 0 评论 -
任务队列(Event Loop)执行顺序示例
setTimeout(() => alert("timeout"));Promise.resolve() .then(() => alert("promise")); queueMicrotask(()=>alert("microtask"));alert("code");上面的代码 依次执行为 code => microtask => promise => timeout解释一下1. code 首先显示,因为它是常规的同步调用。2. mic原创 2021-05-08 14:29:47 · 465 阅读 · 0 评论 -
简单搞个proxy 实现一下数组的负数下标使用
简单搞个proxy 实现一下数组的负数下标使用let arr = new Proxy([1,2,3,4,5],{ get(target,i){ i = (Number(i)+5)%5 return target[i] }})//测试用例arr[-1] // ⇒ 5原创 2021-05-07 20:34:18 · 188 阅读 · 0 评论 -
说一些你可能不知道的javascript
以下内容摘录自犀牛书第七版第十五章-浏览器中的javascript。详情请查阅MDNscript标签加 async 与 defer 的脚本执行顺序 (此处特同步的代码情况下的顺序)defer在document监听的DOMContentLoaded 事件触发前执行async在document监听的DOMContentLoaded 事件触发后执行 window.onload事件前执行DOMContentLoaded 与 onloaddocument上监听DOMContentLoaded事件,.原创 2021-05-04 18:31:13 · 122 阅读 · 0 评论 -
history对象中replaceState详解
忙呀忙原创 2020-05-21 15:26:08 · 12068 阅读 · 0 评论 -
ES6的七个技巧
Hack #1 交换元素利用数组解构来实现值的互换let a = 'world', b = 'hello'[a, b] = [b, a]console.log(a) // -> helloconsole.log(b) // -> worldHack #2 调试我们经常使用console.log()来进行调试,试试console.table()也无妨。const a = 5原创 2018-01-17 16:44:08 · 299 阅读 · 0 评论 -
js 判断当前鼠标在哪个元素上
var el = window.document.body;//声明一个变量,默认值为bodywindow.document.body.onmouseover = function(event){ el = event.target;//鼠标每经过一个元素,就把该元素赋值给变量el console.log('当前鼠标在', el, '元素上');//在控制台中打印该变量原创 2018-02-01 11:48:43 · 16700 阅读 · 0 评论 -
JS获取/设置iframe内对象元素、文档的几种方法
JS获取/设置iframe内对象元素、文档的几种方法 1、IE专用(通过frames索引形象定位):复制代码代码如下:document.frames[i].document.getElementById('元素的ID');2、IE专用(通过iframe名称形象定位):复制代码代码如下:document.fram转载 2018-01-08 09:16:40 · 2429 阅读 · 0 评论 -
JS中height、clientHeight、scrollHeight、offsetHeight区别
我们来实现test中的onclick事件 function justAtest() { var test= document.getElementById("test"); var test2=document.getElementById("test2") var test3=document.getElementB转载 2018-01-06 09:30:46 · 21451 阅读 · 1 评论 -
原生JS创建DIV.
Javascript代码:[javascript] view plain copyfunction create(){ //创建一个div var div = document.createElement("div"); //为div创建属性class = "test" var原创 2018-01-05 15:01:20 · 5984 阅读 · 0 评论 -
使用JS创建style标签
var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML="body{ background-color:blue }"; document.getElementsByTagName('head').item(0).appendChild(style);原创 2017-12-28 15:36:21 · 10487 阅读 · 0 评论 -
JS随机数的写法
function GetRandomNum(Min,Max){ var Range = Max - Min; var Rand = Math.random(); return(Min + Math.round(Rand * Range)); } var num = GetRandomNum(1,10); alert(num); v转载 2017-12-19 13:17:59 · 694 阅读 · 0 评论 -
jsonp详解
json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。同源策略首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。看起来不知道什么意思,实践一下就知道了。1.随便建两个网页转载 2017-12-01 15:53:00 · 197 阅读 · 0 评论 -
JS 制作放大镜对比图功能源码,拥有倍数可选功能
先看效果图:JS文件://$(function ($) { $.fn.blowup = function (attributes,brother,beishu) { var $element = this; var $className = $element.attr("class"); var $class1,$brother //class原创 2017-12-06 10:22:18 · 832 阅读 · 0 评论 -
JSONP 原理
我活的比原创时间长,我就是原创。一、JSONP的诞生首先,因为ajax无法跨域,然后开发者就有所思考其次,开发者发现, 标签的src属性是可以跨域的把跨域服务器写成 调用本地的函数 ,回调数据回来不就好了?json刚好被js支持(object)调用跨域服务器上动态生成的js格式文件(不管是什么类型的地址,最终生成的返回值都是一段js代码)这种原创 2017-12-01 15:47:37 · 269 阅读 · 0 评论 -
jquery选择器 之 获取父级元素、同级元素、子元素
一、获取父级元素1、 parent([expr]):获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的。[html] view plain copyul class="level-1"> li class="item-i">Ili> li class="item-ii">II原创 2017-12-20 11:19:56 · 12155 阅读 · 0 评论 -
iframe监听鼠标点击事件
需要实现的页面逻辑是: 1. 点击父窗体中按钮,显示侧边栏; 2. 点击页面其他区域(iframe)可以隐藏侧边栏先构造页面文档结构:html> body> aside id="sidebar"> aside> button>button> iframe id="my-iframe原创 2017-12-13 13:05:56 · 2995 阅读 · 0 评论 -
WEB页面实现QQ,微博,等分享链接
div style="width:640px;margin:10px auto 20px auto; padding:0 0 0 380px;overflow:hidden"> div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare" style="margin:10px 0 0 -4px"> a原创 2017-12-09 14:57:19 · 2372 阅读 · 0 评论 -
JavaScript 获取对象属性和方法
一、获取对象属性和方法Object.keys() 返回对象的可枚举属性和方法的名称数组。Object.getOwnPropertyNames() 返回的数组的所有属性(可枚举或不可枚举)直接找到给定对象。 1 // 创建一个对象的构造方法 2 function myObj(name, attr) { 3 this.name = name; 4 ...原创 2017-11-27 15:01:46 · 9037 阅读 · 0 评论 -
JavaScript控制CSS伪元素
一. 缘由:本文源于在OSC社区中,有人提问如何用jq获取伪元素。我第一想法是强大的CSS Query应该可以获取伪元素吧。然而事实上,CSS Query并不能。即我们不能通过$(“:before”)、$(dom).find(“:before”)或document.querySelector(“:before”)来获取:before伪元素。为此,我不得不重新了解伪元素(Ps转载 2017-12-13 15:37:33 · 502 阅读 · 1 评论 -
Javascript异常(exception)处理机制详解 JS、异常Error属性
在ES3之前js代码执行的过程中,一旦出现错误,整个js代码都会停止执行,这样就显的代码非常的不健壮。 在Java或C#等一些高级语言中,都提供了异常处理机制,可以处理出现的异常,而不会停止整个应用程序。 从ES3开始,js也提供了类似的异常处理机制,从而让js代码变的更健壮,及时执行的过程中出现了异常,也可以让程序具有了一部分的异常恢复能力。一、Javascr转载 2017-12-19 13:34:24 · 26438 阅读 · 4 评论 -
window.location.href的用法(动态输出跳转)
javascript中的location.href有很多种用法,主要如下。self.location.href="/url" 当前页面打开URL页面location.href="/url" 当前页面打开URL页面windows.location.href="/url" 当前页面打开URL页面,前面三个用法相同。this.location.href="/url" 当前页面打开UR原创 2017-12-14 10:03:18 · 168426 阅读 · 12 评论 -
阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别
今天来看看前端的冒泡和事件默认事件如何处理1.event.stopPropagation()方法这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开,2.event.preventDefault()方法这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会转载 2018-03-22 11:04:26 · 843 阅读 · 0 评论 -
关于setTimeout传参的问题
错误:在前面传参的话好像只接受字符串;所以这样传参会报错;function ajax(fn){ setTimeout((fn)=>{ console.log('你好') fn() },1000)};ajax(function (){ console.log('end')});正确:直接上代码,传参要用第三个参数,function ajax(fn){ setTimeout(()=>{...原创 2018-06-08 12:11:42 · 653 阅读 · 0 评论 -
JS部分数据操作函数
1.扁平化n维数组1.终极篇[1,[2,3]].flat(2) //[1,2,3][1,[2,3,[4,5]].flat(3) //[1,2,3,4,5][1[2,3,[4,5[...]].flat(Infinity) //[1,2,3,4...n]Array.flat(n)是ES10扁平数组的api,n表示维度,n值为Infinity时维度为无限大2.开始篇funct...原创 2019-03-20 17:37:05 · 281 阅读 · 0 评论 -
实现一个网页加载进度loading
loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到load的过程,我们会使用一些过渡动画来表达。最常见的比如“转圈圈”,“省略号”等等。网页loading有很多用处,比如页面的加载进度,数据的加载过程等等,数据的加载loading很好做,只需要在加载数据之前(before ajax)显示loading效果,在数据返回之后(aj...原创 2019-03-20 16:38:13 · 1361 阅读 · 0 评论 -
使用 createObjectURL 实现图片实时展示
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>checkbox css change</title><script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script&...原创 2019-03-20 13:38:59 · 1083 阅读 · 0 评论 -
JS防抖代码、节流代码
防抖:触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间;例子:当使用如下防抖代码,input输入框监听了input事件后,可以再指定时间内不触发多次input事件;function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function (...原创 2019-02-28 17:48:44 · 4257 阅读 · 0 评论 -
JS处理yyyy-mm-dd 格式时间
摘自码神博客var dt = new Date();dt.setMinutes(dt.getMinutes() - dt.getTimezoneOffset()); // 修正时区偏移var date = dt.toISOString().slice(0, -5).replace(/[T]/g, ' ');console.log(date); // => 2016-03-25 ...原创 2019-02-15 16:43:57 · 732 阅读 · 0 评论 -
VUE项目,前端生成验证码
// 前端生成验证码// 全局挂载 import GVerify from '@/assets/js/util/GVerify'// Vue.prototype.GVerify = GVerify// 组件内使用 this.verifyCode = new GVerify("你的元素ID") // 验证验证码 this.verifyCode.val...原创 2018-12-29 10:11:52 · 2465 阅读 · 0 评论 -
canvas图片压缩、上传
图片压缩功能函数function CompressImg(imgFile) { var _that = this; _that.convertBase64UrlToBlob = function (urlData, type) { var bytes = window.atob(urlData.split(',')[1]); ...原创 2018-12-28 15:25:37 · 294 阅读 · 0 评论 -
获取当前鼠标焦点
//获取当前鼠标焦点var triggerElement = document.activeElement// 获取当前鼠标焦点的label的属性triggerElement.getAttribute('label') != "访客人数"原创 2018-12-13 22:06:37 · 3827 阅读 · 0 评论 -
获取JS数据具体数据类型
let arr = [1,2,3,4]//用这个方法来获取数据的具体类型Object.prototype.toString.apply(arr) //[object Array]//用这个只能获取object,无法具体的数据类型typeof arr // object ...原创 2018-12-04 13:47:12 · 592 阅读 · 0 评论 -
平均分割数组函数
/* * 将一个数组分成几个同等长度的数组 * array[分割的原数组] * size[每个子数组的长度] */function sliceArray(array, size) { var result = []; for (var x = 0; x < Math.ceil(array.length / size); x++) { var sta...原创 2018-11-14 10:15:59 · 812 阅读 · 0 评论