标签:jquery

浏览模式: 标准 | 列表 | 图文

又是swfupload惹的祸

swfupload这个控件,只要是涉及到多文件上传、大文件上传,那么就几乎应该是听过这个控件的名称的。

确实,它解决了不少问题,就象我所提到的多文件上传、大文件上传,但也有很多问题存在,从最早的版本到现在,经历了很多问题的改变。。

1、最早的那个SESSION问题。IE和FF的swf下session传递会不一致。这个问题我在09年就遇到过了,记录在[2009-03-09] - 备忘:swfUpload注意事项 。这个问题最初官方的DEMO里并没有提到,在后来的版本里才有涉及。。。现在DEMO里已经有了

2、我用的uploadify这个封装的插件,如果URL路径中含有“//”,在这个时候,如果JS中的路径是相对路径,比如“../../js/xxx.swf”之类的引用,那么,在上传的时候就会出现security error。这件事情我记录在[2011-01-21] - 开发笔记记录 。

3、就是今天遇到的问题,在chrome下面上传的时候出现http error。bobby查了一下资料,发现问题和2中的有点相似,2的问题是采用相对路径的时候,路径中不能有“//”,但chrome下则是,不能有相对路径,当把JS中指向swf的路径換成URL可以访问的路径后,OK一切正常【firefox全部正常】

4、不知道是uploadify封装的有问题还是什么 ,在某些IE下就是不正常。比如我win7 IE8,上传图标不显示,但有的同事就显示了。几样的win7 , IE8(也可能是因为我是64位的??),但某位朋友在xp IE下也不能显示,郁闷了。。准备換到YUI自带的uploader上看看

好吧,就记录这么多了。。。

HTTP 204和205的应用

HTTP 204和205的应用

上次看的那篇博客里介绍说到一点关于HTTP的code的问题,在jquery里面已经在1.5里被改进了。上次的问题:

原本对于“请求成功”的浏览器状态码,除200-299以及304外,还有一个1223,来自于IE的一个BUG,会将204的状态码变成 1223。现在因为有了jXHR对象,相当于中间多了一层,因此从jXHR对象获取statusCode不会出现1223的情况,已经被变回204了。

说实话,我对于204代码真的不知道有具体的作用,因为事实上,我们很少会用到,往往 返回的时候,要么返回1、0之类的,就要么是JSON之类的数据。

然而这篇文章,就说明了一些简单的理由:

内容由此开始:。。。。。。

之前和人讨论过这个问题,,, 今天感冒在家休息, 就回忆了一下, 整理如下.

我们很多的应用在使用Ajax的时候, 大多数情况都是询问型操作, 比如提交数据, 则Ajax只是期待服务器返回:

{status: 0, message:""} //status 0代表成功, 非零的时候, message中包含出错信息.

我们知道HTTP的状态码, 2xx都是表示成功, 而HTTP的204(No Content)响应, 就表示执行成功, 但是没有数据, 浏览器不用刷新页面.也不用导向新的页面.

在HTTP RFC 2616中关于204的描述如下:

If the client is a user agent, it SHOULD NOT change its document view from that which caused the request to be sent. This response is primarily intended to allow input for actions to take place without causing a change to the user agent’s active document view, although any new or updated metainformation SHOULD be applied to the document currently in the user agent’s active view.

类似的还有205 Reset Content, 表示执行成功, 重置页面(Form表单).

The server has fulfilled the request and the user agent SHOULD reset the document view which caused the request to be sent. This response is primarily intended to allow input for actions to take place via user input, followed by a clearing of the form in which the input is given so that the user can easily initiate another input action.

于是, 当有一些服务, 只是返回成功与否的时候, 可以尝试使用HTTP的状态码来作为返回信息, 而省掉多余的数据传输, 比如REST中的DELETE和如上所述的查询式Ajax请求.

最后说说205, 205的意思是在接受了浏览器POST请求以后处理成功以后, 告诉浏览器, 执行成功了, 请清空用户填写的Form表单, 方便用户再次填写,

总的来说, 204适合多次对一个Item进行更新, 而205则适合多次提交一个系列的Item.

但, 请注意, 目前还没有一个浏览器支持205, 大部分的浏览器, 都会把205当做204或者200同样对待.

------------

事实上,大多数时候,我们都是只利用200状态,然后返回一些数据来决定到底返回怎么样的数据喽。。。

