最近看了很多的PHP模板引擎，今天看到了一个非常棒的Javascript模板引擎，用以更方便的呈现前台数据。它的一个超级简单的、快速的，高速缓存的，非常容易使用的模板引擎。

下面就来看下这个模板引擎是如何工作的。

// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
  var cache = {};

  this.tmpl = function tmpl(str, data){
    // 判断出我们是否获取一个模板或是否我们要加载一个模板并确定要缓存结果
    //Figure out if we're getting a template, or if we need to load the template - and be sure to cache the result.

    var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :

      // 生成一个可作为模板的可重复使用的函数
      // 生成器 （将会被缓存）
      new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +

        // 使用with(){} 作为局部变量引入数据
        "with(obj){p.push('" +

        // 将模板内容转化成JavaScript
        Convert the template into pure JavaScript
        str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");

    // 提供一个基础的currying给用户
    return data ? fn( data ) : fn;
  };
})();

Currying 的意思为将原来的函数只可带一个参数列表以多个参数列表（注意不是多个参数）实现，如：def foo(x)(y)(z){}。

上面的只是具体实现的JS库，那到底怎么使用呢？

<script type="text/html" id="item_tmpl">
  <div id="<%=id%>" even" : "")%>">
    <div>
      <img src="<%=profile_image_url%>"/>
    </div>
    <div>
      <p><b><a href="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p>
    </div>
  </div>
</script>

或是这样

<script type="text/html" id="user_tmpl">
  <% for ( var i = 0; i < users.length; i++ ) { %>
    <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
  <% } %>
</script>

上面的使用代码中出现了一个特别的script内容类型text/html，这样的类型浏览器就不要去执行其中的内容，用户也就看不到其中的内容。这样就可以非常简单的把你想要的内容模板嵌入到你的页面中。这是一种快速的曲线救国的策略。

讲了这么多，那么怎么把数据给模板引擎呢，这还需使用Javascript来实现：

var results = document.getElementById("results");
results.innerHTML = tmpl("item_tmpl", dataObject);

同样的你可以预先编译好需要呈现的代码供后面的使用，如下面的循环：

