JavaScript を使用したショッピング カートの開発に関連する DOM 操作 (2)

前節では主に操作対象となるノードオブジェクトの取得を行いました

本節では主にCookieの設定と取得の操作を行い、カプセル化設計にはシングルトン設計パターンを使用します

シングルケース設計パターン

以下は、Wikipedia によるシングルトン パターンの紹介です:

シングルトン パターンを適用する場合、シングルトンを生成するクラスは、インスタンスが 1 つだけ存在することを保証する必要があります。多くの場合、システム全体で必要なグローバル オブジェクトは 1 つだけです。システム全体の動作の調整を促進します。例えば、システム全体の設定ファイルには、設定データを一元的に読み込み、変更するためのシングルトンオブジェクトがあり、他のオブジェクトも設定データを必要とする場合には、このシングルトンオブジェクトを通じて設定データを取得することにより、複雑な設定を簡素化することができます。環境の構成管理。

シングルトン パターンの考え方は次のとおりです。クラスはオブジェクトへの参照 (常に同じになります) とインスタンスを取得するメソッド (静的メソッド、通常は getInstance 名を使用します) を返すことができます。次に、このメソッドを呼び出すと、クラスが保持する参照が空でない場合はその参照が返され、それ以外の場合はクラスのインスタンスが作成され、そのインスタンス参照がクラスが保持する参照に割り当てられます。それから戻ってきました。同時に、クラスのコンストラクターをプライベート メソッドとして定義して、他の関数がコンストラクターを使用してオブジェクトをインスタンス化することを防ぎ、クラスの静的メソッドを通じてのみクラスのインスタンスを取得します。

完全な形式: [] はオプションです

document.cookie = “name=value[;expires=date][;path=リソースへのパス][;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 ページから呼び出されて、汎用モジュールの効果が実現されます。