上面的文章来自于:http://www.laruence.com/2011/01/20/1844.html,主要在于有次讨论204的时候涉及到的事情,然后遇到了就记下来了

转:jQuery1.5的改进细节

转:jQuery1.5的改进细节

jQuery 1.5beta出来了?看到这篇博客的时候,我很惊讶,1.4开始,jQuery的更新速度就越来越快了。现在,居然1.5beta都同来了。文中说了,ajax完全重写,但没介绍,不过对于使用者来说,这些都无需关心,或者应该开心才是,因为它带来了更多的兼容性,说不定速度也更快了。(猜测而已,最近实在没时间 看这些代码)

下面是原文:

jQuery 1.5 beta1出来了,从学习跟进上来说,这一次已经比较晚了(我竟然不知道1.5什么时候出的alpha,就这么beta了)。

这个1.5版本最大的更新是AJAX的完全重写,提供了更强的可扩展性。但是受制于精力和篇幅,对新的AJAX的分析还是放到下回,本篇先简单介绍一下细节方面的改进。

jQuery._Deferred和jQuery.Deferred

首先不得不说这两个新生事物,因为他们是作为基础设施存在,不把这两个东西讲明白了,有些问题根本没办法解释。

首先,jQuery.Deferred是jQuery._Deferred的增强版,因此对于这个问题,从jQuery._Deferred入手,就能说明一大半的问题。

什么是Deferred?从字面上看,我的第一反应是“延迟加载”,首字母大写的应该是“类型”的定义,所以这大概是一个“透明提供延迟加载功能”的类型吧。然而实际上,虽然确实带有那么一点点“延迟”的意思,这个东西却不是用来实现延迟加载的。

简单来说,jQuery._Deferred是一个函数队列,他的作用有以下几点:

  • 保存若干个函数。
  • 在特定的时刻把保存着的函数全部执行掉。
  • 执行过后,新进来的函数会立刻执行。

感觉是不是和啥东西很像?对,jQuery的ready函数就是这样的逻辑,实际中jQuery 1.5中的ready函数也确实被嫁接到这上面去了。

jQuery._Deferred提供下面的接口:

  • done:function(fn1, fn2, ...)的形式,用于把函数添加到队列中。
  • fire:function(context, args)的形式,使用context指定this对象,args指定参数,调用队列中所有函数。fire被调用后,_Deferred会进入 isResolved状态,未来对done的调用不会再保存函数,而是直接调用函数。
  • resolve:相当于调用fire(this, arguments),一个简化的方法。
  • isResolved:用来判断_Deferred是否在isResolved状态,具体参考前面的fire函数的解释。
  • cancel:取消掉整个队列,这样不管未来是不是fire,队列中的函数都不会再被调用。

说明白了jQuery._Deferred,再来看看jQuery.Deferred。这个东西其实就是2个_Deferred组成的,第一个称为 deferred,用于保管“正常”状态下的函数;第二个称为failDeferred,用于保管“出错”状态下的函数。同时 jQuery.Deferred提供了一些新的接口:

  • then:function(done, fail)的形式,把done添加进deferred,把fail添加进failedDeferred。
  • fail:相当于failDeferred的done函数。
  • fireReject:相当于failDeferred的fire函数。
  • reject:相当于failDeferred的resolve函数。
  • isRejected:相当于failDeferred的isResolved函数。

同时jQuery.Deferred取消了cancel函数。

那么这个是啥用的呢?有“正常”和“出错”2个状态,同时又是异步的,很容易就能想到……对,给AJAX用的,在下一篇分析中再详细说明。

jQuery.ready的变化

因为有了jQuery._Deferred这个东西,jQuery.ready函数变成依赖于函数队列,具体的变化有:

原来的readyList变量已经不再是一个数组,而变成了jQuery._Deferred对象。

原本在DOMContentLoaded时,调用readList中所有函数的逻辑,现在也使用了jQuery._Deferred中,原来的代码:

while ( (fn = ready[ i++ ]) ) {
fn.call( document, jQuery );
}

变成了:

readyList.fire( document , [ jQuery ] );

jQuery.parseXML函数

新增了静态函数jQuery.parseXML,用于提供浏览器兼容的从字符串转为XML文档的功能。

该函数的逻辑网上有很多,jQuery也没有特别的地方,大致分为以下2种:

  • 对于标准浏览器,使用DOMParser对象:

    var parser = new DOMParser();
    var xml = parser.parseFromString(text, 'text/html');
  • 对于IE,使用Microsoft.XMLDOM对象:

    var parser = new ActiveXObject('Microsoft.XMLDOM');
    parser.async = 'false';
    parser.loadXML(text);
    var xml = parser.documentElement;

