注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学会珍惜

You've been saying for the longest time

 
 
 

日志

 
 

bigPipe的demo  

2013-02-06 10:32:30|  分类: 前端开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
前言
至此,对facebook的研究告一段落。额外的一点收获是这种方式不仅对提升性能作用明显,还在安全处理上提供了保障。

整理自:博客园

了解了基本的原理后,我就开始着手进行BP模型的演练,原以为会不难,只是将一些数据动态的加载和引用。在实际的操作中,遇到了一系列的问题。

问题1:

动态加载css,如何判断动态加载的css已经加载完成?在网上找了很多 都只是简单的将link标签 创建好之后添加到head部分,这样有个问题啊,怎么判断这个对应连接的css加载完了呢,后来,曲线救国的方法。创建一个隐藏的div,在你要加载的css样式里来设置这个隐藏div的比如width属性,间隔的来查看这个样式是不是已经加上,如果加上,就说明这个对应的css样式已经加载完了 这个方面很巧妙哈,其实也可以用于判断动态加载的js是否已经加载完毕,不过对于js的是否加载完,已经有了现成的接口,只是要进行浏览器兼容性的判断。这个问题目前已经解决。

问题2:

一个pagelet也许同时对应两个或者更多个css,从原则上是可以这样的。同样,也可以对应一个或多个js文件。这个就要求,在进行页面输出的时候,对应的css和js格式应该为数组。这个问题也解决了。

另:我本来暗下决心 从这个例子开始我的注释一定要灰常灰常规范。不过还是太懒,没改进完全。

另有一个没解决的问题。即缓存的问题,比如,我修改了css文档,但刷新页面也没有看到最新的样式。我删除缓存后就可以看到最新的样式了。所以我猜想,当前的样式还是从缓存中读取的。只是,我修改了文件,所以当前文件的修改时间 和 缓存中读取到的修改时间应该不一致啊。既然不一致,为什么还是从缓存中读取呢,百思不得其解中。

好了 贴代码的时间,代码很多。先来php端的 也就是输出的页面为:

<html>
<head>
<meta charset="utf-8"/>
<title>test</title>
</head>
<body>
<div id="box1" style="width:800px; height:200px; border:1px solid #333"></div>
<p></p>

<div id="box2" style="width:800px; height:200px; border:1px solid #333"></div>
<script src="BP.js"></script>
<script>
BP.pagelet({
id:"box1",
css:[],
js:["http://s1.bdstatic.com/r/www/cache/global/js/home-2.5.js"],
html:"<span class='word'>this is test word</span>"
})
</script>
<script>
BP.pagelet({
id:"box2",
css:[],
js:["http://s1.bdstatic.com/r/www/cache/user/js/u-1.3.4.js"],
html:"<span class='word1'>second test word</span>"
})
</script>
</body>
</html>

其中,BP是当前模式的解释语言。

BP也贴过来?

var BP = (function () {
var that = {};
that = {
/**
* check the id
* @param {object} json.id
*/
argsCheck:function (json) {
if (!json.id) {
throw 'nodeId is necessary';
return;
}
},
/**
* get node by id
* @param {string} id
* @return {html object} html node
*/
g:function (id) {
if (typeof id === 'string') {
return document.getElementById(id);
}
else {
return id;
}
},
/**
* check the type of broswer
*/
IE:function () {
return /msie/i.test(navigator.userAgent);
},
getStyle:function (node, property) {
var cssList;
try {
cssList = document.defaultView.getComputedStyle(node, null);
}
catch (e) {
cssList = node.currentStyle;
}
return node.style[property] || cssList[property];
},
/**
* load css
* @param {object} css href, load_ID, oncomplete
* @param {string} css href
* @param {string} load_ID
* @param {function} onCssComplete
*/
cssLoader:function (json) {
//insert css
var len = json.css.length;
json.onCssComplete = json.onCssComplete ? json.onCssComplete : function () {
};
if (len < 1) {
json.onCssComplete();
} else {
for (var i = 0; i < len; i++) {
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('charset', 'utf-8');
link.setAttribute('href', json.css[i]);
document.getElementsByTagName('head')[0].appendChild(link);

var div = document.createElement("div");
div.id = json.load_ID;
div.style.display = "none";
document.body.appendChild(div);
}
var timer = setInterval(function () {
if (parseInt(BP.getStyle(BP.g(json.load_ID), "width")) == 40) {
clearInterval(timer);
json.onCssComplete();
document.body.removeChild(div);
}

}, 50)
}

},
/**
* load js
* @param {string} js
*/
jsLoader:function (json) {
var len = json.js.length;
json.onJsComplete = json.onJsComplete ? json.onJsComplete : function () {
};

if (len < 1) {
json.onJsComplete();
} else {
for (var i = 0; i < len; i++) {
var script = document.createElement("script");
script.setAttribute("charset", "utf-8");
script.setAttribute("src", json.js[i]);
document.getElementsByTagName("head")[0].appendChild(script);

if (i == len) { //判断最后一个js文件是否已经加载完
if (BP.IE) {
script["onreadystatechange"] = function () {
if (script.readystatechange.toLowerCase() == "loaded" || script.readystatechange.toLowerCase() == "complete") {
json.onJsComplete();
}
}
} else {
script.onload = function () {
json.onJsComplete();
}
}
}
}

}
},
pagelet:function (json) {
BP.argsCheck(json);

var cssJson = {
css:json.css,
load_ID:json.id + "css",
onCssComplete:function () {
// load css first;
if (json.html) {
BP.g(json.id).innerHTML = json.html;
}
}
}
BP.cssLoader(cssJson);

var jsJson = {
js:json.js,
onJsComplete:function () {
console.log(json.id + '----complete');
}
}
BP.jsLoader(jsJson);
}
}
return that;
})();

自己执行了下 是可以的 很有成就感的一次探索,但愿关于缓存的问题我能早点找到答案。

  评论这张
 
阅读(371)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017