浮山狼de博客 » html

最轻巧的javascript模板函数

fushanlang — Sun, 29 Sep 2013 10:26:27 +0000

随着移动互联网的发展APP站点增加，ajax数据交互变得频繁起来，许多javascript 模板终于有了用武之地。

看过一些js模板引擎，引入很多语法，解析，使得模板字符串看上去更漂亮，更接近UI，去程序化是他们的目的。

两年前自己也写了一个js template函数在项目中使用，今天精简了一下语法，增加error report功能方便了模板解析出错时定位问题。

本着开源的精神，我把它放到了github上
https://github.com/fushanlang/js-template

以及 oschina开源库里

http://git.oschina.net/fushanlang/javascript-template

function js_template(t, v) {
    var a = "";
    var echo = function (b) {
        a += b
    };
    var z = window.AJ;
    window.AJ = z = !z ? [] : z;
    var s = "_{" + Math.random() + "}_";
    var p = t.replace(/\n|\r|\t/g, "");
    var j = [];
    p = p.replace(/(.*?)<\/js>/g, function ($0, $1) {
        j.push($1);
        return s
    });
    var txt = p.split(s);
    p = "";
    for (var i = 0; i < j.length; ++i) {
        p += "echo(txt[" + i + "]);";
        p += j[i]
    }
    ;
    p += "echo(txt[" + j.length + "]);";
    try {
        if (v) {
            for (var i in v) {
                eval("var " + i + " =v[i];")
            }
        }
        ;
        eval(p)
    } catch (error) {
        z.push([error, p, t])
    } finally {
        return a
    }
}

js图片上传本地预览兼容(IE7-8-9\firefox\chrome)

fushanlang — Mon, 17 Dec 2012 08:28:34 +0000

上面由于代码显示控件去除了html header标签，可以参照以下完整的内容:

<pre> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #preview{width:300px;height:300px;border:1px solid #000;overflow:hidden;} #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);} #preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); width:300px; visibility:hidden; overflow: hidden; } </style> <script type="text/javascript"> function previewImage(file) { var MAXWIDTH = 300; var MAXHEIGHT = 300; var div = document.getElementById('preview'); if (file.files && file.files[0]) { div.innerHTML = ''; var img = document.getElementById('imghead'); img.onload = function(){ var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); img.width = rect.width; img.height = rect.height; img.style.marginLeft = rect.left+'px'; img.style.marginTop = rect.top+'px'; } var reader = new FileReader(); reader.onload = function(evt){img.src = evt.target.result;} reader.readAsDataURL(file.files[0]); } else { var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; file.select(); var src = document.selection.createRange().text; var objPreviewSizeFake = document.getElementById('preview_size_fake'); objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; div.innerHTML = ''; var img = document.getElementById('imghead'); img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight); status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height); div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>"; } } function clacImgZoomParam( maxWidth, maxHeight, width, height ){ var param = {top:0, left:0, width:width, height:height}; if( width>maxWidth || height>maxHeight ) { rateWidth = width / maxWidth; rateHeight = height / maxHeight; if( rateWidth > rateHeight ) { param.width = maxWidth; param.height = Math.round(height / rateWidth); }else { param.width = Math.round(width / rateHeight); param.height = maxHeight; } } param.left = Math.round((maxWidth - param.width) / 2); param.top = Math.round((maxHeight - param.height) / 2); return param; } </script> </head> <body> <div id="preview"> </div> <div style="width:1px;height:1px;overflow: hidden;"> </div> <br/> <input type="file" onchange="previewImage(this)" /> </body> </html></pre> <p>

css expression应用-尽量不用

fushanlang — Fri, 24 Dec 2010 08:26:58 +0000

只有 IE 支持 CSS Expression,从IE8开始不再支持CSS Expression.

CSS Expression也称为CSS表达式，它是动态设置CSS属性的强大方法，但也存在着一定的危险性。

CSS Expression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS Expression增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。所以它对客户端浏览器资源有比较高的要求，否则很容易让您的用户感觉打开你的页面，机器会变的很慢。

然而在 IE8 标准模式中，不再支持 CSS Expression。官方提供了以下几点原因：

为了更好的遵循标准
- CSS Expression 为 IE 专有，不具备通用性；
- CSS Expression 常常用来修复或模拟某些 IE 不支持的 CSS 特性，如 ‘min-height’、’max-width’。这些均已被 IE8 所支持。
为了提高性能
表达式的计算需要耗费巨大的系统资源，Web 性能专家 Steve Sounders：recommend avoiding them to improve front-end performance。
为了降低浏览器被攻击的可能
由于它们暴露出了一个脚本执行环境，CSS Expression 就构成了一个可能的脚本注入攻击方向。

关于动态属性的更多内容，请参见 MSDN：About Dynamic Properties。

关于微软官方结束对 CSS Expression 的支持的更多内容，请参见 MSDN：Ending Expressions。

IE 中使用 CSS Expression 多数情况下是为了修复或模拟某些 IE 不支持的 CSS 特性，比如IE下的“min-height”,和”position:fixed.” IE6下的’max-width’等等。

然而CSS Expression 是一个已经过时的技术，微软官方日后可能不会再对其进行开发及支持。除非为了利用 CSS hack 去弥补某些 IE 中不支持的 CSS 特性，否则应尽量避免使用 CSS Expression。