5.初步的框架

kyo4311發表於2015-07-08
框架

建立必要的頁面

我建立的目錄結構是這樣子的：
enter image description here

base.html程式碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="../src/jquery-1.11.2.min.js"></script>
<script src="../src/jquery.quantitySelect.js"></script>
<link href="../css/css.css" rel="stylesheet">
</head>
<body>
    <div class="num-box fl">
        <a href="javascript:;" class="num-add fr">+</a>
        <a href="javascript:;" class="num-cut fl num-lose">-</a>
        <span class="num-number">1</span>
    </div>
    <div class="det-msg">
    </div>
    <script type="text/javascript">
    $(function() {
        var quantity = $('.num-box').quantity({
            cutBtn: '.num-cut',
            addBtn: '.num-add',
            numBox: '.num-number',
            msgBox: '.det-msg'
        });
    });
    </script>
</body>
</html>

css.css程式碼

a {
    color: #333;
    text-decoration: none;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.num-box,
.det-msg {
    height: 28px;
    line-height: 28px;
    margin: 0 10px 0 0;
}

.num-box {
    border: 1px solid #b3b3b3;
    width: 80px;
    text-align: center;
}

.num-box a {
    display: block;
    width: 24px;
    height: 28px;
    cursor: pointer;
    background: #efefef;
}

.num-cut {
    border-right: 1px solid #b3b3b3;
}

.num-add {
    border-left: 1px solid #b3b3b3;
}

.num-number {
    font-size: 16px;
}

a.num-lose {
    color: #aaa;
    background: #fefefe;
    cursor: not-allowed;
}

jquery.quantitySelect.js程式碼

;
(function($) {
    function Quantity(opt) {
        this.init(opt);
    }

    Quantity.prototype.init = function(opt) {
        console.log(opt);
    };

    $.fn.quantity = function(opt) {
        return new Quantity(opt);
    };
}(jQuery));

創立初步js框架

有了這些基本的檔案之後，就可以著接敲程式碼了。根據之前的分析，於是我很快的了下面這樣一段程式碼。

;
(function($) {
    function Quantity(opt) {

        this.addBtn = null; //加按鈕
        this.cutBtn = null; //減按鈕
        this.numBox = null; //數量div
        this.msgBox = null; //訊息div

        this.minbuy = 1; //最小購買量
        this.maxbuy = 99; //最大購買量
        this.stock = 99; //存量
        this.tuple = 1; //倍數購買

        this.init(opt);
    }

    //初始化
    Quantity.prototype.init = function(opt) {
        console.log(opt);
    };

    //設定最小購買量
    Quantity.prototype.setMinbuy = function() {

    };

    //設定最大購買量
    Quantity.prototype.setMaxbuy = function() {

    };

    //設定庫存
    Quantity.prototype.setStock = function() {

    };

    //設定倍數購買
    Quantity.prototype.setTuple = function() {

    };

    $.fn.quantity = function(opt) {
        return new Quantity(opt);
    };
}(jQuery));

剛才新增的程式碼主要幹三件事。
1.在建構函式內，定義使用者介面配置項。
2.在建構函式內，定義運營需求配置項。
3.在原連結上擴充套件可更改運營需求配置項的方法。

獲取引數

萌是褒義詞還是貶義詞？網上給的答案說，看長像。在初學者心裡曾經都有一個很萌的問題，為什麼老是看到有init()這樣子的函式呢？

看一下英文單詞initialize，初始化的意思。噢原來這樣子，有了這個單詞，我們就知道這個方法是用來初始化的，在javascript裡面，也可以認為這是一個入口的方法。所有攻城獅都約定這麼寫之後，也是方便大家讀程式碼的。

所以我選擇了在這個方法裡面來獲取引數，之前程式碼有這樣子一段

//初始化
Quantity.prototype.init = function (opt) {
    console.log(opt); //Object {cutBtn: ".num-cut", addBtn: ".num-add", numBox: ".num-number", msgBox: ".det-msg"}
};

不錯，在init方法裡面，我們已經可以拿到外部給我們的引數了。 那麼我們就把這個值存起來吧！那麼程式碼就是這樣子的了。

//初始化
Quantity.prototype.init = function (opt) {
    console.log(opt);
    this.addBtn = opt.addBtn;
    this.cutBtn = opt.cutBtn;
    this.numBox = opt.numBox;
    this.msgBox = opt.msgBox;
};

很好！傳進來的引數我們已經存好了，但是我們會發現網上很多外掛在呼叫的時候，是可以不傳引數的，那麼我們在呼叫的時候程式碼改成這樣子：

$(function() {
    var quantity = $('.num-box').quantity();
});

成龍的一下，報錯了："Uncaught TypeError: Cannot read property 'addBtn' of undefined"。因此我們在寫外掛的時候也是要相容這種寫法的。即預設可以不傳引數，解決方法也很多，最簡單的方法如下：

//初始化
Quantity.prototype.init = function (opt) {
    opt = opt || {}; //加這麼一行就可以了
    console.log(opt); //Object {}

    this.addBtn = opt.addBtn;
    this.cutBtn = opt.cutBtn;
    this.numBox = opt.numBox;
    this.msgBox = opt.msgBox;
};

只要加那麼一行就行了，我們也發現這時的opt其實轉成了{}，所以就不報錯了。

這裡的程式碼有一個小坑，為什麼opt前面沒有var呢？因為在這個函式體內部，opt其實已經被定義過了，如果你前面再加var 相當於又重新定義了一次。雖然這樣子也是可以正常的執行，但是這是沒有必要的。

相關文章