模板语言jade学习整理~~

最新推荐文章于 2021-02-25 20:32:28 发布

weixin_33769125

最新推荐文章于 2021-02-25 20:32:28 发布

阅读量308

点赞数

文章标签： javascript git ViewUI

原文链接：https://my.oschina.net/tirzah/blog/159504

版权

据说jade很强大，不过小女子刚刚初步接触，懂得也不多撒~~ 只是把学习的内容整理出来，其一是为了给自己看，激励自己，其二是为了给需要的人看到能帮助一二，如果真的有帮助到，我就很欣慰的啦~~其三嘛...嘿嘿....嘿嘿.....是为了讨好师父大人.......为了让他老人家教我更多东西来着~~~

如果不知道jade是何物的，可以先看看这里：https://github.com/visionmedia/jade
jade跟zencoding（现在叫emmet）很像
长夜漫漫，无心睡眠啊~~不过就算这样我也不罗嗦了，咱们上主食~~

友情提示：我们写jade，依然要用到prepros这个工具~
来，让我们先新建个目录，然后再index.jade里敲上如下代码:

友情提示：缩进可以用tab，然后把jade demo目录拖拽到prepros工具里面，点击，这时它会自动帮我们生成一个html目录，里面会有一个index.html，让我看看他们的效果:

是不是很好玩呀~~~下面我们重新改造下index.jade的内容，代码如下：

!!!5
html
	head
		title 你好！
		script(type='text/javascript').
			$(function(){
				alert();
			});
	boby
		h1 hello world
		ul.list
			- for(var i=0; i< 10; i++) {
			li
				a(href="http://www.baidu.com") baidu #{i}
			- }

来，让我们再看看index.html里面的内容：

<!DOCTYPE html>
<html>
  <head>
    <title>你好！</title>
    <script type="text/javascript">
      $(function(){
       alert();
      });
    </script>
  </head>
  <boby>
    <h1>hello world</h1>
    <ul class="list">
      <li><a href="http://www.baidu.com">baidu 0</a></li>
      <li><a href="http://www.baidu.com">baidu 1</a></li>
      <li><a href="http://www.baidu.com">baidu 2</a></li>
      <li><a href="http://www.baidu.com">baidu 3</a></li>
      <li><a href="http://www.baidu.com">baidu 4</a></li>
      <li><a href="http://www.baidu.com">baidu 5</a></li>
      <li><a href="http://www.baidu.com">baidu 6</a></li>
      <li><a href="http://www.baidu.com">baidu 7</a></li>
      <li><a href="http://www.baidu.com">baidu 8</a></li>
      <li><a href="http://www.baidu.com">baidu 9</a></li>
    </ul>
  </boby>
</html>

实现的效果如下：

很方便吧~~其实jade的语法很简单，一个标签一行，子节点用缩进表示，如果标签上有属性，则用括号：div(title="hello",alt="你好"),id就是#,class就是. 其他属性用()，jade动态语法使用的原生js语法，在写js之前我们用“-”来表示这段js要被动态执行。

我们再来看一个例子哈，我们经常会遇到一个网站要重新改版对吧，假设改版的时候所有页面的导航和底部都不变，我们只要关注中间不同的部分，通常我们把做好的页面复制一个，然后再改中间的内容对吧，哈哈，那么如果导航栏目增加或者减少一个的时候，我们起步就要把之前做过的页面都修改一遍，Oh，my god，这行为太傻了吧，我们可是程序员啊~当当当当~~ 这个时候jade就闪亮登场会帮我们做这件事情了~~
我们在jade目录下新建个site.jade，代码如下：

!!!5
html
	head
		title 你好！
		script(type='text/javascript').
			$(function(){
				alert();
			});
		style.
			body{margin:0;padding:0}
			.nav{background:#000;height:50px;line-height:50px;color:#fff;}
	body
		div.nav 假设这里是导航
		block content
		footer 这里是底部

接下来我们再重新写下index.jade，代码如下：

extends site

block append content
	h1 这面的内容随便去写

我们看下index.html的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>你好！</title>
    <script type="text/javascript">
      $(function(){
       alert();
      });
    </script>
    <style>
      body{margin:0;padding:0}
      .nav{background:#000;height:50px;line-height:50px;color:#fff;}
    </style>
  </head>
  <body>
    <div class="nav">假设这里是导航</div>
    <h1>这面的内容随便去写</h1>
    <footer>这里是底部</footer>
  </body>
</html>

浏览之后的结果如下：

所以呢~~我们看到啦，jade可以方便的继承一个模板，这样以后我们再写html的时候，只需要把公共的部分写出来，其他的页面继承它就OK了~~超级方便吧~~~
好啦，我的jade也整理完啦~~ 下面就酝酿把JS和JQ整理出来了~~~师父大人，这两个整理出来我需要好好想想~~╮(╯▽╰)╭~~不过我尽快哈~~我还得等着你教我git来着呢~~

转载于:https://my.oschina.net/tirzah/blog/159504