data部分

添加了jQuery.hasData函数,用于判断一个元素是否有jQuery附加上去的数据。

修改了jQuery.expando的实现,在原来单纯地取当前时间的基础上,添加了一个随机数:

expando = "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" );

这样保证在同一时间,引入多个jQuery副本,这几个副本之间的expando不会相互冲突,导致元素上的data变得错乱。一般来说,是不会引入多个jQuery副本的,但是使用SealJS等的时候,配置不当的话,也是很容易出现此类问题的。

DOM操作部分

原本的hasClass、addClass、removeClass函数都需要将元素的class属性分隔为数组,在1.4.4版本中,通过\n或\t进行分隔,在1.5中增加了一个\r,用于对应Windows平台下的换行符(\r\n)。

jQuery.fn.attr函数,1.4.4版本中拒绝从TextNode和CommentNode上获取属性,在1.5版本中添加了一个AttributeNode(noteType == 2)。

在1.4.4版本中,jQuery会在页面unload的时候清理掉由jQuery维护的所有DOM事件,这是为了避免IE的内存泄露问题。但是在1.5中这一段代码不见了,不知是出于什么考虑。

对于IE下使用cloneNode复制节点,会将事件也一起复制过来的问题,1.4.4中是采取复制innerHTML的方式给予解决,而在1.5中则采纳了mootools团队提供的方法,使用cloneFixAttribute函数修正该问题。

cloneFixAttribute函数们于jQuery 1.5 beta1源码文件的5388-5438行,处理IE的BUG的原理很简单,当然前端里一些看似简单的东西,都是很难发现的:

  1. IE中有个叫clearAttributes的函数,会清除到节点上的所有属性,顺便把和事件相关的onclick之类的属性也去掉了。在复制出来的节点上调用这个函数,就会把属性清得干干净净。
  2. IE中还有一个叫mergeAttributes的函数,把一个节点的属性复制到另一个节点上,但他不会把和事件相关的属性复制过去。所以再把原始节点调用mergeAttributes,把属性重新放回复制出来的节点上,这就相当于起到了去除事件相关属性的作用。

另外cloneFixAttribute函数还处理了非常多IE6-8在cloneNode上的兼容性问题,非常值得详细研究。

AJAX部分

AJAX已经完全重写了,只留下一点边边角角保留着1.4.4版本的风采,这里只抽取一部分进行简单的说明。

原来版本中$.get和$.post的实现非常相似,具体来说仅有一个method配置项不同,因此在1.5版本中被合并起来了:

$.each(['get', 'post'], function(i, method) {
$[method] = function() { ... };
});

ajaxSetup函数现在加了一行return this;,可以链式调用了。

serializeArray函数现在统一将value中的换行符替换成Windows的风格(\r\n)。

AJAX的回调函数中,作为参数的对象不再是原生的XMLHTTPRequest,而是jQuery自己封装的称为jXHR的对象,这个对象提供了XMLHTTPRequest的常用接口。

原本对于“请求成功”的浏览器状态码,除200-299以及304外,还有一个1223,来自于IE的一个BUG,会将204的状态码变成 1223。现在因为有了jXHR对象,相当于中间多了一层,因此从jXHR对象获取statusCode不会出现1223的情况,已经被变回204了。

jQuery.ajax函数的配置项中多了一个statusCode项,其结构为map,用于指定返回特定状态码时的回调函数,大致形式如下:

jQuery.ajax({
url: 'xxx',
statusCode: {
200: function() { 处理请求成功 },
404: function() { 处理页面未找到 },
503: function() { 处理Service Unavailable }
}
});

再添加了这个回调后,jQuery.ajax函数已经有非常多的回调函数,其触发过程如下:

  1. 根据返回的状态码,触发success或者error回调。
  2. 根据状态码,触发对应的statusCode回调。
  3. 触发complete回调。
  4. 触发全局ajaxComplete回调。
  5. 如果此时没有正在执行的AJAX,触发全局ajaxStop回调。

其他细节

入口函数jQuery.fn.init现在多了一个参数,值始终为rootjQuery,用于加速init函数中对rootjQuery变量的查找速度(减少了一层作用域):

//jQuery 1.5 beta1 源码23行
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
}

