Node.js   发布时间:2022-04-24  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jade-mixin 代码的重用大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
有时候页面有好多个区块,比如列表区块,但是他们代码结构又是一模一样的怎么弄?jade天生就是节约成本,节约时间的mixin就是让代码块可以重用的函数
 
mixin lession
  p jade study

像这样,,一个mixin就完成了,怎么调用呢,通过一个+

+lession
=>
<p>jade study</p>

 

 

传参数的方式
mixin study(name,courses)
  p #{name}
  ul
    each course in courses
      li=course
+study(‘tom‘,[‘jade‘,‘node‘])
=>
<p>tom</p>
<ul>
  <li>jade</li>
  <li>node</li>
</ul>

 

 

mixin的嵌套
mixin group(student)
  h4 #{student.namE}
    +study(student.name,student.courses)
+group({name:‘tom‘,courses:[‘jade‘,‘node‘]})
=>
<h4>tom</h4>
<p>tom</p>
<ul>
  <li>jade</li>
  <li>node</li>
</ul>

 

 

mixin内联代码
mixin team(slogon)
  h4 #{slogon}
  if block
    block
  else
    p no team
+team(‘slogon‘)
  p good job

=>

<h4>slogon</h4>
<p>good job</p>
里面的good job会传到block里面去

 

1、单个属性
mixin attr(Name)
  p(class!=attributes.class) #{name}
+attr(‘attr‘)(class=‘magic‘)
=>
<p @H_673_269@class="magic">attr</p>
这里的attributes.class已经转义过了,现在非转义

 

2、多个属性
mixin attrs(Name)
  p@H_673_269@&attributes(attributes) #{name}
+attrs(‘attrs‘)(class=‘magic2‘,id=‘attrid‘)
=>
<p @H_673_269@id="attrid"@H_673_269@ class="magic2">attrs</p>

 

在不知道参数多少个的时候,拿到所有参数
mixin magic(name,...items)
  ul(class=‘#{name}‘)
    each item in items
      li=item
+magic(‘magic‘,‘node‘,‘jade‘,‘...‘)
=>
<ul @H_673_269@class="magic">
  <li>node</li>
  <li>jade</li>
  <li>...</li>
</ul>

大佬总结

以上是大佬教程为你收集整理的jade-mixin 代码的重用全部内容,希望文章能够帮你解决jade-mixin 代码的重用所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。