var show_user = tmpl("item_tmpl"), html = "";
for ( var i = 0; i < users.length; i++ ) {
  html += show_user( users[i] );

以上就是全部代码，整个逻辑非常的清晰，就是把模板语言“编译”为Javascript的原生语法。这个引擎的优点在于：

1. 可以使用任何Javascript支持的语法。
2. Parse模板的过程在闭包内执行，不会产生全局变量。
3. 对“编译”后的模板进行了缓存，下次可以跳过“编译”的过程直接使用。

最后大家还是要试一下才知道好不好用。

原代码地址：http://ejohn.org/blog/javascript-micro-templating/

Related posts:

1. 使用GA在URL上添加UTM参数避免重复页面方法
2. 使用JS让链接从新窗口打开
3. 使用谷歌统计来跟踪网页加载时间

在内容区外面，依次围绕着 padding 区，border 区，margin 区，这一模型结构在所有主流浏览器都是一致的。通过盒子模型，我们可以为我们的内容设置边界，留白以及边距，盒子模型最典型的应用是这样：我们有一段内容，可以为这段内容设置一个边框，为了让内容不至于紧挨着边框，可以设置 padding ，为了让这个盒子不至于和别的盒子靠得太紧，可以设置 margin。

到目前为止，一切都很完美，直到当我们想为这个盒子设置一个尺寸的时候。IE6 和 W3C 标准浏览器对盒子模型有不同的解释，下图是两种类型的浏览器对盒子尺寸的不同解释示意图：

在现实世界中，我们描述一个物理盒子的时候，如果谈到尺寸，是不会只计算其盛放的物体的尺寸的，我们还会算上空隙与盒体本身。拿集装箱装箱为例，我们有 100 只花瓶，每只花瓶用1个纸盒包装，为了防止花瓶破碎，我们在花瓶周围塞上泡沫，这相当于 padding，纸盒的外围纸板相当于 border，在装集装箱的时候，为了防止纸盒之间相互碰撞，纸盒之间塞上稻草，这相当于 margin，很显然，我们向货运公司报告我们货物尺寸的时候，是要将整个纸盒的尺寸，连同纸盒之间需要塞稻草的空隙都告诉他们的，倘若只报告花瓶的尺 寸，货运公司是没有办法装箱的。再举一个例子，假若我们有一面墙，要在上面挂10幅油画，油画是用相框裱糊的，相框的边框相当于 border，油画和边框之间的距离相当于 padding，相框之间的间隔相当于 margin，这个例子和 Web 布局设计已经很接近了，对任何人来说，使用 IE6 的盒子模型，将整个相框，包括油画当做一个整体更容易布局，当你知道了整个相框的尺寸后，不必再去考虑 padding, border, margin 这个因素的影响，每个相框就是一个整体，至于 padding, border 与 margin，这是浏览器自己事，不需要设计者去关心。

在具体 Web 设计中，尤其牵扯到复杂网格布局的时候，IE6 的盒子模型更容易控制，我们不妨看看以下几个设计场景。

1. 面板式界面设计

页面上包含几个面板，比如一个登录面板，一个最新新闻面板，一个投票面板，这类设计典型的做法是，用背景图的方式，首先逐个设计出这些面板的外观图，将需要用具体内容替换的地方空着，这些面板，无非就是一些使用面板外观图片做背景图的盒子，然后，在这些盒子里面，放上具体的内容，使用 padding 控制内容的摆放位置，使用 margin 调整面板本身的摆放位置，由于面板的尺寸是固定的，我们依此确立了盒子的尺寸之后，就无需再关心尺寸问题，然后，不论你怎样调整 padding 和 margin都不会影响面板本身的结构。这是 IE6 盒子模型。而在 W3C 的盒子模型中，调整 padding 和 margin ，都会影响盒子的尺寸，你在调整内容摆放位置的同时，极有可能打乱面板本身的结构。

2. 百分比级尺寸 + 像素级边界问题

W3C 盒子模型在设计中最让人头疼的是，假如你有一个不确定宽度的容器，想在里面放置两个同样大小的盒子，最合理的的做法当时是设置每个盒子的宽度为 50%，这样，不管你的容器宽度为多大，这两个盒子总能自动适应这个宽度，然而，前提是你不要设置任何 padding 或 border，而，现实中，为了防止两个盒子中的内容互相挨得太近，你肯定要设置 padding，一旦设置了 padding，就会发现你的容器被撑破了。

当然你会说，每个盒子的宽度不要设为 50%，可以设为 45%，然后为每个盒子再加一个 5% 的 padding，这是一个解决办法，但我们在设计中经常有这样的习惯，虽然一段内容的宽度可能不确定，但我们总喜欢它拥有固定 padding，我们并不希望 padding 自动适应，况且，在很多时候，我们希望为一个自适应宽度的盒子，设置一个 1 像素的 border，在这种情形，W3C 盒子模型将陷入困境。

而遇到这种情形，IE6 盒子模型不需要任何周折，你只管将每个盒子的宽度设置为 50%，它们会自动适应容器的宽度，然后，不管你你怎样设置 padding 和 border，都不会撑破你的容器。

W3C 在盒子模型上迷途知返
虽然 W3C 永远都不会承认，但他们显然意识到了这个问题，重新定义盒子模型是不可能了，所以，在 CSS3 中，我们看到了下面这个属性：box-sizing
box-sizing 有两个可选值，一个是默认的 content-box 一个是 border-box，选用后者，盒子模型将按 IE6 的方式进行处理。

原文地址:http://www.comsharp.com/GetKnowledge/zh-CN/TeamBlogTimothyPage_K983.aspx

Related posts:

1. JS+CSS实现隔行换色
2. Google常用指令
3. 影音播放类软件合集

支持模拟对话框类型：

ajax调用：

<a href=”http://nyromodal.nyrodev.com/demoSent.php” class=”nyroModal”>Ajax</a>

ajax调用并支持抽取制定内容：

如果只需要显示页面上某一个元素，那么只需要在请求时把该元素ID号做为锚点加入请求地址中。以下代码只显示demoSent.php中ID号为UserInfo的元素，如果UserInfo不存在，则显示所有内容。

<a href=”http://nyromodal.nyrodev.com/demoSent.php#UserInfo” class=”nyroModal”>Ajax</a>

单张图片显示（会自动缩放图片大小）

<a href=”http://nyromodal.nyrodev.com/img/img2.jpg” class=”nyroModal” title=”3rd Street Promenade”>Image</a>

具体使用方法，请看官方网站的实例。

官方网址：http://nyromodal.nyrodev.com/

Related posts:

1. 图片验证码的识别技术
2. PHP类：htmlSQL
3. 《Google API大全》图书推荐

 jQuery.Switchable能实现的功能有：

1.TAB切换功能

2.Slide幻灯片功能

3.Scrollable跑马灯

官方网址：http://ilikejquery.com/switchable/

下载地址：http://code.google.com/p/mrzhang/downloads/list

演示地址：http://www.taobao.com

Related posts:

1. jQuery EasyInsert 插件，迅速添加表单
2. Google Public DNS
3. 输入法

官方网站（演示）：http://ilikejquery.com/EasyInsert/

插件下载地址：http://mrzhang.googlecode.com/files/EasyInsert-4.0.7z

Related posts:

1. jQuery.Switchable一款Tabs、Slide、Scrollable整合插件
2. IE7.JS 解决IE兼容性问题
3. SuperFish一款基于jQuery的级联下拉菜单

这个插件的主要作用是建立一个简单的方法为屏幕上的内容增加边界样式。

1. 边界样式可以是圆角，简单的边界，褪色的边缘，盒布局等。
2. 使用现有的图片来生成样式，我会完善函数，使在没有图片的情况下也能生成边界样式的。

它有三个可在jquery.js和jquery.divcorners.js加载后调用的函数。

1. 使用 $(expression).dcCreate( object [, boolean] ) 创建布局的实例。
2. 使用 $(expression).dcResize( [boolean] ) 重新调整布局的一个实例。
3. 使用 $(expression).dcClear( [boolean] ) 消除布局的实例。

DivCorners是由jquery.divcorners.js和jquery.divcorners.css构成的，两者必须结合起来使用。

为什么选择 DivCorners?

“jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为网站提供 AJAX 交互。 jQuery改变了书写JavaScript的方法。”jQuery.com

这个插件是为了使工作更加简单。 使用 DivCorners可以节约一半时间去完成兼容各种浏览器的预期效果。此插件还修复了IE6下PNG图片透明显示问题。

怎么使用 DivCorners?

$(expression).dcCreate( object [, boolean] )

// This is the maximum definition
  $("div").dcCreate({
      imgPrefix: "/images/",
      fileType: ".gif",
      expand: 4,           // optional
      radius: 0,           // optional, Note: Radius must be greater than expand. See Understand the Parameters
      position: "inside",  // optional
      resize: "img",       // optional
      exclude: "left, top" // optional
  }, true);                // Note: This parameter is optional. By default it's true.
                           // This parameter controls whether parent .dCorner instances will be resized.

// This is the recommended definition
  $("div").dcCreate({
      imgPrefix: "/images/dCorner-",
      fileType: ".gif",
      expand: 10
  });

$(expression).dcResize( [boolean] )

// Call this function when the height or width of the container is altered.
  $("div").dcResize(true);

// This is the recommended definition
  $("div").dcResize();

// Note: This function's parameter is optional. By default it's true.
// This parameter controls whether parent .dCorner instances will be resized.

$(expression).dcClear( [boolean] )

// Call this function to remove any instances.
  $("div").dcClear(true);

// This is the constructor definition
  $("div").dcClear();

// Note: This function's parameter is optional. By default it's true.
// This parameter controls whether parent .dCorner instances will be resized.

官方网址：http://roydukkey.com/divcorners/

Related posts:

1. Microsoft Expression Studio 3 中文版下载
2. Javascript模板引擎分享
3. PHP 5 curl Class

1. 非常小的JS文件，只有1KB
2. 解决因为IE的滤镜属性所带来的影响
3. 无论是img元素或background-image属性都能有很好的效果
4. 在加载页面之前就能自动运行，不需要再为png图片定义任何类名
5. 允许自动高宽
6. 超级简单的应用方法

Unit PNG Fix怎么使用：

1).下载zip 然后,添加下面的代码到你页面的头部（一定要确保路径的正确）

