cobish
cobish
我们在开发中都会遇到这样一种情况：先给 Window 绑定一个 `scroll` 事件，然后打印日志，代码如下。打开浏览器，滚动一下鼠标，便会发现日志被频繁地打印出来。类似这样的事件还是 Window 的 `resize` 事件、输入框的 `keyup` 事件、拖拽时的 `mousemove` 事件等等。 ``` javascript $(window).on('scroll', function() { console.log(111); }); ``` 它们都有以下两个特点： - 事件发生后会被频繁地调用； - 都是浏览器自带的事件，无法对其进行代码修改。 既然无法对这些事件进行改动，那么我们只能在被调用的函数中想办法优化了。因为使用场景的不同，所以有 `函数防抖` 和 `函数节流`...
厦门之旅
今年的部门旅游活动来得如此之早，让我还真有点措手不及。周五白天还在工作，晚上就已经在前往厦门的动车上。对了，在动车上收到了提薪后的工资，还有人生的第一份年终奖，真是让我久久不能平静。经过了三个半小时的车程，总算是到了厦门。 在酒店吃过早餐，厦门的旅程就此展开。一行人先是去了白鹭洲公园逛一逛，拍拍照。这地方只是今天的一个热身而已。接着就开始了今天的重头戏，大家一起坐船去厦门有名的鼓浪屿。一上岛才发现这是一个连自行车都稀有的地方，大部分的建筑都是以前华侨建的别墅，最主要的卖点就是当地小吃了，午餐就是在岛上最繁华的小吃街自行解决的。鼓浪屿给我的感觉就是小吃多，人也多。回来坐船排队等了挺久的，体验到了中华民族的广大群众的热情。 在中山街吃过晚饭后回到酒店，本以为大家会聚一起玩一下狼人游戏，结果都各自有各自的活动，有的去酒吧了，有的走了一天路去按摩了，有的到处逛，还有的像我一样待在酒店，看看电视，玩玩游戏。 第二天的行程相对来说有趣多了。由于南普陀寺和厦门大学两个景点挨在一起，所以上午的时间都在这两个景点上。先去了南普陀寺里参观参观，然后烧烧香拜拜佛。南普陀寺的屋顶跟以往看到是寺庙有些差别，特别是屋顶的龙让人有一种眼前一亮的感觉，很是生气。从小到大一直对烧香拜佛都嗤之以鼻，认为这是一种迷信的行为。然而这天我却非常认真的许愿烧香，身不由己的感觉蔓延着全身，这算是一种信仰吧。  离开了南普陀寺，接下来就是厦门大学了。作为一所经常被游客占据的大学，还真有点可怜这里的大学生。但是还真别说，厦大的景色一点也不比深大差，当然深大在心中依然是最美的大学。厦大学生的建筑大部分用的都是跟鼓浪屿上建筑一样的红色砖头，夹杂着一条条的黑带，加上独特的外观，难怪有那么多的人来参观。  厦大还有一条非常出名的芙蓉隧道，许许多多的人慕名而来。眼见为实，果真不同凡响。一条芙蓉隧道可以走好久，隧道旁边的两侧全是壁画。壁画上的内容大部分是跟社团活动、专业招生相关。但是表现的形式确是多彩不一，毫无重复。有电影的素材、动漫的人物等等。  中午的午饭是在曾厝垵解决的。起初一到曾厝垵就发现这小吃街跟昨天在鼓浪屿的小吃街没什么两样，都是人特别的多。后来不知是谁带到了一条人迹罕至的小巷里，在里面找到了一家普普通通的自家饭店。这饭店没有什么装修，一行人十几个人坐成了三桌，挤满了小屋子。里面的特色当地小吃完全不比外面的小吃街差，甚至还比外面的好吃。配上里面的电视机播放的相声，满屋子的笑声其乐融融。  下午剩下的时间是在曾厝垵马路对面的海滩边度过的。海滩不大，骑着共享单车来回骑了一回。后来累了，去了海滩边上一家挺高大上的饮料店休息，才发现大家都在这里瘫在沙发上，晒着太阳，睡着午觉，简直惬意。点上一杯饮料，在这里不快不慢的度过了周末。  厦门之旅结束了，伴随了周末的余温归去了。
在接触[「Vue」](https://cn.vuejs.org/v2/guide/)之前，其实我已经学习了一段时间的 React。一直没来得及总结 React，却先本末倒置地学习起 Vue 来了。也许我是有点浮躁，被技术的浪潮拍打着前进。总之，既然学习了，那就总结一下这一次的学习吧。 ## 比较 ### Vue vs jQuery jQuery 是一名出色的老将，它的出现是 js 巨大的一次进步。jQuery 能够出色的操作 DOM 元素，但是操作 DOM 依然是一项麻烦的事情。你必须先获取到 DOM 元素，然后才能进行增删改操作。而 Vue 则是将 html 和 js 通过某种方式绑定在一起，只有修改了 js 里的数据，那么...
在 fork 了别人的一个项目，这时如果发现了别人的项目更新了，要怎么做才能把他更新的代码给拿过来呢？ 首先需给 fork 的项目配置一个 remote。可以先查看远程状态。 ``` bash $ git remote -v origin [email protected]:cobish/fork-demo.git (fetch) origin [email protected]:cobish/fork-demo.git (push) ``` 添加一个将被同步给 fork 远程的上游仓库。 ``` bash $ git remote add upstream...
早上还身处于湖南的郴州之中，而现在的我已经回到深圳在电脑前写着这篇文章，我想趁着这还未消退的余热，是时候记录一下这次流连忘返的经历。这一次的郴州之旅是公司一年一度的云游四方活动，而我则有幸成员其中的一员。这一次身边的伙伴不是同个部门认识的同事，而是来自公司不同部门的各位同事们。乘着秋高气爽的天气，我们从公司出发先坐大巴去深圳北站，然后转乘高铁到达韶关，接着在继续坐两个小时大巴。我们真的是历尽千辛万苦，跋山涉水终于来到了莽山森林公园。两天的时间内我们爬过三座山，分别是猴子寨、鬼子寨和天台山。 猴子寨里的空气非常的清凉，在爬上去的楼梯周围到处都是水流，使得这里的天气非常的凉爽。在猴子寨的山脚下还有猴子供游客观赏。猴子们特别的肥，估计是被喂食喂多了的原因。这些猴子非常的聪明，只要你手往口袋里伸去，它就会以为你要拿出东西来喂它，于是它就向笼子外伸出了它的手，真是逗笑了我们。  鬼子寨就没有猴子寨那么的凉爽了，不过路上有一条清澈的小溪，溪水淙淙，不禁让我想起了小石潭记的意境。鬼子寨比较出名的是山上的一块特别的石头将军石，靠观察与想象可以看到一个将军手握着一把未出鞘的宝刀端正地站立在那里。接着继续走下山谷底是一个小瀑布，但是从谷底往上一看又别是一番风景。  天台山是游玩的山中风景最为壮观的一座山，我们先是乘坐大巴到达山中，然后再开始动身爬山。我选择的路线是天台山中的小天台路线，在小天台放眼望去，此起彼伏连忙不断的山便呈现在了眼前，期间能很清楚的看到天际线，还有一朵洁白的筋斗云。回来的路途中选择了这里比较独特的滑滑梯，一路从山上滑到山下，还是挺刺激的。  第一晚我们住的是莽山森林温泉酒店，顾名思义，晚上我们当然是可以泡温泉。本打算先到健身房锻炼锻炼，结果发现所谓的健身房就是放在室内温泉旁边的几个器材而已，有点小失望，无奈只能泡温泉了。同行三人先是在室内泡了会，紧接着就跑到室外去跑露天温泉，一边聊天一边泡温泉真的是太享受了。第二晚住的则是在市区内的雄鑫酒店。两个酒店的环境都很不错，床也很舒适。不过这里的酒店有一个特点，就是不会有很亮的灯光，都是暖色的小灯泡，以至于房间内都是比较昏暗的，也有可能是我没住过五星级酒店的原因，对这一点非常有很大的感受。  最后一天早上我们五点半便起床，因为要在太阳出来去看那传说中的雾漫小东江。可是天公不作美太阳没有使得小东江那萦绕着江面的白丝雾出现。后来还坐船到内陆岛去参观了非常大非常宽敞的兜率溶洞。中午回酒店吃完三文鱼大餐后便从郴州坐高铁回到了深圳。  这一次郴州游令人流连忘返的不仅有美景，还有着一群有趣的同事们。大家一起玩着游戏，一起尝着湖南的当地美食，一起跋山涉水拍照。也许以后再也不能像这一次这样聚在了一起，那就让我们一起纪念一下这一次难忘的经历吧！
捣鼓了一段时间的 Webpack 和 Vue，是时候写出一篇文章来反馈一下学习情况，也正好为接下来的项目做做准备。Webpack 对于 Vue 或是 React 的单页面应用来说简直就是居家必备，Vue 也有相应的脚手架[「vue-cli」](https://github.com/vuejs/vue-cli)。但是由于具体的项目有特殊的配置，加上代码比较复杂，于是干脆就自己实现一个简单的 Webpack 配置，主要是参考了这一篇[「webpack 单页面应用实战」](http://huangsw.com/2016/07/12/webpack%20%E5%8D%95%E9%A1%B5%E9%9D%A2%E5%BA%94%E7%94%A8%E5%AE%9E%E6%88%98/)的思路。接下来的内容我将结合[「vue-spa-project」](https://github.com/cobish/vue-spa-project)这个示例来介绍，具体详情可以参考源代码。 ## 目录结构 ``` bash ├─ dist/ # 发布（调试）模式下生成的运行代码 ├─ server/ # node server，用于开发模式下模拟网络请求 ├─ src/ # 开发目录...
我在 Github 上看到过一些第三方插件，除了可以使用 git clone 之外，它们还可以使用 npm 或 bower 进行安装。于是我也尝试把自己编写的一个 jQuery 插件发布到 npm 和 bower，并且效果还不错。项目源码请看[「jquery.nail」](https://github.com/cobish/jquery.nail)。 首先编写好的源码得先打上 tag 版本号，然后 push 到 Github 上。第一个步骤算是完成了。 ## npm 先说 npm。npm 是 Nodejs 的包管理器，用过 gulp...
## 创建分支 Git 可以在本地任意并很快地创建分支，它实际上就在当前分支的基础上创建了一个新的指针，工作区的文件都没有任何的变化。 创建一条分支 ``dev``，然后切换到 ``dev`` 分支的命令如下： ``` bash $ git checkout -b dev Switched to a new branch 'dev' ``` ``git checkout`` 命令加上 ``-b`` 参数表示创建并切换分支，它相当于以下两条命令： ``` bash $...
之前使用 Grunt 时总结了一篇[「基于 Grunt 的前端构建」](https://cobish.github.io/#/post/13)。在使用了 Grunt 的一段时间后，我发现了 gulp 的运行速度比 Grunt 快很多，于是便从 Grunt 转移阵地到了 gulp。以下的构建思路跟 Grunt 的构建很类似。如果你也使用过 Grunt，那我相信你一定能够很快地切换到 gulp。当然如果你没有接触过 Grunt，我相信你一定也能够很快上手 gulp。 ## 目录结构 ``` bash ├─ gulp/ # gulp配置目录 ├─ tasks...
一直在寻找更优的方式来解决合并图片问题。这种方式需要满足几个要求：首先它能够将一个或多个 css 文件里引用到的图片合并成一张图片，接着它要能对应地修改 css 里图片的路径，最后它还要能方便维护修改，即如果我想替换图片或增加图片，它能够重新合并图片。 过去都是设计师把所有的小图标合并成一张大的图片，这需要我们不断地去修改 background-position 来调整小图片的显示。这种方式的好处就是前端不需要去合并图片，直接图片拿来使用即可。但它也有一些缺点，图片并不是以最优的方式合并，还可以合并成大小更小的图片；还有就是大图片里的小图标需要更换或是添加的时候，都必须让设计师找到原图进行更改，并且得保证原来的小图标位置不能改动，不然 css 代码也需要随之改动。 后来，网上有很多工具可以帮忙合并图片。尝试过了很多，大致都是你把要合并到一起的图片移到一个框内，然后自己去调整位置。实际上这种做法跟设计师的做法没区别，只不过是前端自己来完成而已，最后还是需要前端自己去调整 css 代码。后来又出现了一些线上的工具，例如[「GoPng」](http://alloyteam.github.io/gopng/)。这些工具会根据一定的算法去合并，并且会把 css 代码展示出来给你复制，不需要前端去手动书写引用图片的代码。但是，它们也有缺点，还是不方便更改，一旦图片做了更改，css 代码也会随之更改。 最后，构建工具让我找到了较优的解决方案。可以用到的插件是[「grunt-css-sprite」](https://www.npmjs.com/package/grunt-css-sprite)或[「gulp-css-spritesmith」](https://www.npmjs.com/package/gulp-css-spritesmith)。主要策略是有两个目录，一个是保存开发代码的 src 目录，一个是用于上线的 dist 目录。src 目录下用到的都是没有合并的小图片，css 代码引用到的也是各个图片。dist 目录下则是通过插件把图片都合并了，并修改了 css 里的代码。开发期间就使用未合并的图片，上线期间则通过打包工具使用已合并的图片。最后，目录如下： ``` bash ├─ dist/...