1、插入HTML数据
插入html代码,一般的做法是通过document.getElementById("").innerHTML来实现。
然而在该控件中,它通过JS replace()来实现这个功能。
在HTML代码中{year}{list}都是用来替代相应HTML代码的,在JS中可以动态的给它替换成需要的内容。
<div id="tpl_scrubber_year"> <a href="javascript:;" onclick="showYear({year},this)" class="s_year" id="scrubber_year_{year}">{year} <!--此处有大量重复内容显示 -->
{list} </a> </div>
JS代码中通过replace()方法替换掉{year}类似的标记。
var tpl_scrubber_year = document.getElementById("tpl_scrubber_year").innerHTML.replace(/^s*/,'').replace(/s*$/,''); //去空
var year = "<div>.....</div>";
tpl_scrubber_year.replace(/{year}/g,year).replace(/{year}/g,year);
以前写JS都只是最基本的实现,很少能够将一个组件从头到尾完整的敲出来(虽然只是看着别人的代码重复敲一遍),但对我来说都是一种很新奇、难得的体验。
像这种通过替换标记字符(表达式)的形式,在JSP中EL表达式就有实现,只是从来都没有往这方面想过,没能举一反三。
2、unshift()
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
scrubber_month.unshift( tpl_scrubber_month.replace(/{year}/g,year).replace(/{month}/g,month) );
JS中关于数组元素操作的方法有不少,例如常用的push()、pop()、splice()等等。
3、字符串拼接
一般情况下,字符串拼接都是通过 “+” 来完成。即时,知道通过数组的join()方法可以达到同样的效果,也很少会使用。
html_scrubber.join('')
4、内容始终浮动在窗口上方
position:fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。
window.onscroll = function(){ var top = document.body.scrollTop ; if( top > 100){ g('scrubber').style.position = 'fixed'; g('scrubber').style.left = (getBodyW()-960)/2+ 'px'; g('scrubber').style.top = '60px'; }else{ g('scrubber').style.position = ''; g('scrubber').style.left = ''; g('scrubber').style.top = ''; } }