摘要：在上篇博客最简单的JavaScript模板引擎说了一下一个最简单的JavaScript模版引擎的原理与实现，作出了一个简陋的版本，今天优化一下，使之能够胜任日常拼接html工作，先把上次写的模版函数粘出来function tmpl(id,data){ var html=document.getElementById(id).innerHTML; var result="var p=[];with(obj){p.push('" +html.replace(/[\r\n\t]/g," ") .replace(//g,"');p... 阅读全文

摘要：在小公司待久了感觉自己的知识面很小，最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿，完全没有概念，网上一搜这是08年开始流行起来的。。。本来以为这是很高深的知识，后来在网上看到jQuery作者John Resig，研究了一下，算是明白了最简单的javaScript模版引擎的原理，并没有想象的那么高大上，写篇博客推导一下John Resig写法的过程，写出一个最简单的JavaScript模版引擎。什么是JavaScript引擎其实在网站开发中模板还是很常见的一种技术，比如PHP的Smarty、ASP.NET的Master Page等，但这些模板都是基于服务器的，JavaS 阅读全文

摘要：最近在做网页的时候有个需求，就是浏览器窗口改变的时候需要改一些页面元素大小，于是乎很自然的想到了window的resize事件,于是乎我是这么写的 Throttle 功能倒是实现了，但是我拖拽的方式改变浏览器窗口大小的时候看了下控制台没错，简单的一个拖拽让我的resizeHandler()方法执行了52次，这完全不是我想要的效果，实际上我的resizeHandler()方法的代码很复杂，甚至会使用ajax向服务器发送请求，要是简单的一次改变窗口大小就要调用52次这还了得函数节流其实我的本意只是窗口resize后页面做一些调整就可以，而window的resize事件并不是在resiz... 阅读全文

摘要：jsonp 全称是JSON with Padding，是为了解决跨域请求资源而产生的解决方案。很多时候我们需要在客户端获取服务器数据进行操作，一般我们会使用ajax+webservice做此事，但是如果我们希望获取的数据和当前页面并不是一个域，著名的同源策略（不同域的客户端脚本在没明确授权的情况下，不能读写对方的资源）会因为安全原因决绝请求，也就是我们不能向其它域直接发送请求以获取资源。在localhot域上有一个books.php，里面包含脚本对test.com域的books.php发送get请求，希望获取其book列表资源，这就是一个跨域请求资源$.ajax({ ty... 阅读全文

摘要：很多DOM对象都有原生的事件支持，向div就有click、mouseover等事件，事件机制可以为类的设计带来很大的灵活性，相信.net程序员深有体会。随着web技术发展，使用JavaScript自定义对象愈发频繁，让自己创建的对象也有事件机制，通过事件对外通信，能够极大提高开发效率。简单的事件需求事件并不是可有可无，在某些需求下是必需的。以一个很简单的需求为例，在web开发中Dialog很常见，每个Dialog都有一个关闭按钮，按钮对应Dialog的关闭方法，代码看起来大概是这样 Test Dialog ... 阅读全文

摘要：最近看JavaScript高级程序设计，大有收获，接下来几天写一下读书笔记。之前写了一篇Ajax初步理解的随笔，里面有个函数用来创建XmlHttpRequest对象,浏览器兼容性原因，写出的代码通过大量if判断或者try，catch语句将函数引导到正确代码处。每次调用这个函数的时候，都要先进行浏览器能力检查，首先检查浏览器是否支持内置的XMLHyypRequest对象，如果不支持然后检查各版本基于ActiveX的XMLHttpRequest，每次调用该函数都是这样，其实当第一次执行完后，如果浏览器支持某个特定XMLHttpRequest对象，那么下次执行的时候这种支持性并不会改变，没必要再进行 阅读全文

摘要：在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果，这种时候我们经常会用到一些元素位置和尺寸的计算，浏览器兼容性问题也是不可忽略的一部分，要想写出预想效果的JavaScript代码，我们需要了解一些基本知识。基础概念为了方便理解，我们需要了解几个基础概念，每个HTML元素都有下列属性offsetWidthclientWidthscrollWidthoffsetHeightclientHeightscrollHeightoffsetLeftclientLeftscrollLeftoffsetTopclientTopscrollTop为了理解这些属性，我们需要知道HTML元 阅读全文

摘要：在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果，这篇文章就上鼠标点击位置坐标获取做一些简单的总结，没特殊声明代码在IE8，FireFox，Chrome下进行测试兼容鼠标点击位置坐标相对于屏幕如果是涉及到鼠标点击确定位置相对比较简单，获取到鼠标点击事件后，事件screenX，screenY获取的是点击位置相对于屏幕的左边距与上边距，不考虑iframe因素，不同浏览器下表现的还算一致。function getMousePos(event) { var e = event || wi... 阅读全文