随笔分类 - javascript
摘要：1.什么是getter，什么是setter？ getter 是一种获得属性值的方法，setter是一种设置属性值的方法。2.怎么定义？ 有2种办法：在对象初始化的时候定义在对象定义后的时候定义3.例子： yupeng's document 结果：100 101200 201
阅读全文
摘要：1.Object.create() 是什么？ Object.create(proto [, propertiesObject ]) 是E5中提出的一种新的对象创建方式，第一个参数是要继承的原型，如果不是一个子函数，可以传一个null，第二个参数是对象的属性描述符，这个参数是可选的。 例如： function Car (desc) { this.desc = desc; this.color = "red";} Car.prototype = { getInfo: function() { return 'A ' + this.color + ' &#
阅读全文
摘要：1.避免使用同步代码：// Good: write files asynchronouslyfs.writeFile('message.txt', 'Hello Node', function (err) { console.log("It's saved and the server remains responsive!");}); // BAD: write files synchronouslyfs.writeFileSync('message.txt', 'Hello Node');conso
阅读全文
摘要：记录一下：1.arguments是一个对象， 是函数的一个特性，只有在函数内才具有这个特性，在函数外部不用使用。举例：function test(){ alert(typeof arguments); //object } alert(typeof arguments); //undefined2.callee,callercallee 表示当前正在使用的函数，例如 arguments.callee 表示testcaller 表示当前函数的调用者，如果在最顶层 那么就为 null ,如 test() 为 null ;test2() 为testfunction test(){ aler...
阅读全文
摘要：本文参考：http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#singletonpatternjavascript目录： 1）什么是单例 2）使用场景 3）类比 3）举例什么是单例？ 单例要求一个类有且只有一个实例，提供一个全局的访问点。因此它要绕过常规的控制器，使其只能有一个实例，供使用者使用，而使用着不关心有几个实例，因此这是设计者的责任 In JavaScript, Singletons serve as a shared resource namespace which isolate im...
阅读全文
摘要：说明本文是翻译http://dmitrysoshnikov.com/ecmascript/chapter-6-closures/概要本文将介绍一个在JavaScript经常会拿来讨论的话题 ——闭包（closure）。闭包其实已经是个老生常谈的话题了； 有大量文章都介绍过闭包的内容（其中不失一些很好的文章，比如，扩展阅读中Richard Cornford的文章就非常好）， 尽管如此，这里还是要试着从理论角度来讨论下闭包，看看ECMAScript中的闭包内部究竟是如何工作的。正如在此前文章中提到的，这些文章都是系列文章，相互之间都是有关联的。因此，为了更好的理解本文要介绍的内容， 建议先去阅读下
阅读全文
摘要：本文是翻译http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/#introduction概要In this article we will talk about one of the general ECMAScript objects — about functions. In particular, we will go through various types of functions, will define how each type influencesvariables objectof a context and
阅读全文
摘要：本文是翻译http://dmitrysoshnikov.com/ecmascript/chapter-3-this/概要本文将进一步讨论与执行上下文密切相关的概念——this关键字。事实证明，this这块的内容非常的复杂，它在不同执行上下文的情况下其值都会不同，并且会相应的引发一些问题。很多程序员一看到this关键字，就会把它和面向对象的编程方式联系在一起，它指向利用构造器新创建出来的对象。在ECMAScript中，也支持this，然而， 正如大家所熟知的，this不仅仅只用来表示创建出来的对象。接下来给大家揭开在ECMAScript中this神秘的面纱。定义This是执行上下文的一个属性：a
阅读全文
摘要：说明本文是翻译Dmitry Soshnikov 的文章Execution Contexts. 文章地址：http://dmitrysoshnikov.com/ecmascript/chapter-1-execution-contexts/概要在这篇文章中，我们将向大家介绍ECMAscript的可执行上下文以及相关的可执行上下文的类型定义每当控制器进入ECMAscript可执行代码的时候，控制器就进入了一个可执行上下文。可执行上下文（简称EC）是一个抽象的概念，在ECMA262中用他来区分不同类型的可执行代码标准规范中并没有从技术实现的角度来定义执行上下文的具体结构和类型；这是实现标准的ECMA
阅读全文
摘要：首先说明一下：Js中的作用域不同于其他语言的作用域，要特别注意。JS中作用域的概念： 表示变量或函数起作用的区域，指代了它们在什么样的上下文中执行，亦即上下文执行环境。Javascript的作用域只有两种：全局作用域和本地作用域，本地作用域是按照函数来区分的。首先来看几道题目：1.if(true){ var aa= "bb";}console.log(aa); //bb for(var i = 0; i < 100; i++){ //do}console.log(i); //1002.var bb = '11111';function aa() { a
阅读全文
摘要：在javascript的使用过程中，constructor 和prototype这两个概念是相当重要的，深入的理解这两个概念对理解js的一些核心概念非常的重要。我们在定义函数的时候，函数定义的时候函数本身就会默认有一个prototype的属性，而我们如果用new 运算符来生成一个对象的时候就没有prototype属性。我们来看一个例子，来说明这个function a(c){ this.b = c; this.d =function(){ alert(this.b); }}var obj = new a('test');alert(typeof obj.proto...
阅读全文
摘要：快捷键在日常的使用还是挺多的，例如熟悉的粘贴ctrl+v，复制 ctrl+c，使用快捷键能提高我们的做事效率，特别是当我们熟悉了一种操作后，再次使用它来进行操作就会变得很方便，很顺手，对于使用键盘的重度用户，键盘永远比鼠标来的快。本文主要提到用js的方法设置tabindex 和js设置组合快捷键1）tabindex： 就是利用tab来轻松的控制页面中的链接和表单元素 它的用法很简单：obj.tabindex = tabindex; 这个tabindex 的值，按照w3c 的规定可以从0开始 一直到32767 这个比较的简单，关键是明白他的作用，这里就不举例了。这里有一篇文章对tabind...
阅读全文
摘要：第一次听到Range这个概念是在空间编辑器的技术交流会上，当时作者给我们提到编辑器中最重要的概念就是Range，通过操作range，就可以实现编辑器的所有操作。到底具体什么是range呢，其实简单点就是选区，大家对矩形可能有概念，其实range可以理解为矩形，只要我们选定了一个文本，那么这个文本就占有空间了，所以range是有起始和结束位置的。一、关于浏览器的兼容性 目前主要有3种关于range的类似的对象，分别是W3C range 对象，Mozzlia selection ，ie TextRange 关于这三种的区别，请查看文档http://www.quirksmode.org/dom...
阅读全文
摘要：上文对html5支持的浏览器的拖拽效果进行了分析，本文不采用任何库，来分析下拖拽的过程先想想我们平时拖拽是怎么操作的，大致可以分为几下几个步骤：鼠标按下，鼠标移动，拖拽，被拖动的物件跟着走鼠标松开，物件停止，无拖动了计算距离，拖拽的距离（鼠标移动）对应在事件上就是onmousedown，onmousemove ，开始拖拽onmouseup ，停止拖拽计算相对的拖拽距离下面我们按照这种思路，写一个拖拽效果,假设我们拖动标题，这块的内容就跟着走。首先我们来写一个含有标题和内容的块css为：#doc{border:1px solid #a0b3d6; background:white;positio
阅读全文
摘要：最近在项目中需要做图片的旋转功能，我研究了一下。下面来总结下图片旋转在各个浏览器的支持情况一、图片旋转的方案1）css3实现图片旋转功能：支持的浏览器有chrome，firefox；opera是不支持的。 具体代码为：-moz-transfrom:rotate(90deg);-webkit-ransfrom:rotate(90deg);上述代码的意思就是将图片顺时针旋转90度，其实可以旋转任意的度数。但是支持css3的浏览器只有chrome，firefox3.6 ，safari，ie浏览器是不支持的。那么IE下该怎么处理呢？于是就有了下面的一种方案2）在IE下通过滤镜来实现旋转 具体代码为..
阅读全文
摘要：各种网站经常看到页面滚动到可视区域，然后才加载相应的图片资源，他的本质是什么呢？本文来分析一下很简单，就是判断当前元素是否是可视区域内假设：h1 = 滚动条滚去的高度 w1 = 滚动条滚去的宽度 h2 = 屏幕的高度 obj 表示当前对象 {x：当前对象相对于文档左上角的位置x,y:当前对象相对于文档左上角的y}则应该这样判断 在y轴方向上：if(obj.x>h1&&obj.x<h1+h2||obj.x+obj.offsetHeight>h1&&|obj.x+obj.offsetHeight<h1+h2){loading()} 同理在X轴
阅读全文
摘要：项目中经常碰到各种高度，今天再次总结一下1）getboundingClientRect() 这个是IE下特有的一个方法，该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，它返回的是一个对象，该对象有是个属性：top，left，right，bottom，其中如果滚动了滚动条，top和left的值可能会为负值，因为他是相对了可视窗口，被卷进去了。2）scrollTop 表示的意思是对象被卷进去的高度，如果是body的对象，那么则表示滚动条卷去的高度，即浏览器上方隐藏的高度。如果是div等对象，那么就表示滚动条滚去该div上方的高度。3）offsetHeight,offsetWi..
阅读全文
摘要：doc = document；doc.documentElement.scrollTop, doc.body.scrollTop的区别scrollTop 是指对象被卷去的高度，在body对象上就是指窗口被滚动条卷去的高度，如果在其他的对象上，那么就是容器被滚动条卷去的高度其实doc.documentElement.scrollTop, doc.body.scrollTop 都是指窗口被滚动条卷去的高度，是一个意思。那么为什么还有两个呢？本质：如果页面具有 DTD（或者说指定了 DOCTYPE）时，使用 document.documentElement。如果页面不具有 DTD（或者说没有指定了
阅读全文
摘要：本质:不同的库或者工具中总是封装了不同的事件绑定形式,但是究其根源，还是IE事件模型和W3C事件模型不同的处理方式1）W3C事件模型：支持事件捕捉和冒泡addEventListener('type',function(){},bool) removeEventListener('type',function(){},bool)2）IE事件模型：仅支持事件冒泡attachEvent('type',function(){});detachEvent('type',fucntion(){});*如何统一：设置W3C事件绑定函数的第三个参
阅读全文