js
曾经沧海难为水-除却巫山不是云
这个作者很懒,什么都没留下…
展开
-
ECMAScript新特性(上)
JavaScript VS ECMAScriptECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准(ES标准)的实现和扩展。JavaScript:一种直译式脚本语言,是一.原创 2020-05-10 02:08:42 · 318 阅读 · 1 评论 -
【Js】defer和async的区别
如果没有defer和async,会阻塞dom树构建,立即加载并执行脚本 造成阻塞的原因:因为加载的js可能会对dom做增删查改等操作,这些操作会对dom树产生影响,如果不阻塞,等浏览器解析完标签生成dom树后,js修改了某些节点,那么浏览器又得重新解析,然后生成dom树,性能就会比较差 如果script带有async属性,不会阻塞dom树构建,立即异步加载,加载好后立即执行 如果scri...原创 2020-03-08 09:35:00 · 238 阅读 · 0 评论 -
手写koa2
一、koa2核心设计 封装nodehttp server,创造Koa类构造函数 构造request、response、及context对象 中间件机制实现 二、koa2核心代码实现1.主文件koa.jsconsthttp=require('http');constcontext=require('./context');const...原创 2020-02-29 17:44:16 · 232 阅读 · 0 评论 -
手写Promise
function Promise(executor) { var self = this; self.status = 'pending'; self.onResolvedCallback = []; self.onRejectedCallback = []; function resolve(value) { if (value ins...原创 2020-02-23 19:11:31 · 204 阅读 · 0 评论 -
模拟JSON.parse实现
var simulateJsonParse = function (jsonString) { if (!jsonString) { return jsonString; } var jsonObj = eval('(' + jsonString + ')'); return jsonObj;}var testJsonString = '{"n...原创 2020-02-23 11:30:09 · 214 阅读 · 0 评论 -
类的继承实现
function Parent(name) { this.parent = name;}Parent.prototype.say = function () { console.log(`Hello, ${this.parent}`)}function Child (name, parent) { // 将父类的构造函数绑定在子类上 Parent.call...原创 2020-02-23 11:19:19 · 189 阅读 · 0 评论 -
模拟Object.create实现
Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象__proto__function simulateCreate (proto) { var F = function () {}; F.prototype = proto; return new F();}复制代码参考资料 www.cxymsg.com/guid...原创 2020-02-22 23:21:18 · 804 阅读 · 0 评论 -
模拟bind实现
bind介绍bind()方法会创建一个新的函数,当这个新函数被调用时,bind()的第一个参数将作为它运行时的this,之后的一序列参数将会在传递的实参前传入作为它的参数。模拟bind实现/*** 模拟bind实现*/Function.prototype.simulateBind = function (context) { if (typeof this !== 'f...原创 2020-02-22 22:47:15 · 189 阅读 · 0 评论 -
模拟apply实现
/*** 模拟apply实现*/Function.prototype.newApply = function (context, argArray) { // 如果调用者不是方法抛出异常 if (typeof this !== 'function') { throw new TypeError('调用者不是一个方法'); } // 判断参数是...原创 2020-02-22 17:41:56 · 151 阅读 · 0 评论 -
模拟call实现
将函数设为对象的属性 执行&删除这个函数 指定this到函数并传入给定参数执行函数 如果不传入参数,默认指向window /*** 实现一个call方法*/Function.prototype.myCall = function (context) { context = context ? Object(context) : window; context...原创 2020-02-22 10:13:52 · 364 阅读 · 0 评论 -
模拟new实现
创建一个全新的对象 被执行[[prototype]](也就是__proto__)链接 使this指向新创建的对象 创建的每个对象最终被[[prototype]]链接到这个函数的prototype对象上 如果函数没有返回对象类型Object(包含Function,Array,Date,RegExp,Error),那么表达式中的函数调用将返回该对象引用 /*** 模拟new实现*/c...原创 2020-02-22 00:43:54 · 219 阅读 · 0 评论 -
模拟instanceof实现
/*** 模拟instanceof*/const simulateInstanceof = (L, R) => { // L表示左边表达式,R表示右边表达式 const O = R.prototype; // 取R的显示原型 L = L.__proto__; // 取L的隐式原型 while (true) { if (L === nul...原创 2020-02-22 00:01:17 · 226 阅读 · 0 评论 -
Event实现
简单版class EventEmeitter { constructor () { this._events = this._events || new Map(); // 储存事件/键值对 this._maxListeners = this._maxListeners || 10; // 设立监听上限 }}// 触发名为type的事件...原创 2020-02-21 23:28:59 · 294 阅读 · 0 评论 -
影分身术——JS深克隆
分身术种类普通分身术:有其形,无其实,不具有完备的主体 影分身术:从真身上得到完备的继承,具有和真身一样的完备性普通分身术普通分身术技术实现/*** 简单克隆实现*/const originObj = { a: 1, b: 2};const simpleCloneObj = JSON.parse(JSON.stringify(originObj...原创 2020-02-20 23:39:05 · 314 阅读 · 0 评论 -
节流函数实现
节流函数原理规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。适用场景拖拽场景:固定时间内只执行一次,防止超高频次触发位置变动 缩放场景:控制浏览器resize 动画场景:避免短时间内多次触发动画引起性能问题函数实现/*** 节流函数*/const throttle = (fn, delay = 500) => { l...原创 2020-02-19 23:57:17 · 170 阅读 · 0 评论 -
防抖函数实
防抖函数原理在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,则重新计算。适用场景按钮提交场景:防止多次提交按钮,只执行最后一次提交 服务端验证场景:表单验证需要服务端配合,只执行一段连续的输入事件的最后一次,还有搜索词联想功能等函数实现/*** 防抖函数*/const debounce = (fn, delay) => { let timer =...原创 2020-02-19 23:43:23 · 169 阅读 · 0 评论 -
JS基础必知必会
原型链 原型对象:绝大部分的函数(少数内建函数除外)都有一个prototype属性,这个属性是原型对象用来创建新对象的实例,而所有被创建的对象都会共享原型对象,因此这些对象便可以访问原型对象的属性 原型链 每个对象都有__proto__属性,此属性指向该对象的构造函数的原型 对象可以通过__proto__与上游的构造函数的原型对象连接起来,而上游的原型对象也有一个__proto__...原创 2020-02-18 23:43:17 · 177 阅读 · 0 评论 -
详解JS正则replace的使用方法
在讲replace的高级应用之前,我们先简单梳理一下JS正则中的几个重要的知识点,以帮助你对基础知识的回顾,然后再讲解JS正则表达式在replace中的使用,以及常见的几个经典案例。一、正则表达式的创建JS正则的创建有两种方式:new RegExp() 和 直接字面量。其中 g 表示全文匹配,与之相关的还有 i 和m,i 表示匹配时忽略大小写,m 表示多行匹配,如果多个条件同时使...转载 2020-01-09 20:43:30 · 557 阅读 · 0 评论 -
【JS】原生JS操作DOM的各种姿势
获取单个DOM元素 document.querySelector('.element'); // 通过class获取document.querySelector('#element'); // 通过id获取document.querySelector('div'); // 通过标签获取document.querySelector('[name="userName"]'); // 通过属性...原创 2020-01-02 09:56:59 · 508 阅读 · 0 评论 -
js获取浏览器滚动条距离顶端的距离
一、jQuery获取的相关方法Js代码jquery获取滚动条高度获取浏览器显示区域的高度:$(window).height();获取浏览器显示区域的宽度:$(window).width();获取页面的文档高度:$(document).height();获取页面的文档宽度:$(d原创 2014-11-29 11:17:14 · 10766 阅读 · 1 评论 -
javascript性能提升——脚本位置
大多数人在编写html代码的时候习惯将标签和css一起放在头部,但是这样放置的话脚本会阻塞页面渲染,直到脚本全部下载并执行完成后,页面的渲染才会继续。因此页面的性能问题会很明显。将脚本放到页面顶部将会导致明显的延迟,通常表现为显示空白页面,用户无法浏览内容,也无法与页面进行交互。由于脚本会阻塞页面其他资源的下载,因此推荐将所有的标签尽可能放到标签的底部,以尽量减少对整个页面下载的影响。原创 2014-02-13 10:07:44 · 855 阅读 · 0 评论 -
浏览器控制打印机在线打印
一、直接使用window.print()script>function print() { bdhtml=window.document.body.innerHTML; sprnstr=""; eprnstr=""; prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //17为sprnstr的l原创 2015-03-12 00:27:13 · 1923 阅读 · 0 评论 -
在微信公众平台前端网页上添加分享按钮
微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享到朋友圈,关注微信号等按钮。微信内嵌浏览器通过 Mac 远程调试 iPhone 上微信自己的网页,我们可以发现微信内嵌浏览器定义了一个私有 JavaScript 对象:Weixin原创 2014-09-19 11:42:55 · 1791 阅读 · 0 评论 -
浅谈前端安全
随着前端技术的发展,安全问题已经从服务器悄然来到了每一个用户的的面前,盗取用户数据,制造恶意的可以自我复制的蠕虫代码,让病毒在用户间传播,使服务器当掉.更有甚者可能会在用户不知觉得情况下,让用户成为攻击者,这绝对不是骇人听闻。富客户端的应用越来越广,前端的安全问题也随之增多,今天就简单介绍下一些常见的攻击方式和预防攻击办法。常见攻击XSS,跨站脚本攻击(Cross Site原创 2014-09-14 22:47:08 · 1197 阅读 · 0 评论 -
javascript性能提升——字符串连接
1、用str = str + "one" + "two"原创 2014-08-10 21:25:12 · 544 阅读 · 0 评论 -
为什么V8引擎这么快?
转载请注明出处:http://blog.csdn.net/horkychenGoogle研发的V8 JavaScript引擎性能优异。我们请熟悉内部程序实现的作者依源代码来看看V8是如何加速的。作者:Community Engine公司研发部研发工程师Hajime MoritaGoogle的Chrome中的V8 JavaScript引擎,由于性能良好吸引原创 2014-06-25 00:05:20 · 752 阅读 · 0 评论 -
BigPipe学习研究
1. 技术背景 FaceBook页面加载技术试想这样一个场景,一个经常访问的网站,每次打开它的页面都要要花费6 秒;同时另外一个网站提供了相似的服务,但响应时间只需3 秒,那么你会如何选择呢?数据表明,如果用户打开一个网站,等待3~4 秒还没有任何反应,他们会变得急躁,焦虑,抱怨,甚至关闭网页并且不再访问,这是非常糟糕的情况。所以,网页加载的速度十分重要,尤其对于拥有遍布全球的5亿用户的F原创 2014-06-04 10:54:31 · 775 阅读 · 0 评论 -
异步加载js
loadScript('//edmlp.cosedm.com/js/ca.js',function () {alert('加载广告代码');});function loadScript(url, callback) {var script = document.createElement("script");script.type = "text/javascript";i原创 2014-04-25 10:50:12 · 763 阅读 · 0 评论 -
JS模拟自由落体弹跳动画
——edited by 李家优横向系数: (0-1)纵向系数: (0-1)速度:(20-1000) var i = null;function demo(hp,vp,sp) { var f=document.getElementById('fall'); f.style.right='0px'; f.style.bottom='40px'; i&&clearI原创 2014-03-28 18:26:30 · 4373 阅读 · 1 评论 -
javascript性能提升——Duff‘s Device
即使是循环中最快的代码,累计迭代上千次也会慢下来。此外,循环体运行时也会带来小性能开销,不仅仅是增加了总体运行时间。减少迭代次数能获得更加显著的性能提升,最广为人知的一种限制循环迭代次数的模式被称为“达夫设备(Duff's Device)”。Duff's Device是一种循环体展开技术,它使得一次迭代中实际执行了多次迭代的操作。一个典型的实现如下:原创 2014-03-17 11:16:54 · 3113 阅读 · 4 评论 -
javascript性能提升——减少循环迭代的工作量
常用的循环类型有for循环、while循环、do-while循环、for-in循环,一个典型的数组处理循环可以采用前三种循环中的任何一种。 for (var i = 0; i < items.length; i++) { process(items[i]); } var j = 0; while (j < items.length) { process(it原创 2014-03-11 20:18:22 · 1173 阅读 · 0 评论 -
前端性能优化指南
###AJAX优化缓存AJAX:异步并不等于即时。请求使用GET:当使用XMLHttpRequest时,而URL长度不到2K,可以使用GET请求数据,GET相比POST更快速。POST类型请求要发送两个TCP数据包。先发送文件头。再发送数据。GET类型请求只需要发送一个TCP数据包。取决于你的cookie数量。##原创 2015-09-19 22:27:39 · 1150 阅读 · 0 评论 -
CasperJS 1分钟写完爬虫拿亚马逊商品数据
角色Q: 私ねえ, Qです,よろしくお願いしますよ (我呀, 是小Q,请多多关照哟) A: 我是大叔 啊叁锅米Q: 原来是 阿三呀, 最近行情不好,跑cn来啦呀A: ......Q: 今天弄啥东东?A: 小爬虫Q: 做啥子哩A: 爬爬AMAZON 的书价Q: 为啥虫子要爬 AMAZON原创 2015-09-23 15:56:50 · 2745 阅读 · 0 评论 -
图片上传实现
CodePen - WeUI-Uploader body{ background-color: #efeff4;} WeUI-Uploader 上传原创 2016-01-24 21:02:12 · 6538 阅读 · 0 评论 -
如何通过js获取到CSS3里面transform rotate旋转角度的度数,matrix解析
如果你曾想通过下面这条语获取transform的值[javascript]view plaincopy$(objName).css('transform');很遗憾,获取到的是如下一个矩阵[javascript]view plaincopymatrix(a原创 2016-12-09 11:56:41 · 15804 阅读 · 3 评论 -
javascript性能提升——脚本合并
每个标签初始下载时都会阻塞页面渲染,所以减少页面包含的标签数量有助于改善这一情况。这不仅仅针对外链脚本,内嵌脚本的数量同样也要限制。浏览器在解析HTML页面的过程中每遇到一个标签,都会因执行脚本而导致一定的延时,因此最小化延迟时间将会明显改善页面的总体性能。通常一个大型网站或网络应用需要依赖数个javascript文件。你可以把多个文件合并成一个,这样只需引用一个标签,就可以减少性能消耗。文件原创 2014-02-14 10:32:39 · 1112 阅读 · 0 评论 -
javascript性能提升——动态加载脚本
通过文档对象模型(DOM),几乎可以用Javascript动态创建HTML中的所有 内容。其根本在于,标签与页面中的其他元素并无差异:都能通过DOM引用,都能在文档中移动、删除,甚至被创建。用标准的DOM方法可以非常容易地创建一个新年的元素: var script=document.createElement("script"); script.type="text/javascript"原创 2014-02-17 09:29:35 · 824 阅读 · 0 评论 -
window.event 兼容 问题
window.event问题问题说明:window.event 只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用。解决方法:在事件发生的函数上加上event参数,在函数体内(假设形参为evt)使用 var myEvent = evt?evt:(window.event?window.event:null)在Firefox页面转载 2014-02-21 11:58:50 · 3375 阅读 · 0 评论 -
web前端安全编码(模版篇)
在web的开发的开发过程中,前端总是在处理后端打的各种变量,变量可以包含着中的各种各样的字符,如果不对这些字符进行”特殊“处理的话,轻者导致页面不正常的显示,潜入了其他的东西,亦即页面挂了,或者弹出不应该弹出的东西,这些都是我们不期望看到的,重者可能导致密码泄露,网站的访问量突然猛增,服务器挂掉。 在前端的开发中,涉及到以下几种语境: 1)直接显示在页面上, eg:{%user原创 2014-09-14 23:50:41 · 689 阅读 · 0 评论 -
Web前端,高性能优化
高性能HTML一、避免使用iframe iframe也叫内联frame,可将一个HTML文档嵌入另一个HTML文档中。 iframe的好处是,嵌入的文档独立于父文档,通常也借此使浏览器模拟多线程。缺点是: ①虽然iframe能模拟多线程,但主流浏览器的同域名并行下载数是不变的,浏览器对同域名的链接总是共享浏览器级别的连接池, 即使是不同窗口或标签页的同域名网页原创 2014-09-15 10:55:42 · 659 阅读 · 0 评论