蛍 | 山海启蛰,东方欲晓
「启航」月半小夜曲
“丫头,换票啦。”
坐在始往 济南的绿皮火车上,我第一次听到有人以这样的方式呼唤我。
窗外是不断的倒退的风景,打开地图,自己正在以肉眼可见的速度向这座城市迈进。耳机里放着这些时日翻来覆去听的歌,在这熟悉的嗓音中,意识慢慢地变得模糊了起来。
时间线被拉回到十天前。
听闻项目周一要上线,于是便开始紧赶慢赶地做起了预约游记的新春“换肤”活动。按照惯例,为了保证程序的正常运行,研发人员往往是第一只试毒的小白鼠🐁。这次也不例外,在我的一阵捣鼓之下顺利的给自己预约上了去山东的游记。
之前做程序测试的时候,因为心里笃定这只是一个测试数据,横竖是不去的,所以常常选择一些天花乱坠的目的地,像达格纳姆 呀、 的的喀喀湖……这次倒不知中了什么魔怔,老老实实地预约了一个看起来非常正常的目的地。若非说是我胡乱选的吧,倒也不是,但我也道不出其中原由,大概是醉翁之意不在酒矣。
列车仍在轰鸣前进,耳畔间除了车间内震天响的呼噜声之外,什么也听不见。我探起身来,往窗边靠了靠。
夜晚里的一切都是沉睡的。窗外除了偶尔闪过的路灯,一切都被困在无尽的黑暗里。我摸着床沿往厕所走去,白色的被褥千姿百态地“横亘”在狭窄的床位之间,打呼的、磨牙的、说梦话的,在这短短的一路上,似听了场「火车夜间交响乐」。
熬过了漫漫长夜后,我终于听到了车厢尽头传来的广播:“各位乘客,前方到站大明湖站”。
「济南」我的旅途,你的故乡
说实话,在这次旅行之前, 山东省对我来说就像一个黑匣子,除却它的省会城市是 济南 这一点之外,我对它再无更多的了解了。而说起 济南,不知为何,我总是把它和“萧瑟”联系在一起。比起济南,我对老舍写的《 济南的冬天》一文倒是更有印象,所以在行前我特意买了一本。
济南的冬天是响晴的,这一点倒让我挺意外。离开 北京 时,天气尚是昏黄无光,毫无生气,本以为济南的天气应是和北京相差无几的,到了这边反倒是有几分春意了。
来了济南自是有三处地方必须去的——夏雨荷的大明湖畔、乾隆御封的趵突泉 和几案与云平的千佛山。
这次旅行有好几个巧处,恰巧躲过了济南的阴天、恰巧遇上的青岛的太阳、恰巧赶上了趵突泉的灯会和大明湖的庙会。
来到大明湖时,适逢这儿正在举办“大明湖春节文化庙会”,好生热闹。没回成都 过年,却在济南的大明湖感受到了浓浓的年味儿。一排排红色的帐篷恰到好处地烘托出了节庆的气氛,孩童穿上了新衣,手里拿着刚买的风车,在湖边、在婴儿车内、在爸爸妈妈的怀里面;老人在和煦的阳光中,恣意享受着这停下来的时间,话起了从前;爱人在城楼边留下了一年一度的纪念。而我,在济南的大明湖边,看这一代又一代,留下的天真无邪的笑脸。
沿着大明湖畔一直走,很快就到曲水亭了。这是我在济南最喜欢的一处了,小桥流水人家,颇有几分苏州的意趣。澄澈的池塘里喂满了小鱼,岸边枯柳低垂,偶有涟漪荡起晕开了水中的倒影。或许是因正逢春节,池塘周围摆满了大大小小的摊位,卖者各式各样的小吃和济南 特产。不知是否是饿了的缘故,我在其中一处买了块长条形的山楂方糕,软软糯糯,甚是好吃。
再往前走就是曲水亭正街了,街的中央,是一条缓缓流淌的小溪,道路两旁是整然的平房,青砖黛瓦,虽已是商业化得很严重了,但再往深了走,能找到一些本就生活于此的原始人家。路过一户人家时,瞧见大门上贴着字迹工整的对联:“一城水润心灵澈,千眼泉流气象开”。 济南人民就如同这泉水一般,温润了身体里的每一个细胞。
走到尽头,便是芙蓉街了。在芙蓉街上,吃了店里的“头牌”九转大肠,素来喜欢吃肥肠的我却没能招架住这九转大肠的油腻,吃了两口便直犯恶心。果然各地特色不要轻易尝试,毕竟萝卜白菜,各有所爱
吃过午饭便开始了下午的行程,来到了济南 赫赫有名的趵突泉 。而当趵突泉真的出现在眼前时,倒是觉得颇有些“德不配位”了。不知是不是因为冬季的原因,园内的池塘已干了八成,趵突泉“水涌若轮”的景象也难再已,只剩下一汪泉眼,孱弱地咕噜咕噜地向外吐着最后一点泡泡。
比起趵突泉,李清照祠堂反倒让人有些惊喜。作为婉约词派代表人的李清照,她的诗歌早在我们学生时期就被大家熟知了。导游姐姐从其出生、嫁与赵明诚并与其琴瑟和鸣讲到后期朝廷动荡、国破家亡而使她颠沛流离,众人皆叹她生不逢时。
「青岛」是我的海
青岛,如果知道你长这样,我一定早点来。
在老舍先生的笔下, 济南是“穿肥袖马褂的老先生”, 青岛是“摩登的少女”,这样的形容再贴切不过。济南更多的是中国风,而 青岛更多的是西洋风。如果要用一句话来形容我对青岛的感受,大概是满足我青春时期所有幻想的童话世界。
作为一个土生土长的西南内陆孩子,来到海边是无比兴奋的,特别对于吃海鲜这件事。我从小就很爱吃海鲜,无奈于内陆海鲜价格实在不菲,所以一再克制自己的欲望。所以来到青岛的第一件事就是找海鲜店,正好酒店定在栈桥旁,周围大大小小的好多海鲜店,挑来选去最后进了一家名叫“归潮”的店,或许是被门口的“看一片海,等一个人”吸引了吧。之前看《孤独のグルメ》时,就被叔精湛的演技勾得很想尝尝ウニ的味道了,在这里终于如愿以偿。不得不说,这里的扇贝光是扇柱都比我之前吃到的扇贝肉还要大。
一顿饱餐后乘着地铁来到了五四广场,这儿的标志物和泉城广场颇有些相似的,想起一句弹幕里经常出现的“自古红蓝出CP”,说不定青岛和济南本来就是天生一对呢。广场面朝大海,而在广场对面隐隐约约能看到一个奥运五环的轮廓。广场背后耸立的高楼连城一片巨大的广告墙,烟火在这一面面墙上翩翩起舞。不知是谁家的烟火正好开在我头顶上,吓得我一个寒战,却还不忘举起相机抓拍了一张。正打算拍第二张时,屏幕上就不合时宜地显示“电量不足”,这次最蛋疼的两件事就是“电量不足”和“内存不足”。走到八大关的时候已经被逼到删一张才能拍一张了,删着删着还告诉我又没电了,实在抓狂。
大概是因为青岛的第一晚给我留下了很好的印象,向来赖床的我第二天早早的就爬了起来,向栈桥前进。海边成群结队的海鸥停靠在礁石上,好似电影里才有的场景。
在海边冻成冰块以后,回酒店做了短暂的解冻工作,便出发去下一个目的地——黄县路。这次来青岛有个重要的任务,就是寻找小王子。在做行前攻略时,就看到游记里有写在黄县路有一面小王子墙,当时激动得恨不得马上越屏而去,所以到了青岛后便开始马不停蹄的寻找小王子。怀揣着满满的希望和期待来到黄县路,在黄县路、大学路、 龙口路翻来覆去走了不下三次,仍然无果,乃远程求助了“记路小天才”,当听到视频那端传来的“你面前这堵红墙就是你要找的小王子墙”时,我差点当场哭出声。时过境迁,小王子墙已经被刷成了惨不忍睹的红墙 。
但撇开这一点不谈,这几条路可以说就是“文艺清新”本身了。这几条街多是斜坡,墙体上有各种彩绘,街边也是一些装修得很精致的照相馆、咖啡店、书店。老舍先生的故居便在黄县路12号,看着这两层楼高的小洋房,前些天在《 济南的冬天》一书中看到的对青岛的描写似乎也变得鲜活起来。
走得有些累了,就进了街边一家名叫“小巫咖啡馆”,店长是个瘦高的留着长发的男子,柔软的声线和这条街、这家店相称极了。阳光透过彩色琉璃的窗户,让人不禁发出“阳光在案,裁纸装书,正适”的感叹,真希望时间能停止在这一刻。
吃饱喝足后就向信号山进军了,在去信号山的途中顺路逛了下德国总督楼旧址博物馆,里面陈列了德国、日本殖民时期使用的一些物件,谁能想到德意志一百年前就知道用饮水机了😤,而且里面的管家房比我现在的卧室豪华不知多少量级。
站在信号山上,便可以饱览整个青岛的风光了,整然的红顶的房子映衬这蓝色的海岸线,这景象实在是令人叹为观止。下山的途中偶然遇见这贝壳铺成的石板,在蓝色大海的波光下,显得格外好看。不得不提,在下山途中我拍了一张自己极为喜欢的“神作”,虽然在某人的辣手摧花下,这张神作已经有些失了本来面目,但是这蛟龙咬日的场景还是让我感觉都几分神圣感。
「天津」今晚的月色真美
上次去天津的时候就在惊叹,为什么在离北京这么近的地方会出现这么优雅的城市。海河的柔情,足以承载任何季节的重量。不管是白天夜晚,春夏秋冬,站在海河旁边,吹着海风,看骑着车的情侣走过、看老人垂钓,心情就会变得很好。
这次不知道抽了什么风,坐动车回京之前非要争分夺秒的冲进天津狗不理包子店里被宰。在大众点评上看到一成都人的评论总结的很好:“来天津不吃狗不理包子后悔,吃了更后悔”
上次周末过来的时候看到了白天的天津之眼,这次刚好看到了夜晚的海河。这段小标题取的“今晚的月色真美”并没有表顺风白的意思,是因为今天晚上的月色真的很美。
「归途」今日は、晴れ
“好可爱的小牙齿啊。但是我觉得它在我的嘴里待不过今天。”
在回北京的路上听到一个小妹儿这样说,的这大概是我今年听到过的最可爱的话。
年前心情有点低沉,就把朋友圈的介绍改成了“今日は、雨”。
现在心情恢复了,为了和它对仗,我就把这段取名叫“今日は、晴れ”。
葵 | 桜の予報も虚しく
距离上一次更新博客,已有半年之久。而迟迟未打开博客的原因,一是因为工作后确实再无那么多闲暇时间,二也因为之前留了太多坑掉的文,现在填补起来实在令人头疼。
今天是年前最后一天上班了,整个公司都空荡荡的,似乎在这样的日子,调休回家才是政治正确的。而在这样没有需求的日子,写写博客似是消磨时光的好手段了。
毕业这半年,过得说快也快,说慢也慢。做了我以为需要好几年才能做上的程序员,来了我以为这辈子也不会来的北京。
初来北京时,说实话,我是不喜欢的。四下举目无亲,浑浊的空气,混乱的车流,干燥的气候,除了京客隆什么都没有的京旺家园(用鸟不拉屎形容不为过),一切似乎都是予想外。后又遇几次予想外的事件,造成了在京半年迁徙四五次的困窘之境,以至于现在还有因为搬家过多未还清的债务。中有几个月,因事情多到已经超过我本身就不堪一击的承受力,而终日郁郁寡欢。
那你问我现在后悔吗,我可能会觉得有一点。那全然吗,我觉得是未必的。写到此话时,恰听到对面同事说着:“人生就是关关难过关关过,加油。” 好生应景。这半年来,虽却是遇到几个难过的关卡,却也终得贵人相助,無事に済み。在公司有仲哲和宗保奶着,出了公司也有诗尧带着,也算是三生有幸。从第一次搬家行李被爸比打包的乱七八糟,下车还下错位置,在寒风中萧瑟到后来一下午就能将东西原封不动迁移到新家,自己在搬家方面的技能确是得到了飞速的提升。当然,在这一次次的迁徙中,离公司越来越近,房租也越来越贵,最后被忽悠进了租金昂贵的公寓,过上了长期还贷的痛并快乐着的生活。途中感谢抱抱、Jason哥、天机哥、开新妹儿、CC宝贝不远万里来看望我,陪我度过一段快乐的时光。那这一切,痛苦吗。我只能答曰:过程中是痛苦的,但是经历完之后再回看,是宝贵的人生经历。
我可能后悔选择过北京,但是扪心自问,我从未后悔选过马蜂窝。虽然平时偶也嘴上吐槽,但这大概就是满足我对工作所有幻想的一家公司吧。我喜欢每天走C9正门进来,看看门口的小桌上又被小姐姐们换上了什么花;喜欢走上楼梯时望望透明的天井,看天空里浮云悠游,羡煞了我的不自由(大好き);喜欢在鸟屋开会时不时地走会儿神看看老司机在干嘛;夏天喜欢到天台上看看又有什么水果熟了可以偷吃了,冬天的中午裹着羽绒服在天台的寒风中练习日语口语(冷哭);喜欢看四季从多肉变成菠萝,菠萝变成棉花,冬天的棉花真是深得朕心;喜欢绕到C15围观一下冰糕片(误)搭建而成的办公楼。也有幸进入了社区这个部门,虽然我们部门不赚钱吧,别的部门发奖金的时候也会眼红吧,但是在如今的时代,有情怀的公司不多,有情怀的部门就更少了。能在这样温和而不功利的部门生活和工作,是社会馈赠给我这个初入职场的新人最好的毕业礼物了。
天井
这半年也在大佬的强奶下,参加了公司大大小小好多活动。魔鬼48小时的T3、新员工的橄榄球培训、团队照拍摄、窝是歌手、年会节目表演……
T3虽然对调大的字体和莫兰迪色耿耿于怀,但是不得不说,这肯定是我在编程生涯中,打码手速最快、强度最高的一波了。而且在这次比赛中,看到大家最后成型的作品,不禁感叹人类的创造力,其中尤其喜欢松果。
新员工培训也是记忆犹新的,特别是黑队的教练(长相酷似陈冠希)。第一次接触橄榄球🏈,也第一次和这么多其他部门的同事一起玩,颇有新鲜感。我向来对勋章和贴纸没什么抵抗力,那枚刻着1504的勋章和画着小蚂头像的橄榄球贴纸成了这次最重要的收获。
若要说今年最忐忑的,便是年会表演了。一言以蔽之:我只想参加排练不想上台表演。每天中午都期待着去c15天台和大家笑闹人间,每周五审核都想打个地洞🕳️钻走。因为这次演出,喜欢上了技术部的大家,而再也不想听王力宏的《飘向北方》。
排练一时爽
上台火葬场
旅游公司大概最不缺的就是出游机会,从10月到11月周末就没停过。
第一次去参加山顶露营,本打算去看日出和云海,最后变成了寒夜里在帐篷里躲雨,亲身体验了“床头屋漏无干处,雨脚如麻未断绝。”
天津大概是离北京最近的地儿了,所以顺手去了一波,结果被天津深深吸引。好不容易出了北京,却还是逃不了在勝博殿吃猪排的厄运,我似乎终于知道为什么这几个月体重膨胀成这样了。
因为T3去了泰国,大概很久都不想再去东南亚了。满城弥漫的肥皂味让我感到很不适。但不得不承认我很喜欢泰国这大大小小的集市,在这集市中,似能看到众生百态。
水上集市
飞机集市
火车集市
跟着技术部去了重庆团建,被强奶着跟着游记组去了南京团建。
重庆洪崖洞
在南京玩成语照片时,真的有被大家的脑洞折服!
鸡鸣狗盗
满头大汗
信口开河
跨年跟着爸比、奶奶以及族谱外的帅帅在京城的各大商场穿梭,吃了其貌不扬而味道还真不错的炙子烤肉算是对今年画上的圆满的句号。
而在新的一年里,我似乎渐渐爱上的逛胡同。不似上海巷弄的精致典雅,不似成都平房的破烂不堪,不似姑苏古城的青砖黛瓦,是平易近人,是宽厚大气,是说不清道不明的人间烟火味。这成千上万条胡同,对有收集癖的人来说,是再好不过的材料了。每每穿过这一条有一条的胡同,似能忘掉外界世界的浮躁和烦恼。
愿在新的一年里,戒骄戒躁,得我所爱。
对了,本文题目出自于最近被忽悠去看的一部烂片「君の膵臓をたべたい」ED,今年最喜欢的一首歌没有之一。
最后,皆さん、明けましておめでとう〜🎉
葵 | 每一只蝴蝶都是从前一朵花的鬼魂
这块区域用来记录一些无处安放的小物和碎碎念。
某个熬夜的清晨,小王子坐在晨光之中。
加湿器开到最大档,空调遥控器上结满了小水滴。
北京参加的第一个互联网展会,获得了知乎的一片氯化钠。
在三元桥的西西弗书店,偶遇小王子二十五周年再版预定。
大概,每个人都心中都有那么一道伤疤,
不时的,隐隐作痛。
失眠的夜晚。
我们查看微信的动作,似乎有点像HTTP里面的长轮询。
若紫 | 来自遥远的祝福
回家看到邮箱里躺着一封来自调布的EMS,莫名的一阵暖意涌上心头。收到的第一份来自远方的毕业祝福。想起来那些年吵着闹着让你送樱花明信片的时候了。
ジンギスカンアニキ へ
もう何カ月日本語を使っていないから、日本語で手紙を書くなんて本当に大変だよね。もし何か間違ったら、嘲笑わないでください。
郵便箱を開いたとたんに、びっくりした。「これは何?」と思ったら、前日君にアドレスを教えてあげたということを思い出した。あっ、これは兄貴からの卒業プレゼントだ。
コインのことを覚えてほんまほんまありがどう。ていうか、なぜアニキはこんな綺麗なテープがあるの?
じゃ、そろそろ手紙を読み始めましょう。
あのさ、卒業した後、北京へ行くかもしれない。そうしたら、お姉ちゃんと一緒に住むできる。だから、心配しないでください。私はね、これまでずっと子供ぽっいだが、卒業した後だんだん一人前になりたいで、これからももっと強くなりたい。今度会った時絶対チェンジ!泣き虫じゃなくて、強い人になる。
大学二年生の時、アニキと一緒に過ごした時間はわけに楽しかった。今も色々な記憶が目の前に浮かんだ。その記憶の中に、君はいつも厳しくて、「うるさい」と言った。まあ、うるさいけど、私は大学の中に、君とお姉ちゃんのことが大好きだ。君たちは私にとって、安心できる存在だった。
この手ぬぐいはめっちゃ綺麗だ。さくら最高!超好き!まあ、確かにこの手ぬぐいに言った通り、「人生は思ったよりもずっと愉しい」。ていうか、中国語では「千里鹅毛,礼轻意重」じゃなくて、「礼轻人意重,千里送鹅毛」っていう。
最後、どうして私の眼鏡汚いということを知っているの?
蛍 | 成都记忆
坐在飞机上的时候,看着成都万家灯火通明的模样,就在想,为何要远方。或许数年之后归来,家乡已不再是我走时的家乡。这大概是我第一次称成都为家乡,不知为何开始失落了起来。
形教课的期末作业是写一篇关于家乡改革的文章,刚还我也想在毕业之前写一篇关于成都的文章。
从幼儿园到大学,我从未踏出过成都半步,自己可以说是土生土长的成都人。操着一口地道的川普,带着一个成都人的胃,典型的成都妹儿性格,可以非常自豪的说我是一个非常‘资格’的成都人。
其实在离开成都之前,我从未觉得成都人是如此特点鲜明的,可能第一次产生地域意识,是在进川大报名那天,自己怎么憋也憋不出来的普通话。
方言
在我读大学之前,除了读语文课文之外,所有人都是用四川话交流的。甚至数学课上班主任操着一口四川话给我们讲面面平行。所以在进入大学之前,我觉得跟别人说普通话就跟说英语一样尴尬。
在经过一年大学的普通话磨练后,我终于能用一口流利的川普和室友进行交流了,这时候,我买了一本《民国四川话英语教科书》送给室友,虽然至今也不知道书里写了什么,但是可以见得,四川话也是一门学问。下面我们来看一些经典的四川话。
- 相因 — 便宜 (某天和陈侃说起)
- 称展 — 帅
- 啬家子 — 抠门
- 梭梭板 — 滑板
- 费头子 — 调皮(我妈经常跟我说:你个费头子娃儿)
- 洗白了 — 凉凉 — 喔豁
- 甲子窝儿 — 腋下
- 克膝头儿 — 膝盖
- 倒拐子 — 胳膊肘
稍微举例几个,再多的话还是要各位看官亲自来成都体会了。四川话的特点,最显而易见的一点就是平翘舌不分,所以即使是某些骨灰级成都旅客,仍然分不清楚“四十”和“十四”,当然要我们用普通话说出来“四十”和“十四”,也可以难倒一大片成都人了。
关于四川话有几个教程向大家推荐:
- 猫和老鼠四川话方言版 (尤记得那声骚得不行的风车车)
- 李伯清散打 (四川话启蒙老师 一流段子手)
- 蜡笔小新四川话方言版 (神作)
美食
说到食物我觉得三天三夜都扯不完,成都好吃的东西实在是太多了,当然这个好吃是针对本地人来说的,川渝地区的食物整体偏重口,食物以麻辣为主,所以可能对外地人不太友好,当然,带着一个成都人的胃去外地也是极其痛苦的。
成都最广为人知的就是火锅,成都有好几家耳熟能详的火锅店,小龙坎、大宅门、川西坝子、蜀九香……但是由于自己小时候一些不太愉悦的经历,这些年来一直对火锅提不起兴趣,相较于火锅,我更愿意去发现成都一些其他的美食。
三哥田螺
若是外地人问我成都有什么特色,我一定首推三哥田螺。一家藏匿于成都市井,极具成都特色的小店,堪称苍蝇馆子的鼻祖。位于高中旁边一排极其破烂的小平房中,没有环境,没有服务,只有味道。说实话这个招牌看得我都有点倒胃口,但是不得不说,三哥田螺的味道绝对可以征服大多数成都人民的胃。对了,不要看到这个破烂的门面,三哥田螺每一份菜的价格都在一百块左右,人均消费两百,绝对算是成都中高档次的价位了。
首推鲜炒虾仁,这算是三哥田螺里辣度最温柔的一道菜了(仅针对四川人),酸酸甜甜的口感配上虾仁的鲜香,唯一的不足是配菜是我不喜欢的青笋。
当然,还有火爆黄喉、麻辣鲜兔 🐰 都是我的最爱。不推荐外地人轻易尝试三哥田螺,但是如果很想感受一下成都地道的苍蝇馆子,请做好辣哭的准备。
王大爷烧烤
在网上搜王大爷烧烤的时候,突然看到这张熟悉的大爷的照片,有种尘封的记忆突然被掀开的感觉。小学的暑假,大爷的烧烤可以说是我每个夜晚的主调,夜猫子大概也就是那个时候养成的。妈妈每天到半夜一点就会问我‘“幺女,吃烧烤走不走。”耐不住寂寞的我当然就屁颠屁颠跟着我妈去了,那时候大爷烧烤还是通锦桥边上的一个路边摊。烧烤吃多了,也就和大爷非常熟悉了,知道大爷家里有十个兄妹,每次吃烧烤的时候大爷都会给我们吹吹壳子。
王大爷的烧烤有几个特点,烤的久、烧烤的口感很脆、菜品很有特色。现在的烧烤基本都是十几分钟就烤好了,而吃王大爷的烧烤总是在无尽的等待中。一串鸭脖子要烤半个小时甚至一个小时,每次都是盘子里的菜都吃完了又眼巴巴等着下一盘,吃完烧烤基本就三四点了,一个暑假下来,我成功的吃进了医院,输了一个星期的液才去上学。
现在大爷已经不亲自出马了,店铺也搬到了二十一世纪花园那边有板有眼装修得很规整的店铺里,也再也不需要为了吃上几串烧烤等上几个小时了。我们的日子一天天好了起来,但是总觉得慢慢在失去一些什么。
康二姐串串
第一次是从高中班中口中听说了这家店,她给我描述的是“底料里面肯定放了罂粟,每天都很想去吃。”这么一说,就勾起了我的无限好奇心,于是周末抱着吸毒的心理去找了一下这家店。
这家串串跟普通的串串还是有点不一样,不用自己烫,菜选好店家会烫好过后端上来。至于味道嘛,倒没有班长说的那么夸张,并没有放罂粟,但确实是很好吃的,并且这个辣度对外地人也是非常友好的。
景点
成都作为一个耍都,好耍的地方自然是不能少,一些众所周知的地方如武侯祠、锦里、宽窄巷子、杜甫草堂、金沙遗址,还有一些适合拍照的小清新文艺胜地,东郊记忆、水碾河的 U37 创意仓库、小通巷。成都这边还有不少的寺庙,比如小时候经常去的文殊院,现在家旁边的道观青羊宫。公园也有不少,人民公园、文化公园、新华公园、浣花溪公园、家旁边的百花潭公园、学校旁的望江公园,不胜枚举。
小通巷
或许是因为宽窄巷子的名气过大,这条文艺的小巷子似乎被隐匿于这巨大的光环之后了。
据相关资料,小通巷的历史上,恰好就出过一位中国近代史上有名的文艺青年——曾孝谷。他曾于李叔同共同创造了中国话剧上第一个剧本。在新中国成立前,这是一条清静到连商店也没有的小街,而在火红的革命岁月,小通巷成了革命工人的家园,成都生产保温瓶的工厂也于上世纪 70 年代在此修建。
小街上主要是一些文艺的小店和小酒馆,小通巷的青年旅舍也是极具文艺气息的。
蛍 | 姑苏古城
故事开始于一本苏州。
亭台、楼阁、水榭,在暗黄色的牛皮纸上铺陈开来。姑苏姑苏,光是唤着名字也能感受到其背后的古韵。自古有颇多文人雅士为此处赋词,想必定是幽然的好去处,所以怀揣一堵江南水乡芳容的心情,踏上了姑苏之旅。
// TODO
夕顔 | 就算是痴人说梦那又怎样
HTML
元素分类
- 行内元素(7):a b(加粗) span img input selcet strong
- 块级元素(9):div ul ol li dl dt dd h1 p
- 空元素(6):br hr(直线) img input link meta
link 和 @import 的区别
- 加载顺序(link 同时加载 @import 等页面加载完再加载)
- 分类不同(link 是 XHTML 标签,除 CSS 还可加载其他文件 @import 由 css 提供,只能加载 css)
- 兼容性(@import IE5 以上)
HTML5 新特性
- 语义新特性(结构元素:article、footer、header、nav、section;表单控件:calendar、date、time、email、url、search;)
- 本地存储特性
- 设备访问特性
- 连接特性(WebSocket)
- 网络多媒体特性(Audio、Video)
- 三维、图形及特效特性(SVG、Canvas、WebGL)
- 性能与集成特性(WebWorkers)
HTML5 离线缓存
Manifest文件组成:
- CACHE(必须 需要缓存的文件)
- FALLBACK(可选 后备页面)
如何更新缓存?
给manifest添加或删除文件,都可更新缓存。
1 | window.applicationCache.update(); |
CSS
盒模型
CSS选择器
- id选择器
- 类选择器
- 标签选择器
- 相邻选择器
- 子选择器
- 后代选择器
- 通配符选择器
- 属性选择器
- 伪类选择器
选择器权重
内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。
!important > id > class > tag
!important 比 内联优先级高
CSS3 新特性
CSS3 选择器
1 | p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 |
DIV 居中
1 | div{ |
1 | div { |
1 | div { |
1 | div { |
1 | .container { |
display有哪些值
table凉了,自行点击上面网站查看👆
inline、inline-block、block的区别
inline
不能设置高宽
margin只对横向生效,纵向无效
关于padding比较迷,下面来细细说明一下
给两个inline元素分别设置了100px的padding,我以为会出现上下padding不生效,左右padding生效的效果,而结果比较意外。
读完这篇文章你会发现,其实对于inline元素来说,padding四个方向的值都是生效的,只是他不会向块级元素一样影响其他元素的布局,而是产生一种堆叠效果。
Inline-block:
- 可以设置高宽
- margin和padding四个方向均生效
- 默认不换行
弹性盒模型
常见布局
多列等高布局
padding补偿法
1 | 在需要等高布局等每个元素都设置 很大的正的padding-bottom, 很大的负的margin-bottom; |
BFC(块级格式化上下文)
BFC应用场景
在讲解BFC之前我们首先看一下BFC有哪些应用场景
- 垂直方向上margin叠加问题
- overflow:hidden 清除浮动
BFC特性
- 同一个BFC的两个相邻Box的margin会发生叠加
- 计算BFC的高度时,浮动元素也参与计算
BFC触发条件
- float 除了none以外的值
- overflow 除了visible 以外的值(hidden,auto,scroll )
- display (table-cell,table-caption,inline-block, flex, inline-flex)
- position值为(absolute,fixed)
- fieldset元素
JavaScript
基本类型
- Number
- String
- Boolean
- Null
- Undefined
- Symbol
内置对象
- 数据封装类对象:Object Array Boolean Number String
- 其他对象:Function Arguments Math Date RegExp Error
如何判断一个数据的类型
typeof
1 | typeof '' // string 有效 |
instanceof
instanceof 只能用来判断两个对象是否属于实例关系, 而不能判断一个对象实例具体属于哪种类型。
constructor
1 | ''.constructor == String // true |
toString
1 | Object.prototype.toString.call('') // [object String] |
原型链
三日不见,又把原型链还给爸爸了(现在简直是锥心般疯狂焦虑)。幸好我有先见之名,在之前好不容易理清楚后整理了一段录音。现在我们用流程图来展现一下。
每个函数创建后都会有prototype的属性,而对象有[[prototype]]的属性
原型链继承遵循如下一条规则:
1 | instance.constructor.prototype = instance.__proto__ |
而查找属性和方法是沿着实例的1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
```javascript
function Parent() {
this.property = true
}
Parent.prototype.getParentValue = function () {
return this.property
}
function Child() {
this.Childproperty = false
}
Child.prototype = new Parent()
Child.prototype.getChildValue = function () {
return this.Childproperty
}
var instance = new Child()
console.log(instance.getParentValue())
所以上述instance.getParentValue()的查找顺序如下:
1 | instance.__proto__ --> Child.prototype --> (new Parent()).__proto__ --> Parent.prototype |
理清楚了原型链关系,我们来看一道经典原型链的题型:
1 | function Base(name){ |
做完题后的感想是以后若是我有机会面试其他人,一定要用这道题爆锤。
梳理思路的途中,看到一个比较诡异的题:
1 | Function instanceof Object // true |
要搞清楚这道题,我们首先需要搞清楚Function和Object的关系。
看完可能还是比较晕,我们来玄学解题,先来看下比较常规的原型链
1 | // 这个就很好解释 |
创建对象的方式
工厂模式
1 | function createPerson(name, job) { |
构造函数模式
1 | function Person(name, job) { |
new 的过程发生了什么
- 创建一个新对象
- 将构造函数的作用域赋值给新对象(这个对象会执行[[prototype]]链接)
- 执行构造函数中的代码
- 返回对象
原型模式
1 | function Person() {} |
另一种写法
1 | function Person() {} |
这里补充一下defineProperty的几个属性:
- configurable 可配置
- enumerable 可枚举
- value
- writable
- get
- set
这里插播一篇vue.js关于Object.defineProperty的利用原理
组合模式
1 | function Person(name) { |
动态原型模式
1 | function Person(name, job) { |
寄生构造函数模式
1 | function Person(name, job) { |
构造函数中重写了返回值,这个乍一看除了new和工厂没什么区别。
那么,这个new有毛用呢?
“寄生器构造函数”可以在构造函数不适应的情况使用,比如要创建一个数组类型,像题主给的代码一样(因为构造函数只能创建对象类型)。为了让人一看就知道是在构造一个新的对象类型的实例,所以虽然它写的和工厂模式一样,但是创建时用了new,因此使得实现的过程不一样,和楼上的回答一样(但是实现过程不重要)。 具体作用,比如创建具有额外方法的已有类型(如数组,Date类型等),但是又不污染原有的类型。 所以就算没有new也一样,只不过加上new让人清楚这是新对象类型的实例,也是“寄生器构造函数”里有个“构造函数”的原因。
那么就是没毛用咯。
稳妥构造函数模式
1 | function Person(name, job) { |
闭包
闭包是指有权访问另外一个函数作用域中的变量的函数。
应用场景:
- 结合Symbol实现私有属性
1 | const People = (function() { |
- 循环绑定事件时利用闭包保存变量
1 | <html> |
理解闭包之前,我们需要先理解JavaScript的作用域。
总结一下上面几篇文章的内容:
当函数被创建的同时会产生一个执行上下文(对象)
js执行的时候会维持一个执行上下文栈,随着函数的执行,执行上下文(对象)进栈出栈。
这个对象包括几个属性,其中有 变量对象、作用域链
变量对象包括:
- 建立arguments对象
- 找到这个将要执行的函数内的所有函数声明
- 找到这个将要执行的函数内的所有变量声明
作用域链里,大概是这样的(看图体会)
这里的0 1,就分别代表爸爸的活动对象,爸爸的爸爸的活动对象。
当搜索引擎解析一个变量的时候,会先在当前的变量对象里查找,没有的话就会沿着作用域链查找。
ES6
挑几个常用的总结一下,其他的看阮老师的文章。
箭头函数
关于箭头函数的几个注意点:
- 函数体内的
this
对象,就是定义时所在的对象,而不是使用时所在的对象。 - 不可以当作构造函数,也就是说,不可以使用
new
命令,否则会抛出一个错误。 - 不可以使用
arguments
对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
Web 综合
常见的浏览器内核
- Trident: IE
- Gecko: FireFox
- Presto: Opera
- Webkit: Safari, Chrome
介绍一下你对浏览器内核的理解?
从浏览器多进程到 JS 单线程,JS 运行机制最全面的一次梳理
进程和线程的区别
- 进程是 cpu 资源分配的最小单位
- 线程是 cpu 调度的最小单位
浏览器是多进程的
浏览器有以下几个进程:
- Browser 进程(主程)
- 负责浏览器界面显示,与用户交互。如前进,后退等
- 负责各个页面的管理,创建和销毁其他进程
- 将 Renderer 进程得到的内存中的 Bitmap,绘制到用户界面上
- 网络资源的管理,下载等
- 第三方插件进程
- GPU 进程(3D 绘制)
- 浏览器渲染进程 = 浏览器内核(每个 Tab 一个进程,多个空白页自动合并成一个进程。用于页面渲染、脚本运行、事件处理等)
敲黑板,划重点,浏览器的渲染进程是多线程的。那么我们来看看它包括哪些线程。
- GUI 渲染线程(Graphical User Interface)
- 负责渲染浏览器界面,解析 HTML,CSS,构建 DOM 树和 RenderObject 树,布局和绘制等。
- 注意,GUI 渲染线程与 JS 引擎线程是互斥的,当 JS 引擎执行时 GUI 线程会被挂起(相当于被冻结了),GUI 更新会被保存在一个队列中等到 JS 引擎空闲时立即被执行。
- JS 引擎线程
- 也称为 JS 内核,负责处理 Javascript 脚本程序。
- 事件触发线程
- 定时触发器线程
- 异步 http 请求线程
从打开浏览器到页面渲染的过程
- 用户输入 URL
- 判断是否命中强缓存,若命中,直接返回缓存资源。
- 开始 DNS 解析,详细过程参考从输入一个 url 后到页面加载完成都发生了什么
- 建立 TCP 连接(三次握手)
- TCP 建立完成后发送 HTTP 请求
- 服务器接受请求并解析,如果头部有缓存相关信息如 if-none-match 与 if-modified-since,则验证缓存是否有效,若有效则返回 304
- 服务器将响应报文通过 TCP 连接发送回浏览器
- 浏览器接收响应,并关闭 TCP 连接(四次挥手)
- 浏览器检查状态码并进行对应操作
- Browser 进程收到用户请求,首先需要获取页面内容(譬如通过网络下载资源),随后将该任务通过 RendererHost 接口传递给 Render 进程
- Renderer 进程的 Renderer 接口收到消息,简单解释后,交给渲染线程,然后开始渲染
- 解析 html 建立 dom 树
- 解析 css 构建 render 树(将 CSS 代码解析成树形的数据结构,然后结合 DOM 合并成 render 树)
- 布局 render 树(Layout/reflow),负责各元素尺寸、位置的计算
- 绘制 render 树(paint),绘制页面像素信息
- 浏览器会将各层的信息发送给 GPU,GPU 会将各层合成(composite),显示在屏幕上。
TCP 三次握手和四次挥手
首先我们来看看 TCP 的报文里都有哪些字段。
下面我们来分别解释一下在连接中我们使用到的字段分别代表什么意思:
- SYN: 同步序号(synchronous),用来发起一个连接。当 SYN=1 而 ACK=0 时,表明这是一个连接请求报文段,若对方同意建立连接,则应在响应的报文段中使 SYN=1 和 ACK=1。
- ACK: 确认字符(acknowledgement),仅当 ACK=1 时确认号字段才有效,当 ACK=0 时,确认号无效。TCP 规定,在连接建立后所有的传送报文段都必须把 ACK 置 1。
三次握手
第一次握手:客户端的 TCP 进程首先创建传输控制模块 TCB,然后向服务端发出连接请求报文段,该报文段首部中的 SYN=1,ACK=0,同时选择一个初始序号 seq=i。TCP 规定,SYN=1 的报文段不能携带数据,但要消耗掉一个序号。这时,TCP 客户进程进入 SYN—SENT(同步已发送)状态,这是 TCP 连接的第一次握手。
第二次握手:服务端收到客户端发来的请求报文后,如果同意建立连接,则向客户端发送确认。确认报文中的 SYN=1,ACK=1,确认号 ack=i+1,同时为自己选择一个初始序号 seq=j。同样该报文段也是 SYN=1 的报文段,不能携带数据,但同样要消耗掉一个序号。这时,TCP 服务端进入 SYN—RCVD(同步收到)状态,这是 TCP 连接的第二次握手。
第三次握手:TCP 客户端进程收到服务端进程的确认后,还要向服务端给出确认。确认报文段的 ACK=1,确认号 ack=j+1,而自己的序号为 seq=i+1。TCP 的标准规定,ACK 报文段可以携带数据,但如果不携带数据则不消耗序号,因此,如果不携带数据,则下一个报文段的序号仍为 seq=i+1。这时,TCP 连接已经建立,客户端进入 ESTABLISHED(已建立连接)状态。这是 TCP 连接的第三次握手,可以看出第三次握手客户端已经可以发送携带数据的报文段了。
知乎上一生动的段子:
- 第一次握手:约吗
- 第二次握手:约
- 第三次握手:那我出发了
四次挥手
浏览器缓存
强缓存
命中缓存后返回 200。
字段:
- expires
- cache-control
禁止缓存:Cache-Control: no-cache, no-store, must-revalidate
缓存静态资源 Cache-Control:public, max-age=31536000
- pragma
建议只在需要兼容 HTTP/1.0 客户端的场合下应用 Pragma 首部。
要注意,强缓存通常都是针对静态资源使用,动态资源需要慎用。
这里回溯一下之前项目中碰到的缓存问题。在之前的项目中发送 Ajax 请求时,我们通过了在请求的 URL 后面添加时间戳破缓存,这里解释一下原理。
浏览器缓存是基于 url 进行缓存的,如果页面允许缓存,则在一定时间内(缓存时效时间前)再次访问相同的 URL,浏览器就不会再次发送请求到服务器端,而是直接从缓存中获取指定资源。
1 | axios.get(`/user/check?timestamp=${new Date().getTime()}`); |
关于缓存更新请看这里:大公司里怎样开发和部署前端代码?
协商缓存
命中缓存后返回 304。
字段:
- Last-Modified
- If-Modified-Since
如果 Last-Modified 比 If-Modified-Since 晚,就从服务器端拉取数据
- ETag
- If-None-Match
如果 If-None-Match 和 Etag 不一致时,从服务器端拉取数据
浏览器行为对缓存的影响
当 ctrl+f5 强制刷新网页时,直接从服务器加载,跳过强缓存和协商缓存;
当 f5 刷新网页时,跳过强缓存,但是会检查协商缓存;
load 事件和 DOMContentLoaded 事件的先后
当 DOMContentLoaded 事件触发时,仅当 DOM 加载完成,不包括样式表,图片。 (譬如如果有 async 加载的脚本就不一定完成)
当 onload 事件触发时,页面上所有的 DOM,样式表,脚本,图片都已经加载完成了。 (渲染完毕了)
DOMContentLoaded -> load
location.Reload()和location.href 区别
window.location.reload()和window.location.href=””的区别
React
React性能提升
- 避免不必要的render
- 无状态组件
Immutable
计算机网络
HTTP请求方法
HTTP请求方法:GET、HEAD、POST、PUT、DELETE、CONNECT、OPTIONS、TRACE
前端构建工具
代码片段
数组随机排序
方法一:数组元素交换位置
1 | function randSort(arr) { |
方法二:将原数组数据随机塞入新数组
1 | function randSort(arr) { |
方法三:sort
1 | arr.sort(() => Math.random() - 0.5) |
数组去重
方法一:set
1 | const unique = arr => [...new Set(arr)] |
方法二:利用key的唯一性进行去重
1 | const unique = arr => { |
数组降维
concat
1 | function reduceDimension(arr) { |
apply 和 concat
1 | function reduceDimension(arr) { |
全排列
1 | function permutate(str) { |
夕顔 | 骚操作合集
reducer 里,如果我们想删除一项,进行如下操作。妈妈再也不用担心我拷贝对象了。
1 | const removeQuestion = (state, action) => { |
此处巧妙地运用解构赋值对对象的属性进行过滤。
看高阶函数的时候对下面一段代码印象深刻。实在精妙。
1 | Function.prototype.before = function(beforefn) { |
微博上一段子
1 | console = Math; |
还记得大明湖畔的对数吗
Yiga 代码中的一段操作
1 | render() { |
这段代码里剩余参数的用法可谓是解构赋值的非常骚的操作。
夕顔 | 祭一场飞蛾扑火
大概从高中毕业以后,已经很久没有如此执着的想要去完成一件事了。默默的悄无声息的想要去完成一件事。
幻想过无数种场景,自己披襟斩棘最终站在那栋记忆中的大楼下,迎面走过来那人会是怎样的表情呢。
幻想终究是幻想,说到底自己一开始也从没有想过能够真正实现,可是就是不知道从哪一天开始脑子里就开始冒出这个疯狂的念头了。
会开始去网上找一些招聘信息,开始联络学长学姐,希望能得到一个内推机会,开始补自己的知识漏洞,看很多面试题,学习棘手的算法。
可是心里非常清楚,什么是以卵击石,什么是飞蛾扑火。
那天晚上的心情,我还依稀记得。
和学校里一个旧友谈起了工作。说真的,走到春招这一步,我已不在意身边的人到底去了哪个公司。
日语里有一个词,叫“あいにく”,翻译成中文大概是“很不凑巧”的意思。仿佛是上帝偷看了我内心的剧本,而给我安排了一场内心的历练。
她无意提起的公司名,有意无意的触碰到了那根倒插在我内心里尖锐的刺,一阵生疼。
很不凑巧,在和她聊天前我刚好收到了笔试通知。怕什么来什么。
上海寒彻骨的夜,这繁华的城,纵横满面的泪。丑态尽展。
我真的不嫉妒,不,我是嫉妒的发疯。
第一次,那么痛恨,痛恨自己没有早点学前端,或者,那么痛恨,自己学了前端。转行这条路,走的实在太艰辛了。
那一刻,才对“少壮不努力,老大徒伤悲”这句话里藏匿着的不甘与无力,理解的如此深刻。
是真的真的很不甘心吧。
笔试并没有想象中难,也尽力做了,但终究是再没有面试通知了。
功力尚浅,还需要大量的学习。
真的非常希望,在下一次机会来临的时候,自己不再是此时懦弱的自己,能够勇敢的并且有足够的实力去抓住它。
以下是一些题目回溯的总结。
- 按顺序取出数字的英文字母,数字去重(涉及到公司名字 匿了)
1 | let str = "t1测est试23"; |
- 对一维数组,根据 type 生成二维数组。
1 | let str = [ |
- 实现类似迭代方法中的 map()方法
1 | function map(data, fn) { |