简介
jade-attrs是npm上一个非常实用的模块，适用于使用模板引擎jade的前端开发者。它的作用是在生成 HTML 时为标记添加属性。在jade里面也称为属性混合。
安装
jade-attrs使用npm安装，使用时需要先安装该模块。在命令行中执行如下命令：
npm install jade-attrs --save
使用
安装完成后，使用方法非常简单。先在jade中引入该模块：
-var attrs = require('jade-attrs');然后在需要添加属性的标记上添加属性混合，具体格式为：
tagname +attrs(attributes)
其中，tagname是标记的名称，attributes是该标记需要添加的属性。比如：
p
+attrs({'id': 'msg', 'style': 'color:red;'})这样就会生成一个带有id和style属性的p标记。
###属性混合简写 等效于：
p#msg(style='color:red;')
输出的HTML的结果是一模一样的。
示例代码
-- -------------------- ---- ------- --- ---- - ---------------- --- ----- - ---------------------- --- --- - ---- --------------- -------- ---------- --------------- -------------- - ------ --------- ------- -------- ----- - ---- -- - ------------ --- -- - ----------------- -------- ------- --- ---- - ------- ------------------
以上代码使用了jade和jade-attrs两个模块，生成了一个带有id、style和data-size属性的p标记。其中data-size为对象类型的属性，表现了该模块的强大之处。
输出结果为：
<p id="msg" style="color:red;" data-size='{"width":"10px","height":"20px"}'>This is a paragraph.</p>总结
通过jade-attrs插件，我们可以方便地在jade里面生成带有属性的标记，避免html混杂在js中的情况。jade-attrs的功能强大，使用灵活，可以大大提高我们的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77788