javascript
文章平均质量分 58
zhifeng687
这个作者很懒,什么都没留下…
展开
-
javascript事件轮询(event loop)详解
英语原文摘自:http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/ The JavaScript Event Loop: ExplainedPosted on October 27, 2013 by Erin Swenson-HealeyWhat’s this post about...转载 2017-02-11 14:43:31 · 1058 阅读 · 0 评论 -
循环调用$.merge()合并数组需要进行数组深复制
数组的深拷贝方法如下:var newArr = $.extend(true,[],oldArr);当在一个循环中,我们不断地更新oldArr,并且调用$.merge()合并oldArr时,代码如下:for(var i=0;i<len;i++){ ........ var deepCopiedData = $.extend(true, [], oldArr); $.merge(listData,oldArr); deepCopiedData =null;原创 2016-09-23 11:58:27 · 721 阅读 · 0 评论 -
Repaint 、Reflow 的基本认识和优化(为什么少使用table布局)
你是不是经常听师兄或一些前端前辈说不能用CSS通配符 *,CSS选择器层叠不能超过三层,CSS尽量使用类选择器,书写HTML少使用table,结构要尽量简单-DOM树要小....等这些忠告,以前我就大概知道使用通配符或者CSS选择器层次过多可能会降低性能,至于为什么不使用table标签我一直是迷迷糊糊,也就跟着那样做了,但我认识了Repain和 Reflow之后,原来这些还真不能用太多。 ok转载 2016-10-14 14:50:18 · 450 阅读 · 0 评论 -
使用slice和concat对数组的深拷贝和浅拷贝
由于数组内部属性值为引用对象,因此使用slice和concat对对象数组的拷贝,整个拷贝还是浅拷贝,拷贝之后数组各个值的指针还是指向相同的存储地址。因此,slice和concat这两个方法,仅适用于对不包含引用对象的一维数组的深拷贝转载 2016-09-30 09:32:17 · 3046 阅读 · 0 评论 -
klass实现js的类的方式
KlassKlass是一种代码结构,模拟传统OO语言的Class。继承时能像传统OO语言的Class一样,子类构造函数调用父类的构造函数。作为一种代码结构,它有一套命名公约,如initialize,_init等,创建对象时这些方法会被自动调用。例如:var klass = function (Parent, props) { var Child, F, i; //1.转载 2017-08-24 10:44:50 · 1199 阅读 · 0 评论 -
tangram.js实现js的类的方式
使用createClass能方便的创建一个带有继承关系的类。同时会为返回的类对象添加extend方法,使用obj.extend({});可以方便的扩展原型链上的方法和属性转载 2017-08-22 17:33:27 · 914 阅读 · 0 评论 -
setTimeout解决GUI渲染线程阻塞问题
setTimeout,前端工程师必定会打交道的一个函数.它看上去非常的简单,朴实.有着一个很不平凡的名字--定时器.让年少的我天真的以为自己可以操纵未来.却不知朴实之中隐含着惊天大密.我还记得我第一次用这个函数的时候,我天真的以为它就是js实现多线程的工具.当时用它实现了一个坦克大战的小游戏,玩儿不亦乐乎.可是随着在前端这条路上越走越远,对它理解开始产生了变化.它似乎开始蒙上了面纱,时常有一些奇怪...转载 2017-08-27 19:04:22 · 6226 阅读 · 4 评论 -
js寄生组合式继承
一个类Sub要继承另一个类Super,既要通过原型链实现对原型属性和方法的继承,又要通过在子类构造函数内调用父类构造函数实现对实例属性的继承。原型链继承是子类的原型指向父类的实例从而实现原型共享,而原型式继承是子类的原型指向父类副本的实例从而实现原型共享。原型链方式可以实现所有属性方法共享,但无法做到属性、方法独享。借用构造函数可以实现所有属性方法独享,但无法做到属性、方法共享。转载 2017-08-23 18:06:16 · 2420 阅读 · 1 评论 -
动态插入js的加载过程是异步加载的
参考:动态创建<script>标签加载JS文件时是异步加载转载自:探析浏览器执行JavaScript脚本加载与代码执行顺序本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题1. 关于JavaScript脚本执行的阻塞性JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页...转载 2017-08-27 14:49:05 · 1954 阅读 · 0 评论 -
模块加载器和currentScript
转载自:浏览器端js模块加载器概述在es6之前,js不像其他语言自带成熟的模块化功能,页面只能靠插入一个个script标签来引入自己的或第三方的脚本,并且容易带来命名冲突的问题。js社区做了很多努力,在当时的运行环境中,实现"模块"的效果。通用的js模块化标准有CommonJS与AMD,前者运用于node环境,后者在浏览器环境中由Require.js等实现。此外还有国内的开源项目Sea.js,遵循...转载 2017-08-27 13:09:41 · 2604 阅读 · 0 评论 -
extend()实现组件参数的灵活配置
实现组件参数的灵活配置,我们在写组件的时候,可以使用一些默认的配置参数,但是如果用户想定制一些特殊的样式的话,可以使用extend方法转载 2016-11-06 17:42:52 · 594 阅读 · 0 评论 -
javascript面向对象-组合使用构造函数和原型模式时在原型对象添加init函数
为什么用 init在 js 中函数可以当做 构造函数(new Fn())和普通函数来(Fn())来调用,而我写了一个函数让别人去用别人可能不知道这个函数要按那种方式来调用,而在一个函数内部的代码可以分为两部分,第一部分是作为普通函数的执行语句,第二部分是作为构造函数的部分,通过使用 init 来将这两部分来显示的区分职责,在 init 中只做初始化操作 而在 Fn 中可以有其它的计算,通过上面的处理,还有一个好处就是无论用户用那种方式来调用 Fn 都会保证不会出错。(new Fn() 和 Fn() 具有相原创 2017-03-15 00:44:03 · 884 阅读 · 0 评论 -
js判断对象的某个属性是否为函数
怎么判断对象的属性是一个函数不考虑兼容的话就用 typeof 判断是不是"function"就好了,即typeof json.c == 'function'兼容的话 可能还得是 Object.propotype.toString.call(json.c) === "[object Function]"转载 2016-12-16 15:02:54 · 3083 阅读 · 0 评论 -
Object.prototype.hasOwnProperty.call()
因为javascript没有将hasOwnProperty作为一个敏感词,所以我们很有可能将对象的一个属性命名为hasOwnProperty,这样一来就无法再使用对象原型的 hasOwnProperty 方法来判断属性是否是来自原型链。我们需要通过Object.prototype.hasOwnProperty.call()使用原型链上真正的 hasOwnProperty 方法转载 2016-11-15 17:18:39 · 22697 阅读 · 3 评论 -
pageX、pageY及父元素的页面坐标使提示框跟随鼠标移动
提示框相对父元素的定位,要计算提示框的left和top属性。所以公式应该为提示框的相对坐标=鼠标的页面坐标-父元素的页面坐标计算鼠标的页面坐标:event.pageXevent.pageY计算父元素的页面坐标:首先写一个js获取元素到页面顶部距离的方法转载 2017-08-08 17:35:19 · 1413 阅读 · 0 评论 -
undefined与"undefined"
js判断undefined类型 if (reValue=== undefined){ console.log("undefined"); } if (typeof(reValue) == "undefined") { console.log("undefined"); } 如果用===判断,那就与undefined对原创 2017-07-26 19:35:21 · 560 阅读 · 0 评论 -
Mootools.js的Class.mutators
MooTools实现类的继承有两种模式:原型式继承和多亲继承,原型式继承由内建的Extends Mutator来实现,多亲继承由Implements Mutator或implement方法来实现。 原型式继承这里就不多讲了,着重讲一下多亲继承。在JavaScript里,因为一个对象只能拥有一个原型对象,所以不允许子类继承多个超类,不过我们可以利用多个掺元类(minix clas转载 2017-08-24 14:17:35 · 345 阅读 · 0 评论 -
在立即执行函数内组合使用构造函数模式和原型模式创建对象,实现模块化开发(以daterangepicker.js为例)
创建自定义类型的最常见方式,就是组合使用构造函数模式和原型模式。构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,同时又能共享对方法的引用,最大限度地节省了内存。另外,这种模式还支持向构造函数传递参数,可谓集两者之长。例子如下:function person(name,age,job){ this.nam原创 2017-07-05 19:04:41 · 571 阅读 · 0 评论 -
requestAnimationFrame
HTML5/CSS3时代,我们要在web里做动画选择其实已经很多了:你可以用CSS3的animattion+keyframes;你也可以用css3的transition;你还可以用通过在canvas上作图来实现动画,也可以借助jQuery动画相关的API方便地实现;当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来转载 2016-10-21 11:20:45 · 803 阅读 · 0 评论 -
函数调用返回值是一个闭包
/ 返回值类型数据函数返回值 \返回闭包函数(引用类型数据)函数返回值是一个闭包函数,就是引用类型的数据。则每一次调用该函数,都会创建一个内存空间。如果函数返回值是值类型数据,则每一次调用该函数,不会创建一个新的内存空间。=============================不管函数返回值是什么,引用该函数 ,都不会创建一个新的内存空间。当引用函数时,多个变原创 2016-10-20 00:07:29 · 2566 阅读 · 0 评论 -
javascript模块化开发
javascript模块化开发1、javascript模块的原始写法模块就是实现特定功能的一组方法。只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。 function m1(){ //... } function m2(){ //... }上面的函数m1()和m2(),组成一个模块。使用的时候,直接调用就行了原创 2017-07-12 00:31:19 · 454 阅读 · 0 评论 -
jquery中offset()的源码分析
jquery中,offset()函数用于设置或返回当前匹配元素相对于当前文档的偏移量,也就是相对于当前文档的坐标。源码内部就是借用了getBoundingClientRect()方法。原创 2016-10-23 12:16:52 · 823 阅读 · 0 评论 -
Jquery中offset()和position()的区别分析
一、Jquery中offset()获取匹配元素在当前视口的相对偏移。 总是计算相对于文档的位置,无论元素的父元素或祖先元素的position属性是什么。返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。二、Jquery中position()获取匹配元素相对父元素的偏移。 更通俗一点,含有position:relative的元素的最近的父元转载 2016-10-22 22:20:44 · 889 阅读 · 0 评论 -
函数声明优于变量声明是指函数声明可覆盖变量声明
函数声明优于变量声明。我们知道在代码逐行执行前,函数声明和变量声明会提前进行,而函数声明又会优于变量声明,这里的优于可以理解为晚于变量声明后,如果函数名和变量名相同,函数声明就能覆盖变量声明。所以以下代码将函数声明和变量声明调换顺序还是一样结果转载 2016-10-24 11:23:00 · 783 阅读 · 0 评论 -
javascript中mouseenter与mouseover的异同
不知道大家在面试或者工作过程中有没有被 mouseover 和 mouseenter (对应的是 mouseout 和 mouseleave )事件所困扰。自己之前在面试的时候就有被问到诸如mouseover和mouseenter事件的异同之类的问题?当时没有答出来,一直也对这两个事件有点模糊不清,趁着最近正在读 zepto源码 ,准备写一篇这方面的文章,如果有错误,请大家指正。转载 2016-11-09 20:29:26 · 1366 阅读 · 0 评论 -
js函数的作用域链和this对象
每个执行环境都有一个与之关联的变量对象。虽然我们编写的代码无法访问这个对象,但是解析器会在后台使用它。每个函数都有自己的执行环境。(备注:综上所述,我们知道,函数、函数的执行环境、执行环境的变量对象是一一对应的关系。)执行环境会创建变量对象的一个作用域链。作用域链的用途,就是保证对执行环境有权访问的所有变量和函数的的有序访问。作用域链的前端,始终原创 2016-10-18 00:13:42 · 312 阅读 · 0 评论 -
Javascript面向对象编程-原型式继承和复制继承
阅读目录一:理解构造函数原型(prototype)机制二:理解原型域链的概念三:理解原型继承机制四:理解使用构造函数继承(继承的更好的方案)五:建议原型式继承六:理解使用复制继承一:理解构造函数原型(prototype)机制 prototype是javascript实现与管理继承的一种机制,也是面向对象的设计思想.构造函数的原型存储着引用对象的一个指针转载 2017-08-20 21:59:32 · 479 阅读 · 0 评论 -
Mootools.js实现js的类的方式
ClassMooTools框架的基类。Class Method: constructor语法:var MyClass = new Class(properties);参数:性能 - 可以是以下类型之一:(object)类属性的集合。还接受一些特殊属性,如Extends, Implements和initialize(见下文) 。(function)转载 2017-08-24 11:05:44 · 545 阅读 · 0 评论 -
JavaScript中对象的 constructor 属性介绍
js对象的constructor属性并不是实例化的对象的属性,而是构造函数的原型对象的constructor属性。p.hasOwnProperty("constructor"); //falseP.prototype.hasOwnProperty("constructor");//truep.constructor其实是通过原型链往上找到其原型对象的constructor属性原创 2017-08-26 23:30:31 · 3372 阅读 · 0 评论 -
获取当前Javascript脚本文件的路径
获取当前Javascript脚本文件的路径获取当前Javascript脚本文件的路径,在特定场景下可能需要,比如写模块加载器,或者进行日志记录。并没有统一的方法适用于所有浏览器,本文分几种情况进行说明。(1). 标准做法: document.currentScript 对象的src属性 适用于Firefox 4+, Chrome 29+, Opera 16+, Safari 8+.var src ...转载 2017-08-27 10:49:11 · 959 阅读 · 0 评论 -
jquery的事件命名空间详解
jquery现在的事件API:on,off,trigger支持带命名空间的事件,当事件有了命名空间,就可以有效地管理同一事件的不同监听器,在定义组件的时候,能够避免同一元素应用到不同组件时,同一事件类型之间的影响,还能控制一些意外的事件冒泡。在实际工作中,相信大家都用的很多,但是不一定了解它的所有细节,至少我有这样的经验,经常在碰到疑惑的时候,还得重新写例子去验证它的相关作用,所以本文想把事件命名转载 2017-10-24 15:56:04 · 709 阅读 · 0 评论 -
jquery $.proxy使用
jQuery.proxy( function, context )/**function将要改变上下文语境的函数。** context函数的上下文语境(`this`)会被设置成这个 object 对象。**/jQuery.proxy( context, name )/**context函数的上下文语境会被设置成这个 object 对象。**name将要改变上下文语境的函数名(这个函数必须是前一个参数 ‘context’ **对象的属性)转载 2017-10-24 15:31:51 · 345 阅读 · 0 评论 -
判断浏览器是否支持svg
通过判断window对象是否有SVGAngle属性,从而判断浏览器是否支持svg R.type = (g.win.SVGAngle || g.doc.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") ? "SVG" : "VML");原创 2016-11-10 15:13:17 · 2079 阅读 · 0 评论 -
火狐和IE的window.event对象详解
IE:有window.event对象FF:没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)解决方法:var event = event || window.event;example:<script> function test(event) { var event = event || window.event; //do Something }</script><input type="b转载 2016-12-14 10:18:37 · 695 阅读 · 0 评论 -
js插件的经典写法与总结
之前写了一篇关于js插件的方法,可以传入参数,当时不能够拓展方法,而且模式也不是很好,虽然能够满足一定的业务要求。下面是对js插件的完善,可以实现参数传入,方法拓展,链式操作,设计模式更加清晰。[html] view plain copy print?> html> head> title>js插件测试title>转载 2017-01-09 23:44:12 · 493 阅读 · 0 评论 -
鼠标事件中event对象的坐标
鼠标的页面坐标=鼠标的客户区坐标+页面的滚动距离即:event.pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);event.pageY = event.clientY +(document.body.scrollTop || document.docume原创 2017-08-08 11:33:43 · 1663 阅读 · 0 评论 -
angular的$watch 函数
它的函数签名为$watch(watchFn, watchAction, deepWatch)其中每个参数的详细含义如下。watchFn该参数是一个带有Angular表达式或者函数的字符串,它会返回被监控的数据模型的当前值。这个表达式将会被执行很多次,所以你要保证它不会产生其他副作用。也就是说,要保证它可以被调用很多次而不会改变状态。基于同样的原因,监控表达式应该转载 2016-10-28 11:35:52 · 1091 阅读 · 0 评论 -
Javascript获取屏幕分辨率、当前浏览器窗口大小
手头一个项目,需要对屏幕分辨率进行检测,同时对窗口大小改变进行监测,窗口大小改变则css样式跟随变化。又是坑爹的IE不遵守游戏规则,要兼容ie系列,还得做多方面的兼容性处理。 以下是找到的获取窗口大小的一些知识点: 1、 Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。转载 2016-10-26 14:58:50 · 31525 阅读 · 0 评论 -
js事件委托机制
1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。好处呢:1,提高性能。我们可以看一个例子:需要触发每个li来改变他们的背景颜色。a转载 2016-10-25 15:22:08 · 442 阅读 · 0 评论 -
promise
下面关于promise的说法中,错误的是()正确答案: D 你的答案: C (错误)resolve()和reject都是直接生成一个进入相应状态的promise对象,其参数就是进入相应状态时传递过去的参数,可以在完成回调的参数中得到Promise.resolve(value),Promise.reject(reason)是Promise构造器上还直接提供了一组静态方法在调用then方法或者ca原创 2016-10-24 22:24:13 · 378 阅读 · 0 评论