12 2011 档案

Prototype源码浅析——Class部分(一)之类
摘要：说明：在javascript中，由于缺乏传统面向对象语言的继承机制，类与继承是一个比较复杂的概念。因此本段解析中，不就javascript中的原型、类、继承、封装进行深入探讨。需要深入了解的可以去参考大牛的文章，另推荐几本书《javascript高级程序设计》、《javascript语言精髓与编程实践》和《javascript设计模式》，多读几遍就会对javascript的原型有深入的了解。所以本文只就Prototype远源码涉及到的部分进行解析。正文：到Class这一步，需要说一下前面没有说到的单体模式，通过前面的几个部分的观察，会发现整个Prototype部分，大部分对象的方法扩展采用的都 阅读全文
posted @ 2011-12-27 19:20 西山 阅读(3535) 评论(6) 推荐(3)
Prototype源码浅析——Class部分(二)之继承
摘要：前面分析了Class的构造部分，现在，需求变动啦（又变动啦！），现在需要一个Teacher类，同样有say方法，但是除此之外还有teach方法。我们再重复定义say就不划算了，因为Person有现成的，于是就牵扯到继承的问题，我要让Teacher类继承Person的方法。先复习一下JS常见继承的基本原理。假定现在有Person和Teacher类，让Teacher继承Person的方法：Teacher.prototype = new Person();这个方法的缺点是Person有可能很庞大，许多初始化操作是我们不必要的，我们只需要Person.prototype的方法而已。因此用一个Obj作为 阅读全文
posted @ 2011-12-27 19:20 西山 阅读(992) 评论(0) 推荐(0)
Prototype源码浅析——Object部分(三)之有关JSON
摘要：对JSON不甚了解的可以先看下这个：《JSON三分钟课程》、《JSON入门课程》对JSON的操作主要是解析JSON字符串为一个对象和将一个对象转换成JSON字符串。网上搜一下JSON解析，就会发现一堆文章和方法，当然这篇文章主要不是讨论JSON的解析，不过也可以大致回顾一下：第一、eval。eval('(' + jsonStr + ')');加个括号是为了强制表达式运算，不然直接eval('{}'),具体原因可以去翻看一下《JS语言精髓与编程实践》第二、Function第三、另外有一个JSON解析的库，这个可以自己去下载第四、除了IE6,7之外， 阅读全文
posted @ 2011-12-22 15:51 西山 阅读(1243) 评论(0) 推荐(0)
小议overflow
摘要：overflow是CSS里面定义的一个定位属性，最常见的作用是用来设置当元素的内容溢出其区域时发生的处理方法。另外一个常见的作用是清除浮动。一个实例：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <meta http-equiv="Content-Type" content= 阅读全文
posted @ 2011-12-21 21:33 西山 阅读(851) 评论(7) 推荐(0)
Prototype源码浅析——Object部分(二)之类型检测
摘要：扯淡：本来这个《Prototype源码浅析》是只打算作为学习Prototype的笔记的，不过有时候发现一个问题可以深入一点（虽然还是浅析），就脱离了原来的预期，越来越偏题了。今天的打算本来是写完Str的，但是写到变量检测的时候，发现又可以扯点淡，就又拖累了进程。这个对于项目来说，肯定是不好的，不过对于学习，就不清楚了。因为自己吃过的亏，所以从一个新手的角度，写得尽量新手向，新手共勉。这里我不关心javascript里面各种类型是怎么定义的，唯一要指出的是var str_1 = 'xesam';var str_2 = new String('xesam');con 阅读全文
posted @ 2011-12-21 19:24 西山 阅读(2480) 评论(0) 推荐(0)
Prototype源码浅析——Object部分(一)
摘要：前些天小小的分析了一下Prototype的Function部分，今天开始Prototype的Object这一部分开始需要说明的一点是，Object这部分与先前的Function那一部分有点不一样，这次Object是直接扩展在Object上面的，而非Object.prototype，两者是有本质区别的，也就是本次Obeject的扩展相当于添加Object的一个静态变量（方法）；extend(Object, {})Object.extend(Function.prototype,{})Object的方法比较多，有些是很基础的（比如类型判断），所以也就不想全部都分析了，只拣几个我觉得比较重要或者难以 阅读全文
posted @ 2011-12-21 00:21 西山 阅读(2959) 评论(0) 推荐(0)
createElement与createDocumentFragment的点点区别
摘要：在DOM操作里，createElement是创建一个新的节点，createDocumentFragment是创建一个文档片段。网上可以搜到的大部分都是说使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题，比如：var arrText=["1","2","3","4","5","6","7","8","9","10&qu 阅读全文
posted @ 2011-12-19 21:31 西山 阅读(15332) 评论(1) 推荐(2)
Prototype源码浅析——Function.prototype部分(二)
摘要：接着上一部分：Prototype源码浅析——Function.prototype部分(一)粗略回顾，前面的一个例子，两条道路：function handler(greet){ console.log(greet,this.name); } var obj = { name : 'xesam' }第一、用call或者apply来改变handler的作用域，handler.call(obj,'hello')，这种情况下需要另一个函数来包装一下。第二、将handler变成obj的一个方法，让其能这么调用obj.handler()第一部分说的是第一条道路，... 阅读全文
posted @ 2011-12-18 23:26 西山 阅读(3963) 评论(1) 推荐(0)
Prototype源码浅析——Function.prototype部分(一)
摘要：最近学习都是自己想到什么就些什么，这样进步也不明显，于是偶尔也看看Prototype的源码，分析分析也算笔记。记得以前看jquery的源码的时候，网上一搜，源码分析一堆，不过透过表面看实质，大部分都只能算是注释。对于我这样的一个初学者，真算是坑爹啊。于是到现在，jquery的源码还是只看了前面几百行。选择看Prototype的源码是因为Prototype与jqeury不一样，jquery的所有操作都是在一个（组）jquery对象上来完成的，但是Prototype却扩展了原生的类型，比如这次要说的Function。所以···Prototype·· 阅读全文
posted @ 2011-12-17 00:28 西山 阅读(5446) 评论(5) 推荐(2)
javascript管中窥豹——形参与实参
摘要：引子：今天看到别人的一个题目： function fn(x){ x = 10; arguments[0] = 20; console.log(x,arguments[0]) } fn()感觉自己对这也是一知半解，自己也可以试一下，于是就特地分析一下。本想从语言的角度来分析，无奈功力不够，只能粗浅的尝试一下，于是称之管中窥豹，还望大牛指正。这是昨天写的，今天吃饭的时候又想了一下，想来想去感觉有些问题还是说得不靠谱，于是又试着修改了一下。每一本js入门书籍都会提到，JS的函数内部有一个Arguments的对象arguments，用来函数调... 阅读全文
posted @ 2011-12-15 19:41 西山 阅读(5446) 评论(12) 推荐(1)
JS获取整个页面的文档
摘要：这个是休息的时候想到了，不知道有没有人用过。就是在当前页面用AJAX请求当前页面，返回的就是整个页面的HTML··既然是整个页面，所以也包括文档声明。唯一需要注意的地方：innerText与textContent，显示页面的时候不能用innerHTML，否则会被解析。innerText与textContent是在除FF之外的浏览器与FF之间的差异。var innerText = document.body.innerText ? 'innerText' : 'textContent';上面的语句在开头处理以避免多次判断demo贴图：demo： 阅读全文
posted @ 2011-12-14 17:04 西山 阅读(7200) 评论(2) 推荐(0)
JS构建页面的DOM节点结构（二）
摘要：上个星期做了一个《JS构建页面的DOM节点结构》以及列表相关的一些操作，今天接着完善一下，把两者结合起来，做一个页面结构的DOM控制面板。大致的情况如下：先遍历当前页面的dom节点，然后将获得的节点构建成一个DOM树行菜单。然后将DOM树行菜单菜单作为一个面板，将菜单的操作映射为页面DOM的行为。暂时只能进行基本的页面DOM顺序拖动，类似Chrome控制台的Elements面板。然后兼容IE6/7/8。所有的操作在前面的文章里面都有涉及，所以算是个总结。测试地址：http://fronter.sinaapp.com/wp-content/demo/domTree.htmldemo图（拖动旁边的 阅读全文
posted @ 2011-12-13 15:07 西山 阅读(792) 评论(1) 推荐(0)
CSS3月食
摘要：昨天据说是XXX什么的月食，于是学习CSS3的时候也实现一个，全当练手。实现原理很简单，用一个大圆覆盖一个小圆···=。=·：用基于webkit的浏览器测试，需要其他的浏览器可以更改对应的前缀（-webkit，-moz，-o）演示地址：http://fronter.sinaapp.com/wp-content/demo/eclipse.html最终效果：demo：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o 阅读全文
posted @ 2011-12-11 02:43 西山 阅读(975) 评论(6) 推荐(0)
模拟文件夹
摘要：本来是要做一个命令行的，这个算是铺垫。规定一个文件的表示形式： file_0 : { type : 'folder', name : 'folder_0', length : 2, files[fileContent] :{} }type:文件类型，分为disk、folder和filename：文件（夹）名length：文件夹中的文件个数，file类型没有length属性files：子文件fileContent：文件内容fileA... 阅读全文
posted @ 2011-12-09 23:37 西山 阅读(460) 评论(0) 推荐(0)
可拖动列表
摘要：前天做了个树形菜单，今天接着让它可拖动。补充一点：要禁止移动中选中文字，FF可以设置CSSxxxx{-moz-user-select:none;}其他的浏览器可以设置XXXX.onselectstart = function(){return false}一种实现原理就是点击没目标元素之后，创建一个占位元素（或者复制一份目标元素，即拷贝B），然后拖动目标元素（或者复制的来的新元素B）；找到相应的位置之后，插入目标元素。清除占位元素或者B。比如有一个列表：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q 阅读全文
posted @ 2011-12-09 13:51 西山 阅读(779) 评论(0) 推荐(1)
添加浏览器的用户样式表
摘要：web前端都知道，CSS的来源有三种一、user agent stylesheet用户代理的默认CSS（就是浏览器默认的CSS，http://www.cnblogs.com/xesam/archive/2011/12/01/2270553.html）二、author style sheets开发人员定义的CSS（前端开发人员写的external-style，embeded-style，inline-style）三、user style sheets用户自定义的CSS（用户自己写的）优先级由上至下依次增高user agent stylesheetuserdeclarations（normal）a 阅读全文
posted @ 2011-12-08 14:19 西山 阅读(10069) 评论(1) 推荐(4)
各浏览器的鼠标位置测试
摘要：废话不多说，下面分别检测各个浏览器下的e.pageXe.layerXe.offsetXe.clientXe.x属性；测试浏览器：FF9/Chrome15/opera11.52/safari5(win)/IE6/7/8/9测试代码：View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> < 阅读全文
posted @ 2011-12-08 11:53 西山 阅读(8177) 评论(3) 推荐(0)
JS构建页面的DOM节点结构
摘要：小提示：关于数组的concat和push方法。两者的区别主要有：concat是连接数组，不会修改原数组，返回值为连接后的数组，与push的重要区别是concat会展开数组的第一层子数组push是添加数组元素。就地修改原数组，返回值为添加的新项，push不会展开传入的数组。 var a = [1,2,3,4]; var b = [4,5,6,7]; var c = a.push(b); var d = a.concat(b); console.log('a',a); console.log('b',b); console.log('c',c); c 阅读全文
posted @ 2011-12-07 16:25 西山 阅读(2159) 评论(0) 推荐(0)
一个简单的树形菜单
摘要：说到树形菜单，貌似一般是用在一些管理系统里面的，我是还没有用到过，有些zTree之类的插件已经做得比较好了。我练习一下，以免不时之需。树形菜单不过就是把普通菜单重新排列一下，看起来像树形而已。上图京东的菜单，给他多几个嵌套，然后添加收缩伸展事件，差不多就行了。给个例子:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><he 阅读全文
posted @ 2011-12-07 12:55 西山 阅读(11030) 评论(0) 推荐(0)
浅析Prototype的模板类--Template
摘要：用过Prototype的人都知道，里面有个类叫做Template，用法示例如下： var str = '#{what} may have gone, but there is a time of #{how}'; var object = { what : 'Swallows', how : 'return' } var template_1 = new Template(str); var result = template_1.evaluate(object); console.log('result... 阅读全文
posted @ 2011-12-05 21:31 西山 阅读(1362) 评论(0) 推荐(0)
浅析字符串的replace方法应用
摘要：按照W3C的说明，String对象的replace方法调用方式是stringObject.replace(regexp/substr,replacement)。这两个参数都是必须的，replace() 方法的参数 replacement 可以是函数而不是字符串。在这种情况下，每个匹配都调用该函数，它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来的参数是与模式中的子表达式匹配的字符串，可以有 0 个或多个这样的参数。接下来的参数是一个整数，声明了匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。对于replacement 阅读全文
posted @ 2011-12-05 14:19 西山 阅读(3382) 评论(0) 推荐(0)
模拟多桌面
摘要：这段时间学习下linux，觉得linux的多桌面不错，于是顺便用js实现一个，虽说不知道有什么用，就当玩玩。PS：颜色的设定没有考虑，桌面多了颜色就会出错。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <meta http-equiv="Content-Type" conte 阅读全文
posted @ 2011-12-04 01:02 西山 阅读(333) 评论(1) 推荐(0)
幻灯片的实现
摘要：幻灯片 阅读全文
posted @ 2011-12-02 21:03 西山 阅读(495) 评论(1) 推荐(0)
浏览器默认样式
摘要：有个网站总结了IE6/7/8/9，FF3.6.3，webkit（r7042），opera10.51的默认样式，熟悉一下可以让我们更好的明白一些书写CSS过程中的差异。网站地址：http://www.iecss.com/熟悉这些之后可以明白一、使用CSS reset的原因。二、*{margin:0;padding:0;}一刀切的做法为什么不提倡三、网上广泛流传的CSSreset为什么也有人不提倡从对比图可以看出，不部分标签其实是没有margin或者padding的。其中又有些标签一般是很少用到的，就算用到了，一般也会特殊定制。对于一般的应用，简单的css reset（按需）就可以了。比如：bod 阅读全文
posted @ 2011-12-01 14:35 西山 阅读(2661) 评论(3) 推荐(1)