JavaScript を使用したショッピング カートの開発に関連する DOM 操作 (2)
前節(jié)では主に操作対象となるノードオブジェクトの取得を行いました
本節(jié)では主にCookieの設(shè)定と取得の操作を行い、カプセル化設(shè)計(jì)にはシングルトン設(shè)計(jì)パターンを使用します
シングルケース設(shè)計(jì)パターン
以下は、Wikipedia によるシングルトン パターンの紹介です:
シングルトン パターンを適用する場(chǎng)合、シングルトンを生成するクラスは、インスタンスが 1 つだけ存在することを保証する必要があります。多くの場(chǎng)合、システム全體で必要なグローバル オブジェクトは 1 つだけです。システム全體の動(dòng)作の調(diào)整を促進(jìn)します。例えば、システム全體の設(shè)定ファイルには、設(shè)定データを一元的に読み込み、変更するためのシングルトンオブジェクトがあり、他のオブジェクトも設(shè)定データを必要とする場(chǎng)合には、このシングルトンオブジェクトを通じて設(shè)定データを取得することにより、複雑な設(shè)定を簡(jiǎn)素化することができます。環(huán)境の構(gòu)成管理。
シングルトン パターンの考え方は次のとおりです。クラスはオブジェクトへの參照 (常に同じになります) とインスタンスを取得するメソッド (靜的メソッド、通常は getInstance 名を使用します) を返すことができます。次に、このメソッドを呼び出すと、クラスが保持する?yún)⒄栅栅扦胜?chǎng)合はその參照が返され、それ以外の場(chǎng)合はクラスのインスタンスが作成され、そのインスタンス參照がクラスが保持する?yún)⒄栅烁瞍戤?dāng)てられます。それから戻ってきました。同時(shí)に、クラスのコンストラクターをプライベート メソッドとして定義して、他の関數(shù)がコンストラクターを使用してオブジェクトをインスタンス化することを防ぎ、クラスの靜的メソッドを通じてのみクラスのインスタンスを取得します。
完全な形式: [] はオプションです
document.cookie = “name=value[;expires=date][;path=リソースへのパス][;domain=ドメイン名][;secure]”
<script> var cookieObj = { /* 增加或修改cookie 參數(shù):o 對(duì)象{} name:string cookie名 value:string cookie值 expires:Date對(duì)象 過(guò)期時(shí)間 path:string 路徑限制 domain:string 域名限制 secure:boolean true https false或undeinfed */ set: function(o) { var cookieStr = encodeURIComponent(o.name) + "=" + encodeURIComponent(o.value); //encodeURIComponent() 函數(shù)可把字符串作為 URI 組件進(jìn)行編碼。 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; }, /* 刪除 參數(shù):n string cookie的名字 */ del: function(n) { var date = new Date(); date.setHours(-1); //setHours() 方法用于設(shè)置指定的時(shí)間的小時(shí)字段。 //this代表的是當(dāng)前函數(shù)的對(duì)象 this.set({ name: n, expires: date }); }, /*查找*/ get: function(n) { n = encodeURIComponent(n); var cooikeTotal = document.cookie; var cookies = cooikeTotal.split("; "); //split() 方法用于把一個(gè)字符串分割成字符串?dāng)?shù)組。 for(var i = 0, len = cookies.length; i < len; i++) { var arr = cookies[i].split("="); if(n == arr[0]) { return decodeURIComponent(arr[1]); //decodeURIComponent() 函數(shù)可對(duì) encodeURIComponent() 函數(shù)編碼的 URI 進(jìn)行解碼。 } } } } </script>
cookie.js ファイルを作成し、上記の JavaScript コードをその中に入れます。
<script type="text/javascript" src="cookie.js"></script>
後で HTML ページから呼び出されて、汎用モジュールの効果が実現(xiàn)されます。