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>
提交重置代码
章节课件