最近在写一套前端页面,发现每个页面都复制一遍公共头、尾,十分不方便。于是就想能否也像PHP模板引擎一样,使用include引入公共文件,这便是接下来这段代码的意义。
我们先来总结一下需求:1.可以像使用函数一样来使用include.2.可以在页面中任何地方使用,在哪调用就文件插入到页面中哪个位置。3.可以加载任意的静态文件,也就是说我们希望可以将要加载的文件名称传给这个函数
接下来,我们来说下每条需求对应的解决思路:
1.如何像函数一样来使用呢? 1> 写个公共函数,每个页面都加上。 2> 对于jquery来说,我们可以写成个插件。 在这里呢,我们选择了第2种,原因你懂的……2.对于插入位置,这个应该是最不好办的了,你可能用说有啥不好办的,弄个div,放里边呗! 但是,为了用这个函数我们需要写个script标签,如果再用个div占位会非常乱。 于是我们想,如果能用script定位就好了。能吗?答案当然是肯定的。3.至于加载任意文件,传个参数就好了。
最后,我们把写好的插件代码放上,使用前一定要先引入jquery.
JS -- jquery.include.js
jQuery.fn.extend({ include: function (path) { var _this = $(this); $.get(path, function (html) { _this.replaceWith(html); }); return 0; }});
HTML -- index.html
Title