31.10.2014

JSDoc3, fest.bem

JSDoc3

Зачем?

Зачем?

Как?

			#!+ /**
			 * @class Folder
			 * @param {Object} [attrs] аттрибуты (опционально)
			#!-  */
			var Folder = function (attrs) {
				this.attrs = attrs;
			};
			Folder.prototype = /** @lends Folder.prototype */{
				#!+ /**
				 * Установить свойство
				 * @param {string} key   имя свойства (обязательно)
				 * @param {*}     value  значение (обязательно)
				 * @returns {Folder}
				#!-  */
				set: function (key) { ... },
				#!+ /**
				 * Получить свойство
				 * @param {string} key  имя свойства (обязательно)
				 * @returns {*}
				#!-  */
				get: function (key) { ... }
			};
		
			/**
			 * @class Folder
			 * @param {Object} [attrs] аттрибуты (опционально)
			 */
			var Folder = function (attrs) {
				this.attrs = attrs;
			};
			Folder.prototype = /** @lends Folder# */{
				/**
				 * Установить свойство
				 * @param {string} key   имя свойства (обязательно)
				 * @param {*}     value  значение (обязательно)
				 * @returns {Folder}
				 */
				set: function (key) { ... },
				/**
				 * Получить свойство
				 * @param {string} key  имя свойства (обязательно)
				 * @returns {*}
				 */
				get: function (key) { ... }
			};

Документируем недокументируемое

Документируем недокументируемое

			var Folder = Model.extend(/** Folder# */{

				method:	_createFunction("...")

			});

Документируем недокументируемое

			var Folder = Model.extend(/** Folder# */{
				/**
				 #! * @method Folder#method
				 #!+ * @param {string} foo
				 * @param {number} bar
				 #!- * @returns {*}
				 */
				method:	_createFunction("...")
			});

RequireJS

RequireJS

			define(["Folder", "Letter"], function (Folder, Letter) {
				// ...
			});

RequireJS & inline doc

			define(["Folder", "Letter"], function (
				/** Folder */Folder,
				/** Letter */Letter
			) {
				// ...
			});

fest/codechunk

fest/codechunk: tags

fest:comment

			module.exports = {
				open: function (chunk) {
					#! chunk.pushStr(">!--", true);
				},
				close: function (chunk) {
					#! chunk.pushStr("--<", true);
				}
			};

CodeChunk

fest:if

			module.exports = {
				open: function (chunk, node) {
					chunk
					#!+	.vars("__fest_if", {
							#! value: this.getAttr(node, "test", "expr"),
							#! defaults: false
					#!-	})
					#!	.add("if(__fest_if) {")
					;
				},

				close: function (chunk) {
					#! chunk.add("}");
				}
			};

fest:bem

fest:bem

fest:bem — определение блока

			<!-- Определяем блок "btn" -->
			<div bem:block="btn">
				#!+ <!-- Добавляем модификатор "btn_icon" в зависимости от параметров -->
				#!- <bem:mod name="icon" test="params.icon"/>

				#!+ <!-- Определяем элемент "btn__text" -->
				<span bem:elem="text">
					#!+ <!-- Добавляем модификатор "btn__text_pad" в зависимости от модификатора "btn_icon" -->
					#!- <bem:mod name="pad" has-mod="icon"/>

					<fest:value>params.text</fest:value>
				#!- </span>
			</div>

fest:bem — использование блока

			<!-- Используем блок "btn" -->
			#! <bem:btn>{ text: "foo", mods: ["main"] }</bem:btn>
			#! <bem:btn>{ text: "bar", icon: true }</bem:btn>

The End