封装jquery插件,往往需要大量的字符串拼接,于是自己研究了一个不需要拼接字符串的方式.
思路是把插件html放到单独的模版html里,调用插件的时候,去加载模版html
以下封装了一个弹窗插件,来描述实现方式.
1.效果图
2.前端html和插件调用代码
说明:只需要添加一个弹窗的div,然后声明一个opt参数,然后调用showMsg方法,即可弹框,调用非常简洁方便,具体showMsg的内部实现调用者无需关心
3.弹框模版html
说明:模版文件夹里存放插件的模版,上边便是弹窗插件的模版,里边$tilte$,$content$,分别是弹框的标题和提示语;如果要封装其它插件,可以单独为其它插件创建模版,放到模版文件夹里,这样模版和页面和代码完全分开
4.封装插件的代码
说明:这里采用根据名称去加载相应模版,然后用封装好的$.fn.Render去直接渲染数据,模版里的元素,直接可以用选择器获取到进行操作
加载模版方法和渲染方法如下:
5.传统的封装插件方法如下
说明:需要大量的html字符串拼接
6.不好的地方,欢迎指点,谢谢
