最近看了很多的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. 使用谷歌统计来跟踪网页加载时间

支持模拟对话框类型：

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)进制

目前支持的浏览器：IE6+IE6+, WebKit Browsers (Safari, Chrome), Firefox 2+（其中需要注意的是IE6需要设置输入框的label的颜色）

需要注意的是：浏览器自动填充表单会照成错误，对于火狐和Chrome可以在input elements设置autocomplete=”off” 。

官方网址及演示：http://fuelyourcoding.com/scripts/infield/

Related posts:

1. Google Chrome Frame 谷歌浏览器框架
2. jQuery plugin: Validation 表单校验
3. UploadRobots免费的网络硬盘