封装Jquery插件不再需要字符串拼接

封装jquery插件,往往需要大量的字符串拼接,于是自己研究了一个不需要拼接字符串的方式.

思路是把插件html放到单独的模版html里,调用插件的时候,去加载模版html

以下封装了一个弹窗插件,来描述实现方式.

1.效果图

2.前端html和插件调用代码

说明:只需要添加一个弹窗的div,然后声明一个opt参数,然后调用showMsg方法,即可弹框,调用非常简洁方便,具体showMsg的内部实现调用者无需关心

3.弹框模版html

说明:模版文件夹里存放插件的模版,上边便是弹窗插件的模版,里边$tilte$,$content$,分别是弹框的标题和提示语;如果要封装其它插件,可以单独为其它插件创建模版,放到模版文件夹里,这样模版和页面和代码完全分开

4.封装插件的代码

说明:这里采用根据名称去加载相应模版,然后用封装好的$.fn.Render去直接渲染数据,模版里的元素,直接可以用选择器获取到进行操作

加载模版方法和渲染方法如下:

5.传统的封装插件方法如下

说明:需要大量的html字符串拼接

6.不好的地方,欢迎指点,谢谢