JS~Boxy和JS模版实现一个标准的消息提示框

时间:2023-03-09 15:57:56
JS~Boxy和JS模版实现一个标准的消息提示框

面向对象的封装

面向对象一个入最重要的特性就是“封装”,将一些没有必要公开的方法和属性以特定的方式进行组装,使它对外只公开一个接口,外界在调用它时,不需要关注它实现的细节,而只要关注它的方法签名即可,而对于JS来说,我们也可以利用面向对象的封装性来实现一个标准的消息提示框。

JS模版

使用JS模版可以大大提高开发效率,有了模版,你不用在去拼接JS串了,这对于开发者来说绝对是个福音!看它多少漂亮:

aaarticlea/png;base64,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" alt="" />

标准消息弹出框的完整代码

<script src="~/Scripts/jquery-plugin-boxy/js/jquery.boxy.js"></script>
<link href="~/Scripts/jquery-plugin-boxy/css/boxy.css" rel="stylesheet" />
<script type="text/html" id="alertBox">
<div style="width: 200px; text-align: center;">
<b>[Content]</b>
</div>
</script>
<script type="text/ecmascript">
function alertBox(msg, timer) {
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
var html = document.getElementById("alertBox").innerHTML;
var result = html.replace(reg, function (node, key) { return { 'Content': msg }[key]; }); var options = { title: '消息提示', closeText: 'x' };
var timer = timer || ;//5s
new Boxy(result, $.extend({
behaviours: function () {
setTimeout('$(".boxy-wrapper").hide();', timer);
}
}, options));
}

下面是调用时候的代码

alertBox("您有1个消息,请注意查收!", );

下面是运行效果图

aaarticlea/png;base64,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" alt="" />

怎么样够精简吧,呵呵!