CSS与JS结合：年轻人的第一个插件
一、JS封装插件
通用目录结构：
css插件依赖的基础css文件
js插件核心代码文件
demo.html提供给使用者的测试用例
CSS
加载器作为插件使用，需要有一个固定的父级，所以添加 dount-wrapper
JS
本次封装使用的是“闭包模式”
HTML
➩通常在HTML文件顶部引入CSS文件
➩在文件末尾引入JS文件，是为了确保DOM元素加载完毕后再执行JS文件
二、JQuery的封装插件
➩目录机构没有变化
➩CSS文件内容没有变化
JS
➩最外部的方法体其实还是使用的闭包模式以及自调用匿名函数
➩只是此处使用了更简洁的ES6箭头函数
HTML
➩由于插件依赖jQuery，所以需要在插件之前引入jQuery的js文件
➩在初始化方法之前，需要先定义jQuery的通用加载函数 $(function() {})
三、JQuery的封装插件，并支持回调
JS
➩主体方法的参数新增callback，表示支持传入回调函数
➩在按钮的点击事件中通过 callback.call() 执行回调函数
HTML
在参数中传入回调函数
四、JQuery的封装插件，支持具名参数
JS
➩主体方法只传入一个Object类型的参数选项
➩方法体内部提供一个默认的参数集默认值
➩当参数传入时使用 $.extend 将两个参数进行合并后传给一个新的对象值
HTML
传参时可以指定传入参数的名称，没有传入的则使用默认参数：
END
查看更多文章请关注【实训在线】微信公众号
原文首发：www.shixun.online