javaScript
文章平均质量分 55
秋天1014童话
坚持就是胜利,珍惜当下,珍惜学习的机会!!
展开
-
table数据转为excel文件下载
本文讲解如何将table数据转为excel文件下载。亲测,当table有合并行/列时,下载的excel也会对应合并。原创 2022-09-23 18:17:15 · 1062 阅读 · 1 评论 -
Promise缓存
经过业务长时间打磨,往往会沉淀诸多公用的方法和能力,比如获取用户信息,获取某场景配置信息等。在我们进行可视化搭建页面时,往往会存在多模块调用同一个公用方法的情况,比如这个模块需要进行用户信息展示,那个模块需要判断用户是否符合活动人群。如果全局没做状态管理的话,每调用一次,就会发起一次请求。在大流量的场景下,不但会提升qps,可能触发服务器调用阀值,影响用户体验,同时也很浪费服务器资源,这个时候我们就可以去做一个Promise的缓存。这也是面试经常被多形式问到的问题。...原创 2022-06-14 17:56:07 · 504 阅读 · 0 评论 -
jquery设置css样式的多种方法
设置css样式的多种方法,jquery<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> </style> </head><body> <ul> <li>兄弟多个1</li> <li原创 2017-02-07 13:44:49 · 738 阅读 · 0 评论 -
网站侧边功能导航栏--屏幕滚动效果
屏幕滚动效果:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul,ol { list-style-type: none; } * {margin:0;padding:0;}原创 2016-12-13 18:03:33 · 2329 阅读 · 1 评论 -
scroll()+client()函数封装+返回当前样式+动画多属性框架封装-兼容写法
//返回当前样式function getStyle(obj,attr){ //obj对象,attr属性名 if(obj.currentStyle){ //ie等 return obj.currentStyle[attr]; }else{ //w3c return window.getCo原创 2016-12-29 15:44:45 · 377 阅读 · 0 评论 -
鼠标与按键 事件触发顺序
事件触发顺序: 之前研究过input文本框的事件触发顺序,今天突然想起来,就做个总结。<input type="text" name="" id="txt"> <script> var txt = document.querySelector('#txt'); txt.onmousedown = function(){ console.log('onmoused原创 2017-08-05 11:56:15 · 2122 阅读 · 0 评论 -
jQuery.ready()函数仿写,与window.onload的区别
window.onload和jquery的入口函数的区别: js的window.onload是等所有资源(css,js,图片之类的文件)加载完成后,才执行。 jquery的入口函数是在html文档准备就绪(dom树加载完成后),去执行。 window.onload 事件会有覆盖现象,jquery进行了封装,不会覆盖jquery的入口函数写法: $(document).ready(f原创 2017-07-13 09:47:46 · 487 阅读 · 0 评论 -
jquery的deferred对象
var wait = function(dtd){ var dtd = $.Deferred(); //在函数内部,新建一个Deferred对象 var tasks = function(){ alert("执行完毕!"); dtd.resolve(new Date()); // 执行完成后,返回当前时间 }; setTimeout(tasks原创 2017-08-05 13:59:45 · 237 阅读 · 0 评论 -
jQuery.on() 函数深入解析
on()函数用于为指定元素的一个或多个事件绑定事件处理函数。此外,还可以额外传递给事件处理函数一些所需的数据。基本介绍 从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。 on()支持直接在目标元素上绑定事件,也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下,即使是原创 2017-07-13 10:57:55 · 382 阅读 · 0 评论 -
js多态-浅析
《JavaScript设计模式与开发实践》上,讲到js的多态,我觉得书上的例子还是挺好的,特此总结一下。 多态就是 同一个操作 作用于不同的对象上面,会产生不同的解释和不同的执行结果。或者说,给不同的对象发送同一个消息的时候,这些对象会根据这个消息分别给出不同的反馈。 主人家里养了两只动物,分别是一只鸭和一只鸡,当主人向它们出“叫”的命令时,鸭会“嘎嘎嘎”地叫,而鸡会“咯咯咯”地叫。这两只动物原创 2017-08-05 18:16:40 · 952 阅读 · 0 评论 -
vue+localStorage+收藏+解析url参数 实例解析
以商家收藏这一功能为例: 1. 首先App.vue中根据url 设置好 商家的id<script>import {urlParse} from './common/js/util.js'import Header from './components/header/Header.vue'const err_OK = 0;export default{ data(){ return原创 2017-06-17 13:03:07 · 4343 阅读 · 2 评论 -
js-封装自己的class类
封装自己的class类,对于高版本浏览器,支持document.getElementsByClassName,对于IE678,不支持的情况要进行处理。首先判断是否支持,不支持再进行如下处理。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style原创 2016-11-23 19:56:32 · 2215 阅读 · 0 评论 -
你真的了解javascript中的null和undefined吗
知乎:https://www.zhihu.com/question/31442029。也是不错的文章 原 你真的了解javascript中的null和undefined吗转载 2016-11-17 19:37:05 · 350 阅读 · 0 评论 -
requestAnimationFrame--用法及轮播动画
requestAnimationFrame ,字面含义是请求动画帧。从API命名来看,和动画有着密切的关系。其用法跟setTimeout差不多,与setTimeout相比,最大的优势是 由浏览器来决定函数的执行时机 。 形象一点的解释就是:告诉浏览器说 “我这里有一个函数要执行,你有空了帮忙执行一下”,然后浏览器相对比较空闲的时候就给执行了。用法一:动画raf api本身的设计就是用来解决js动画原创 2017-08-08 20:09:10 · 1489 阅读 · 0 评论 -
js-时钟效果+当前日期的前一天后一天表示
时钟效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .clock{ width: 600px; height: 600px; margin:0原创 2016-11-25 20:59:06 · 512 阅读 · 0 评论 -
jquery-源码分析
1、jQuery.typetype: function( obj ) { return obj == null ? String( obj ) : class2type[ toString.call(obj) ] || "object"; },//其中class2type:jQuery.each("Boolean Numbe原创 2017-08-10 20:31:19 · 248 阅读 · 0 评论 -
getComputedStyle方法与currentStyle属性获取元素样式
1、getComputedStylegetComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值(计算之后的最终结果,如2em计算后的结果。此外,即使没有CSS代码,也会把默认的祖宗八代都显示出来)。返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),只读。/* 语法 */var style = window.getComputedSty原创 2017-08-10 17:43:14 · 1257 阅读 · 0 评论 -
本地存储封装-localStorage,sessionStorage,userData
h5新增了本地存储localStorage,sessionStorage。IE6,7需要使用userData进行兼容。封装代码如下:var localData = { hname:location.hostname?location.hostname:'localStatus', isLocalStorage:window.localStorage?true:fals原创 2017-08-07 12:07:34 · 1028 阅读 · 0 评论 -
函数调用模式4种方式详解
函数调用模式: 函数模式特征:就是一个简单的函数调用,函数名前面没有任何的引导内容function foo(){}var func = function(){}foo();func();(function(){})();this在函数模式中的含义:this在函数中表示全原创 2017-03-15 22:17:55 · 5298 阅读 · 1 评论 -
原型链-柯里化-记忆缓存
1、 使用原生js实现–原型链使用 (10).add(10).reduce(2).add(10) //28Number.prototype.add = function(num) { return this + num; } Number.prototype.reduce = function(num) { return this - num;原创 2017-03-03 16:34:57 · 490 阅读 · 0 评论 -
canvas-toDataURL()将图片转为dataURL(base64)
一个应用场景:由于某些特殊原因从服务端请求到图片路径,要求通过该路径获取对应图片的 base64 dataURL.一个完整的 dataURI 应该是这样的:data:[<mediatype>][;base64],<data>其中mediatype声明了文件类型,遵循MIME规则,如“image/png”、“text/plain”;之后是编码类型,这里我们只涉及 base64;紧接着就是文件编码后的原创 2017-08-18 19:34:55 · 9417 阅读 · 0 评论 -
文件系统API
对于表单里的input:可以直接通过name找到,document.form[0].input_file主要代码:var inputFile = document.forms[0].input_file;var files = inputFile.files; //获取文件列表files[i].namefiles[i].lastModifiedDate.toLocaleDateString()原创 2017-08-19 16:31:41 · 394 阅读 · 0 评论 -
面向对象思想-封装拖拽对象
1、如何让一个DOM元素动起来我们常常会通过修改元素的top,left,translate来其的位置发生改变。修改元素的left,top值,但会引起页面重绘,而transform不会,所以要优先使用transform。2、如何获取当前浏览器支持的transform兼容写法function getTransform() { var transform = '',原创 2017-08-12 10:48:00 · 323 阅读 · 0 评论 -
Object你真的知道它吗
Object.defineProperty let obj = { a: 1, b: 2 }; Object.prototype.c = 3; Object.defineProperty(obj, 'd', { enumerable: false }); for (let key in obj) {原创 2017-08-27 00:24:33 · 255 阅读 · 0 评论 -
js-基本数据类型-你不知道的趣味题
趣味1:原生js实现字符串转为数组,反转数组/*写个js函数func(str),传参str为一个字符串,实现把这个字符串语句中的单词(空格隔开的)次序逆序。比如把 I am a coder变成 coder a am I,不允许使用reverse,join,substr,split*/ var str = "I am a coder"; console.log(getStr(str)原创 2017-03-07 14:53:17 · 1363 阅读 · 1 评论 -
js变量声明提升
cache缓存 作用:存储常用数据,提供使用,提升性能 原理:使用对象,以键值对形式存储;使用数组存储键,键有顺序,超出缓存容量,则删除最早进入缓存的一个(即数组第一个);使用闭包封装函数 function createCache() { var keys = []; function cache( key, value ) { // 使用(key + "原创 2017-03-15 21:06:51 · 566 阅读 · 0 评论 -
function闭包、定时器剖析
一、function小知识点: 明确闭包,js解析机制,变量声明提升(如希望见到详细例题,可参考有趣味的js),函数的作用,作用域<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>function</title> <style> </style> </head><b原创 2017-03-03 11:09:03 · 2493 阅读 · 0 评论 -
不错的链接--积累ing
http2:http://www.jianshu.com/p/52d86558ca57 https://segmentfault.com/a/1190000009280206安全:http://www.jianshu.com/p/0e9a0d460f64 js防http劫持与Xss:http://url.cn/5ZLbRIS内存泄漏、垃圾回收:http://blog原创 2017-07-21 18:26:29 · 291 阅读 · 0 评论 -
js-工具类处理函数
一、 js-时间处理函数 项目需要,会用到很多时间处理函数,总结至此。有未提及的相关工具类方法或者有更高效的方法,希望大家留言补充。时间格式化 //很给力的函数,几乎可以覆盖所有日期格式输出 //时间格式化 function formatDate(date, fmt) { //在es6下导出一个函数 //对...原创 2018-06-29 23:24:24 · 1236 阅读 · 0 评论 -
React常用知识点
1、jsonResult - json展示import { Tabs, Form, Input, Alert, Button, Spin } from 'antd';import JSONResult from 'components/JSONResult';class TestTab extends React.Component { ... render(){ const {...原创 2018-10-15 10:55:33 · 462 阅读 · 0 评论 -
js倒计时--天、时、分、秒, 到时间后自动停止
js倒计时–天、时、分、秒, 到时间后自动停止:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-原创 2018-10-31 15:58:44 · 3666 阅读 · 1 评论 -
Cookie 在前端中的实践
对于很多不了解后端的前端er来说,很多涉及后端的知识点都是一道坎,因为不懂后端,所以很多知识都只能在文章上得到,却很少有机会实践,导致很多这块的知识点都是模模糊糊的。在这里,推荐大家去学习一下 Node.js,尝试一下就知道,用 Node.js 搭建一个 mock 服务器是多么简单的一件事情,新世界的大门就此敞开。今天看到一篇很好的博客,特此记录下。待使用nodejs测试下。Cookie 在前端中的转载 2017-10-10 09:58:07 · 294 阅读 · 0 评论 -
哇塞,不错的js--前端中的小算法
颜色字符串转换 将 rgb 颜色字符串转换为十六进制的形式,如 rgb(255, 255, 255) 转为 #ffffff 1. rgb 中每个 , 后面的空格数量不固定 2. 十六进制表达式使用六位小写字母 3. 如果输入不符合 rgb 格式,返回原始输入 示例1 输入: ‘rgb(255, 255, 255)’ 输出: #fffffffunction r原创 2017-07-15 21:12:07 · 442 阅读 · 0 评论 -
toString()和valueOf()
之前再做数组的随机排序问题,潜意识想到的第一个方法就是 产生随机下标排序。曾经网上一直流传着这样一个写法:function shuffle(arr) { arr.sort(function () { return Math.random() - 0.5; }); }之前一直觉得这种方法简单,但是后来总结时,再思考, 每个元素仍然有很大机率在它原来的位置附近出现,他好像原创 2017-08-26 14:15:08 · 387 阅读 · 0 评论 -
选中文字,弹出层; 点击空白处,弹出层隐藏--判断触发源,判断用户选择内容
选中文字,弹出层; 点击空白处,弹出层隐藏知识点:判断触发源,判断用户选择内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin:原创 2016-12-15 17:10:45 · 1435 阅读 · 0 评论 -
js中一系列的兼容---惰性载入优化
一直都是在用正则表达式,没有好好的汇总过。正好,遇到很多小算法,可以作为案例补充。正则表达式的定义:正则表达式是由普通字符和特殊字符(也叫元字符或限定符)组成的文字模板。元字符:. 匹配除换行符(\n\r)以外的任意字符\d 匹配数字, 等价于字符组[0-9]\w 匹配字母, 数字, 下划线或汉字\s 匹配任意的空白符(包括制表符,空格,换行等)\b 匹配单词开始或结束的位置^原创 2017-08-23 13:37:49 · 317 阅读 · 0 评论 -
谈js的浅复制和深复制
1.浅复制VS深复制本文中的复制也可以称为拷贝,在本文中认为复制和拷贝是相同的意思。另外,本文只讨论js中复杂数据类型的复制问题(Object,Array等),不讨论基本数据类型(null,undefined,string,number和boolean),这些类型的值本身就存储在栈内存中(string类型的实际值还是存储在堆内存中的,但是js把string当做基本类型来处理 ),不存在引用值的情况。原创 2017-07-12 10:02:44 · 347 阅读 · 0 评论 -
promise原理浅析
Promise超神超简单总结: 之前总感觉promise很神秘,今天仔细读了阮一峰大神的es6,也查询了下相关的promise原理,终于明白了promise怎么这么6.简介: Promise 对象用于延迟(deferred) 计算和异步(asynchronous )计算.一个Promise对象代表着一个还未完成,但预期将来会完成的操作。Promise 对象是一个返回值的代理,这个返回值在pro原创 2017-08-08 15:38:24 · 4188 阅读 · 1 评论 -
跨浏览器的事件侦听器和事件对象
为跨浏览器实现添加事件侦听器和跨浏览器事件对象的使用方法做了下总结,并把这些方法打包。<高级程序设计>里面建议使用此封装方法,可跨浏览器实现事件。我下篇博客里,有介绍惰性载入方式,判断分支只需一次。 惰性载入 var EventUtil = { // 添加侦听事件 addEventListener: function(element, type, handler) {原创 2017-08-24 18:40:50 · 467 阅读 · 0 评论 -
一个DOM元素绑定多个事件时,先执行冒泡还是捕获
问题引入:一个DOM元素绑定两个事件,一个冒泡,一个捕获,则事件会执行多少次,执行顺序如何。这次不卖关思了,直接给你个答案。不理解你就继续往下看。 绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件。所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 。addEventLi原创 2017-08-27 01:22:41 · 9479 阅读 · 2 评论