JavaScript開發購物車...LOGIN

JavaScript開發購物車之相關DOM操作(二)

上一節,我們主要是取得所要操作的節點物件

本節主要主要涉及cookie的設定取得操作,採用單例設計模式進行了封裝設計

單例設計模式  

以下是維基百科對單例模式的介紹:

在應用單例模式時,產生單例的類別必須保證只有一個實例的存在,很多時候整個系統只需要擁有一個全局對象,才有利於協調系統整體的行為。例如在整個系統的設定檔中,配置資料有一個單例物件進行統一讀取和修改,其他物件需要配置資料的時候也統一透過該單例物件來取得配置數據,這樣就可以簡化複雜環境下的配置管理。

單例模式的想法是:一個類別能傳回一個物件的參考(並且永遠是同一個)和一個獲得該實例的方法(靜態方法,通常使用 getInstance 名稱)。那麼當我們呼叫這個方法時,如果類別所持有的引用不為空就回傳該引用,否者就建立該類別的實例,並且將實例引用賦值給該類別保持的那個參考再回傳。同時將該類別的建構函數定義為私有方法,避免其他函數使用該建構函式來實例化對象,只透過該類別的靜態方法來得到該類別的唯一實例。

完整形式:[]中是可選項

document.cookie  = “name=value[;expires=date][;path=path-to-resource][;domain=網域][;secure]”

<script>
var cookieObj = {
    /*
     增加或修改cookie
     参数:o 对象{}
     name:string cookie名
     value:string cookie值
     expires:Date对象 过期时间
     path:string 路径限制
     domain:string 域名限制
     secure:boolean  true https  false或undeinfed
     */
    set: function(o) {
        var cookieStr = encodeURIComponent(o.name) + "=" + encodeURIComponent(o.value);
        //encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
        if(o.expires) {
            cookieStr += ";expires=" + o.expires;
        }
        if(o.path) {
            cookieStr += ";path=" + o.path;
        }
        if(o.domain) {
            cookieStr += ";domain=" + o.domain;
        }
        if(o.secure) {
            cookieStr += ";secure";
        }

        document.cookie = cookieStr;
    },
    /*
     删除
     参数:n string cookie的名字
     */
    del: function(n) {
        var date = new Date();
        date.setHours(-1);  //setHours() 方法用于设置指定的时间的小时字段。
        //this代表的是当前函数的对象
        this.set({
            name: n,
            expires: date
        });
    },
    /*查找*/
    get: function(n) {
        n = encodeURIComponent(n);
        var cooikeTotal = document.cookie;
        var cookies = cooikeTotal.split("; ");
        //split() 方法用于把一个字符串分割成字符串数组。
        for(var i = 0, len = cookies.length; i < len; i++) {
            var arr = cookies[i].split("=");
            if(n == arr[0]) {
                return decodeURIComponent(arr[1]);
            //decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。    
            }
        }
    }
}
</script>

建立一個cookie.js檔案把上面​​的JavaScript程式碼放入其中。

<script type="text/javascript" src="cookie.js"></script>

以後從HTML頁面調用,實作功能模組效果。


下一節
<script> var cookieObj = { /* 增加或修改cookie 参数:o 对象{} name:string cookie名 value:string cookie值 expires:Date对象 过期时间 path:string 路径限制 domain:string 域名限制 secure:boolean true https false或undeinfed */ set: function(o) { var cookieStr = encodeURIComponent(o.name) + "=" + encodeURIComponent(o.value); //encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。 if(o.expires) { cookieStr += ";expires=" + o.expires; } if(o.path) { cookieStr += ";path=" + o.path; } if(o.domain) { cookieStr += ";domain=" + o.domain; } if(o.secure) { cookieStr += ";secure"; } document.cookie = cookieStr; }, /* 删除 参数:n string cookie的名字 */ del: function(n) { var date = new Date(); date.setHours(-1); //setHours() 方法用于设置指定的时间的小时字段。 //this代表的是当前函数的对象 this.set({ name: n, expires: date }); }, /*查找*/ get: function(n) { n = encodeURIComponent(n); var cooikeTotal = document.cookie; var cookies = cooikeTotal.split("; "); //split() 方法用于把一个字符串分割成字符串数组。 for(var i = 0, len = cookies.length; i < len; i++) { var arr = cookies[i].split("="); if(n == arr[0]) { return decodeURIComponent(arr[1]); //decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。 } } } } </script>
章節課件