GreenGnn.ORG - 2009 - 8

Typecho 修改日志

greengnn — Thu, 20 Aug 2009 10:11:09 +0000

2009-9-9

HTML升级为html5格式
添加主导航
添加Resources页面
添加Labs页面

2009-9-1

添加google朋友群

2009-8-20

背景图片随即切换
IE6浏览器升级提示

JavaScript 模板

greengnn — Sun, 09 Aug 2009 16:01:42 +0000

JavaScript模板是什么东东？懂php smarty框架的人应该能够理解模板，作为MVC的view层，为什么对这个东西感兴趣，最近给blog添加google日历，用的是json的方式，用创建dom的方式展示数据超级麻烦，而且死google的json嵌套又特别复杂，为了维护方便还是用js模板比较好一些。
不过还没应用到blog上，先看我的demo

下面就粘贴几个不错的模板资料，还有twinsenliang弄的WTemplet。

一个简单的JavaScript模板原理教程客户端模版应用
WTemplet，请重点看下这个技术所传达的web开发流程优化
一个完善的牛逼的老外的JavaScriptTemplates，先一睹他的demo

JavaScriptTemplates想多说几句，他是TrimPath项目的一个部分，目的是在js基础上实现MVC的模式，应用google gears的离线技术等创建牛逼的客户端应用，JavaScriptTemplates只是TrimPath的view层应用。该项目中还包含了一个TrimQuery，我个人对js知道的甚少，觉得这个玩意也很牛逼，因为他实现客户端使用SQL的方式查询数据，直接看他的demo一目了然，反正我能看懂的洋码子也不对。这个项目在Google code开源了，可以方便拿到代码，自己顺便留个记号，以防以后用得到。

取他例子的一段代码看看：
TrimQuery

SELECT Customer.id, Customer.acctBalance, Invoice.total
FROM Customer, Invoice
WHERE Customer.id = Invoice.custId
ORDER BY Customer.id

JavaScriptTemplates


{for p in products}

{forelse}

{/for}

Name
Description
Price
Quantity & Alert
${p.name|capitalize} ${p.desc}
$${p.price} ${p.quantity} :
${p.alert|default:""|capitalize}
No products in your cart.

应用google gears提高打开速度

greengnn — Thu, 06 Aug 2009 15:51:55 +0000

google gears是提供离线存储的一个平台，NB的应用gmail的离线版，google日历的离线版等，他的本地存储对不经常变动的静态文件进行存储，降低请求数挺爽的，qzone已经采用了，不过今天我测试了下又没了。

下面简单几句就搞定静态文件的存储，如果安装了gears，就可以体验到我的blog的文件本地存储服务。
一个完整的离线测试demo。

简单的代码



var localServer = google.gears.factory.create('beta.localserver');
var store = localServer.createManagedStore('test-store');
store.manifestUrl = 'site-manifest.txt';
store.checkForUpdate();

// site-manifest.txt
{
  "betaManifestVersion": 1,
  "version": "site_version_string",
  "entries": [
    { "url": "site.html" },
    { "url": "gears_init.js" }
  ]
}

js和css文件的延迟加载

greengnn — Thu, 06 Aug 2009 01:44:28 +0000

正常情况下，文件会被写到head区域，不管本页面用得到用不到就要加载，这种方式会造成一次性请求数过多加大block的时间，也容易造成文件字节过大。

延迟加载的方案是通过js在dom需要的位置load文件，比如一些需要用户触发才展示的组件，日历选择，弹出框等。

一个demo

function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
function loadCSS(url){
        var cssLink = document.createElement("link");
        cssLink.rel = "stylesheet";
        cssLink.rev = "stylesheet";
        cssLink.type = "text/css";
        cssLink.media = "screen";
        cssLink.href = url;
        document.getElementsByTagName("head")[0].appendChild(cssLink);
}

使用Typecho

greengnn — Thu, 06 Aug 2009 01:09:29 +0000

Typecho是一个国内和WP类似的blog系统，对比WP，速度是嗷嗷叫的，所以弃用了WP，而且发现他的模版做起来很容易，不到两个小时，编码和调试，一个新的皮肤就诞生了。

新皮肤对不同浏览器提供差异化的界面，让支持CSS优秀的浏览器用户享受最佳的用户体验。

以后写博客也尽量避免冗长的废话，几句话切入重点，写着也轻松，别人看着也不累。

Name	Description	Price	Quantity & Alert
${p.name\|capitalize}	${p.desc}	$${p.price}	${p.quantity} : ${p.alert\|default:""\|capitalize}
No products in your cart.