回答編集履歴

4

コード事例を追記

2017/03/12 15:57

投稿

think49
think49

スコア18156

test CHANGED
@@ -30,4 +30,108 @@
30
30
 
31
31
 
32
32
 
33
+ ### コード事例
34
+
35
+
36
+
37
+ - [要素ノードに複数の値を関連付ける - JSFiddle](https://jsfiddle.net/bvboh7ud/)
38
+
39
+
40
+
41
+ ```JavaScript
42
+
43
+ 'use strict';
44
+
45
+ var mylibraryA = {name: 'A', value: 'foo', flag: true},
46
+
47
+ mylibraryB = {name: 'B', value: 'bar', flag: false},
48
+
49
+ map = new Map([['mylibraryA', mylibraryA], ['mylibraryB', mylibraryB]]),
50
+
51
+ p;
52
+
53
+
54
+
55
+ /**
56
+
57
+ * property
58
+
59
+ */
60
+
61
+ p = document.createElement('p');
62
+
63
+ map.forEach((object, name) => {
64
+
65
+ for (let key of Object.keys(object)) {
66
+
67
+ p[name + '-' + key] = object[key];
68
+
69
+ }
70
+
71
+ })
72
+
73
+ console.log(JSON.stringify(Object.keys(p))); // ["mylibraryA-name", "mylibraryA-value", "mylibraryA-flag", "mylibraryB-name", "mylibraryB-value", "mylibraryB-flag"]
74
+
75
+
76
+
77
+ /**
78
+
79
+ * data-* attribute
80
+
81
+ */
82
+
83
+ p = document.createElement('p');
84
+
85
+ map.forEach((object, name) => {
86
+
87
+ for (let key of Object.keys(object)) {
88
+
89
+ p.setAttribute('data-' + name + '-' + key, object[key]);
90
+
91
+ }
92
+
93
+ })
94
+
95
+ console.log(p.outerHTML); // <p data-mylibrarya-name="A" data-mylibrarya-value="foo" data-mylibrarya-flag="true" data-mylibraryb-name="B" data-mylibraryb-value="bar" data-mylibraryb-flag="false"></p>
96
+
97
+
98
+
99
+ /**
100
+
101
+ * data-* attribute + JSON
102
+
103
+ */
104
+
105
+ p = document.createElement('p');
106
+
107
+ map.forEach((object, name) => {
108
+
109
+ p.setAttribute('data-' + name, JSON.stringify(object));
110
+
111
+ })
112
+
113
+ console.log(p.outerHTML); // <p data-mylibrarya="{&quot;name&quot;:&quot;A&quot;,&quot;value&quot;:&quot;foo&quot;,&quot;flag&quot;:true}" data-mylibraryb="{&quot;name&quot;:&quot;B&quot;,&quot;value&quot;:&quot;bar&quot;,&quot;flag&quot;:false}"></p>
114
+
115
+
116
+
117
+ /**
118
+
119
+ * WeakMap
120
+
121
+ */
122
+
123
+ p = document.createElement('p');
124
+
125
+ var wmapA = new WeakMap([[p, mylibraryA]]),
126
+
127
+ wmapB = new WeakMap([[p, mylibraryB]]);
128
+
129
+ console.log(JSON.stringify(wmapA.get(p))); // {name: "A", value: "foo", flag: true}
130
+
131
+ console.log(JSON.stringify(wmapB.get(p))); // {name: "B", value: "bar", flag: false}
132
+
133
+ ```
134
+
135
+
136
+
33
137
  Re: lazex さん

3

markdown修正

2017/03/12 15:57

投稿

think49
think49

スコア18156

test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  例えば、 `<p id="sample">` に対して a.js と b.js が別々の `WeakMap` を定義すれば、それぞれ独立したスコープで値を埋め込む事が出来ます。
18
18
 
19
- a.js で埋め込んだ WeakMap 値が b.js で埋め込んだ WeakMap 値と衝突する可能性はゼロです。
19
+ **a.js で埋め込んだ WeakMap 値が b.js で埋め込んだ WeakMap 値と衝突する可能性はゼロ**です。
20
20
 
21
21
 
22
22
 

2

typo修正

2017/03/06 14:37

投稿

think49
think49

スコア18156

test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  要素ノードのプロパティに値を格納した場合、**将来的に同じ名前のプロパティが拡張された場合に衝突する危険性**があります。
6
6
 
7
- `WeakMap` は要素ノード自信を拡張するわけではないので、要素ノードにどんなプロパティが定義されても自由に設定できます。
7
+ `WeakMap` は要素ノードそのものを拡張するわけではないので、要素ノードにどんなプロパティが定義されても自由に設定できます。
8
8
 
9
9
 
10
10
 
@@ -12,9 +12,11 @@
12
12
 
13
13
 
14
14
 
15
- `WeakMap` の使いどころはスコープを分割できることにあり、ユーザから見えなくるのが目的ではないと思います。
15
+ `WeakMap` の使いどころはスコープを分割できることにあり、ユーザから値を隠す目的で使うものではないと思います。
16
16
 
17
17
  例えば、 `<p id="sample">` に対して a.js と b.js が別々の `WeakMap` を定義すれば、それぞれ独立したスコープで値を埋め込む事が出来ます。
18
+
19
+ a.js で埋め込んだ WeakMap 値が b.js で埋め込んだ WeakMap 値と衝突する可能性はゼロです。
18
20
 
19
21
 
20
22
 

1

`WeakMap` の使いどころ

2017/03/06 14:36

投稿

think49
think49

スコア18156

test CHANGED
@@ -1,10 +1,28 @@
1
+ ### WeakMap
2
+
3
+
4
+
1
5
  要素ノードのプロパティに値を格納した場合、**将来的に同じ名前のプロパティが拡張された場合に衝突する危険性**があります。
2
6
 
3
7
  `WeakMap` は要素ノード自信を拡張するわけではないので、要素ノードにどんなプロパティが定義されても自由に設定できます。
4
8
 
5
9
 
6
10
 
11
+ > Closure に隠す理由には「開発者ツールで内部のデータ見るような人に見られたり編集されたくない」というのもあるようですが(ゲームとか?)、開発者ツールで WeakMap が見えるスコープのところに breakpoint 置いて REPL で操作できるので意味ないです。
12
+
13
+
14
+
15
+ `WeakMap` の使いどころはスコープを分割できることにあり、ユーザから見えなくするのが目的ではないと思います。
16
+
17
+ 例えば、 `<p id="sample">` に対して a.js と b.js が別々の `WeakMap` を定義すれば、それぞれ独立したスコープで値を埋め込む事が出来ます。
18
+
19
+
20
+
21
+ ### data-* 属性
22
+
23
+
24
+
7
- また、プリミティブ値で良ければ、定義済みの `data-*` 属性を使う事も検討に値すると思います。
25
+ プリミティブ値で良ければ、定義済みの `data-*` 属性を使う事も検討に値すると思います。
8
26
 
9
27
  `WeakMap` とは逆にスコープが解放されているのが特徴で他の機能からも参照できるのでうまく使い分けると良いでしょう。
10
28