<!--[if lt IE 7]>
        <script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->

2).添加clear.gif到你的images 文件夹中.在js文件中,修改“var clear=“images/clear.gif” 路径为存放clear.gif的文件路径.

一些注意事项:

Unit PNG Fix能够让background-repeat在ie6下工作，不过这种工作方式不是像正常的repeat图片重复的效果，而是采用了拉伸的效果。

官方网址及下载地址：http://unitinteractive.com/labs/unitpngfix.php

Related posts:

1. IE PNG Fix 2.0
2. PhotoSketch：图片搜索技术
3. 使用GA在URL上添加UTM参数避免重复页面方法

IE PNG Fix 2.0支持以图片方式插入透明png和以CSS背景方式插入透明png。

需要注意的是：

1. images目录的blank.gif透明图片作为png图片的替换,如目录有变请修改iepngfix.htc里blank.gif代码路径
2. iepngfix.htc为IE6所用,本例子以”_”hack作为区分
3. 应用有PNG透明图片的标签,均要读取behavior:url(“iepngfix.htc”)
4. iepngfix方法在背景应用上只能做到background-image的效果, 背景重复坐标调用等暂时实现不了
5. 透明png背景图片会以所在层的宽高度拉伸填充,border计算在层的宽高内

官方网址及下载地址：http://www.twinhelix.com/css/iepngfix/

