作為后臺(tái)人員去開(kāi)發(fā)前端js,大都是直接
$(function(){})
墩新,或者直接在<script>
標(biāo)簽內(nèi)敲代碼,完全沒(méi)有考慮寫(xiě)的js代碼是否會(huì)有兼容或者沖突切省,可擴(kuò)展等問(wèn)題最岗,完成任務(wù)就好的感覺(jué)。那有什么寫(xiě)法可以解決呢芙盘,又方便又能兼容可擴(kuò)展性的js插件寫(xiě)法驯用?
下面js框架剛好能解決這些問(wèn)題,直接摞代碼吧儒老!
Jquery插件編寫(xiě)Demo
;(function($, window, document, undefined) {
//定義Myfun的構(gòu)造函數(shù)
var Myfun = function(ele, opt) {
this.$element = ele,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration': 'none'
},
this.options = $.extend({}, this.defaults, opt)
}
//定義Myfun的方法
Myfun.prototype = {
render: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
//在插件中使用Myfun對(duì)象
$.fn.myPlugin = function(options) {
//創(chuàng)建Myfun的實(shí)體
var myfun = new Myfun(this, options);
//調(diào)用其方法
return myfun.render();
}
})(jQuery, window, document);
調(diào)用
<div class="demo">演示內(nèi)容</div>
// js調(diào)用
$(".demo").myPlugin({
'color': '#f00',
'fontSize': '12px'
});