jQuery对象支持继承了,具体的修改是将几处直接调用jQuery的代码改为了对this.constructor的调用:

202行:return this.constructor( context ).find( selector );
253行:var ret = this.constructor();
334行:return this.prevObject || this.constructor(null);

同时还提供了jQuery.subclass函数用于创建一个继承自jQuery的类型,由于不是很常用jQuery,更是从来没有用到过需要继承jQuery的情况,因此也不方便说这个功能的作用有多大。

原文来自:http://www.cnblogs.com/GrayZhang/archive/2011/01/18/jquery-1-5-enhanced-detail.html
YUI PHP Loader Utility

YUI PHP Loader Utility

YUI是一个低调又强大的框架。你不能说它有什么,但它确实就存在着。。。
jQuery是Yii框架自带的一个工具,比如ZII里集成的全是JQuery,但YUI也是有着自己的工具,比如这个YUI PHP Load Ulility

The YUI PHP Loader Utility is a server-side utility that allows you to load specific YUI components and their dependencies into your page via PHP. YUI PHP Loader can operate as a holistic solution by loading all of your necessary YUI components, or it can be used to add one or more components to a page on which some YUI content already exists.

YUI also contains a client-side loader, which provides similar functionality from JavaScript.

YUI PHP Loader adds value in the following ways:

  1. Reliable, sorted loading of dependencies: YUI comprises more than two-dozen components, many of which work together to provide the best possible compromise between compartmentalization and code reuse. Because of this, YUI components often need to load with specific dependencies in a specific order. YUI PHP Loader understands which components depend on one another, and based on this knowledge it ensures that the right resources are loaded in the right order.
  2. Automatic use of rolled-up files. YUI PHP Loader knows about all of the built-in rollup files that ship with YUI — like the yahoo-dom-event.js file that contains the Yahoo Global Object, the Dom Collection, and the Event Utility, three components that are commonly used together. By automatically using rolled-up files when it makes sense to do so, the YUI PHP Loader helps you reduce HTTP requests and thereby keep your page as efficient as possible.

As you think about how you want to load YUI on the page, you may find it useful to refer to this overview of some of the most common loading strategies and their relative merits:

YUI的CSS其实也不错,现在细想想如果不是当年YAHOO那么强势的推PHP,如今的PHP也不会被这么多公司所能够接受吧。google是在强推python,虽然现在有着go语言,但python也正在被越来越多的公司所接受了,比如它的兼容性,它的运行速度。。。我还是比较喜欢的。。。。。。

loadMask

loadMask

loadmask 这个小插件不错,可以让指定的DIV上出现那种类似于extjs的等待框,当内容加载完毕后,可以通过 unmask方法来解除等待框的状态。。。

程序也很小,不到2K。当然不是我写的。。是google上的一个小插件。嗯,其实我也会写,但我真不会CSS。。。

看介绍:

LoadMask jQuery plugin can mask DOM elements while their content is loading or changing to prevent user interactions and inform that some background task is still running. It is very light (~2Kb) and easy to use.

The behavior of this plugin is largely based on handy Element.mask() method from ExtJS Framework.

也有例子:You can try online demo here.

内容在这里:http://code.google.com/p/jquery-loadmask/

Yii使用EClientScript遇到的一点小问题

Yii使用EClientScript遇到的一点小问题

eclientscript是hightman开发的一个yii插件,用来对于script和css文件进行合并、压缩
当然在自己的项目中,我也为它加了不少的功能和组件,只是因为这是并非公用的东西,拿出来分享意义也不大。
比如,我定义了一个变量path,定义了几个全局的assetUrl,assetPath,然后可以指定目录生成压缩文件,把项目中关于商城、资讯、用户中心等的JS就可以彻底分开了(JS是无所谓,关键是CSS,因为它是认相对目录的)

好了,开始说我遇到的问题吧,目前我有一个JS,二级联动的JS,它是这样写的。

(function($){
$.fn.xxx = function(){}
})(jQuery);

是的,它没有什么问题,而且也挺不错,这样的写法可以防止项目中的$被污染,而使用$只在这一个包里被使用,单独引用的时候,一点问题没有。然而问题就发生在它被合并到一个文件后,上面的代码就无法执行了。。。后来直接改成

$.fn.xxx = function(){}

好吧,我偷懒了,但,将就点吧,没时间扑在上面。。。招人啊招人啊。。。
本文纯属工作记录,谢谢

