文章出處

面向對象的封裝

面向對象一個入最重要的特性就是“封裝”，將一些沒有必要公開的方法和屬性以特定的方式進行組裝，使它對外只公開一個接口，外界在調用它時，不需要關注它實現的細節，而只要關注它的方法簽名即可，而對于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);

下面是運行效果圖

怎么樣夠精簡吧，呵呵！


文章列表



Avast logo

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()