- 博客(28)
- 收藏
- 关注
RSS订阅原创 利用MessageChannel实现对象的深拷贝
function deepClone(obj) { return new Promise(function(resolve, reject) { var { port1, port2 } = new MessageChannel(); port1.onmessage = function(e) { resolve(e.data); }; port2...
2018-09-23 10:12:06
1188
原创 实现监听浏览器复制事件 向剪贴板添加自定义信息功能
/* 选中文本 */const text = document.querySelector('.text');const range = document.createRange(); // 创建选择对象range.selectNode(text);window.getSelection().addRange(range); // 选中window.getSelection()...
2018-09-08 19:51:06
2776
原创 css实现圆环进度条
<div id="app" class="outer"> <div class="left"></div> <div class=" right " :style="[rotateStyle, percent>50?{background:'greenyellow'}:null]"&
2018-08-23 22:51:02
1225
原创 防止XSS攻击的过滤器简单实现
function filter(xss) { var whiteList = ['h1', 'h2']; // 白名单 var translateMap = { '<': '&lt;', '>': '&gt;' }; return xss.replace(/<\/?(.*?)>/g, function(str, $1, index, origi...
2018-08-23 11:49:56
4049
原创 js实现数组降维的方法falttenMap
function flatten(arr) { return arr.reduce((prev, cur) => { return prev.concat(Array.isArray(cur) ? flatten(cur) : [cur]); }, []);}其中，array的ruduce函数的第二个参数，initialValue用作第一个调用 callb...
2018-08-22 19:03:50
393
原创 js利用Class实现面向对象思想
// 静态方法class A { constructor (){ } static bar(){ }}// 静态变量class A { constructor (){ } static bar(){ }}// 私有变量class A { constructor (){ var private = 1 this.f...
2018-08-18 12:01:18
693
转载 ES6 Class 继承 学习笔记
类的 prototype 属性和__proto__属性大多数浏览器的 ES5 实现之中，每一个对象都有__proto__属性，指向对应的构造函数的prototype属性。Class 作为构造函数的语法糖，同时有prototype属性和__proto__属性，因此同时存在两条继承链。（1）子类的__proto__属性，表示构造函数的继承，总是指向父类。（2）子类prototype属...
2018-08-18 11:59:48
203
原创 原生模仿实现Promise
class Promise { constructor(fn, params = { state: Promise.stateName.Pending }) { function resolve(props_val) { if (state == Promise.stateName.Pending) { state = Promise.stateName....
2018-08-12 18:03:28
523
原创 利用闭包实现函数防抖、函数节流
function _throttle(fn, delay) { var canRun = true; return function() { if (!canRun) { return false; } canRun = false; fn.apply(this, Array.from(arguments)); setTimeout((...
2018-08-05 23:31:01
1203
原创 利用闭包特性实现函数柯里化中的参数积累实例
function a(prev, cur) { if (this == window) { return a.bind({}, prev); } else if (typeof cur == 'number') { return a.bind({}, prev + cur); } else { return prev; }}//console.log(...
2018-07-22 19:15:35
238
原创 利用compositionstart/end事件监听输入法事件
var flag = false;document.querySelector('input').oninput = function() { setTimeout(() => { if (!flag) console.log(this.value); }, 0);};document.querySelector('input').onkeyup = function(...
2018-07-15 17:00:55
6061
原创 利用ES6的iterator接口生成自定义可遍历对象
class iterator { constructor() { this.data = [1, 2, 3, 4, 5, 6, 7, 8, 9]; } [Symbol.iterator]() { // 初始化 this.index = this.data.length - 1; return this; } next() { // 迭代需要返回元素值v...
2018-07-14 17:24:53
519
原创 三七互娱前端笔试题 利用Promise实现会休息会工作的英雄
class Hero{ constructor(name){ this.name = name; this.sum = 0; this.promise = [Promise.resolve()]; } sleep(time){ this.promise.push( this.promis...
2018-04-28 00:10:36
1585
原创 利用闭包造成内存泄漏的方法
var funs = [];function fun0(){ funs.push(getVar()); //外部变量持有闭包的引用}setInterval(fun0, 1000);function getVar(){ var arr = new Array(1000000); return function(){ console.log(arr...
2018-04-27 10:13:52
1099
原创 ES6学习笔记《一》
1.let命令：块级作用域变量个人认为以下两段代码等价const fun = Array();for(let i = 0; i < 10; i++){ fun.push( function(){ console.log(i); } );}for(var i = 0; i < 10; i++){ (function(i)...
2018-04-23 22:44:25
318
原创 js在严格模式下编写松散耦合的递归函数
严格模式下，arguments.callee和arguments.callee.caller都不可访问，如何编写松散耦合的递归函数？下面以阶乘函数为例："use strict";var fun = function innerFun(num){//内部函数 if(num === 0){ return 1; } return num * innerFun(n...
2018-04-22 18:58:19
505
原创 利用setTimeout和clearTimeout封装setInterval和clearInterval
function SetInterval(fun, sec){ function recFun(){ fun(); this.id = setTimeout(recFun, sec);//将任务的标识符记录在timer对象中 } this.stop = function(){ clearTimeout(this.id);//取...
2018-04-22 15:31:02
769
原创 js中对象的浅拷贝和深拷贝
var map = new Map();function deepClone(obj) { if (map.get(obj)) return map.get(obj); // 防止环引用 var ret = {}; map.set(obj, ret); Object.setPrototypeOf(ret, Object.getPrototypeOf(obj)); for ...
2018-04-19 14:06:32
295
原创 Vue.js 学习笔记
18.4.15 开始学习vue.js 以下是学习笔记1.v-if与v-show的区别？在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部...
2018-04-18 22:51:31
590
原创 腾讯一面反思
以下是我遇到的卡壳的问题1.post和get的区别，这个是很常见的问题，然后讨论到get方法的长度限制，这里就有些模模糊糊了，大约记得是不同浏览器有不同表现，大约4K左右，下面就是对各种浏览器和服务器的最大处理能力做一些说明.IEIE浏览器（Microsoft Internet Explorer） 对url长度限制是2083（2K+53），超过这个限制，则自动截断（若是form提交则提交按钮不起作...
2018-04-14 16:56:24
328
原创 经典三列流式布局实现以及页脚沉底的实现
HTML结构：<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html"> <link rel="stylesheet" media="screen" href="test.css&
2018-04-08 13:52:57
516
原创 CSS中，display属性、行高属性line-height以及垂直对齐方式vertical-align属性详细探讨
在CSS中，line-height属性往往是我们调整行距的方法，今天这篇文章来尝试探讨这一属性，首先了解几个概念：1. 块级元素与行内元素： HTML元素分为两大类，块级元素（包括p、h1、div等元素）以及行内元素（又称短语元素，包括strong、span等元素）2. 行框： 在我个人的理解中，在正常的文档流情况下，从上到下渲染的水平单元就是行框。而行框内部是从左到右进行渲染的，行框...
2018-04-04 11:58:53
1436
原创 CSS中:before和:after伪元素的content属性以及counter属性使用
:before和:after是CSS中定义的伪元素,配合content属性，可以在元素的前面或后面插入新元素,content即插入元素的值,这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。简单的实例如下：在每个 <p> 元素的内容之前插入新内容：p:bef...
2018-03-31 22:41:56
4935
原创 实现有时间限制的localStorage封装对象
localStorage对象是HTML5规范中保存在客户端的存储数据，有了它我们可以在H5页面中缓存来自服务器端的数据在本地，从而减少了对服务器的数据请求负担，并使得离线H5应用成为可能。在我们实际应用时，往往需要考虑到本地缓存是否过期的问题，如果缓存已经过期需要重新向服务器请求更新缓存，因此有必要实现带有时间限制的localStorage封装对象，如下："use strict"/*实现带有时间...
2018-03-29 16:15:43
856
原创 实现Comet(服务器推送)的两种方式：长轮询和http流
Comet 是一种高级的Ajax技术，实现了服务器向页面实时推送数据的技术，应用场景有体育比赛比分和股票报价等。实现Comet有两种方式：长轮询与http流长轮询是短轮询的翻版，短轮询的方式是：页面定时向服务器发送请求，看有没有更新的数据。而长轮询的方式是，页面向服务器发起一个请求，服务器一直保持tcp连接打开，知道有数据可发送。发送完数据后，页面关闭该连接，随即又发起一个新的服务器请求，在这一过...
2018-03-28 11:21:34
13881
原创 js中如何判断某对象属于函数？
也许你会想到typeof 操作符，但似乎在某些浏览器可能存在兼容性问题小编今天get到一种新姿势：Object.propotype.toString.call(object) === "[object Function]"调用object的原型方法，就能保证没有兼容问题啦！...
2018-03-25 15:43:03
3120
原创 自罚手抄十大排序算法
前几天小白接了一个小公司的电面，面试官上来就问你数据结构和算法怎么样啊，我说emmm还行，会基本的栈，队列的操作，会写基本的排序算法，他就说那你来讲一下快排吧，我就答emmm快排是用递归实现的，先要找到序列的枢轴点，然后左右递归，然后他追问怎么找呢，然后我就emmmmmm了，所以今天自罚手抄十大排序算法如下："use strict"var arr = [];var length = 1...
2018-03-25 13:13:58
574
原创 javasrcipt DOM中，事件mouseenter与mouseover、mouseleave与mouseout的区别
前端小白的第一篇博客~整理一下javasrcipt DOM中，事件mouseenter与mouseover、mouseleave与mouseout的区别。根据《javasrcipt高级程序设计》对这四个事件的个人理解如下：mouseenter： 在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到元素的后代元素上不会触发。mouseleave： 在鼠标光标从元素内部首...
2018-03-17 22:39:55
924
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人