创造世界上最简单的 PHP 开发模式(2)

七:文章列表察看页面实现和模板处理

随着web
app中JS越来越多,有时页面首次加载时有很多JS并没有用到。这时为了提高下载速度,提高页面渲染效率就需要让这部分暂时不用的JS延迟加载,即只在用到它们的时候再下载。这里会先实现一个最简单JS的惰性加载。后续几篇会逐步加强功能直至一个完整的JS/CSS模块加载库。这个系列里我不会实现队列,即各个JS文件是并行下载的,只有当多个JS全部下载后才执行回调。当然在第二个系列JS
Queue
LazyLoad中会实现各个JS文件顺序加载,每个JS文件下载后都有一次回调机会。这两种方式有各自的应用场景。

先来看看页面list1的实现,在list1里面分页用了一个page.js文件,这个文件是自己给自己写的一个js分页的函数,挺好用的

 

---------------page.js---------------//--------共 20 条记录,当前 86/99 页 [1]... [82] [83] [84] [85] [86] [87] [88] [89] [90] ...[99] GO-------------------//recordCount = 20;//show = 20//pageShow = 11;//pageCount = 100;//pageNow = 86;//pageStr = ?page=_page_;//document.write(showListPage(recordCount, show, pageCount, pageNow, pageStr));function showListPage(recordCount, show, pageShow, pageCount, pageNow, pageStr){ if(pageCount1) pageCount =0; if(pageNow1) pageNow = 0; str = 共 B+recordCount+/B 条记录,当前 B+pageNow+/+pageCount+/B 页 ;if(pageCount=pageShow){ startHave = false; endHave = false; startNum = 1; endNum = pageCount; } else if(pageNow-1 = pageShow/2){ startHave = false; endHave = true; startNum = 1; endNum = pageShow-1; } else if(pageCount-pageNow = pageShow/2){ startHave = true; endHave = false; startNum = pageCount - pageShow + 2; endNum = pageCount; } else { startHave = true; endHave = true; startNum = pageNow - Math.floor((pageShow-2)/2); endNum = startNum + pageShow - 3; }if(startHave){ startStr =  [A href=+pageStr.replace(_page_,1)+1/A]... ; str += startStr; }for(i=startNum; i=endNum; i++){ if(pageNow==i) str += [ + i + ]; else str +=  [A href= + pageStr.replace(_page_,i) +  + i + /A] ; }if(endHave){ endStr =  ...[A href= + pageStr.replace(_page_,pageCount) +  + pageCount + /A] ; str += endStr; } return str;}

--------------list1.htm----------------a href=new.php添加新文章/ahrtabletrthphp开发文章/th/tr!-- BEGIN phplist --trtd{id}--a href=view.php?id={id}{title}/a/td/tr!-- END phplist --/table!-- BEGIN phplist_page --script src=page.js language=javascript/scriptscript language=javascriptrecordCount = {recordCount}; //总记录数show = {pageSize}; //每页显示的记录数量pageShow = 10; //每页显示的分页连接数量pageCount = {pageCount}; //总页数pageNow = {page}; //当前页数pageStr = ?page=_page_; //页面连接document.write(showListPage(recordCount, show, pageShow, pageCount, pageNow, pageStr));/script!-- END phplist_page --hrtable ID=Table1trthphp开发热点文章/th/tr!-- BEGIN phphotlist --trtd{id}--a href=view.php?id={id}{title}/a/td/tr!-- END phphotlist --/tablehrtable ID=Table2trthasp开发最新文章/th/tr!-- BEGIN aspnewlist --trtd{id}--a href=view.php?id={id}{title}/a/td/tr!-- END aspnewlist --/table

--------------list1.php----------------?phprequire_once config.inc.php;dbConnect();$data = array();$data[phplist] = getArticleList(1, id DESC, (int)$_GET[page], 5);$data[phphotlist] = getArticleList(1, clicks DESC, id DESC, 1, 3);$data[aspnewlist] = getArticleList(2, id DESC, 1, 3);dbDisconnect();renderTpl(list1.htm, $data);?

先给出使用接口

本文示例代码或素材下载

view sourceprint?1 LazyLoad.js( 

2     urls  // js文件路径 

3     fn    // 全部加载后回调函数 

4     scope // 指定回调函数执行上下文 

5 );

 

示例

view sourceprint?1 LazyLoad.js([a.js,b.js,c.js], function(){ 

2     alert(加载完毕); 

3 });

 

这个系统会尽全力去加载所有的JS文件,即当某个文件不存在或加载失败它不会就此中断,仍然会去加载其它的JS文件。直到所有的模块都加载了一次才去回调。

 

完整代码

view sourceprint?01 LazyLoad = function(win){    

02     var list, 

03         isIE =
/*@[email protected]*/!1, 

澳门新葡亰3522平台游戏,04         doc = win.document, 

05         head = doc.getElementsByTagName(head)[0]; 

06   

07     function createEl(type, attrs){ 

08         var el = doc.createElement(type), 

09             attr; 

10         for(attr in attrs){ 

11             el.setAttribute(attr, attrs[attr]); 

12         } 

13         return el; 

14     }