贝姆实体Name

BEM 实体 名称代表.

目录

• 安装
• 使用量
• API 密码
• 序列化
• 类型脚本支持
• 可调试性
• 折旧

安装

$ npm install --save @bem/entity-name

使用量

const BemEntityName = require('@bem/entity-name');

const entityName = new BemEntityName({ block: 'button', elem: 'text' });

entityName.block; // button
entityName.elem;  // text
entityName.mod;   // undefined

entityName.id;   // button__elem
entityName.type; // elem

entityName.isEqual(new BemEntityName({ block: 'button' }));               // false
entityName.isEqual(new BemEntityName({ block: 'button', elem: 'text' })); // true

API 密码

• 构造器 ({块, elem, mod })
• 块
• 精灵
• 模式
• 类型
• 范围
• 编号
• 已忽略
• 等效( 实体Name
• 属于( 实体Name
• 值( )
• 转到 JSON ()
• 转到 String ()
• 静态创建( obj)
• 静态为 BementityName (实体Name)

构造器 ({块, elem, mod })

在JS对象的帮助下,可以定义以下领域的BEM实体:

• block 一个街区名。 需要此字段是因为只有一个块作为独立的 BEM 实体存在
• elem - 一个元素名称.
• mod - 一个修饰者.

修饰由一对字段组成 mod.name 财务报告和审定财务报表 mod.val。这意味着实地 mod.val 无 mod.name 没有任何意义.

const BemEntityName = require('@bem/entity-name');

// The modifier of block
new BemEntityName({
    block: 'button',
    mod: { name: 'view', val: 'action' }
});

// Not valid modifier
new BemEntityName({
    block: 'button',
    mod: { val: 'action' }
});
// ➜ EntityTypeError: the object `{ block: 'block', mod: { val: 'action' } }` is not valid BEM entity, the field `mod.name` is undefined

描述一个简单的修饰符 mod.val 字段必须省略.

// Simple modifier of a block
new BemEntityName({ block: 'button', mod: 'focused' });

// Is equivalent to simple modifier, if `mod.val` is `true`
new BemEntityName({
    block: 'button',
    mod: { name: 'focused', val: true }
});

块

此实体所属块的名称 .

const BemEntityName = require('@bem/entity-name');
const name = new BemEntityName({ block: 'button' });

name.block; // button

精灵

此实体的元素名称 .

如果实体不是元素或元素的修饰者,则返回空字符串.

const BemEntityName = require('@bem/entity-name');
const name = new BemEntityName({ block: 'button', elem: 'text' });

name.elem; // text

模式

此实体之修饰.

重要内容: 如果实体不是修改符,则返回 undefined。 。 。 .

const BemEntityName = require('@bem/entity-name');

const blockName = new BemEntityName({ block: 'button' });
const modName = new BemEntityName({ block: 'button', mod: 'disabled' });

modName.mod;   // { name: 'disabled', val: true }
blockName.mod; // undefined

类型

此实体的类型 .

可能的值 : block, (中文(简体) ), elem, (中文(简体) ), blockMod, (中文(简体) ), elemMod。 。 。 .

const BemEntityName = require('@bem/entity-name');

const elemName = new BemEntityName({ block: 'button', elem: 'text' });
const modName = new BemEntityName({ block: 'menu', elem: 'item', mod: 'current' });

elemName.type; // elem
modName.type;  // elemMod

范围

这一实体的范围.

重要内容: 块类型实体没有范围.

const BemEntityName = require('@bem/entity-name');

const buttonName = new BemEntityName({ block: 'button' });
const buttonTextName = new BemEntityName({ block: 'button', elem: 'text' });
const buttonTextBoldName = new BemEntityName({ block: 'button', elem: 'text', mod: 'bold' });

buttonName.scope;         // null
buttonTextName.scope;     // BemEntityName { block: 'button' }
buttonTextBoldName.scope; // BemEntityName { block: 'button', elem: 'elem' }

编号

这个实体的ID.

重要内容: 只能用来确定实体的独特性.

如果您想要根据命名公约的规定获得字符串代表, 您应该使用 @ bem/ 命名 软件包.

const BemEntityName = require('@bem/entity-name');
const name = new BemEntityName({ block: 'button', mod: 'disabled' });

name.id; // button_disabled

已忽略

确定修改是否简单.

页:1: 对于不作修改的实体 isSimpleMod() 返回时 null。 。 。 .

const BemEntityName = require('@bem/entity-name');
const modName = new BemEntityName({ block: 'button', mod: { name: 'theme' } });
const modVal = new BemEntityName({ block: 'button', mod: { name: 'theme', val: 'normal' } });
const block = new BemEntityName({ block: 'button' });

modName.isSimpleMod(); // true
modVal.isSimpleMod(); // false
block.isSimpleMod(); // null

等效( 实体Name

确定指定的实体是否为深等实体.

const BemEntityName = require('@bem/entity-name');

const inputName = new BemEntityName({ block: 'input' });
const buttonName = new BemEntityName({ block: 'button' });

inputName.isEqual(buttonName);  // false
buttonName.isEqual(buttonName); // true

属于( 实体Name

确定指定实体是否属于此类别.

const BemEntityName = require('@bem/entity-name');

const buttonName = new BemEntityName({ block: 'button' });
const buttonTextName = new BemEntityName({ block: 'button', elem: 'text' });
const buttonTextBoldName = new BemEntityName({ block: 'button', elem: 'text', mod: 'bold' });

buttonTextName.belongsTo(buttonName);         // true
buttonName.belongsTo(buttonTextName);         // false
buttonTextBoldName.belongsTo(buttonTextName); // true
buttonTextBoldName.belongsTo(buttonName);     // false

值( )

返回代表实体名称的正态对象.

const BemEntityName = require('@bem/entity-name');
const name = new BemEntityName({ block: 'button', mod: 'focused' });

name.valueOf();

// ➜ { block: 'button', mod: { name: 'focused', value: true } }

转到 JSON ()

返回原始数据 JSON.stringify() 目标.

const BemEntityName = require('@bem/entity-name');

const name = new BemEntityName({ block: 'input', mod: 'available' });

JSON.stringify(name); // {"block":"input","mod":{"name":"available","val":true}}

转到 String ()

返回代表实体名称的字符串.

重要内容: 如果您想要根据命名公约的规定获得字符串代表 您应该使用 @ bem/ 命名 软件包.

const BemEntityName = require('@bem/entity-name');
const name = new BemEntityName({ block: 'button', mod: 'focused' });

name.toString(); // button_focused

静态创建( 对象)

创建贝姆实体 以任何对象表示或字符串命名实例.

帮助无糖简洁.

Passed Object 可以为实体设置共同的字段名 :

const BemEntityName = require('@bem/entity-name');

BemEntityName.create('my-button');
BemEntityName.create({ block: 'my-button' });
// ➜ BemEntityName { block: 'my-button' }

BemEntityName.create({ block: 'my-button', mod: 'theme', val: 'red' });
BemEntityName.create({ block: 'my-button', modName: 'theme', modVal: 'red' });
// ➜ BemEntityName { block: 'my-button', mod: { name: 'theme', val: 'red' } }

BemEntityName.create({ block: 'my-button', mod: 'focused' });
// ➜ BemEntityName { block: 'my-button', mod: { name: 'focused', val: true } }

静态为 BementityName (实体Name)

确定指定实体是否为 Bemnentity 实例Name.

const BemEntityName = require('@bem/entity-name');

const entityName = new BemEntityName({ block: 'input' });

BemEntityName.isBemEntityName(entityName); // true
BemEntityName.isBemEntityName({ block: 'button' }); // false

序列化

这个 BemEntityName 已经 toJSON 支持的方法 JSON.stringify() 行为.

使用 JSON.stringify 序列化实例 BemEntityName。 。 。 .

const BemEntityName = require('@bem/entity-name');

const name = new BemEntityName({ block: 'input', mod: 'available' });

JSON.stringify(name); // {"block":"input","mod":{"name":"available","val":true}}

使用 JSON.parse 将 JSON 字符串去序列化并创建实例 BemEntityName。 。 。 .

const BemEntityName = require('@bem/entity-name');

const str = '{"block":"input","mod":{"name":"available","val":true}}';

new BemEntityName(JSON.parse(str)); // BemEntityName({ block: 'input', mod: 'available' });

类型脚本支持

软件包包括 输入 用于类型脚本。 须自设转相. 当你准备好 module 改为 commonjs 在你身边 tsconfig.json 文件, TypeScript 将自动找到类型定义 @bem/entity-name。 。 。 .

界面以全域命名空间提供 BEMSDK.EntityName。需要使用 JsDoc 中的接口.

可调试性

在节点J, console.log() 电话 util.inspect() 每个参数上没有格式化占位符.

BemEntityName 已经 inspect() 方法来获取对象的自定义字符串表示.

const BemEntityName = require('@bem/entity-name');

const name = new BemEntityName({ block: 'input', mod: 'available' });

console.log(name);

// ➜ BemEntityName { block: 'input', mod: { name: 'available' } }

您也可以转换 BemEntityName 对象 string。 。 。 .

const BemEntityName = require('@bem/entity-name');

const name = new BemEntityName({ block: 'input', mod: 'available' });

console.log(`name: ${name}`);

// ➜ name: input_available

折旧

折旧采用 调试。 。 。 .

要静音去除输出警告,请使用 NO_DEPRECATION 环境变量.

NO_DEPRECATION=@bem/entity-name node app.js

再来 细节 内 depd 文档

许可证

代码和文件 2016 YANDEX LLC. 代码根据 Mozilla 公共许可证2.0。 。 。 .