JavaScript -- IT技术博客大学习 -- 共学习共进步！

• JavaScript运算符

JavaScript中的每个运算符到底是如何进行类型转换的.下面会依次讲解六个最常用的运算符的工作机制: typeof typeof运算符会返回操作数类型的字符串表示.主要有两个需要注意的地方: ●未定义或未声明的变量将会返回"undefined", 比如.如果a没有被声明,那么typeof a将会返回"undefined". ●typeof在操作数是null或函数的种情况下会"撒谎".

• 构建前端 DSL

目前在传统的软件开发领域 DSL 已经比较普遍，特别是 Martin Fowler 的突出贡献。而在前端领域尚较少涉及，而如果在前端开发中合理使用 DSL 同样也可以有效得减少代码数量，提高可读性，常见的一个应用场景即前端模板的构建。本质上说模板也是一个微型语言，因此可以从DSL的角度着手，使用工具快速构建一个适合于特定前端框架的模板引擎。本文将以 KISSY XTemplate 为例介绍如何构建前端的 DSL。

• 巧解 JavaScript 中的嵌套替换

一个重要的特点是，wrapper一定比inner多一个元素，它一一将inner项隔开，并处于最外层。wrapper 和 inner 的关系，就像是一个手掌的5根指头与4个指缝的关系。将中间的元素取出，记下位置，等处理完之后，再将所有的元素粘合在一起。就是这样简单。

• ie下iframe输入框焦点丢失解决方案

在弹出层包含富编辑器时(既含有iframe时)，点击窗体任何部分，然后关闭弹出层后再次打开弹出层。这时候页面所有输入框input无法获得焦点但是链接、按钮都可以获取到，页面也不报任何错误。这种情况只是在IE下出现，我想是dom冲突了。解决方法：关于弹出层关闭，一般有两种方式：一是利用div隐藏或显示来控制弹出层的显示与隐藏；二是利用DOM直接移除弹出层。第二种比较好，资料这样说 “ IE 下在移除父层的 DIV 的时候，也就是 IFrame 外层的 DIV 的时候,IE 并没有将内部的 IFrame 从 DOM 中移除,而下次触发函数创建此 IFrame 的时候,使会产生 DOM 冲突,所以解决方法就是在移除父层的 DIV 的时候,先将内部的 IFrame 也移除”

• 简单js+css实现模拟自定义select样式

对于select这个标签在各个浏览器下的显示样式都不相同，这就给设计师和前端开发者带来了极大的不方便。所以做出一个统一的样式的select样式是最直接的需求。那么如何实现不同的浏览器下，有着相同样式的select呢？下面看下本人的方法：该方法主要用到的是js+css，代码量小，无插件自定义select的样式兼容性方面嘛，ie6可以无视了。实现原理：（js+css模拟select样式）将select的标签元素，设置opacity:0隐藏掉，并给其设置z-index将其移动到最上层。这样在点击外围box的时候，实际上是点击了select。然后通过select的onchange事件，将选中的数据赋值到span元素中显示出来。

• jquery实现无限滚动瀑布流实现原理

现在类似于pinterest这类的表现效果很火，其实我比较中意的是他的布局效果，而不是那种瀑布流。虽然我不是特别喜欢这种瀑布流的表现样式，但是还是写了几篇关于无限滚动瀑布流效果的文章，Infinite scroll+Masonry=无限滚动瀑布流，infinite-scroll-jquery滚动条(下拉)加载数据插件之类的文章。可能是我表达描述不是很详细清楚，所以好多朋友看了不是很清楚，并发信给我求解释。所以有了今天这篇文章。其实早在：十几款jquery无限滚动插件这篇文章中我就提到过这种效果的实现原理。主要是判断滚动条滚动的位置距离底部的距离，如果小于或者等于设置的高度的话，那么就执行ajax加载异步数据到固定的盒子中。我想大家对于这点是比较清楚的，恐怕对于怎样获取数据有点不甚了了的感觉。

• JS如何实现响应滚轮（同时设置滚动条无效）