cnbeta:2010年最佳jQuery插件

cnbeta:2010年最佳jQuery插件

这个玩意,纯收藏了,象QuickSand这个玩意已经被很多人转过了,每年都能在各个推荐中出现,真没劲。还有colortip,如今其实已经真不算稀奇了吧。不过还是转一下,因为对其中有两个插件非常感兴趣:Lettering.js和Masonry。

好吧,上原文【文字版】:

在前两周国外知名博客WDL先后分享了“2010最佳系列”中的“最佳免费WordPress主题”和“最佳免费字体”, 在这个星期又发布了2010年最佳jQuery插件。在2010年,JavaScript框架继续日渐普及,这使得大量的插件被开发出来。满目琳琅,难以 选择心头之好。WDL的作者从大量的优秀jQuery插件精心筛选出一些对Web Designers有帮助的和具备非常不错的视觉效果的Best of the best。

2010年最佳jQuery插件(排名不分先后):

Nivo Slider

一个加载设置拥有9种过度效果的超级smooth slider,它还支持如链接图像和键盘导航等内容。

Quicksand

通过一个非常不错的洗牌动画实现选项内容重新排序,只需要指定源容器和替换源的目标collection 。新元素将会以奇特缩放+阿尔法效果出现,消失的元素(non-existant in destination collection)平滑地消失或重新排位,移动到它们的目标位置。

Spritely

Spritely 是一个由Artlogic开发的 jQuery插件,用于使用纯HTML和JavaScript创建动态物体和背景动画。

Lettering.js

Lettering.js是一个轻量经的、易于使用的 jQuery插件,可创造出极具个性的网页排版。

Colortip

Colortip可转换你的页面元素的标题属性为一系列色彩丰富的提示(当你的鼠标移动到不同的标题上会出现不同颜色的字体文本提示)。支持六种色彩主题,这样你可更加容易融合到你的个人网页中去。

Masonry

Masonry是一个 jQuery布局插件. 你可以将它看作CSS floats的另一面。浮动元素的排列是先水平后垂直,Masonry排列内容是根据一个网格先垂直后水平的。

gvChart

gvChart是一个使用Google Charts了的jQuery插件,可通过HTML table tag的数据实现交互可视化。它非常容易上手,此外它支持创建五种风格的图标。

Animated table sort

这是一个用于创建表格的jQuery插件,所创建的表格可以根据不同的列项目进行A-Z,升序排列,切换效果非常不错。

jQuery Image Scale Carousel

网站图片保持完整的纵横比比什么都重要。这个jQuery插件可以完美地在slider展示你所有的图片,而不需担心产生变形。 jQuery Image Scale Carousel插件自动改变你所有图片到适合大小,一切都是那么的简单。

YoxView

YoxView是一个免费的多媒体播放jQuery插件。它易于使用,功能丰富。你可以用它来展示各种媒体,如图像,视频,内嵌的内容,iframes,Flash等等。

MK编译 via WDL

原文地址:http://www.x-berry.com/best-jquery-plugins-of-2010

--EOF--

然后那个gvchart也可以,方便你调用了google chart的一些参数了

jquery笔记:让input从disabled变成enabled

jquery笔记:让input从disabled变成enabled

在页面处理的时候,有时候我们会使用这样的小技巧,在没有点击XX按钮时,YY按钮是disabled的,当选中了XX时,YY也变成了enabled的状态。

在使用普通的JS的时候,我们很可能就直接document.getElementById('YY').disabled = false;就解决了。但是在jQuery里却不是每个浏览器都支持这样的作法,即:$('#yy').attr('disabled',false);也试了一下$('#yy').attr('disabled','');,不知道是我的人品问题还是确实 有问题,反正都没有成功,于是我又尝试$('#yy').attr('enabled','enabled'),也没有成功。 最后一发狠,来了一句:$('#yy').removeAttr('disabled'),得成了。

果然还是怕狠人的。在这里做个记录而已。虽然大多数情况下不一定用得到。

GreaseMonkey with jQuery

GreaseMonkey with jQuery

习惯了用jQuery,因此在使用greasemonkey的时候,也总是想着用jQuery,找了下,确实有这样的例子。。

var $;

