开发前台组件化是一种趋势，也方便了组件的复用。 那么如何用jQuery封装一个组件呢？就像jQuery UI一样，如何封装自己的UI组件？目录:index . html index . jsindex . CSS index . jsclass button { static initial(selector，value) {$ (selector)。append(` < input class = " jq-button " type = " button " value = " $ { value } " & gt；& lt/input & gt；` );$(`${selector})。jq-button `)。click(function(e){ console . log(` $ { value }按钮被单击`)；});};} index . CSS . jq-button { width:80px；高度:40px边界半径:10%；保证金:5px} index.html & lt！DOCTYPE html & gt& lthtml lang = " en " & gt& lthead & gt& ltmeta charset="UTF-8 " >& ltmeta name = " viewport " content = " width =设备宽度，initial-scale=1.0 " >& lttitle & gt文档& lt/title & gt；& ltscript src = " http://code . jquery . com/jquery-2 . 1 . 1 . min . js " & gt；& lt/script & gt；& lt脚本src= "。/index . js " & gt；& lt/script & gt；& ltlink rel="stylesheet" href= "。/index . CSS "/& gt；& lt/head & gt；& ltbody & gt& ltspan class="button-test1 " >& lt/span>。& ltspan class="button-test2 " >& lt/span>。& ltspan class="button-test3 " >& lt/span>。& lt/body & gt；& lt脚本& gtButton.initial('。button-test1 '，' button 1 ')；Button.initial('。button-test2 '，' button 2 ')；Button.initial('。button-test3 '，' button 3 ')；& lt/script & gt；& lt/html & gt；因此，当运行以这种方式封装的组件时，我们会发现几个问题，即css样式是全局的，以及一个不必要的标签 但是，用jQ封装组件好像是这样的。不知道有没有更好的使用jQuery封装组件的解决方案~