翻滚吧，javascript 我这个人记录东西有个习惯，就是想到的东西就尽量延伸。能想到的地方尽量都写出来。所以这篇文章还是围绕着js响应鼠标滚动来论述。在之前的一篇文章（JS（如何判断）鼠标滚轮事件解析）中，我已经说清楚了对于各个浏览器是如何来用js进行判断鼠标滚轮是向上滚动还是向下滚动。（主要是获取反馈回来的e.wheelDelta或者e.detail，不明白的看上文）今天这里就写了一个小例子来进行小小的实战的一下。当然这个小例子有个不同的地方，就是当鼠标移动到固定的box（div盒子)上并滚动滚轮的时候，浏览器默认的滚动条会失效（当然不是什么bug，是js使得默认的滚动条无效。），当鼠标移出这个box的时候，浏览器滚动条才继续工作。此代码兼容各大浏览器，如有bug欢迎反馈。当然看文字不如结合实例来看，下面给出实例代码供大家调戏...

• JS（如何判断）鼠标滚轮事件解析

我们都见到过这些效果，用鼠标滚轮实现某个表单内的数字增加减少操作，或者滚轮控制某个按钮的左右，上下滚动。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。不同浏览器不同的事件首先，不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持）。。。。。

• 使用jQuery开发一个带有密码强度检验的超酷注册页面

在今天的jQuery教程中，我们将介绍如何使用jQuery和其它相关的插件来生成一个漂亮的带有密码强度检验的注册页面，希望大家喜欢...

• 优秀的JavaScript模块是怎样炼成的

用JavaScript写程序，通常要经历两个阶段：第一个阶段是采用一些模块来擦除JavaScript语言(跨平台)自身的问题；第二个阶段是自己写一些方法来擦除引入的模块的问题。第三个阶段才会真正进入业务开发中，前两个阶段俗称“擦屁股”。时常在第三个阶段时，我会陷回到第二个阶段，和各种模块碰撞，往往会引起一些心情上的不舒爽。而在接触到moment时，这些烦恼瞬间消散，我在心底知道为何会如此释怀，如碰到心仪的女神。这也让我回头反思过去在使用和写模块过程中遇到的挫折和收获，这落差让我产生了如此的冲动，此文算是一个总结，期望能在汲取优秀模块的经验中，国内开源社区能够成长起来。

• 一次响应性开发实践

响应性开发的概念不做细述，一年前曾做过一次分享”聊聊响应性设计和开发“。仅仅利用media query适配样式是远远不够的，并没有考虑触屏下的行为和特有的内容组织方式的不同。简单在桌面版基础上叠加mobile版的代码，会带来请求增多、流量、性能、代码冗余等诸多方面问题。这次从以下几个方面着手，充分发挥“响应”的灵活性，目标是得到一个更“好用”的体验。

• js图片延时加载（jquery特效）

前段时间朋友说让给做一个js延时加载图片人功能，原来也的网上见过这些，但是没有具体的研究。今天学习了下，发出来和大家一直分享。至于延时加载的好处我在这里就不说了，好多朋友都说可以减少服务器短时间的请求数量。一、原理分析 1.可显示区域的的图片正常显示，不可显示的不去请求， 2.当滚动滚动条时，计算可显示的图片，把图片的src的真实路径写入。二、代码这里我用的是jquery来做的，当然大家如果明白了原理，用什么做都可以做出很不错的效果。

• 前端重构实践（一） —— 性能优化

最近一直在做性能优化和模块化改造的工作，并完成了一次前端重构。在这里总结出一些经验和得失来帮助大家思考。共两篇文章，第一篇讨论性能优化，第二篇讨论模块化框架。而之所以把这两个话题放到一起，是因为这两项工作都涉及到对前端代码进行不同程度的重构，而且模块化改造其实是我们在对性能优化做到一定程度之后发现必须要做的一件事情。本篇是性能优化的部分，下面我把我们的产品简称为N页面。

• HTML5技术的调研以及贴吧应用总结

文档简介：贴吧在进行HTML5技术应用的过程中，进行了一系列的技术调研；本文对HTML5的技术调研进行总结，尽可能客观的分析解答对HTML5技术的一些疑问，给出产品、技术上的一些决策建议。对于文中的内容以及表述，也热切希望能得到大家进一步的指正和交流。 1. HTML5的发展现状及趋势 1.1 HTML5简介 HTML5是一套技术标准、规范，它定义了一系列的API编程接口和HTML规范（本文中将CSS3也默认涵盖到HTML5的技术范畴）；HTML5的运用和推广，需要依赖于各个浏览器厂商对HTML5的支持力度。