// Add jQuery
(function(){
if (typeof unsafeWindow.jQuery == 'undefined') {
var GM_Head = document.getElementsByTagName('head')[0] || document.documentElement,
GM_JQ = document.createElement('script');

GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
GM_JQ.type = 'text/javascript';
GM_JQ.async = true;

GM_Head.insertBefore(GM_JQ, GM_Head.firstChild);
}
GM_wait();
})();

// Check if jQuery's loaded
function GM_wait() {
if (typeof unsafeWindow.jQuery == 'undefined') {
window.setTimeout(GM_wait, 100);
} else {
$ = unsafeWindow.jQuery.noConflict(true);
letsJQuery();
}
}

// All your GM code must be inside this function
function letsJQuery() {
alert($); // check if the dollar (jquery) function works
alert($().jquery); // check jQuery version
}

然后代码就得全部扔在letsJQuery()方法里了。
由于是async,所以,尽量选择快一点地址,比如本地的localhost之类的,HOHO,不过,这就得本地WEB服务常开了。

原文来自:http://joanpiedra.com/jquery/greasemonkey/

javascript模版系统

javascript模版系统

用javascript做模版的话,说来也算是比较方便的,特别是对于PHP开发来说,只要扔一个json数组过来。然后剩下的就可以让javascript来完成了。
搜索一下jQuery的plugin,可以找到大约5~6个模版程序。好象用的比较多的还是jTemplate,上一次司徒正美用javascript写了一个简单的例子,这次又写了一个比较详细的,说是v2,有兴趣的朋友可以尝试一下。。
--start--司徒正美认为模版要处理复杂的玩意,所以写的功能就强大了。
本版本主要是对原模板系统进行提速,去掉消耗巨大的辅助函数。本来想用它与John Resig的 Micro-Templating比较一下速度,发现对方无法处理复杂的模板,残念。

//司徒正美 javascript template - http://www.cnblogs.com/rubylouvre/ - MIT Licensed
(function () {
if(!String.prototype.trim){
String.prototype.trim = function(str) {
return this.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');
}
}
var dom = {
quote: function (str) {
str = str.replace(/[\x00-\x1f\\]/g, function (chr) {
var special = metaObject[chr];
return special ? special : '\\u' + ('0000' + chr.charCodeAt(0).toString(16)).slice(-4)
});
return '"' + str.replace(/"/g, '\\"') + '"';
}
},
metaObject = {
'\b': '\\b',
'\t': '\\t',
'\n': '\\n',
'\f': '\\f',
'\r': '\\r',
'\\': '\\\\'
},
parser = document.createElement("div"),
startOfHTML = "\t__views.push(",
endOfHTML = ");\n";

//onsite,可选,Boolean,是否就地替换掉模板容器,默认true,如果为false,则返回一个文档碎片,交由用户自己插入到需要的地方
dom.ejs = function (obj) {
var onsite = obj.onsite === void 0 ,
left = obj.left || "<%",
right =obj.right || "%>",
selector = obj.selector,
isLeft = true,
buff = ["var __views = [];\n"],
fragment = document.createDocumentFragment(),
el = document.getElementById(selector),
ejs = dom.ejs;
if (!el) throw "找不到目标元素";
var str = el.text.trim();
if(!ejs[selector]){
while(str.length){
var condition = isLeft ? left :right;
var index = str.indexOf(condition);
if(index !== -1){//取左边
var text = str.slice(0,index);
if(isLeft){
buff.push(startOfHTML, dom.quote(text.trim()), endOfHTML);
}else{
switch (text.charAt(0)) {
case "#"://处理注释
break;
case "="://处理后台返回的变量(输出到页面的);
buff.push(startOfHTML, text.slice(1), endOfHTML)
break;
default:
buff.push(text, "\n")
};
}
}else{
if(isLeft){
buff.push(startOfHTML, dom.quote(str), endOfHTML);
break;
}else{
throw "在字符串{{ "+dom.quote(str)+" }}中找不到右界定符"+right
}
}
str = str.slice(index+2).trim();
isLeft = !isLeft;
}
ejs[selector] = new Function("json", "with(json){"+buff.join("") + '};return __views.join("");')
}
parser.innerHTML = ejs[selector](obj.json || {});
while (parser.firstChild) {
fragment.appendChild(parser.firstChild)
}
return onsite ? el.parentNode.replaceChild(fragment, el) : fragment;
};
window.dom = dom;

})();

这种使用原生代码写的例子,可以被任何代码所使用,如果你有兴趣也可以看看司徒正美的例子的。原文网址在javascript 模板系统 ejs v2,可以移步一观。