时间过得太快了，感觉才过完年，就已经到了2016年的下半年了，唉，时光不再啊。

直接上代码了，只是为了记录一个自己常用的示例：

HTML 代码

<ul class="actions-list">  
    <li class="action-item facebook">
        Facebook
    </li>
    <li class="action-item google">
        GooglePlus
    </li>
    <li class="action-item linkedin">
        LinkedIn
    </li>
    <li class="action-item picasa">
        Picasa
    </li>
    <li class="action-item twitter">
        Twitter
    </li>
    <li class="action-item wikipedia">
        Wikipedia
    </li>
</ul>

CSS 代码

/* Flex box define */
.actions-list {
    display: -webkit-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;  
}

.actions-list .action-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    overflow: hidden;
}

/* Design: widths, colors, borders, etc... */
.actions-list {
    margin: 0;
    padding: 0;
}
.actions-list .action-item {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: lighter;
    cursor: pointer;
    background-color: #66bbcc;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    color: #000000;
    padding-left: 52px;
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 32px;
    line-height: 52px;
    height: 52px;
    max-width: 50px;
}
.actions-list .action-item:hover {
    max-width: 150px;
    background-color: #ff9966;
    padding-right: 10px;
}
.actions-list .action-item:first-child {
    border: none;
}

.facebook {
    background-image: url(https://pub.ofcrab.com/usr/uploads/2016/06/3022132263.png);
}
.google {
    background-image: url(https://pub.ofcrab.com/usr/uploads/2016/06/3814450726.png);
}
.linkedin {
    background-image: url(https://pub.ofcrab.com/usr/uploads/2016/06/650013350.png);
}
.picasa {
    background-image: url(https://pub.ofcrab.com/usr/uploads/2016/06/887720659.png);
}
.twitter {
    background-image: url(https://pub.ofcrab.com/usr/uploads/2016/06/1628655408.png);
}
.wikipedia {
    background-image: url(https://pub.ofcrab.com/usr/uploads/2016/06/305452685.png);
}

pattern属性

pattern用于验证表单输入的内容，通常HTML5的type属性，比如email、tel、number、data类、url等，已经自带了简单的数据格式验证功能了，加上pattern后，前端部分的验证更加简单高效了。显而易见，pattern的属性值要用正则表达式。

简单的数字验证

数字的验证有两个：

<input type="number" pattern="\d"> 
<input type="number" pattern="[0-9]*">  

对表单验证来说，这两个正则的作用是一样的，表现的话差异就很大：

• iOS中，只有[0-9]*才可以调起九宫格数字键盘，\d 无效
• Android 4.4以下(包括X5内核)，两者都调起数字键盘；
• Android 4.4.4以上，只认 type 属性，也就是说，如果上面的代码将 type="number" 改为 type="text" ，将调起全键盘而不会是九宫格数字键盘。

常用的正则表达式

pattern的用法都一样，这里不再啰嗦各种详细写法了，只是列出来一些常用的正则就好了：

• 信用卡 [0-9]{13,16}
• 银联卡 ^62[0-5]\d{13,16}$
• Visa: ^4[0-9]{12}(?:[0-9]{3})?$
• 万事达：^5[1-5][0-9]{14}$
• QQ号码： [1-9][0-9]{4,14}
• 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
• 身份证：^([0-9]){7,18}(x|X)?$
• 密码：^[a-zA-Z]\w{5,17}$ 字母开头，长度在6~18之间，只能包含字母、数字和下划线
• 强密码：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间
  7个汉字或14个字符：^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$
  浏览器支持

但很不幸，pattern的浏览器支持很惨：

其实这是一场说走就走的旅行，原本2016 的清明就是一个更加让人伤感的日子，外公去年去世，而就在上一个月，还知道了一个自己完全接受不了的实事，一个我心中的知己在去年乳腺癌去世，也算是新事几多无奈，故人万般伤情了。

出行两周前，泽哥在群里发了个消息，说清明咱一起去婺源拍油菜花吧，之后大概了解了一下行程，就决定去了，向领队交了两百订金，一起四个人：我，泽哥，爽爽，糖糖。

第一天（2016 年 4 月 1 日）

假前的最后一天，下午三点就从公司离开了，因为这次去的设备有点多，所以提前回家收拾，各种纠结之后，出发前，临时还改成了，背大登山包，把摄影包放在登山包里面，这样摄影器材就可以直接放在摄影包里面，不用和别的东西混了，到达目的地之后，直接把摄影包提出来就成了，打完包之后是下面这样的。

下午 4:04，从家里面出发，步行前往九龙山地铁站，与糖糖会合。

下午 4:57，跟糖糖会合后一起转地铁七号线，前往北京西站，尤其车票是非实名的，所以，需要提前到达车站做一些准备工作，当然，还得学习一下如何使用黄牛票（这也是人生中第一次使用黄牛票，经验不足啊）。

下午 5:55 到达北京西站北广场，取了车票，当时就惊呆了，我跟糖糖的票都是五六十岁的老头老太太的，后来才听领队解释，这里顺便说一下下黄牛票这个东西：

1. 如果是自己实名的票，那就万事大吉了，直接多给黄牛们点钱就行了；
2. 如果不是自己实名的票，拿到票之后，再去买一张所乘车站的进站票（就是从当前这个车站开往任何一个地方的票即可，但是必须是实名的，而且需要可以在自己真实要坐的车关闭检票通道前进站）

似乎一不小心又暴露了行业秘密哪，罪过罪过，再来一张当时的装 B 照，给每人一张拍立得：

拿到票之后，在一个叫作“美食商场”的大约超过 25 平米的快餐店里面吃了一份价值四十元的纯素宴，吃得还很香（糖糖还喝了一杯香飘飘）。

我后来是买到了实名的进站票了的，但是糖糖没有买到，所以后来我先进了，糖糖还得找了领队，拿着领队的实名票进的站，泽哥跟爽爽同学直接后面进来的，都是实名票。下午 7:20 成功登车，吃了糖糖带来的听说是世界上最好吃的巧克力（同事日本带回来的）。

2016才过三个多月，但是已经两次下长江以南了，才发现，北京往江南一带发的列车，不管是高铁还是直达，都已经被各种企业冠名了，比如，这次坐的这躺 Z133 号列车就叫作“建设银行号”，然后就是整列车只有建设银行的各种各样的宣传与广告，在下车之前，我一直没有拿相机出来，所以，基本上啥也没有拍，除了这几张手机拍的，到是泽哥一直按耐不住鸡冻的心情，来了一组《火车上的故事》

还有几张泽哥拍的照片，就是太高感哪。

第二天（2016 年 4 月 2 日）

晚上扯蛋聊天到了尽十二点，早上五点半起床，6:20 到的江西九江站，在车站出口左侧的麦当劳集合。

期间，就在我自己的一回眸间，点了一间烟。

这就是我常说的泽哥，网名小温同学，文艺小骚年一枚，前面的就是我们这次的所有行李。

下一位出场的就是一直说的糖糖了，多次出现在我拍摄的照片里面，很多人说她是不是我的专职模特，其实真心不是，我们只是纯洁的革命战友而已。

最后一位出场的就是新加入团队的爽爽同学，似乎老人欺负新人已成为一种习惯，我们四个人的介绍就由她上了：大家好，我叫爽爽，猎聘工作，以后大家有谁想找工作可以找我，我跟三个小伙伴一起来的。

然后，再看看下面这张，有没有发现，同一个人，衣服领子已经不一样了？这才是专业模特啊，就在不经意间，人家衣服已经换好了。

第一站，严田风景区

大巴上午 10:20 到达严田风景区，这是我们此行的第一站，整个婺源县就是一个大的景区，而与别的风景区不同的是，婺源的每一个景点就是一个乡镇或者是一个村庄，而景点的建设也很简单，把一个自己生活着的村子围起来，设个门禁即可，我们买的是婺源的通票，买了票之后，半个小时之内必须至少进入到一个景点，第一次使用门店票的时候，需要设置一下自己的指纹，此后的所有景点都需要刷门票以及指纹，很不错的一种方式。

在领队买门票的间隙，在这里拍了一两张，关键问题是，我们先看到的不是入口，而是一个叫作“游客止步”的出口：

上午 10:40，拿到联票后录完指纹，进入严田景区。

首先看到的，就是这个出口，在楠竹林间的青石板路，配以徽派的白墙青瓦门。

几双“千层底”布鞋。

好奇的泽哥和爽爽似乎以前没有见到过竹笋。

还有这现代的装扮配上毛主席语录，

而我也已经全幅武装，装备大拍一场了。

有人问我这是在拍啥？

我只是在记录这里的每一美景，青柳，古树，行人，小桥，流水，人家，美，美如画。

糖糖也终于脱掉了外套，进入麻豆模式了，火力全开啊。

我们的道具雨伞也有幸被这位气质美女借用了一下。

这是一棵有着1400 多年树龄的古树，在当地被供奉为神树，而这整个景区的面积也不过就是这棵树的方圆两百米，这就是婺源景区的特色。

我们的爽爽也第一次露面了。

好像泽哥跟爽爽还没见过活着的水牛似的哪：

几张古树

严田随拍

糖糖已然成为了美景中的一部分，无数帅哥想跟她合影哪。

这是什么菜？

一直没想明白，一个食指这代表是什么意思，我们此行的目的本身就是为了看一次听说是中国最美的油菜花，但是安排在第三天，可是第一天就已经看到了，虽然不多，但是对于北方女汉子来说，已经足够了。

而古村庄的小孩儿玩着现代的玩具，摩托与空调也都已经成为了最低的住房配置，古老的青石板路，却依旧在时间的长河里，承载着无数人的脚步。

推开窗，看到的是青山，走出门，身边的是绿水，有几棵棕树熙熙攘攘地站在小溪边的田坎上，田里是去年割掉的水稻后留下来的稻梗，除了童年记忆的老家不是白墙青瓦外，这就是我的故乡。

房子坏了，叫上邻里，做上一顿好饭，就可以盖好一间房屋，没有 80 一天的小时工，也没有水泥河沙，只是把那枯死的老树按着它的形状做一下简单的切割，钻上几个卯钉眼，便可。

而这有诗意的牌匾，出现在这古老的村庄中，也告诉着世人，这是一个有灵性的地方。

大地皆春色，吾门独素风

在这里，几朵小花，便能让我成为了一个小确幸

但是，迷茫的城里人，为什么在如此美的地方，你还不丢下右手上的手机，享受着田园的风光。

这让你，就算身处此地，也只能接受他人异样的眼光。

第二站：彩虹桥

婺源有一种颇有特色的桥——廊桥，所谓廊桥就是一种带顶的桥，这种桥不仅造型优美，最关键的是，它可在雨天里供行人歇脚。宋代建造的古桥——彩虹桥是婺源廊桥的代表作。这座桥取唐诗“两水夹明镜，双桥落彩虹”的意思取名。桥长140米，桥面宽3米多，4墩5孔，由11座廊亭组成，廊亭中有石桌石凳。彩虹桥周围景色优美，青山如黛，碧水澄清，坐在这里稍作休憩，浏览四周风光，会让人深深体验到婺源之美。此次婺源之行的第二站，就是彩虹桥。

当然了，在去往彩虹桥的路上也是很多我们喜欢的景物，比如，这样的一双鞋：

又比如，这样一条巷子：

当然，更让我们喜欢的，当然还是彩虹桥两边的这两面镜子：

也该来看看彩虹桥的全景了

然后，看到我们的位置了没有，走到彩虹桥之后，不要直接过桥，而是从桥头的左边沿河往上走，大约 50米，有一个码头，那个位置可以看到整个桥身，也可以拍得到。

但是，泽哥好像对桥不屑一顾哪，还是人重要。

桥上看到的风景，如画，入镜：

而这突然之间，从照片里面找到了一张有我入镜的照片，感谢泽哥：

过彩虹桥之后，一般都是直接就下桥从溪中回了，但是其实可以往后山上走个几百米，就可以去一下全国唯一的一个徽派风格的寺庙——彩云寺，泽哥跟爽爽是走在前面的，没去，就我跟糖糖两个人去逛了一下下，我本身对寺庙没啥感觉，但是至少也看看嘛：

彩虹桥景区随拍

我们在彩虹桥景区外吃的中餐，跟糖糖后面才到，泽哥跟爽爽已经吃得差不多了，居然没点一个荤菜，咱直接上了一个三鲜汤与一个红烧肉，这个肉不错，泽哥居然还吃肥肉了，离开的时候，大约下午 1:40，开始下雨了。下午两点整从彩虹桥出发，前往下一站。

第三站：思溪延村

下午 2:20 到达思溪延村，拍了我们的大合照，当然，还是一样的没有我，我永远是那个拍照的人。

跟别的景点一样，这又是另一个村子，我们同样还是先看到出口。

刚进去的一段路可以很明显的看到这是后来建成景区之后新修的路。

走过这一段路之后，首先会看到的是大片的油菜花以及大片的野花（当然不是野花，这都是种的），以整个思溪延村的白墙青瓦为背景，远处还有山，花中又是点点游人留影，好美。

好吧，没几下我们就开启了人像模式了：

当然了，作为人像摄影师的时候，你至少得是这样的：

然后，我叫着糖糖尝试了一下下面这张照片：

其实模仿的是我特别喜欢的一个摄影师的作品，原作品是下面这样的：

差距好大啊，摄影师的错哪。

思溪延村随拍

这家的酒不错，我买了一桶女儿红。

第四站：月亮湾

所谓月亮湾，其实就是在去李坑的路上路过的一片月亮形状的小岛，在月亮湾的旁边可以望到一片小村庄和错落的稻田。观赏月亮湾的最佳角度在附近的山上，可以从旁边的一条小路上山。山上特意搭建了一个小的观景台，从观景台望下去，可以看出月亮的月牙完整形状。如果是油菜花开的旺季的话，整个月亮呈现金黄色的，异常惊艳。可惜的是，我们也只是路过哪，下午 4:20 到的，停了十分钟左右，随便拍了几张照片。

第五站：李坑

李坑是一个以李姓聚居为主的古村落，距婺源县城12公里，其建筑风格独特，为著名的徽派建筑，给人一种安静、祥和的气氛。李坑自古文风鼎盛、人才辈出。我们是下午 4:50 到了李坑。

说到文风鼎盛，从李坑的厕所就可以看出来了，硬是找了半天没找到，后来发现，人家不叫厕所，叫“舒园”：

切记切记，如果你下了车之后尿急，记得，出口处的舒园就是厕所。进入景区之后，首先看到的是一片田地，但是似乎里面种的是荷花？我这种花盲似乎很难确定是啥，这还需要以后糖糖多多指导哪。

还能看到这些鸭子。

如果不坐车的话，一进门就会有竹筏可以坐，我们没有坐，也不知道价格，李坑的竹筏与别的江南小镇的都不一样，因为没有宽大的水域，只有一条穿村而过的小溪流，所以，自然条件本身就限制了无法像乌镇那样，竹筏的乘坐是分段的，进景区之后，有一断大约是 100 米不到，然后需要下来，再往上走一断距离，再换成别的竹筏。

泽哥与爽爽两个人先进的村，我跟糖糖两个人上了一躺厕所之后，就被他们完全的甩开了，糖糖说我现在就想这样安安静静地走着，所以，就这么走着吧，开启了淑女模式的糖糖，总是让我感觉脸上有一脸可爱的无辜。

就跟糖糖这样安静的走在这条青石板路上，心情可以很平静。

在李坑的两山之间，有一座高铁桥，车辆似乎还很多，当时就抓拍了这一张，糖糖说可以陪着我等着下一辆高铁过来，不过，时间不够啊，想拍一张连接现代与古代的桥梁。

似乎婺源所有的景点，入口都被安排了很长的一条购物通道，尤其是李坑，这一点真的很坑哪，我们两个人把大把的时间浪费在了前面这一段没有用的路上，还以为就是走在了古村里，可是谁知道，最后走完了之后才发现，我们压根就还没有进村哪，还花了好几个十块钱，买了一堆的木头，香樟木，有资源就是好啊，把村子一围就可以收费，把树一锯就可以卖。

但是饿了的时候想弄点吃的，却找不到，只买到了这种小点心

第三天（2016 年 4 月 3 日）

今天的任务很单一，我们只上一座叫作三清山的山，早上早早儿地就起床了，在住的地方吃了早餐，直接上车赶往三清山，这是一座让我有很多惊喜的山，一开始，就是这索道了。

一行人，有三分之二选择了坐过道上山，我们几个还是选择用自己的双腿去丈量它的高度，一大早，没有太阳，也没有雨，有雾。

喜欢这样的石板路，路旁这样的小溪流，小溪流上这样的花簇，花簇后这样的大树，更喜欢，大树身后那一座座延绵不绝的山。

要是天气再好一点，我肯定就躺在这水流之上了。

而这种深一点的小水潭也是我的最爱，家乡也有很多大山，大山里也有很多这样的小溪从山顶顺着山谷而下，水的冲击会形成很多这样的水潭，夏天的时候在这边的水潭边烧烤，是最爽不过的事情了。

往上一些之后，为了拍一个瀑布，我也是拼了，去往这个大石板的路已经损坏了，雨天还特别滑，就拍了下面这几张，不怎么样哪，不过也没办法了，没有时间好好的去拍了，就当个旅游记念照吧。

泽哥今天第一次出镜，很嘻哈的打扮，帽子听说是为了遮阳，其实还可以避雨。

之后，就拍了一张整个一天最喜欢的一张照片，只是，旁边的那些个线缆让人很纠结啊。

上午十点四十，山里下起了暴雨（阵雨），我们每人都只有一件宜人贷马拉松时我带回来的雨衣，没法儿继续往上爬了，所以就在半路上的一个小楼里面坐了会儿，我跟糖糖两个人各吃了一碗米粉，不是很贵，15 块一碗，想想，还是很便宜了啊，更牛的是，老板说，喝了她家的红牛就能一口气上山顶，所以，我为下面这壮观的景象贡献了自己的绵薄之力。

听雨声，听雨滴打在这么多红牛瓶子上的声音，就像交响乐一样。

也有很多年没有看到像这里的人一样，把大盆放在屋檐下，下雨的时候能接上满满的一盆水，洗衣洗菜都可以。

而喜欢雨的糖糖也已经开心的淋了起来。

丽爽同学的裤子也已经湿了，大雨过后，溪流瞬间就大了起来。

雨小点后，在吃粉的房子旁边拍了上面这张，其实是竖构图的，但是左上有很粗的两根线缆，实在是难看，所以，改成了横构图，手持长曝光，没办法，有点模糊了，脚架只带了一个小的运动脚架，所以，也不太好架。

不过这个地方的景到是很不错的，有花有水有石头，当然，还是湿的。

照片上面的雾，其实是镜头上的 UV 镜起雾了，暴雨天最大的问题就是，镜头让人很心疼啊，但是能记录下哪怕是一张照片，也值了，应该买防雾镜的，但是没经验哪，这些只能一路上靠餐巾纸擦了。

一路上山，每一处都能成为一景，这是我在三清山最大的感受了。

才走没多远，又开始了暴雨。

不过下了雨，最大的好处就是，雾大了，慢慢地，我们感觉自己已经身处仙境，而这种感觉，越来越深。

这种在大雨中拍照的技能，还是需要多练习

下午，十二点二十，我们终于到了过道站，一路上基本上都是暴雨，在过道站边上的一个小卖部休息了一会，买了点热的吃了吃，玉米，红牛，还是这些东西，垫了下肚子，顺便清理了一下下相机镜头，还是有点怕相机湿身哪，虽然，我带了一个相机雨衣，不过用起来其实真的很麻烦，手在雨衣里面，是热的，外面冷的，很快里面就全是水气。

休整片刻后，继续出发。

我看到这里，还以为后面那个尖尖的就是最高峰，后来知道，我错了。

半路上看到一把很流 B 的雨伞，很是喜欢，不过，再大的雨伞都不如一件薄薄的雨衣啊，因为，你完全就不知道下一秒雨会从哪个方向打向你。

好吧，泽哥，我知道我把你拍丑了，但是，有总比没有好吧。

感受一下，三清山的山体。

雨慢慢地变小了，终于又开始开始疯了

三清山也有松

本以为快到顶了，但是，其实真正让我震撼的路才刚刚开始，还是那件宜人贷，你们说，公司是不是应该给我点广告费？

我们是从山脚下一直爬上来的，当我们到达这个位置的时候，很多人都已经开始往下走了。

从这个时候开始，你就能看到上图这样的路了，在大石头绝壁上，有那么一条小道，刚好一边上一边下，容不下第三个人并排走，往上，看不到顶，往下，看不到底，你就站在那半山腰上。

就算是到了这么高的地方，还是少不了这样的小瀑布

其实这两娃长得都还不错，但是被我拍残了，就将就着看吧，大家都很累了，也没必要为难大家去摆 POSE 了，也留个纪念照先。

三清山的每一个山头，都如精心摆放的盆景一般精致。

这个位置，糖糖拍完之后才发现，脚下踩着的那一滩水下面，其实是透明的玻璃，吓死宝宝了。

从这个位置开始，泽哥跟丽爽同学直接折返下山了，我们四人组就剩下我跟糖糖两个人，然后，就在他们两折返点往上不超过 50 米，我们就看到了下面这样的景色。

雨停了之后，迎来的就是美丽的云海了。

三清山山形

下午一点五十分，我们两人成功到达山顶的栈道，感受云在身边飘，人在天上行的感觉。

三清山山形全景

三清山的云海

我们这次的运气应该说是特别好了，上山的时候大暴雨，刚到山顶，雨就停了，而后，看到了大云海，唯一可惜的是，要是雨停后出大太阳就好了，可能还能看到漂亮的彩虹，光线也会更适合拍照。

• 你开心吗？
• 我很开心！

慢漫下山路

照片没有专门的处理，这就是相机直出的原片，就是这样，就像我们在仙境一样，只是苦了相机。原计划是下午四点三十准备发车回住所，我们下到过道站的时候已经是下午四点，还有半个小时时间，没法儿再走下山了，所以改乘过道下山，从过道上，可以看到我们上山时路过的那一条小溪流的全貌。

下午四点三十，领队刚刚点名的时候，我们刚刚上车，准时哪。

补充几张照片

我是这样拍照的

第四天（2016 年 4 月 4 日）

最后一天的行程就没有太多了，就一个，也是这次婺源之行的终极目的地——江岭看油菜花，不过，油菜花到是有点小失望，应该我们来晚啦，不过，还是从一天的开始说起，还是很早的就起床了，一大早，泽哥就一个人出门，在住所的镇子上跑了一圈，我跟糖糖后来也跑了一圈，感受下这是什么样儿的一个镇子。

这就是我所向往的生活的居所应该有的样子啊，还是回到现实吧，今天的目的地，江岭油菜花，之后就要回京了。

到达江岭之后，车都是停在这一块大停车坪上，然后坐免费摆渡车上到江岭景区内，其实就是一个小村子而已啦。

到了这里，才知道，自己只是一个游客而已

这是一个大观景台，就是看下面的油菜花的，但是，因为时间太晚了，所以，也没有在网上看到的那一片一片的金黄的彩色了，再加上一大早上雾气也很重，所以，就拍到了这一张照片，之后的所有片子，就都是云、雾、山与青瓦白墙的微派建筑了。

先给两大美女整了一张

泽哥也已摆好架势，等待美景的出现。

本来跟泽哥的约定是，他今天只拍景，我今天只拍人，所以，在这个位置，我就随便先拍了几张周边的景色，感觉还是很不错的啊，虽然连着两天都没有好天气，但是正是这样的云雾缭绕更让人感觉这就是长江以南哪。

就如水墨画一样

然后，关于那美丽的、金黄的油菜花，我只拍到了这张《“富士山”下的江岭》

然而，但是，最后

我第一次带上三脚架

想记录下你的美

而你，

却如待嫁的小妞

迟迟不肯出现

泽哥等得有点不耐烦啦，我们也及时的调整策略，不等了吧，这就是一个看缘分的事情，等不到的美景不是它不存在，而是我们之间的缘分未到，下山，拍点人像去啦，也看看这大山里、薄雾下的江岭。

江岭人像

没了油菜花，也没有很好的阳光，就只剩下找点地方拍拍人像了。

再插两张工作照，哈哈

呃，发现自己都已经说不出啥来了，纯粹就晒照片吧。

不过除了晒照片，这里还有几个特别有故事感的画面，比如：

苍天哪，你还我油菜花

我爱你

我也爱你

跟我回家？

可以

...

做摄影师真苦 B，还是好好的拍拍到此一游吧

然后，有了下面这张照片，居然发现自己手臂上还有肌肉，还是块状物

第二站：晓起

这里到是没怎么拍照了，个人感觉就是一个纯粹购物的地方，虽然有很多老房子可以看看，但是：拍照十元哪，意思就是你拍我家老房子，先交了钱再说，呃，原来，赚钱还可以这样。

进门之后就是一个池塘，没有太多的水，但是还是的绕一圈，这一圈全是各种各样的小吃和各种各样的旅游景区商品，其实哪里都有。

到是邢姐在这棵千万古树前面拍了一张纪念照

因为下午一点半我们就得出发前往火车站，所以，也没有太多的停留，在里面找了一家饭店吃了个饭，味道到是都还不错，价格也不贵，但是就是那个上菜的速度，上人着急啊，更主要的是，最后收钱的速度，也是让人着急啊。

下午两点半，路过景德镇，我们在一个接待外来游客的博客馆里面停了一下下，没有强制消费，不过最后的结果是，领队自己买了一套，很好，很不错，其实都没啥心思看了，就继续晒晒照片吧。

一个（表演中？）的工匠（艺人？）

还有，什么叫好瓷？听说用手指这么轻轻的措就能有特别清脆的声音，确实如此啊。

然后，一位看上了这幅画，拍下来：

还有我们滴小泽同学偷偷的拍了这个（以下图片来源：小泽同学）：

结束了吧

四天的行程就这么结束了吧，这是这么多年以来，第一次，真正的感觉到，属于自己的旅行。

即使是到现在，如果有人用像这样一段台词的内容来和我交谈，我还是会感到惊愕、羞愧、无地自容以及内心被各个击破，承认自己的幼稚，承认自己的无知，承认自己可笑的浅薄与可耻的狂妄。因为每一句话所传递出来的真理，都能戳中要害，让你深以为然，让你羞愧难当。这样一段话适合任何阶段的你时不时地看一遍，以作自我警醒。

1. 这张面具之下不只止肉体，这张面具之下是一种思想，克里蒂先生，而思想是不怕子弹的。
2. 人民不应该害怕他们的政府，政府应该害怕它的人民。
3. 撒谎是人之本性，在大多数时间里我们甚至都不能对自己诚实，但那是因为人们太脆弱了，所以才撒谎，甚至是对自己撒谎。
4. Freeeedoooom！！
5. 海明威曾写道……”这世界是个好地方，值得为它奋斗“，后半句我同意。
6. 你曾努力让你的人生更好吗？
7. 当一个体制完全背离了人们的信任，法律不但无用武之地，反而成为枷锁，让坏人为所欲为，这个城市应该配个更有品位的罪犯。
8. 曾经有一个女孩站在我面前，我没有珍惜。
9. 我知道你如果不想被人拒绝，最好的方法就是拒绝别人。
10. 有些人是离开后，才会发觉那个人是最喜欢的。
11. 现在泪水逝尽，才发现，一切，依然动人。
12. 我听人家说，世界上有一种鸟是没有脚的，它只可以一直的飞呀飞，飞累了，便在风中睡觉，这种鸟儿一辈子只可以下地一次，那一次就是在它死的时候。
13. 以前，以为有一种雀鸟，一开始飞便会飞到死才落地，其实它什么地方都没有去，那只雀鸟一开始便已经死了。
14. 我们不路奋战，不是为了改变世界，而为了不让世界改变我们。
15. 你是在和我说话吗？
16. 意思是说：”当你挽救了一条生命，你就等于挽救了全世界“
17. 生活和电影不一样，生活难多了。
18. 人生就像一盒各式各样的巧克力，你永远不知道下一块将会是哪种。
19. 你得丢开以往的事，才能不断继续前进。
20. 因为不抽空陪家人的男人，不是真正的男人。
21. 我干了一辈子，没什么遗憾，我照顾了我的家人。
22. 明天又是另外的一天。
23. 就让我跟你唱，唱一辈子戏，不行吗？
24. 我将尽忠职守，生死于斯。
25. 雄狮是不会夏绵羊的看法的。
26. 如今我走到人生的十字路口，我知道哪条路是对的，毫无例外，我就知道，我但从不走，为什么？因为妈的太苦了。
27. 当我年轻的时候，我想变成任何一个人，除了我自己。
28. 原来寂寞的时候，所有人都一样。
29. 人生总是这么痛苦吗？还是只有小时候是这样？————总是如此。
30. 世间所有的相遇，都是久别重逢。
31. 工作不能代表你，银行存款并不能代表你，你开的车也不能代表你，面目一新里的东西不能代表你，衣服也不能代表你，你只是平凡众生中的其中一个。
32. 所有的光鲜靓丽都敌不过时间。
33. 生而在世，我很抱歉。
34. 岁月匆匆，我爱上过许多女人，但唯一我从来没忘记的，是一个从来没问过我的人。
35. 船来了，杰克。
36. 人活着多半不知感激。

2016 年 2 月 27 日，北京原始地貌登山队，鲶鱼沟至冯家峪古长城穿越，这里看不到长城的雄伟，看到的只有千年沧桑，总共穿越 16 座敌楼，数座保存完好，然城墙确早已破败不堪，跟随我的视频，一起感受它。

翠鸟冰谷位于延庆县最北部，是北京原始地貌独立发起的原始河谷，因谷内不时传来鸟鸣而得名。尤其此谷没有其它的户外团队涉足，所以其景色还没有破坏，谷内水量很大，但是水流缓慢，所以，相比于其它河谷来讲，其谷内冬天冰层更厚更硬，很适合冬天休闲踏冰。

本文最下面提供了本次踏冰全程记录视频，有兴趣的朋友可以看看。

一直对北方这种路这种景很有感觉，还遇到一队骑行的。

随拍

下面就是一些随拍记录的照片，有兴趣的慢慢看。

全程记录视频

本来是想着跟小泽同志去宜宜四元桥店拍拍人像的，但是正好赶上宜家做活动，全场 5 折，人太多，这是去宜家的路上，已经走不通了。

宜家人像没拍成，一行四人转战去了南锣鼓巷，但是正好前一天晚上看到微信朋友圈里面某位朋友分享的文章里面提到了北锣，所以，下车后先往北锣鼓巷走一躺，已是夜里。

巷子里面就如南锣一样，有很多小清新的类似下面这样的小店子，不同点在于，它们都不如南锣般热闹，但同样的，如果只是想着自己安静的瞎逛逛的话，北锣比南锣好得多。

它也不像南锣那般纯商业化，在巷子里面还有真正居住的人，他们还是过着像以前一样的老北京生活：

巷内大多商店的店招与店名也都是有着小清新的特色，同时也不是很亮，整个巷子都比较暗。

有的小店门口还会提供几把椅子供路人休息：

春节已过，元宵将至，门口都还贴着春联。

与北锣相比，南锣鼓巷可谓人山人海了。

门店也更多，品种也更全：

这种小商贩也多了起来：

接着也就没啥可逛的了，本来就是临时来这边走一下下，所以，快快的吃了个饭，就直接回家了。

让我们通过本文从 0 开始使用 TypeScript 创建一个 Angular 2 应用。

先看看运行效果？

如果想先看看运行效果，可以点击访问我们在 Plunker 上面准备的示例，应用其实做的事情很简单，打开页面之后，开始加载程序代码，当程序代码加载完成之后，在页面中显示应用组件，该组件包含 My First Angular 2 App 字符。

其文件目录结构如下：

angular2-quickstart
|-app/
|-|-app.component.ts
|-|-main.ts 
|
|-index.html
|-license.md

功能文件包括一个 index.html 文件以及 app/ 目录下面的两个 TypeScript 文件。

当然了，我们开发不仅仅只是想在 Plunker 上面可以运行就可以了的，而是需要做一个真正的应用，包括：

1. 配置我们的开发环境
2. 创建 Angular 应用的根组件
3. 启动它以让其接管整个页面
4. 创建主页面 index.html

开发环境

我们首先需要一个地方存储整个应用的程序文件（应用项目目录），一些 TypeScript 配置以及一些开发与运行时需要的库。

创建新的项目目录

mkdir angular2-quickstart
cd angular2-quickstart

配置 TypeScript

我们必须要对 TypeScript 编译器进行一上结特殊的设置。

在项目目录下面添加一个名为 tsconfig.json 的文件，并复制/粘贴以下代码：

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

TypeScript Typings

许多 JavaScript 库对 JavaScript 的功能与语法进行了扩展，而这些扩展很多是 TypeScript 编译器本身不识别的，我们需要通过 TypeScript 类型定义文件 —— d.ts 教会编译器如何编译这些扩展，在项目目录下面新建一个名为 typings.json 的文件，编辑复制并粘贴下面的代码片段：

{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
  }
}

添加项目必要的第三方库

我们推荐使用 npm 包管理工具管理第三方库。在项目目录中添加一个名为 package.json 的文件，复制并粘贴下面的代码片段：

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "npm run typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "typings" : "typings"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.6",
    "systemjs": "0.19.20",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.14"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^2.0.1",
    "typescript": "^1.7.5",
    "typings":"^0.6.8"
  }
}

然后在项目目录中执行下面的命令以安装必要的第三方库：

npm install

第一个 Angular 组件

组件(Component) 是 Angular 最基本的概念，组件管理视图——用于显示网页内容或者对用户的反馈作出响应，技术上讲，一个组件就是一个类或者一个视频模板，我们在创建 Angular 应用的过程中，就是创建很多个组件的过程。

创建一个子目录

我们希望整个应用的代码都保存在项目根目录下名为 app/ 的子目录下，在终端中执行下面的命令即可：

mkdir app
cd app

创建组件文件

现在，添加一个名为 app.component.ts 的文件，复制并粘贴以下代码：

import { Component } from 'angular2/core';

@Component({
  selector: 'my-app',
  template: '<h1>我的第一个 Angular 2 应用</h1>'
})
export class AppComponent {

}

组件类（Component class）

在该文件的最下方，我们添加了一个空的，不做什么事情的名为 AppComponent 的类，当我们需要去做一个具有实质性功能的应用时，可以去扩展该类，但是在快速入门这个项目中，它不需要做任何事情。

模块

Angular 应用是模块化的，它们会使用很多个不同的模块去实现特定的功能，绝大多数应用的文件都会导出一个事物，比如一个组件，我们的 app.component 文件导出了 AppComponent 类。

export class AppComponent {

}

导出使得这个文件变成了一个模块，而这个文件的名称一般就是模块的名称，如上所述， app.component 就是我们的第一个模块。

表单是任何一个应用的基石，在 Angular 2 中，表单的实现作了不少改变。

曾经在 Angular 1 中，我们使用 ngModel 将表单数据映射至应用的数据模型，但是在 Angular 2，我们可以使用表单控件更加明确地构建表单，虽然看上去，相比于 Angular 1，我们需要写更多的代码，但是却不可以让我们不再需要去解决那些烦人的 ngModel 声明与数据绑定问题了。

一个简单的表单示例

<form [ngFormModel]="loginForm" (submit)="doLogin($event)">
  <input ngControl="email" type="email" placeholder="Email" />
  <input ngControl="password" type="password" placeholder="Password"| />
  <button type="submit">Log in</button>
</form>

与其相应的组件 JS 代码如下：

import {Component, FormBuilder, Validators} from 'angular2/angular2'

@Component({
  selector: 'login-page',
  templateUrl: 'login-page.html'
})
export class LoginPage {
  constructor (fb: FormBuilder) {
    this.loginForm = fb.group({
      email: ["", Validators.required],
      password: ["", Validators.required]
    });
  }

  doLogin(event) {
    console.log(this.loginForm.value);
    event.preventDefault();
  }
}

当我们运行该应用时，浏览器中会展示如下的登录表单

    +--------------------+
    | Email              |
    +--------------------+

    +--------------------+
    | Password           |
    +--------------------+

    +--------------------+
    |      Log in        |
    +--------------------+

表单构建器（FormBuilder）

在上面的示例中，我们使用了 FormBuilder，它可以让我们可以快速方便的定义表单控件以及每一个控件需要绑定的验证器，在上面示例中，我们创建了两个文本输入框 email 与 password ：

this.loginForm = fb.group({
  email: ["", Validators.required],
  password: ["", Validators.required]
})

控件组（ControlGroup）

FormBuilder 创建的就是 ControlGroup 实例，我们称之为 form，除了使用 FormBuilder 之外，我们还可以直接手工构建 ControlGroup：

this.loginForm = new ControlGroup({
  email: new Control("email", Validators.required),
  password: new Control("password", Validators.required)
});

但是在实际的开发中，使用 FormBuilder 会方便很多。

表单指令 (For,m Directives)

上面的示例中，你应该已经注意到了，没有使用一个 ngModel 声明，但是我们使用 ngControl 将表单中的值映射至控件对象中。

<input ngControl="email" type="email" placeholder="Email" />

这将 email 输入框 ”绑定“ 至了 email 控件。

自定义验证器

我们可以创建自定义的验证器，它就是一个简单的函数：

function containsMagicWord(c: Control) {
  if(c.value.indexOf('magic' >= 0) {
    return {
      noMagic: true
    }
  }
  
  // Null 表示验证通过
  return null;
}

this.loginForm = fb.group({
  email: ["", containsMagicWord],
  password: ["", Validators.required],
});

处理表单数据

我们可以通过很方便的访问表单对应的 JavaScript 对象，或者某一个控件的值：

doLogin(event) {
  // 展示表单的数据
  var formData = this.loginForm.value;
 
  // 或者获取控件的值
  var email = this.loginForm.controls.email.value;

  event.preventDefault();
}

在 Angular 2 中，使用括号 () 绑定事件，并触发组件类中相应的方法，比如：

@component(...)
class MyComponent {
  clicked(event) {

  }
}

模板如下：

<button (click)="clicked()">点击我</button>

委托

Angular 2 采用普通 DOM 事件一样的机制处理事件，它们同样可以冒泡，我们不需要做什么特别的工作。

事件对象

要访问事件对象，只需要将 $event 作为事件出发的​参数即可。

@Component(...)
class MyComponent {
  clicked(event) {
    console.log(event(
  }
}

模板如下：

<button (click)="clicked($event)">点击我</button>

Angular 2 中的模板与 Angular 1 中的模板非常类似，但是还是有了很多的小改进。

简单示例

下面这个示例展示了一个 Angular 2 模板，它展示出我的姓名以及我喜欢的事物。

<div>
  您好，我叫 {{ name }} ，我喜欢 {{ thing }}。
</div>

{{}} ：渲染

要渲染出某一个变量的值 ，我们可以使用双大括号 {{}}：

我的名字叫 {{ name }}

在渲染声明中，我们还像 Angular 1 一样可以使用管道工具（Pipes`），比如过滤器，他们可以转换一个值为另一个值，或者将一段字符串本地话，或者可以将一个数字按照本地的货币数值格式化。

[] ：绑定属性

要为一个组件绑定一个属性，可以使用 [] 声明，如果你在组件中有一个 this.currentVolume 声明，那么我们将可以将该值单向同步至组件，以帮助组件可以实时具有该属性的值：

<video-control [volume]="currentVolume"></video-control>

() ：事件监听

要在一个组件上监听一个事件，可以使用 () 声明：

<my-component (click)="onClick($event)"></my-component>

[()] ：数据双向绑定

要实现数据的双向绑定，我们可以使用 [()] 声明：

<input [(ngModel)]="myName" />

此时，this.myName 的值将与 input 的值双向同步。

* : 星号

* 声明表示该指令把当前组件作为一个模板，而且不会直接将其按愿你渲染，比如 ngFor 指令遍历出 items 中的每一个 item， <my-component> 每一个 item 会创建一个组件的实例，但是组件本身的声明并不会被渲染出来。

<my-component *ngFor="#item fo items">
</my-component>

其它类似的指令还有 *ngIf、*ngSwitch 等。

Angular 2 应用的生命周期需要经过一个多级的启动过程，我们可以在 App 启动、运行与创建/销毁组件的过程中响应大家的事件。

启动

Angular 2 应用需要通过应用的 根组件 (root component) 启动，在我们的主 JS 文件中，我们可以像下面这样写：

import {Component, bootstrap} from 'angular2/angular2'

// 注解部分
@Component({
  selector: 'my-app',
  template: '<h1>你好，{{ name }}</h1>'
})
// 组件控制器
class MyApp {
  constructor() {
    this.name = '潘韬'
  }
}

bootstrap(MyApp)

该代码片段中，你可以添加应用级别的代码与配置等，它的模板将是其它所有组件的容器。

组件初始化

当一个组件创建成功之后，它的构建函数 (constructor) 将被调用，在该函数中，你可以执行组件状态的初始化工作，但是如果应用依赖子组件的属性与数据的话，那么需要先等待子组件先完成初始化。要实现这样的功能，只需要使用生命周期事件 ngOnInit 即可，我们可以在 constructor 中使用 setTimeout 来模拟出相似的效果。

import {Component, bootstrap} from 'angular2/angular2'

@Component({
  selector: 'street-map',
  template: '<map-window></map-window><map-controls></map-controls>'
})
class StreetMap {
  constructor() {
    this.name = '潘韬'
  }

  setMapWindow(mapWindow) {
    this.mapWindow = mapWindow;
  }

  setMapControls(mapControls) {
    this.mapControls = mapControls;
  }

  ngOnInit() {
    // Properties are resolved and things like
    // this.mapWindow and this.mapControls
    // had a chance to resolve from the
    // two child components <map-window> and <map-controls>
  }
}

组件的生命周期

就像 ngOnInit 一样，我们可以在一个组件的生命周期中跟踪多个事件，下面列举出了部分常见的事件，查看完整的 Angular 2 生命周期事件钩子，可以查看官方文档。

import {Component} from 'angular2/angular2'

@Component({
  selector: 'street-map',
  template: '<map-window></map-window><map-controls></map-controls>'
})
class StreetMap {
  constructor() {
    this.name = '潘韬';
  }

  ngOnInit() {

  }

  ngOnDestroy() {

  }

  ngOnCheck() {

  }

  ngOnChanges(changes) {

  }

  ngAfterContentInit() {

  }

  ngAfterContentChecked() {

  }

  ngAfterViewInit() {

  }

  ngAfterViewChecked() {

  }
}

在 Angular 2 中，组件（Component）是创建页面元素与实现业务逻辑的主要方式，与之相对应的，在 Angular 1 中，我们通过 directive、controllers 与 scope 等技术去实现，但是在 Angular 2 中，所有前面的这些实现都被 组件 取代。

一个最简单的 Angular 2 组件示例

下面的这个组件将展示出我的姓名，然后带有一个按钮，当按钮被点击时，将在浏览器的 console 中打印出我的名字。

import {Component} from 'angular2/angular2'

@Component({
  selector: 'my-component',
  template: '<div>大家好，我的名字叫 {{ name }}，<button (click)="sayMyName()">叫一声我的名字</button>'
})
export class MyComponent({
  constructor() {
    this.name = '潘韬'
  }

  sayMyName() {
    console.log('我的名字叫', this.name)
  }
})

当我们在 HTML 模板中使用 `' 标签时，该组件将被创建。

Ionic V2 与 Ionic V1 一样提供了 CLI 工具与 GUI 的工具。

安装 Ionic V2

安装 Ionic 2，可以使用下面的命令：

npm install -g ionic@beta

完全不需要担心 Ionic V1 版本的项目，Ionic@Beta 可以完全兼容 Ionic V1 的项目。

安装完成之后可以使用下面的命令创建新项目：

ionic start cutePuppyPics --v2

运行新创建的项目， cd 进入项目目录之后，运行 ionic serve 命令即可：

cd cutePuppyPics
ionic serve

执行之后，即可像 Ionic v1 一样在浏览器中查看项目了。

构建

要构建 Ionic 项目，需要先安装 cordova ：

sudo npm install -g cordova

为 iOS 构建

ionic platform add ios

你需要先安装 XCode，XCode 允许你直接为 iOS 系统的目标设备构建应用。添加了 iOS 系统之后，即可使用下面的命令运行模拟器：

ionic emulate ios

为 Android 构建

ionic platform add android

接下来你还需要安装 Android SDK ，Android SDK 允许你为 Android 目录设备构建应用，虽然 Android SDK 本身就带了一个模拟器，但是更加推荐你使用 Genymotion：

ionic run android

迁移

Ionic 1.x 是基于 Angular 1.x 技术的，同样的 Ionic 2.x 基于 Angular 2.x，所以，虽然 Ionic 本身的理念没有太多改变，但是代码的写法也因为 Angular 的改变而变得很不一样，Angular 2.x 使用了完全不一样的语法与代码结构（要了解 Angular 2.x 的变化，可以查看 学习 Angular 2 这个网站。

下面这个是 Ionic 1.x 中的写法：

.config(function($stateProvider) {
  $stateProvider
  .state('main', {
    url: '/',
    templateUrl: 'templates/main.html',
    controller: 'MainController'
  })
})

.controller('MainController', function() {

})

现在在 Ionic 2.x 中可以像下面这样写：

@Page({
  templateUrl: 'main/main.html'
})

export class MainCmp {
  constructor() {

  }
}

从 Angular 1.x 迁移

ControllerAs 语法是一个 Angular 1.x 提供的功能，它可以我们不需要使用 $scope 变量即可做到数据绑定，而是将数据直接绑定至 Controller 上，在 Angular 2.x 中，ControllerAs 的实现更加简单了，对比下面是 Angular 1.x 实现：

index.html

<ion-content ng-controller="MainController">
  <ion-item>
    {{ data.text }}
  </ion-item>
</ion-content>

app.js

.controller('MainController', function($scope) {
  $scope.data = {
    text: 'hello world'
  }
})

将上面的示例改成 ControllerAs 语法只需要改变很小的一点代码：

index.html

<ion-content ng-controller="MainController as main">
  <ion-item>
    {{ data.text }}
  </ion-item>
</ion-content>

app.js

.controller('MainController', function() {
  this.data = {
    text: 'Hello World'
  }
})

TypeScript

TypeScript 是一个提供了 ES6 类 与类型注释的 JavaScript 超集 ，这使得我们可以在 Ionic 项目中按照 ES6 的标准来写。

app.js

.controller('MainController', function() {
  this.data = {
    text: 'Hello World'
  }
})

app.ts

export class MainController {
  constructor() {
    this.data = {
      text: 'Hello World'
    }
  }
}

项目结构

在 Angular 1.x 中，最好的项目实践是将所有的 JavaScript 脚本都放在一起，模板文件也放在一起，但是他们两者却是分开的，比如下面这样：

|-www/
|
|--js/
|--|-app.js
|--|-HomeController.js
|--|-DetailController.js
|
|--templates/
|--|-Home.html
|--|-Detail.html
|
|-index.html

但是在 Angular 2.x 中，推荐像下面这样的：

|-www/
|
|--Home/
|--|-HomeController.js
|--|-Home.html
|
|--Detail/
|--|-DetailController.js
|--|-Detail.html
|
|-index.html
|-app.js

2016 年 1 月 1 日0 点,跟温新泽两个在后海扫街，遇到这位唱街的老者，声音沧桑，曲调断肠，任眼前人来人往，却无法看到些许光亮，生活如此艰辛，背后只有一堵墙，无法回头，再多苦楚，也要艰难前行。

这是一篇关于湖南湘西地区农村丧葬习俗的文章，里面会带有很多与丧事相关的文字与图片，在您阅读前，请先确定您对这类题材没有不适。

我的家乡是一个湖南西部的小县城，辰溪县，外公去年去世，第一次过年没有听到他的声音，所以，无意间又开始想起他来，我写不出能表达我内心对他怀念的词语，就再一次一个人细细的看了一遍送他最后一程的所有照片，然后古迹群里鲁言老师问了我一些关于丧葬照片的问题，很细节，所以，就想着，要不我就写写家乡的丧葬习俗吧，也算是对家乡习俗的一些文字记载。

外公去世的时间是2015年12月12日的凌晨三点多，听外婆说走得很突然，虽然生前遭受太多病痛的折磨，但是走的时候并没有再受煎熬，躺在床上想要上厕所，然后走了几步就坐到地上，之后就再也没有醒来，听说应该是心肌梗塞，因为肿瘤手痛的问题，而让我们大家都忽略了他的这个病，也算是我们做后辈的不孝吧，尤其是我，不善表达我的情感，但是我却很后悔为什么没有见到最后一面，在还有机会的时候，只剩下生后的缅怀。

我是2015年12月16日回到家里，家乡现在是这样的景像：

请道人

人去世之后，需要做的第一件事情就是请道人（佛教）给逝者开路，亡者在道人举办了开路仪式之后才可以进入阴界，才能来世投胎。

具体的作法是道人带领孝子去主管本姓的“土堂”招魂后再回到家中，整个过程孝子牵着一只母鸡（爬路鸡，，寓意就是这个鸡在人的前面开道（开路），回家之后，母鸡放生。

这里面的道人（佛教）本身并不一定就是一个佛教徒，这群人更加类似于家传事业一样，一代传一代，子承父业，他们同样结婚、生子，喝酒吃肉，但是却通晓法事之术，我们可以认为，道人就是管着一方丧事法事的人，他们有自己的地域，是不允许（也没有人会请他们）去别人的地域做法事的。

请人唱老人歌

在请完道人的同时，还需要请人唱老人歌陪唱到晚上十二点。

此老人歌中的老人意为“去世”，即人年老后去世，而非老年的老，该词在此处是一个动词，“老人”即“人去世”，“老人歌”即“为去世之人唱的歌曲”，一般会请两至三人，唱歌是为了把已故之人吵醒。

老人歌就是一些古时的戏剧（唱书），如红兰贵打酒、薛丁山征西等。

出殡前晚称为大葬夜，需要唱通宵，而且唱的内容也与其它夜的内容不太一样，这个在下面会详细描述。

做道场（法事）

做道场就是做法事，只是在我们那边的农村都叫作道场，它有一根桅杆道场、二根桅杆道场、三根桅杆道场之分，做道场是需要念经，如金刚经、地藏经等

桅杆是什么？

酒席

红白事都会有酒席，亲朋好友邻里乡亲都会来家里面吃酒席，也会收人情，因为外公家房子外面就是竹林，空地不是很大，所以外公的灵屋和酒席不在一起，满席是在大舅舅的老房子（现在也都没有人住了，都在县城买了房子了）家办的，掌厨的也都是乡亲，每个村子都有几个，能做出同村人都喜欢吃的饭菜来。

而在出殡前，道士一直需要超度，而在超度时，我们这些做后辈的都需要去跪拜，尤其是外公的儿子们（也就是我们舅舅们）。

转灯

我们每过一段时间就需要转灯，就是后辈们拿着一根竹棍和一支香，跟着道士绕着棺材转圈，每走几步就要磕头，转完一次之后，需要向死者敬酒，一杯酒敬三次，敬完之后需要倒地上，香插入棺材前的香炉里。

第一个敌楼

我现在正在进行 信用生活 的业务运行系统的开发，使用了 AngularJS 以及 Material Design 以及 Angular UI Router，系统中涉及到了一个特别常见的问题——一个Router的网址带有可选的参数，比如：/cms/promotions/movies 对应的是 /cms/promotions/:promotionType ，然后我还需要网址中能带有分页参数以及每一页数据的条目数量参数，这些参数也还应该有默认值，这个时候就使用到了可选参数。

在 AngularJS UI Router 中有以下方法可以创建可选参数的路由。

Query Parameters

使用 Query Parameters 是最简单也是最常见的一种方式了， UI Router 会将定义的参数都添加至 $stateParams 对象中去，比如：

state('app.console.cms.promotions', {
  url: '/cms/promotions/:promotionType?page',
  templateUrl: 'app/console/cms/promotions/promotion-list.tmpl.html',
  controller: function($scope, $stateParams) {
    $scope.promotionType = $stateParams.promotionType;
    $scope.page = $stateParams.page || 0;
  }
})

接着，你就可以向下面这样定义一个新的链接了：

<a ui-sref="app.console.cms.promotions({ promotionType: 'foods', page: 1})">美食</a>

如果有多个参数，也没有关系，直接把多个参数使用 & 符号连接即可：

state('app.console.cms.promotions', {
  url: '/cms/promotions/:promotionType?page&size',
  templateUrl: 'app/console/cms/promotions/promotion-list.tmpl.html',
  controller: function($scope, $stateParams) {
    $scope.promotionType = $stateParams.promotionType;
    $scope.page = $stateParams.page || 0;
    $scope.size = $stateParams.size || 10;
  }
})

直接使用 Route Parameter

还有一种方式只适合只有一个可选参数的路由，比如：/cms/promotions/:promotionType：

state('app.console.cms.promotions', {
  url: '/cms/promotions/:promotionType',
  templateUrl: 'app/console/cms/promotions/promotion-list.tmpl.html',
  controller: function($scope, $stateParams) {
    $scope.promotionType = $stateParams.promotionType || 'foods';
  }
})

此时， /cms/promotions/ 就对应的就是参数没有值时的路由了，此时我在 Controller 里面使用了一个默认的 foods 值为其值。

但是对于多个参数的时候，我们也只能定义多个路由了：

state('app.console.cms.promotions', {
  url: '/cms/promotions/:promotionType',
  templateUrl: 'app/console/cms/promotions/promotion-list.tmpl.html',
  controller: function($scope, $stateParams) {
    $scope.promotionType = $stateParams.promotionType || 'foods';
  }
})

...

state('app.console.cms.promotions', {
  url: '/cms/promotions/:promotionType/:page',
  templateUrl: 'app/console/cms/promotions/promotion-list.tmpl.html',
  controller: function($scope, $stateParams) {
    $scope.promotionType = $stateParams.promotionType || 'foods';
    $scope.page = $stateParams.page || 0;
  }
})

非 URL 路由参数

还有一种方式，可以不通过 URL 即可定义参数：

state('app.console.cms.promotions', {
  url: '/cms/promotions',
  params: {
    promotionType: 'foods'
  },
  templateUrl: 'app/console/cms/promotions/promotion-list.tmpl.html',
  controller: function($scope, $stateParams) {
    $scope.promotionType = $stateParams.promotionType;
  }
})

此时，我们还是可以使用 ui-sref=app.console.cms.promotions({promotionType: 'movies'}) 创建一个链接 /cms/promotions，但是却会把 movies 做为 promotionType 的值传递给控制器。