首先這是一個小demo，嘗試性的去實作了幾個功能。
這是html頁面
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>widget</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="test5.js"></script>
</head>
<body>
<style>
.custom-colorize {
font-size: 20px;
position: relative;
width: 75px;
height: 75px;
}
.custom-colorize-changer {
font-size: 10px;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<div>
<div id="my-widget1">改變顔色</div>
<div id="my-widget2">改變顔色</div>
<div id="my-widget3">改變顔色</div>
<div id="my-widget4">改變顔色</div>
<button id="disable">切換 disable 選項</button>
<button id="black">改變黑色</button>
</div>
</body>
<script>
$(function () {
$("#my-widget1").colorize({
red: 60, blue: 60
});
$("#my-widget2").colorize();
$("#my-widget3").colorize({
green: 128
});
$("#my-widget3").colorize({
red: 60, blue: 60
});
$("#disable").click(function () {
$(".custom-colorize").each(function () {
if ($(this).colorize("option", "disabled")) {
$(this).colorize("enable");
} else {
$(this).colorize("disable");
}
});
});
$("#black").click(function () {
$(".custom-colorize").each(function () {
$(this).colorize({
red: 0,
green: 0,
blue: 0
});
});
});
})
</script>
</html>
這是js頁面（就是上文中引用的test5.js，為什麼是5？因為這是我嘗試的第5個版本），js的話還有很多改進的地方，比如代碼備援，還有插件的屬性定義格式可能也不是很好）
(function (factory) {
if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {
// AMD或CMD
define([ "jquery" ],factory);
} else if (typeof module === 'object' && module.exports) {
// Node/CommonJS
module.exports = function( root, jQuery ) {
if ( jQuery === undefined ) {
if ( typeof window !== 'undefined' ) {
jQuery = require('jquery');
} else {
jQuery = require('jquery')(root);
}
}
factory(jQuery);
return jQuery;
};
} else {
//Browser globals
factory(jQuery);
}
}(function ($) {
var Plugin = function (element, options) {
this.element = element;
this.options = options;
};
Plugin.prototype = {
console: function () {
console.log(this.element);
console.log(this.options);
},
getElement: function () {
return this.element
},
setElement: function (element) {
this.element = element;
},
getOptions: function () {
return this.options
},
setOptions: function (options) {
this.options = options;
},
disabled: function () {
this.options.disable = true;
}
};
var colorize = {
enable: function () {
var ui = $._data($(this)[0], "colorize");
if (!ui) {
$.error('error');
} else {
var options = ui.getOptions();
options["disabled"] = false;
$._data($(this)[0], "colorize").setOptions(options);
}
},
disable: function () {
var ui = $._data($(this)[0], "colorize");
if (!ui) {
$.error('error');
} else {
var options = ui.getOptions();
options["disabled"] = true;
$._data($(this)[0], "colorize").setOptions(options);
}
},
option: function (param) {
var ui = $._data($(this)[0], "colorize");
if (!ui) {
$.error('error');
} else {
return ui.getOptions()[param];
}
},
init: function (param) {
return this.each(function () {
var $this = $(this);
var _api = {};
var defaults = {
red: 255,
green: 0,
blue: 0,
disabled: false
};
// 用來判斷是否已經被定義過了，定義過了就不用預設屬性了
var options;
var ui = $._data(this, "colorize");
if (!ui) {
options = $.extend({}, defaults, param);
ui = new Plugin(this, options);
$._data(this, "colorize", ui);
} else {
options = $.extend({}, ui.getOptions(), param);
ui.setOptions(options);
}
var changer = $("<button>", {
text: "改變",
"class": "custom-colorize-changer"
});
var refresh = function (target) {
target.css("background-color", "rgb(" +
options.red + "," +
options.green + "," +
options.blue + ")"
);
};
var random = function () {
if (options.disabled === true)
return;
var colors = {
red: Math.floor(Math.random() * 256),
green: Math.floor(Math.random() * 256),
blue: Math.floor(Math.random() * 256)
};
options = $.extend({}, options, colors);
$._data($this[0], "colorize").setOptions(options);
refresh($this);
};
_api.create = function () {
$this.addClass("custom-colorize");
// changer.appendTo($this).button();
changer.appendTo($this);
changer.on("click", random);
refresh($this);
};
_api.create();
});
}
};
$.fn.colorize = function(param) {
if (colorize[param]) {
return colorize[param].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof param === 'object' || !param) {
return colorize.init.apply(this, arguments);
} else {
$.error('Method' + method + 'does not exist on jQuery.pluginName');
}
};
}));
如果有什麼問題，歡迎騷擾 (￣▽￣)／，時間過去太久就可能忘記了φ(>ω<*)
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)