コード設計→原子

クライアントアプリケーションは、通常、データ、動作、デザインの3つの主要な層に分かれています。 各レイヤーは独自の言語を使用します：html、javascript、css。 それらの間の通信は、タグの名前、クラス、識別子などの識別子を介して実行されます。 しかし、残念なことに、ほとんどの場合、それらは使用のコンテキストに強く結びついているため、サポートとリファクタリングが複雑になります。



いくつかの例：

1. var user = new User ( 'tenshi' ) var isUser = anElement. hasClassName ( 'user' ) var container = document. getElementById ( 'user' )
   
   
   
   
2. var user = new User ( 'tenshi' ) var isUser = anElement. hasClassName ( 'user' ) var container = document. getElementById ( 'user' )
   
   
   
   
3. var user = new User ( 'tenshi' ) var isUser = anElement. hasClassName ( 'user' ) var container = document. getElementById ( 'user' )
   
   
   
   

ここでは、変数名、コンストラクター名、クラス名、識別子という同じ名前を持つ多くの異なるエンティティが見られます。 ページのソースコードを見て、あるべきではない要素にユーザークラスが見つかった場合はどうでしょうか。 クラス名はアプリケーションのアトミックエンティティではない（つまり、意味をなすためにvar、new、hasClassName、getElementByIdなどの追加のコンテキストが必要です）ため、文字列「user」を検索すると、必要なガベージが山ほど表示されます手。



説明されている問題を解決するために、名前空間が導入されています。 例：

1. var user = new User （ 'tenshi' ）
2. var isUser = anElement。 hasClassName （ 'm-user' ）
3. var container = document。 getElementById （ 'id-user' ）

一見、コンテキストの二重表示は無意味に見えますが、これにより、結果のアトムを使用して、プロジェクトで使用される言語に関係なく、プロジェクト全体で同じエンティティを示すことができます。

1. < div id = "id-user" > Tenshi < / / div >
2. < div class = "b-person-info m-user" > ahtung！ tenshiはユーザーです！ < / div >

1. ＃id-user { font-size ： 24pt }
2. .b-person-info { border ： 1px solid transparent }
3. .b-person-info .m-user { border-color ： red }

1. var anUserElement = $ （ 'id-user' ）
2. var aPersonElement = anUserElement。 選択 （ '.b-person' ） [ 0 ]
3. aPersonElement。 addClassName （ 'm-user' ）

最も一般的なプレフィックス：

id-識別子用

b- dssブロック用

m-ブロック修飾子用



同じ言語内で使用される名前の場合、プレフィックスは通常使用されません。 ただし、たとえば、デザイナーの名前は接頭辞TまたはCで始まるか、$やYMapsなどの単一の名前空間に配置されていることがわかります。

1. var aMapList = new CMapList
2. （ $$ （ '＃id-map-list .b-map' ）
3. 。 地図
4. （ YMaps。Map。Bind
5. （ Ymaps
6. 、 { propagateEvents ： true
7. 、 coordSystem ： 新しい CCoordSystem
8. }
9. ）
10. ）
11. ）

プロジェクトでどの原子が使用されていますか？