• 闭包漫谈（从抽象代数及函数式编程角度）

如果Google一下“闭包”这个词，会发现网上关于闭包的文章已经不计其数，甚至很多人将闭包看做面试JavaScript程序员的必考题（虽然闭包和JavaScript没有什么必然联系）。既然如此，我为什么还要写一篇关于闭包的文章呢？首先，虽然网上关于闭包的文章甚多，但是很少以较为形式化的角度阐述闭包，而我认为理解闭包的关键之一就是从形式化角度理解其涵义；其次，大多数文章将闭包的概念与JavaScript语言绑定太死，这样容易局限对闭包概念的理解，而难以窥探到其本质。从JavaScript去理解闭包，个人认为这是本末倒置的，应该先理解纯粹意义上的闭包，然后再理解JavaScript中的闭包机制。基于以上情况，本文将从较为形式化的角度阐述闭包概念，当做对现有网络的资料的一个补充。

• 高性能JavaScript模板引擎原理解析

　　随着 web 发展，前端应用变得越来越复杂，基于后端的 javascript(Node.js) 也开始崭露头角，此时 javascript 被寄予了更大的期望，与此同时 javascript MVC 思想也开始流行起来。javascript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注，近一年来在开源社区中更是百花齐放，在 Twitter、淘宝网、新浪浪微博、腾讯QQ空间、腾讯微博等大型网站中均能看到它们的身影。本文将用最简单的示例代码描述现有的 javascript 模板引擎的原理，包括新一代 javascript 模板引擎 artTemplate 的特性实现原理，欢迎共同探讨。

• 云标签，关键字图排版 html5 canvas版（一）

最近业余时间在做一个云标签相关的信息展现. 大概做成的情况能像微博关键字一样形成这样的图形:在做的过程当中,查阅了一些资料, 发现自己有点out了,在国外已经在wordle.net这样的网站.也有一个叫做信息视觉化(Information Visualization)的概念.于是顺着这个概念再googling了一些相关的知识.把一些知识点做一下笔记.Information Visualization漂亮,惊艳.与传统的云标签的表现力对比,原来的太普通了.给人全新的一种视觉感受.而后我的想法则是为什么这么有表现力的技术不能用在我们现在的项目上?所以我有了去尝试做这种排版的想法.现在把一些过程记录,给自己的一种笔记,给其他后来者留下一些资料.而云标签只是信息视觉化的其中一个很小的应用.有兴趣的同学可以参考wiki或我文后给出的链接查看详情.这里不展开描述，不是本文的重点。

• 面向移动设备的HTML5开发框架梳理

很久以前整理了篇将手机网站做成手机应用的JS框架。时隔一年多，很多新的技术已经出现，下面再来总结下还有哪些框架是适合面向手机设备的开发的。 1、jQuery Mobile jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。 2、jQTouch jQTouch 是一个 jQuery 的插件，主要用于手机上的 Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的 JavaScript 库。支持包括 iPhone、Android 等手机。

• 几种常用HTML5移动应用框架的比较

对于Mobile Web来说，现在是快速成长时代。由于采用了HTML5和CSS3技术，移动浏览器的性能加强了许多，同时，移动app的框架也扩展了，这意味着为移动设备创建丰富的互动的web体验的可行性又提升了。采用诸如PhoneGap这样的封装软件，您就可以使用native app Store以及单个代码库，就可以分布式部署iPhone，iPad和Android等不同的目标平台了。对于Mobile Web的开发人员来说，切换框架代价很高：因为动画的转换，工具栏，按钮，列表的显示，以及线下存储等都很麻烦。因为大部分上述功能都是新技术，以及这些领域的技术还在迅速地改变。作者玩转了许多Mobile Web的框架并且对它们进行了分析比较，下面将为您讲解他的研究发现。

• DNS Prefetching 技术引入及实现方法

DNS prefetching 是一个不算新的技术，谷歌和火狐都已经支持了。 DNS prefetching 就是是 “DNS预获取”，假如你的网站是 a.com，但是你的网站内页含有大量的....