随笔分类 - javascript
javascript基础
摘要：替换interpolate|sub|scan|truncate | gsubinterpolate ：将字符串看作一个模板，并使用 object 的属性填充它。sub ：将字符串中前指定个个与 pattern 指定的模式匹配的子串用 replacement 替换scan ：遍历字符串中与参数 pattern 指定的模式匹配的所有子串。返回原始字符串本身。truncate ：将字符串截短为指定的长度（包含后缀部分）， 并添加一个后缀。gsub ：将字符串中所有与 pattern 指定的模式匹配的值全部用 replacement 替换掉上面的方法中，最重要的一个方法是gsub，具体说明参见《浅析P
阅读全文
摘要：HTML处理stripTags|escapeHTML|unescapeHTMLJSON处理unfilterJSON|isJSON|evalJSON|parseJSON脚本处理stripScripts|extractScripts|evalScripts 现在，String部分转入具体的关联应用，分别对应HTML字符串，JSON字符串和HTML中的脚本字符串。【乱入一句，有关JSON的一点东西，可以看看http://www.cnblogs.com/TomXu/archive/2012/01/11/2311956.html】下面分别叙述：一、HTML字符串stripTags ：移除字符串中所有的
阅读全文
摘要：这两种主要是对《Prototype浅析》先前略过的Sring部分中toQueryParams和Object部分的toQueryString方法的补充一、从URL中提取参数有下列字符串：var linkURL = 'http://localhost:8080/String/string_6.html?昵称=小西山子&age=24#id1';对于一个真实的URL地址，可以用js来读取location中的相关信息来获得某些信息，下面列举一些：location.origin : http://localhost【域】location.pathname : /project_js
阅读全文
摘要：本文接着上面的String部分，继续下面表格的部分格式camelize | capitalize|underscore|dasherize|inspect 变形toArray|succ|times 这里面一个有用的方法是inspect，按照参考手册的说明，他的作用是“返回该字符串针对调试的字符串表现形式（即用单引号或双引号包括起来，并使用 '\' 对特殊字符进行转义）”，在Object的toJSON里面也涉及到这个方法。 既然涉及到需要转义的字符，我们自然要一份转义字符信息，下面直接给出： String.specialChar = { '\b': '\\
阅读全文
摘要：添加到String.prototype中的方法比较多，不过归结起来，大致分为下面几类：分类方法名原始能力增强 strip| include |startsWith |endsWith| empty| blank格式camelize | capitalize| underscore| dasherize |inspect 变形toArray| succ |times替换interpolate |sub| scan| truncate | gsubHTML处理stripTags |escapeHTML| unescapeHTML参数序列化toQueryParamsJSON处理u...
阅读全文
摘要：JSON介绍http://json.org/这个解析JSON，也是Prototype源码浅析的一个铺垫。下面是一个开篇例子，其中response是从服务器获得的JSON字符串： var response_1 = "{\"user\":\"xesam\",\"info\":{\"age\":\"24\"}}"; var response_2 = "{'user' : 'xesam'}"; var response_3 = &q
阅读全文
摘要：PS：检测浏览器虽然不是一个什么好的做法，但是有时候还是很必要的。见得最多的就是检测navigator.userAgent(这个可以面向所有浏览器，略过)。另外一种就是IE的条件注释，这篇有个比较详细的说明http://www.cnblogs.com/JustinYoung/archive/2009/03/02/ie-jiaojianzhushi.html，注意看它下面的回复<!--[if !IE]><!--><script type="text/javascript"> alert('非IE')</ script&
阅读全文
摘要：说明：在javascript中，由于缺乏传统面向对象语言的继承机制，类与继承是一个比较复杂的概念。因此本段解析中，不就javascript中的原型、类、继承、封装进行深入探讨。需要深入了解的可以去参考大牛的文章，另推荐几本书《javascript高级程序设计》、《javascript语言精髓与编程实践》和《javascript设计模式》，多读几遍就会对javascript的原型有深入的了解。所以本文只就Prototype远源码涉及到的部分进行解析。正文：到Class这一步，需要说一下前面没有说到的单体模式，通过前面的几个部分的观察，会发现整个Prototype部分，大部分对象的方法扩展采用的都
阅读全文
摘要：前面分析了Class的构造部分，现在，需求变动啦（又变动啦！），现在需要一个Teacher类，同样有say方法，但是除此之外还有teach方法。我们再重复定义say就不划算了，因为Person有现成的，于是就牵扯到继承的问题，我要让Teacher类继承Person的方法。先复习一下JS常见继承的基本原理。假定现在有Person和Teacher类，让Teacher继承Person的方法：Teacher.prototype = new Person();这个方法的缺点是Person有可能很庞大，许多初始化操作是我们不必要的，我们只需要Person.prototype的方法而已。因此用一个Obj作为
阅读全文
摘要：对JSON不甚了解的可以先看下这个：《JSON三分钟课程》、《JSON入门课程》对JSON的操作主要是解析JSON字符串为一个对象和将一个对象转换成JSON字符串。网上搜一下JSON解析，就会发现一堆文章和方法，当然这篇文章主要不是讨论JSON的解析，不过也可以大致回顾一下：第一、eval。eval('(' + jsonStr + ')');加个括号是为了强制表达式运算，不然直接eval('{}'),具体原因可以去翻看一下《JS语言精髓与编程实践》第二、Function第三、另外有一个JSON解析的库，这个可以自己去下载第四、除了IE6,7之外，
阅读全文
摘要：扯淡：本来这个《Prototype源码浅析》是只打算作为学习Prototype的笔记的，不过有时候发现一个问题可以深入一点（虽然还是浅析），就脱离了原来的预期，越来越偏题了。今天的打算本来是写完Str的，但是写到变量检测的时候，发现又可以扯点淡，就又拖累了进程。这个对于项目来说，肯定是不好的，不过对于学习，就不清楚了。因为自己吃过的亏，所以从一个新手的角度，写得尽量新手向，新手共勉。这里我不关心javascript里面各种类型是怎么定义的，唯一要指出的是var str_1 = 'xesam';var str_2 = new String('xesam');con
阅读全文
摘要：前些天小小的分析了一下Prototype的Function部分，今天开始Prototype的Object这一部分开始需要说明的一点是，Object这部分与先前的Function那一部分有点不一样，这次Object是直接扩展在Object上面的，而非Object.prototype，两者是有本质区别的，也就是本次Obeject的扩展相当于添加Object的一个静态变量（方法）；extend(Object, {})Object.extend(Function.prototype,{})Object的方法比较多，有些是很基础的（比如类型判断），所以也就不想全部都分析了，只拣几个我觉得比较重要或者难以
阅读全文
摘要：在DOM操作里，createElement是创建一个新的节点，createDocumentFragment是创建一个文档片段。网上可以搜到的大部分都是说使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题，比如：var arrText=["1","2","3","4","5","6","7","8","9","10&qu
阅读全文
摘要：接着上一部分：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()第一部分说的是第一条道路，...
阅读全文
摘要：最近学习都是自己想到什么就些什么，这样进步也不明显，于是偶尔也看看Prototype的源码，分析分析也算笔记。记得以前看jquery的源码的时候，网上一搜，源码分析一堆，不过透过表面看实质，大部分都只能算是注释。对于我这样的一个初学者，真算是坑爹啊。于是到现在，jquery的源码还是只看了前面几百行。选择看Prototype的源码是因为Prototype与jqeury不一样，jquery的所有操作都是在一个（组）jquery对象上来完成的，但是Prototype却扩展了原生的类型，比如这次要说的Function。所以···Prototype··
阅读全文
摘要：引子：今天看到别人的一个题目： function fn(x){ x = 10; arguments[0] = 20; console.log(x,arguments[0]) } fn()感觉自己对这也是一知半解，自己也可以试一下，于是就特地分析一下。本想从语言的角度来分析，无奈功力不够，只能粗浅的尝试一下，于是称之管中窥豹，还望大牛指正。这是昨天写的，今天吃饭的时候又想了一下，想来想去感觉有些问题还是说得不靠谱，于是又试着修改了一下。每一本js入门书籍都会提到，JS的函数内部有一个Arguments的对象arguments，用来函数调...
阅读全文
摘要：这个是休息的时候想到了，不知道有没有人用过。就是在当前页面用AJAX请求当前页面，返回的就是整个页面的HTML··既然是整个页面，所以也包括文档声明。唯一需要注意的地方：innerText与textContent，显示页面的时候不能用innerHTML，否则会被解析。innerText与textContent是在除FF之外的浏览器与FF之间的差异。var innerText = document.body.innerText ? 'innerText' : 'textContent';上面的语句在开头处理以避免多次判断demo贴图：demo：
阅读全文
摘要：上个星期做了一个《JS构建页面的DOM节点结构》以及列表相关的一些操作，今天接着完善一下，把两者结合起来，做一个页面结构的DOM控制面板。大致的情况如下：先遍历当前页面的dom节点，然后将获得的节点构建成一个DOM树行菜单。然后将DOM树行菜单菜单作为一个面板，将菜单的操作映射为页面DOM的行为。暂时只能进行基本的页面DOM顺序拖动，类似Chrome控制台的Elements面板。然后兼容IE6/7/8。所有的操作在前面的文章里面都有涉及，所以算是个总结。测试地址：http://fronter.sinaapp.com/wp-content/demo/domTree.htmldemo图（拖动旁边的
阅读全文
摘要：本来是要做一个命令行的，这个算是铺垫。规定一个文件的表示形式： file_0 : { type : 'folder', name : 'folder_0', length : 2, files[fileContent] :{} }type:文件类型，分为disk、folder和filename：文件（夹）名length：文件夹中的文件个数，file类型没有length属性files：子文件fileContent：文件内容fileA...
阅读全文
摘要：前天做了个树形菜单，今天接着让它可拖动。补充一点：要禁止移动中选中文字，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
阅读全文
浙公网安备 33010602011771号