Related posts:

1. Unit PNG Fix
2. DD_belatedPNG.js让IE6支持透明PNG图片
3. PX转EM 字体大小在线互换程序

使用方法：

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->

其中:
DD_belatedPNG.js 为文件路径，.png_bg 为需要引用的容器名，如果需要多处引用可以使用如下方法：

DD_belatedPNG.fix('.example1, .example2, img');

其中.example1 和 .example2 为class 选择器，img 就是标签了。

如果需要修复页面上的所有PNG图片，则可以使用

DD_belatedPNG.fix(‘*'); 

官方网站：http://www.dillerdesign.com/experiment/DD_belatedPNG

除了DD_belatedPNG.js之外，我们以前介绍过的IE7.js也可以解决PNG透明图片在IE下不显示的问题。

Related posts:

1. IE7.JS 解决IE兼容性问题
2. 使用Selectivizr让IE6~8支持CSS3
3. SuperFish一款基于jQuery的级联下拉菜单

以下列出validate自带的默认验证

required: “必选字段”,
remote: “请修正该字段”,
email: “请输入正确格式的电子邮件”,
url: “请输入合法的网址”,
date: “请输入合法的日期”,
dateISO: “请输入合法的日期 (ISO).”,
number: “请输入合法的数字”,
digits: “只能输入整数”,
creditcard: “请输入合法的信用卡号”,
equalTo: “请再次输入相同的值”,
accept: “请输入拥有合法后缀名的字符串”,
maxlength: jQuery.format(“请输入一个长度最多是 {0} 的字符串”),
minlength: jQuery.format(“请输入一个长度最少是 {0} 的字符串”),
rangelength: jQuery.format(“请输入一个长度介于 {0} 和 {1} 之间的字符串”),
range: jQuery.format(“请输入一个介于 {0} 和 {1} 之间的值”),
max: jQuery.format(“请输入一个最大为 {0} 的值”),
min: jQuery.format(“请输入一个最小为 {0} 的值”)

贴举个简单的例子：

$('#EditView').validate({
              event: "keyup",
              rules:{
                  name:{required:true},
                  cosa_commodity_group_list:{required:true}
              },
              submitHandler:function(){
                  $("#group_list > option").attr("selected","selected");
                  $(this).submit();
              }
});

1.event是触发校验的方式，可选值有keyup(每次按键时)，blur(当控件失去焦点时)，不使用这个参数时就只在按提交按钮时触发。

2.如果在提交前还需要进行一些自定义处理使用submitHandler参数。

3.debug，如果这个参数为true，那么表单不会提交，只进行检查，用于调试状态。

4.rules，所有的检验规则都写在这个参数里面.

格式为：ID : {rule1,rule2,…}

          (1) required: true  必输
          (2) number: true 只能输入数字(包括小数)
          (3) digits:true 只能输入整数
          (4) minValue: 3 不能小于3
          (5) maxValue: 100 最大不超过100
          (6) rangeValue:[50,100] 值范围为50-100
          (7) minLength: 5 最小长度(汉字算一个字符)
          (8) maxLength: 10 最大长度(汉字算一个字符)
          (9) rangeLength:[5,10] 长度范围为5至10位(汉字算一个字符)
          (10) 上面的minLength, maxLength, rangeLength 这三项除了text input之外还可以用于checkbox,select这两种控件
          (11) email:true 电子邮件
          (12) equalTo: “#field” 与#field值相同
          (13) dateISO:true 日期型，格式为2012/02/12   2010-1-14

5.messages，自定义错误信息，格式与rules类似：

messages {
          password: {
              required: "请输入您的密码."
              minLength: "密码不能小于6位.",
              maxLength: "密码不能长于32位."
          },

官方网址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Related posts:

1. jquery.blockUI.js
2. jquery.form.js，JQuery表单插件
3. 将一个无符号十进制数转换成N(2-36)进制