超强js博客值得学习！！！

再读ecmascript

摘要: 这几天，又花了点时间看了下ecmascript。以下是我摘录出来的一些理解。在此记录下。第一部分：关于变量对象的理解1） 什么是变量对象？数据的存取与读取机制，就是变量对象。 变量对象 是执行上下文相关的对象，包括3种：变量 (var )函数定义(FD)函数形参2） 关于函数的argumentsfunction foo(x,y,z){ z=40; y=50; alert(arguments.callee===foo); alert(arguments.length); //1 alert(arguments[1]); //undefine alert(arguments[2]); //und.阅读全文

 

javascript 中的 arguments,callee.caller,apply,call 区别

摘要: 记录一下：1.arguments是一个对象， 是函数的一个特性，只有在函数内才具有这个特性，在函数外部不用使用。举例：function test(){ alert(typeof arguments); //object } alert(typeof arguments); //undefined2.callee,callercallee 表示当前正在使用的函数，例如 arguments.callee 表示testcaller 表示当前函数的调用者，如果在最顶层 那么就为 null ,如 test() 为 null ;test2() 为testfunction test(){ aler...阅读全文

 

js 设计模式-单例模式

摘要: 本文参考：http://www.addyosmani.com/resources/essentialjsdesignpatterns/book /#singletonpatternjavascript目录： 1）什么是单例 2）使用场景 3）类比 3）举例什么是单例？ 单例要求一个类有且只有一个实例，提供一个全局的访问点。因此它要绕过常规的控制器，使其只能有一个实例，供使用者使用，而使用着不关心有几个实例，因此 这是设计者的责任 In JavaScript, Singletons serve as a shared resource namespace which isolate im...阅读全文

 

深入理解JavaScript内部原理（6）： 闭包

摘要: 说明本文是翻译http://dmitrysoshnikov.com/ecmascript/chapter-6-closures/概要本文将介绍一 个在JavaScript经常会拿来讨论的话题 ——闭包（closure）。闭包其实已经是个老生常谈的话题了； 有大量文章都介绍过闭包的内容（其中不失一些很好的文章，比如，扩展阅读中Richard Cornford的文章就非常好）， 尽管如此，这里还是要试着从理论角度来讨论下闭包，看看ECMAScript中的闭包内部究竟是如何工作的。正如在此前文章中提到的，这些文章都是系列文 章，相互之间都是有关联的。因此，为了更好的理解本文要介绍的内容， 建议先去阅读下阅读全文

 

深入理解JavaScript内部原理（5）： function

摘要: 本文是翻译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阅读全文

 

深入理解JavaScript内部原理（3）： this

摘要: 本文是翻译http://dmitrysoshnikov.com/ecmascript/chapter-3-this/概要本文将进一步讨论与执行上 下文密切相关的概念——this关键字。事实证明，this这块的内容非常的复杂，它在不同执行上下文的情况下其值都会不同，并且会相应的引发一些问题。 很多程序员一看到this关键字，就会把它和面向对象的编程方式联系在一起，它指向利用构造器新创建出来的对象。在ECMAScript中，也支持 this，然而， 正如大家所熟知的，this不仅仅只用来表示创建出来的对象。接下来给大家揭开在ECMAScript中this神秘的面纱。定义This是执行上下文的 一个属性：a阅读全文

 

深入理解JavaScript内部原理（1）： 执行上下文

摘要: 说明本文是翻译Dmitry Soshnikov 的文章Execution Contexts. 文章地址：http://dmitrysoshnikov.com/ecmascript/chapter-1-execution-contexts /概要在这篇文章中，我们将向大家介绍ECMAscript的可执行上下文以及相关的可执行上下文的类型定义每当控制器进入ECMAscript可执行代 码的时候，控制器就进入了一个可执行上下文。可执行上下文（简称EC）是一个抽象的概念，在ECMA262中用他来区分不同类型的可执行代码标准规范中并 没有从技术实现的角度来定义执行上下文的具体结构和类型；这是实现标准的ECMA阅读全文

 

浅谈javascript中的作用域

摘要: 首先说明一下：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阅读全文

 

深入分析js中的constructor 和prototype

摘要: 在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...阅读全文

 

这几道题，你会做吗？

摘要: 昨天和几个朋友在一起看了几道题，很有意思。感兴趣的，可以直接写出答案，我会给大家解释的。写出下面每个步骤的值，直接上题：1.考点：上下文var a =1;var json = { a:10, val:function(){ alert(this.a*=2); }}json.val();var b = json.val;b();alert("stop-stop")json.val.call(window);alert(window.a + json.a);2.考点：属性var a =1;var json = { a:10, val:function()...阅读全文

 

增强用户体验，设置快捷键

摘要: 快捷键在日常的使用还是挺多的，例如熟悉的粘贴ctrl+v，复制 ctrl+c，使用快捷键能提高我们的做事效率，特别是当我们熟悉了一种操作后，再次使用它来进行操作就会变得很方便，很顺手，对于使用键盘的重度用户， 键盘永远比鼠标来的快。本文主要提到用js的方法设置tabindex 和js设置组合快捷键1）tabindex： 就是利用tab来轻松的控制页面中的链接和表单元素 它的用法很简单：obj.tabindex = tabindex; 这个tabindex 的值，按照w3c 的规定可以从0开始 一直到32767 这个比较的简单，关键是明白他的作用，这里就不举例了。这里有一篇文章对tabind...阅读全文

 

Range在各浏览器下的问题和常见处理办法

摘要: 第一次听到Range这个概念是在空间编辑器的技术交流会上，当时作者给我们提到编辑器中最重要的概念就是Range，通过操作range，就可以实现编 辑器的所有操作。到底具体什么是range呢，其实简单点就是选区，大家对矩形可能有概念，其实range可以理解为矩形，只要我们选定了一个文本，那么 这个文本就占有空间了，所以range是有起始和结束位置的。一、关于浏览器的兼容性 目前主要有3种关于range的类似的对象，分别是W3C range 对象，Mozzlia selection ，ie TextRange 关于这三种的区别，请查看文档http://www.quirksmode.org/dom...阅读全文

 

拖拽效果的实现原理分析2

摘要: 上文对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.documentElement.scrollTop&&doc.body.scrollTop

摘要: doc = document；doc.documentElement.scrollTop, doc.body.scrollTop的区别scrollTop 是指对象被卷去的高度，在body对象上就是指窗口被滚动条卷去的高度，如果在其他的对象上，那么就是容器被滚动条卷去的高度其实 doc.documentElement.scrollTop, doc.body.scrollTop 都是指窗口被滚动条卷去的高度，是一个意思。那么为什么还有两个呢？本质：如果页面具有 DTD（或者说指定了 DOCTYPE）时，使用 document.documentElement。如果页面不具有 DTD（或者说没有指定了 阅读全文

 

js中事件绑定研究

摘要: 本质:不同的库或者工具中总是封装了不同的事件绑定形式,但是究其根源，还是IE事件模型和W3C事件模型不同的处理方式1）W3C事件模型：支持事件捕 捉和冒泡addEventListener('type',function(){},bool) removeEventListener('type',function(){},bool)2）IE事件模型：仅支持事件冒泡 attachEvent('type',function(){});detachEvent('type',fucntion(){});*如何统一： 设置W3C事件绑定函数的第三个参阅读全文

 

百度前端js库分析

摘要: 百度前端js库tangram已经开源一年多了。自己也一直在使用这个工具库，这个工具库使用起来是很方便的百度对性能要求是很好的。它对常见的操作都做 些了封装和拆分，比如数组，ajax提交，dom操作，方法的操作，事件等的操作，每个函数都是静态的方法，对其他的方法没有依赖关系，可以很方便的对其 中的某些功能抽取出来单独使用，同时提供了方法定义和自动抽取的工具，这个都是可以实现的。我觉得对方法的操作，语言层面的封装，事件的封装，dom的操 作都挺好的，下面来着重来分析下这些方法的实现方式。1）对方法的封装。提供baidu.fn这个对象（1）定义了抽象方法abstractMethod baidu.fn.ab阅读全文

 

js数组操作，拼写好像，没看清楚就容易出错的。

摘要: 有2个单词很像，如果没有看清楚，就很容易出错，特此记录下：1）数组的 切片操作（slice），看w3c对他的描述：（1）定义：从已有的数组中选定制定的数组（2）返回值：数组（3）注意： 不改变原数组的值，可以用负数作为索引。常见用法：[].slice.call(arguments)，意思就是将参数链接成数组形式2）删除数组元素操 作（splice），和上面的单词只有一个字母（p）的区别（1）定义：插入，替换，删除数组中的元素（2）语 法：arryobject.splice(index,howmany,ele1,ele2,.....)可以理解为先删除，然后再添加元素，index 是开始位置，从0开始阅读全文