了解了基本的原理后，我就开始着手进行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="800px; height:200px; border:1px solid #333"></div> <p></p> <div id="box2" style="800px; height:200px; border:1px solid #333"></div> <script src="BP.js"></script> <script> BP.pagelet({ id : "box1", css : [], js : ["/a/box.js"], html : "<span class='word'>this is test word</span>" }) </script> <script> BP.pagelet({ id : "box2", css : ["/a/box2.css"], js : ["/a/box2.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-1){ //判断最后一个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; })();
自己执行了下 是可以的 很有成就感的一次探索，但愿关于缓存的问题我能早点找到答案。