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

面向对象的封装

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

JS模版

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

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

<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 || 5000;//5s

        new Boxy(result, $.extend({

            behaviours: function () {

                setTimeout('$(".boxy-wrapper").hide();', timer);

            }

        }, options));

    }

下面是调用时候的代码

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

下面是运行效果图

怎么样够精简吧，呵呵！