2015年年终总结 2015 年还有几天就要过去了，总的来说这一年过得不太那么顺人意，感觉这一年里自己的性格好像封闭了好多，周末不愿意出去了，要么是学习，要么是游戏，反正周末的两天就是懒得出去，这真真是个严重的问题，明年，不，现在就要改正，不论是否有人作伴，总是要出去走走的。 2012 年末总结【 2013 年的希冀 】 2013 年末总结【 2014 的希冀 】 2014 年末总结【 2015 年年末总结 】 这已经是第四次年终总结了，可是每到总结的时候，总是习惯一条一条的列出来，不能用一整段的文字描述出来 1. 回顾 # 1.1 个人 # 1.1.1 完善了自己的博客，样式、评论、css 和 js 的压缩等 # 从开始搭建博客以来，一直在修改博客的样式，大概到 8 月份的时候样式才稳定下来吧，就是希望自己的博客能够清新简洁一点，符合技术博客的特点；评论使用的是第三方插件多说；自从学习了 gulp 之后，就开始在自己的博客上练手了，把自己的博客上的 css 和 js 压缩了一下，不过还有一个没弄，就是生成 md5，过段时间弄一下。 1.1.2《狼图腾》 # 春节时看了曾经最期待的电影《狼图腾》，当然不能奢求电影和小说一样，自己看来还是不错的。《狼图腾》这本书在高中的时候看的，后来听说要拍成电影，就一直很期待，在春节的时候终于上映了，嘿嘿。 1.1.3 换工作了 # 现在来说，换工作还是有点太急了，看到其他人都在跳槽，自己也没有忍住，其实那里还是有不少的东西可以学习。不过，既然已经跳了，那就安心的做好现在的工作，能从现在的工作里学到东西 1.1.4 买了个 kindle # 在大概 11 月份的时候，买了个 kindle。看网上有很多关于 kindle 和 pad 的争论，这里不讨论谁好谁坏，从买了到现在，一直在看《明朝那些事儿》。 1.1.5 参加开源大会 # 在 12 月份的时候参加了开源中国举办的开源大会，本来人家说的是国际会议中心，结果去了国家会议中心，还好这两个中心离得不是很远，要不然真就放弃这个大会了。不过，也是没听完，见到了 PHP 的鸟哥之后，也就回去了，吃了顿午餐，领了根笔，汗！ 1.2 工作 # 1.2.1 几个同事相继离职 # 其实同事离职并不是什么大事儿，只是带我入门的大哥和部门的经理也离职了，给我感触挺大的，毕竟像咱这种小喽啰走了也就走了。 1.2.2 静态化，前端工程化 gulp # 在之前的那个公司，学习最多的就是关于版本管理和 gulp 的使用了，以前用的是 svn，现在用的是 hg；在这个公司里也接触了不少 node 和 gulp 的使用。还有就是关于前端集成方面的一些知识 1.2.3 开始做 html5 页面了 # 其实之前做的一直是 PC 前端，不过移动端肯定是个大趋势，只是没机会接触到，现在也是边做 html5，边学习中... 1.3 其他的事儿 # 1 月去打真人 CS 了 3 月份聚美 5 周年促销 好像没什么了，哈哈 去年的目标本来打算是戒掉游戏和视频的，带上 2014 年的一段时间，已经戒了很长时间了，但是因为 TI5 的举行，又开始玩起来了，罪过罪过！ 2. 展望 # 现在定下 2016 年的新目标吧，万一实现了呢（把目标定的小一点）！ 买个 iPhone 给笔记本配个外接显示器 去几次 798 leetcode 上通过 50 道题目以上 jquery 的源码学习和解读 学习 react 学习 angular，紧跟前端前沿技术 CSS3 的 flex CSS3 的 animation 等 拼图游戏 参加几次学术交流会 写一个练手的小项目（什么项目呢） 添加中... 希望我在将要到来的 2016 年能开心的度过。做人嘛，最重要的就是开心嘛！

对gulp-changed插件的一点思考 gulp-changed插件的作用，是用来过滤未被修改过的文件，只有修改后的文件才能通过管道。这样做的好处时，只处理修改后的文件，减少后续程序的执行时间。根据官方给出的例子：const SRC = 'src/*.js'; const DEST = 'dist'; gulp.task('default', () => { return gulp.src(SRC) .pipe(changed(DEST)) .pipe(gulp.dest(DEST)) .pipe( /* 其他操作 */ ); }); 检测SRC中的文件，然后把从changed()通过的文件输出到DEST文件夹中，然后继续进行后续的操作。在这之前，我写的代码是这样子的，没有传入参数，也没有输出到某文件夹中（gulp.dest(DEST)）：gulp.task('default', () => { return gulp.src('src/*.js') .pipe(changed()) .pipe( /* 其他操作 */ ); }); 然后发现，每次执行时，所有的文件都会通过管道，根本没有过滤的作用。看了源代码之后才知道，传递参数和文件输出是**必须**的，因为程序里是拿两个文件夹SRC和DEST里的文件进行对比的。每当检测一个程序时，都会去DEST里的文件夹里寻找这个对应的文件，若DEST最后修改时间发生变化或内容已更新，则表明这是一个新文件，通过管道，否则保留。程序里目前使用的是两个文件最后修改时间的对比，若SRC里的文件的最后修改时间比DEST里文件的最后修改时间要大，说明该文件被修改过。当然，gulp-changed还提供了一种比较函数：内容的对比。将源文件和目标文件的内容进行sha1加密后，比较两者的加密串，若不相同，则通过管道。可通过传递参数修改比对函数：gulp.task('default', () => { return gulp.src(SRC) .pipe(changed(DEST, {hasChanged: changed.compareSha1Digest})) .pipe(gulp.dest(DEST)) .pipe( /* 其他操作 */ ); }); 当然，你可以传递自己定义的函数，但是需支持以下4个参数： stream 文件通过对比后将sourceFile添加到队列中 callback 函数里的代码执行完毕后的回调函数 sourceFile vinyl 文件对象 destPath 与sourceFile文件对比的目标文件路径 源码讲解 # 这个方法里，是对两个文件最后修改时间的对比function compareLastModifiedTime(stream, cb, sourceFile, targetPath) { // 获取目标文件的状态 fs.stat(targetPath, function (err, targetStat) { // 若源文件存在 if (!fsOperationFailed(stream, sourceFile, err)) { // 对比两者的最后修改时间 if (sourceFile.stat.mtime > targetStat.mtime) { stream.push(sourceFile); } } cb(); }); } 这里有个疑问的地方： 若目标文件不存在，则当前情况是无法进行比较的，只能在运行一次之后，产生了目标文件；再修改源文件才能进行对比；新添加的文件同理 mtime, atime, ctime # 上面中的mtime表示修改时间，此外，文件还几个跟时间有关的属性，这里也稍微的讲解一下。 atime-access time # 该字段表示文件中的数据最后一次被访问的时间--通过unix进行直接读取或通过命令行和脚本读取。 ctime-change time # 当您更改文件的所有权或访问权限时，ctime也随之变化。当然，内容更新时，ctime也会发生改变。 mtime-modify time # 最后修改时间显示上次更改文件内容的时间。它不与文件权限的变化而变化，并因此用于跟踪文件内容的实际变化。 通过ls显示这三种时间 # 最简单的确认这些时间的方式是使用ls命令，我现在用的是windows系统，安装了一个ConEmu。使用ls -l显示的时间就是当前文件最后一次修改的时间，即mtime:-rw-r--r-- 1 root 1049089 2676 一月 20 03:06 gulpfile.js 使用ls -lu显示的是文件最后一次被访问的时间，即atime:-rw-r--r-- 1 root 1049089 2676 十一 24 09:18 gulpfile.js 使用ls -lc显示的是文件最后一次权限被修改的时间，即ctime:-rw-r--r-- 1 root 1049089 2676 一月 20 03:06 gulpfile.js 通过stat显示这三种时间 # 使用stat命令可以显示这个文件更加详细的信息：$ stat gulpfile.js File: ‘gulpfile.js’ Size: 2676 Blocks: 4 IO Block: 65536 regular file Device: d6be5777h/3602798455d Inode: 844424930178810 Links: 1 Access: (0644/-rw-r--r--) Uid: (1435492/root) Gid: (1049089/ UNKNOWN) Access: 2015-11-24 09:18:34.008292400 +0000 Modify: 2016-01-20 03:06:34.035859700 +0000 Change: 2016-01-20 07:04:40.432046400 +0000 Birth: 2015-11-24 09:18:33.965292400 +0000

自定义滚动条 在 PC 端，无论哪款浏览器提供的默认滚动条，样式都是很丑，无法满足现在页面设计的要求，为此衍生出了无数的模拟滚动条的插件，这些插件可以使用 CSS 来美化滚动条。当然，在实际的项目中，还有其他常见的场景。 1. 无滚动条但依然可以滚动 # 实际内容超过了容器的高度，只能使用滚轮进行滚动。这种情形下，默认只能进行垂直滚动，不能进行上下滚动。当然，如果要实现滚轮进行横向滚动，这就需要借助 js 添加滚轮事件。这一小节里，我们只讨论垂直滚动的情况。其实实现无滚动条但依然可以滚动，不用任何的 js 就能实现：比如.content是一个有滚动条的容器，他的高度和宽度分别是width:400px; height:300px;，我们可以在.content外面再添加一个 div(.wrap)，让这个 div 的宽度正好遮住 .content 的滚动条：.wrap { width: 400px; height: 300px; overflow: hidden; /* 遮住滚动条 */ border: 1px solid #aaa; } .content { width: 417px; /* 一般滚动条的宽度差不多是17px */ height: 300px; overflow: auto; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend.In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosquadlitora torquent per conubia nostra, per inceptos himenaeos.Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptoshimenaeos.In eget nisl viverra risus feugiat vulputate tempus et leo.Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet,consecteturadipiscingelit.Sedimperdietaliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculisluctus convallis.Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. Inquis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est. 这种方式没有兼容性问题，在任何浏览器都可以，技术上实现起来也很简单；唯一的缺点就是用户对滚动不太敏感，可能不知道需要滚动才能查看下面的内容。 2. 美化后的滚动条 # 这种情形下，需要的是浏览器自带的滚动条，依然不需要借助 js，只不过需要对滚动条进行美化；但是滚动条的美化是有浏览器兼容性的，只有 webkit 内核的浏览器（chrome, opera, safari 等）才支持，firefox 到目前位置还不支持滚动条美化，IE 浏览器只支持修改滚动条的颜色，其他的则无法修改。我们先来看看 webkit 下滚动条的美化，webkit 下是使用的伪元素：/* 设置垂直滚动条的宽度和水平滚动条的高度 */ .demo::-webkit-scrollbar { width: 8px; height: 8px; } /* 设置滚动条的滑轨 */ .demo::-webkit-scrollbar-track { background-color: #ddd; } /* 滑块 */ .demo::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.6); border-radius: 4px; } /* 滑轨两头的监听按钮 */ .demo::-webkit-scrollbar-button { background-color: #888; display: none; } /* 横向滚动条和纵向滚动条相交处尖角 */ .demo::-webkit-scrollbar-corner { /*background-color: black;*/ } Lorem ipsum dolor sit amet, consectetur adipiscing elit.Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend.In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo.Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis.Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est. 看了上面美化滚动条的属性，如果不考虑兼容性的问题，我们还可以使用-webkit-scrollbar来隐藏滚动条，不用再在外面套一个 div 了，而且依然可以滚动。IE 浏览器下滚动条下，使用样式进行美化，而且只能修改颜色： scrollbar-arrow-color: color; /三角箭头的颜色/ scrollbar-face-color: color; /立体滚动条的颜色（包括箭头部分的背景色）/ scrollbar-3dlight-color: color; /立体滚动条亮边的颜色/ scrollbar-highlight-color: color; /滚动条的高亮颜色（左阴影？）/ scrollbar-shadow-color: color; /立体滚动条阴影的颜色/ scrollbar-darkshadow-color: color; /立体滚动条外阴影的颜色/ scrollbar-track-color: color; /立体滚动条背景颜色/ scrollbar-base-color:color; /滚动条的基色/ 当前样式只在 IE 下有效果： Lorem ipsum dolor sit amet, consectetur adipiscing elit.Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend.In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo.Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis.Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est. 3. 自定义滚动条 # 自定义滚动条借助 js 里的滚轮事件，mousemove 事件等，使用 div 来模拟一个滚动条，然后根据位移，滚动条和内容移动相应的距离。这里需要先定义几个简单的变量： wrap_height : 外层容器的高度 content_height : 内容的实际高度，通常大于外层容器的高度 content_dis : 内容当前的位置 bar_height : 滚动条的长度 bar_dis : 滚动条当前的位置 滚动条与其滚动区域的比例和外层容器与实际内容的比例是相等的，这样就能计算出滚动条的长度，即：bar_height / wrap_height = wrap_height / content_height; bar_height = (wrap_height * wrap_height) / content_height; // 滚动条的长度 同理，滚动条滚动的距离与内容滚动的距离也是成比例的，因为我们实际操作的是滚动条，通过这个我们能知道滚动条滚动的距离后，得出内容滚动的距离：bar_dis / (wrap_height - bar_height) = content_dis / (content_height - wrap_height); content_dis = ((content_height - wrap_height) * bar_dis) / (wrap_height - bar_height); // 内容当前的位置 滚动条和内容的滚动，实际上是修改这两者的top值。接下来就是为滚动条添加mousedown, mousemove, mouseup事件，通过这些事件修改滚动条的 top 值。在鼠标按下(mousedown)时，获取鼠标当前的 pageY1(IE 不支持 pageX、pageY 属性，但支持 offsetX、offsetY)和滚动条的 top 值，然后在鼠标移动(mousemove)时，再获取鼠标的 pageY2(offsetY)，根据两个 pageY，计算出鼠标的偏移量(pageY2-pageY1)，即滚动条的偏移量 bar_diff。bar_diff 加上滚动条初始时的 top 值，就是滚动条现在的 top 值。根据上面的公式也能计算出内容的偏移量。这里简单的写下：$scroll_bar.css('height', scroll_bar_height).on('mousedown', function (event) { var $this = $(this), startX = event.pageY, top = $this.position().top; $(document) .on('mousemove', function (e) { var diff = e.pageY - startX; changePos(top + diff); }) .on('mouseup', function (event) { $(this).off('mousemove mouseup'); this.releaseCapture && this.releaseCapture(); }); this.setCapture && this.setCapture(); }); // 设置滚动条和内容的top值 // end表示滚动条当前滚动到的位置 function changePos(end) { if (end < 0) { end = 0; } else if (end > obj_height - scroll_bar_height) { end = obj_height - scroll_bar_height; } $scroll_bar.css('top', end); $scroll_con.css('top', (-(scroll_con_height - obj_height) * end) / (obj_height - scroll_bar_height)); } 如果容器的高度可能随着窗口变化，或者其他原因导致容器的高度发生变化，都需要重新计算滚动条的长度和能够滚动的区域。 张鑫旭大神在他自己的博客里曾经总结过关于滚轮的事件，这里拿来一下，相关链接请下拉到最后：var addEvent = (function (window, undefined) { var _eventCompat = function (event) { var type = event.type; if (type == 'DOMMouseScroll' || type == 'mousewheel') { event.delta = event.wheelDelta ? event.wheelDelta / 120 : -(event.detail || 0) / 3; } //alert(event.delta); if (event.srcElement && !event.target) { event.target = event.srcElement; } if (!event.preventDefault && event.returnValue !== undefined) { event.preventDefault = function () { event.returnValue = false; }; } /* ......其他一些兼容性处理 */ return event; }; if (window.addEventListener) { return function (el, type, fn, capture) { if (type === 'mousewheel' && document.mozHidden !== undefined) { type = 'DOMMouseScroll'; } el.addEventListener( type, function (event) { fn.call(this, _eventCompat(event)); }, capture || false, ); }; } else if (window.attachEvent) { return function (el, type, fn, capture) { el.attachEvent('on' + type, function (event) { event = event || window.event; fn.call(el, _eventCompat(event)); }); }; } return function () {}; })(window); 4. 使用 mCustomScrollbar # 4.1 基本介绍 # 在第 3 小节只是简单的介绍了插件的编写，现在市面上已经有了很多成熟的插件，这里简单的介绍下 jQuery 插件mCustomScrollbar的使用方法。mCustomScrollbar 提供了很多滚动条的样式（theme），同时还有不同的滚动方式，比如有：普通的垂直滚动，水平滚动，设置两端的箭头，进入区域显示滚动条离开区域隐藏，滚动固定距离（适用于表格，图片等场景），容器高度或宽度变化时滚动条自适应，js 追加内容时滚动条自适应等。写几个推荐的理由吧： 能使用class同时为多个容器添加滚动条，每个容器单独独立计算，互不影响 兼容 IE6+ 26 个主题样式可供选择 多种滚动方式：垂直滚动，水平滚动，固定距离滚动等 对外提供了很多的参数和回调方法 使用的方法也很简单：1.CSS：如果要添加滚动条，容器需要是块状元素(display:block)，且有高度或最大高度；如果是需要添加水平滚动条，则需要有宽度或最大宽度。当然，高度或宽度也可以在调用插件时设置（setWidth, setHeight）。 2.引入 js：// 因为插件是基于jQuery的，所以 调用方法：(function ($) { $(function () { $('.content').mCustomScrollbar(); }); })(jQuery); 3.参数：axis:默认情况下，插件添加是垂直滚动条，不过我们可以通过参数来添加axis来设置我们想要的滚动条：y(垂直滚动条)，x(水平滚动条)，yx(同时添加垂直和水平滚动条)$('.content').mCustomScrollbar({ axis: 'x', }); theme:设置滚动条的风格，该插件提供了 26 种风格的滚动条，【点此查看风格】。$('.content').mCustomScrollbar({ theme: 'dark', }); 4.2 参数介绍 # 在 4.1 里介绍了两个参数，接下来再翻译一些参数，更详细的还请点这里查看官网【官网参数介绍】。使用说明：$(selector).mCustomScrollbar({ option: value }); $('#content').mCustomScrollbar({ theme : 'dark', scrollbarPosition : 'outside', // 滚动线的位置，在容器内部还是外部 inside(default)|outside (如果容器的position是static值，则添加position:relative) setTop : '-100px', // **内容**初始时距离顶部的距离 setLeft : '-100px', // **内容**初始时距离左端的距离 setWidth : '400px', // 设置容器的宽度，此设置将覆盖css属性，单位可以是px|% setHeight : '600px', // 设置容器的高度，同setWidth axis : 'yx' // 设置滚动的类型：y(垂直滚动条，默认), x(水平滚动条), yx(垂直和水平同时设置) scrollInertia : 1000, // 设置内容滚动时动画的缓冲时间(单位：ms)，值为0则没有缓冲效果 autoDraggerLength : false, // 是否自动调整滚动条的长度 true(default)|false autoHideScrollbar : true, // 是否自动隐藏滚动条 autoExpandScrollbar : true, // 鼠标放在滚动区域时，是否自动放大滚动条 true|false(default) alwaysShowScrollbar : 1, // 当内容过短不至于产生滚动条时，是否依然显示滚动条： 0(不显示，default) | 1(只显示轨道但没有滚动条和两端的箭头) | 2(所有都显示) snapAmount : 60, // 滚动固定的长度，主要用于表格，幻灯片等（请注意，您的元素必须是相等的宽度或高度，以便使其正常工作）；若y轴和x轴设定的长度不一样，可以用数组设置[y, x] mouseWheel :{ // 滚轮设置 enable : true, // 是否可以用滚轮进行滚动 scrollAmount : 30, // 内容滚动的距离， "auto"将根据情况自动调整滚动量 axis : 'y', // 同上 preventDefault : false, // 当 当前容器的滚动条在两端时，是否接着滚动父级容器的滚动条 true(default) | false invert : true, // 滚轮反向，设置为true后，当滚轮向上滚动时，滚动条会向下或向右滚动 disableOver : ["select"] }, scrollButtons :{ // 两端箭头的设置 enable : true, // 是否启用箭头 scrollAmount : 30, // 点击按钮时，内容滚动的距离， "auto"将根据情况自动调整滚动量 scrollType : "stepped", // 点击按钮不松开时滚动的类型： "stepless"(按钮一直按下时，内容持续滚动)， "stepped"(每次按下时，内容只滚动一次，滚动的距离是**scrollAmount**设置的值) tabindex : 2 }, keyboard : { // 键盘设置 enable : true, // 是否启用键盘操作内容的滚动，支持四个方向键（上，下，左，右），Home键，End键，PageUp键，PageDown键 scrollAmount : 30, // 内容滚动的距离， "auto"将根据情况自动调整滚动量 scrollType : "stepped" // 按键不松开时滚动的类型： "stepless"(按键一直按下时，内容持续滚动)， "stepped"(每次按下时，内容只滚动一次，滚动的距离是**scrollAmount**设置的值) }, contentTouchScroll : 50, // 触屏滑动内容时，内容滚动的距离，（默认是25）；若要禁止触屏滑动，则设置为false advanced : { // 高级设置 updateOnContentResize : true, // 当内容，容器或窗口发生变化时，是否自动更新滚动条 updateOnImageLoad : true, // 容器内的图片完全加载完成时，是否自动更新滚动条 updateOnSelectorChange : 'ul li', // 当特定元素的个数发生变化时，是否自动更新滚动条 autoUpdateTimeout : 40 // 设置自动更新的时间（单位:ms），默认是60ms }, callbacks : { // 回调函数 // A function to call when plugin markup is created. (怎么翻译？) onCreate : function(){ console.log( 'create' ); }, // 当滚动条初始化完成时触发 onInit : function(){ console.log( 'init' ); }, // 滚动条开始滚动时触发 onScrollStart : function(){ console.log( 'scroll start...' ); }, // 滚动条在滚动过程中触发 whileScrolling : function(){ console.log( Date.now() ); }, // 滚动结束时触发 onScroll : function(){ console.log( 'scroll end...' ); }, // 当滚动结束且滚动条在最底部或最右端时触发 onTotalScroll : function(){ console.log( 'bottom or right' ); }, // 当滚动结束且滚动条在最顶部或最左端时触发 onTotalScrollBack : function(){ console.log( 'top or left' ); }, onTotalScrollOffset : 100, // 设置 onTotalScroll 触发的offset值，如设置为100，则当滚动条距离底部或右端

对家暴移动端项目的总结 线上地址: http://news.qq.com/zt2016/jb/jb.htm这期的项目做的时间比较长，因为遇见的问题也比较多。 1. 页面动画 # 这里使用了比较多的 CSS3 动画，不过其中有几个不是很成功。 1.1 长按屏幕，背景图片进行渐变 # 这是这个项目里最重要的动画之一，在用户进入到这个页面后，首先执行的就是这个动画，而且着重表现了一个人的受伤过程。即从未受伤的状态渐变成受伤的状态：html: javascript:$('.injure_before').addClass('fadeOut'); // 渐出 $('.injure_before').addClass('fadeIn'); // 渐显 1.2 长按屏幕，手指移动 # 当时写的时候本来是没有这个动画的，后来考虑到 1.1 里的背景图渐变是长按屏幕才能触发，在这长按的过程中，感觉页面像是死掉的样式，于是就在手指这儿添加了一个动画，让手指从线的左端滑动到右端，到右端时触发的动画。zepto 里的长按longTap触发时间是 700ms，那我设置手指移动的滑动时间是750ms，保证动画是连起来的：默认样式：position: absolute; top: -0.08rem; left: 0; -webkit-transition: all 750ms linear; transition: all 750ms linear; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); width: 0.48rem; 结束的样式：-webkit-transform: translate3d(1.9rem, 0, 0); transform: translate3d(1.9rem, 0, 0); 1.3 打开档案 # 这个动画在这项目里是比较复杂了，过程说这样的 点击按钮后，按钮和捆绳消失 档案口进行 180 度的反转（打开） 档案向下移动至页面的底部 档案内的纸张（div 模拟）滑出 曾经在实现的过程中，2 和 4 产生了冲突，在步骤 2 中，使用的是 CSS3 里的rotate进行反转，但是若使用了transform，那么就会导致z-index失效，档案内的纸张就会盖不住档案口。因此最后的解决方案是：步骤 2 不使用 CSS3 动画，而是直接进行显示（显示打开的状态）和隐藏（隐藏关闭的状态），后面的动画依次执行。 2. 遇见过的问题 # 上面的档案打开动画其实只是兼容问题，并不是所有的手机上都会失效，但是还是要让所有的手机都正常，只能把那个动画取消了，不过最近总结的时候好像有解决办法了。 2.1 刚进入页面或刷新时 # 当用户刚进入页面时，或已进入页面但刷新了，首先出现的不是 loading 页，而是后面的页面，因为我在 css 里把 loading 的层级设置的最高，感觉应该没什么问题。现在是改成，页面初始时，只有 loading 是可见的，其他的 section 只有在 loading 完成之后可见。 2.2 在新闻客户端进行左右滑动 # 新闻客户端有其自己的左右滑动事件，向左滑进入评论（如果有评论），从评论向右滑回到文章，从文章再向右滑则滑出文章进入列表。在安卓下，我们的左滑和右滑是不管用的；在iPhone下，可以使用我们自定义的左右滑动事件。因此在最后的上线前，把点击切换和滑动切换都添加上了，安卓下使用点击切换，iPhone 下点击和滑动都可以。同时，新闻客户端提供了一个可以屏蔽右滑事件（即屏蔽从文章滑出到列表页）；在新闻客户端里打开 html5 时，经常会看不到这个页面的标题，只显示默认标题“腾讯新闻”，因此需要在 js 中进行延迟设置：(function ($) { $.getScript('http://mat1.gtimg.com/www/js/newsapp/jsapi/news.js?_tsid=1', function () { var isStopSwipe = false, ckTencentNews = null; (function stopSwipe() { var ua = window.navigator.userAgent.toLowerCase(), iPhone = /iphone/i.test(ua) ? true : false, android = /android/i.test(ua) ? true : false; ckTencentNews = setInterval(function () { if (window.TencentNews && window.TencentNews.setGestureQuit) { window.TencentNews.setGestureQuit(true); if (isStopSwipe) { clearInterval(ckTencentNews); } } else { clearInterval(ckTencentNews); } }, 20); })(); setTimeout(function () { document.title = '看见淤青有多难_腾讯新闻_腾讯网'; // set news app title if (window.TencentNews && window.TencentNews.setTitle) { window.TencentNews.setTitle(document.title); } }, 80); }); // forbidden weixin swipe document.addEventListener( 'touchmove', function (e) { e.preventDefault(); }, false, ); })($); 2.3 视频播放 # 视频播放采用的是tvp，虽然设置了自动播放，但是在 iPhone 下还需要再点击一下才能播放。之前不知道这个设置，就在播放器的外城弄了一个遮罩，遮罩上是自定义的播放按钮，一直播放不了；于是修改为：每次点击都重新创建播放器，关闭时删除当前播放器。同时，在小米品牌的手机下，播放器会悬浮在刚开始播放的位置，且一直固定，不跟随页面滚动。因此，页面中所有的视频都在一个当前居中的 div 中进行播放，该 div 有一个可关闭按钮。createPlayer : function($item){ var $ss = $item.find('.ss'), // 当前的播放区域 vid = $item.attr('vid'); // 播放影片的vid var video = new tvp.VideoInfo(); video.setVid(vid); var player = new tvp.Player(); $('.popup_video').show(); player.create({ width: '100%', height: '100%', video: video, playerType: 'html5', isHtml5UseUI:false, autoplay: true, modId: 'pop_mod_player', onallended:function(){ } }); // 关闭播放器 $('.popup_video .popup_close').on('tap', function(){ $('#pop_mod_player').html( '' ); // 播放器清空 $('.popup_video').hide(); // 隐藏弹窗 $item.find('.over').show(); // 显示默认图片和播放按钮 }) } 2.4 滚动 # 之所以 iScroll 会诞生，主要是因为无论是在 iphone、ipod、android 或是更早前的移动 webkit 都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。 这个不幸的规则导致所有 web-app 要模拟成 app 的样子时，只能由一个绝对定位的 header 或是 footer 再加上一个可以内容的滚动的中间区域组成。幸运的是移动 webkit 提供了一种强大的硬件加速的 CSS 属性，这个属性可以用来模拟这个缺失的功能，iScroll 从这里开始了前进之路，但是没有不带刺的玫瑰。让内容滚动像原生方式一般比想象中要难。iScroll 官方 github: iScroll_githubiScroll 中文翻译: iScroll 5 API 中文版这里需要注意两个问题：图片加载和内容可见。若当前需要初始化的区域有图片，则需要等待图片全部加载完成之后才能初始化，否则高度会有问题；同时当前区域必须是可见的，不能是隐藏状态，否则初始化完成的高度也会有问题，要么是 0，要么仅仅是 client 的高度。在这里基本上所有的功能都能找到，我在本项目里用到的特殊也不是很多，也只有两个： 这个滚动区域和上方的人物信息，上下进行切换，因此这里需要判断，何时进行当前内容的滚动，何时滚动到上方的人物信息区域 导航定位 关于第 1 个，我这里的判断，如果当前的滚动条上移且滚动开始位置距离顶部的距离小于等于 14 时，表示需要切换到另一个区域：myScroll.on('scrollStart', function () { // this.directionY 1:向下滚动 -1:向上滚动 // this.y 表示文档顶部与容器顶部的位移，该值永远 -14 && this.directionY == -1) { $('.people').removeClass('fadeOutUp').addClass('fadeInDown'); // $('.story').removeClass('fadeInUp').addClass('fadeOutDown'); } }); 导航定位，即通过导航定位到内容的某个位置，iScroll 里提供了两个方法: scrollTo(滚动到某个位置) 和 scrollBy(滚动多远)，在导航定位中应该使用scrollTo。但是在使用这个方法之前，首先得获取每个位置的 offset 值。在获取每个位置的 offset 值之前，首先保证所有图片都加载完成，或者每个图片都是定高的也行。 2.5 背景音乐 # 在人物列表里，大概有 10 个人物，但是只有 4 个人物有背景音乐；而且冲背景音乐切换到长文内容时，背景音乐也要暂停。因此这里的逻辑是这样的： 背景视频默认不播放，用户点击按钮时才播放 当前人物有背景音乐时，且处于播放状态，则进行播放；若是禁播状态（默认关闭状态或用户主动暂停音乐），即使有背景音乐也不播放 当前人物没有背景音乐时，前一个背景音乐暂停 当从人物列表切换到长文内容时，背景音乐暂停；再且回来时，依然是暂停状态 javascript:// 切换背景音乐 var music = $next.attr('music') || '', // 下一个即将展示的人物的背景音乐 $bgMusicContr = $('#bgMusicContr'); // 播放按钮 // 若有背景音乐 if (music !== '') { $('#bgMusic').prop('src', music); $bgMusicContr.show(); // 若当前处于播放状态，才进行播放 if ($bgMusicContr.hasClass('playing')) { bgMusic.play(); } } else { $bgMusicContr.hide(); bgMusic.pause(); } 2.6 轮播图的高度 # 轮播图里的每个 item 都是position:absolute属性，父级元素撑不开，而且，每个图片对应的说明文字的长度也是不固定的，因此得需要计算出每个 item 的高度。// 设置轮播图的高度 setSliderHeight : function(){ var $slider = $('.slider'); // 对每个轮播图都进行设置 for(var i=0, len=$slider.length; i 1) { for (var j = 0; j < lent; j++) { var $item = $slider.eq(j), $li = $item.find('li'), len = $li.length, html = ''; // 当图片的数量大于1时，才显示切换按钮 if (len > 1) { html = '' + '' + ''; for (var i = 0; i < len; i++) { var s = i === 0 ? 'mall_dot mall_dot_current' : 'mall_dot'; html += '' + (i + 1) + ''; } html += ''; } $item.append(html); } } } 2.8 在新闻客户端和微信中设置分享信息 # 这个项目会在新闻客户端和微信中同时推送，因此需要让用户在这两个客户端都能分享给朋友和分享到朋友圈。信息配置:// 信息配置 var shareData = { title: '反家暴', img: 'http://mat1.gtimg.com/news/skeetershi/jiabao/img/share.jpg', desc: '伤害，是身体上的淤青，也是赤膊爱情的荆棘。', link: document.location.href, }; 分享代码:// 分享代码，复制进项目里即可 function newsappShare() { var timer = null; timer = setTimeout(function () { if (window.TencentNews) { if (window.TencentNews && window.TencentNews.setShareArticleInfo) { window.TencentNews.setShareArticleInfo( shareData.title, shareData.title, shareData.desc, shareData.link, shareData.img, ); } else { window.TencentNews.shareFromWebView( shareData.title, shareData.title, title.desc, shareData.link, shareData.img, ); } if (window.TencentNews && window.TencentNews.setGestureQuit) { window.TencentNews.setGestureQuit(true) || window.TencentNews.setGestureQuit(1); } } }, 300); } window.addEventListener( 'load', function () { newsappShare(); }, false, ); function onBridgeReady() { WeixinJSBridge.on('menu:share:timeline', function (e) { var data = { img_width: '120', img_height: '120', img_url: shareData.img, link: shareData.link, desc: shareData.desc, title: shareData.title, }; WeixinJSBridge.invoke('shareTimeline', data, function (res) { WeixinJSBridge.log(res.err_msg); }); }); WeixinJSBridge.on('menu:share:weibo', function () { WeixinJSBridge.invoke( 'shareWeibo', { content: shareData.desc, url: shareData.link, }, function (res) { WeixinJSBridge.log(res.err_msg); }, ); }); WeixinJSBridge.on('menu:share:appmessage', function (argv) { WeixinJSBridge.invoke( 'sendAppMessage', { img_width: '120', img_height: '120', img_url: shareData.img, link: shareData.link, desc: shareData.desc, title: shareData.title, }, function (res) { WeixinJSBridge.log(res.err_msg); }, ); }); } //执行 document.addEventListener('WeixinJSBridgeReady', function () { onBridgeReady(); }); 3. 总结 # 这个项目做的时间比较长，也加了不少的班，真是遇到了不少的问题。不好好总结一一下都对不起自己。

如何对textarea中的每一行进行判断 我们先来看看需求：用户可以在编辑区最多输入 10 个域名，一行域名占一行，当换行时，检测上一个域名是否合法，如果不合法，则为不合法的域名加上下划线（或其他提示信息）。 使用 input 标签模拟 # 首先我们来讲解一个不太方便的方案。既然他要求的是针对每行进行判断和提示，那么我们可以用多个 input 来模拟出一个 textarea 标签来。下面的区域就是由 4 个 input[type='text']标签组成的，外层一个容器仅是给用户一个边界而已。.ss { border: 1px solid #333; width: 400px; } .ss input { border: 0; outline: none; display: block; width: 100%; } 不过毕竟是看起来像 textarea 标签，我们先来看看真实的 textarea 有哪些特性： 换行方便，按 enter 键直接换行 删除方便，当光标在这一行的最前时，再按删除键回到上一行 能任意选择输入的内容进行编辑、删除等 第 1 个和第 2 个特性可以通过监听enter和backspace来实现，任意的选择多行内容进行编辑目前还找不到解决办法。下面我们来看看换行和删除的功能：var isBegining = false; $('.ss').on('keyup', function (event) { var $current = $('input:focus'), keycode = event.keyCode || event.which || event.charCode; if (keycode == 13) { // enter var $next = $current.next(); if ($next.length) { $next.focus(); } } else if (keycode == 8) { // delete var $prev = $current.prev(); // 若当前input的光标在最前面 if ($current[0].selectionStart == 0 && $prev.length) { if (isBegining) { isBegining = false; $prev.focus(); } else { isBegining = true; } } } }); 上图中的isBegining的作用是：当删除字符光标到达最前面时，光标依然停留在当前的 input 内，再次点击删除键时才回到上一个 input 标签。我们在enter的事件里添加上验证功能，比如如果含有uu则认为是不合法的，然后给这个 input 标签添加红色的下划线。：/*.ss .waring{ border-bottom: 1px solid #f00; }*/ if (keycode == 13) { // enter var $next = $current.next(); if ($next.length) { var text = $current.val(); if (text.indexOf('uu') > -1) { $current.addClass('waring'); } else { $current.removeClass('waring'); } $next.focus(); } } 在接下来的的章节里我们会讲解怎么添加一个跟内容宽度一样的红色下划线。 使用 textarea 标签 # 上一章节里我们是使用的 input 标签进行模拟的，这里我们使用 textarea 标签实现一下我们刚才的需求。通常 textarea 标签里的内容都是作为一个整体来进行操作的，不过我们通过监听按键来实现把每行的内容分开。 textarea : 输入内容 waring : 添加警告下划线 content : 隐藏标签，计算某一行内容的宽度，用于警告下划线的宽度 监听按键，每次都获取所有的内容，然后使用split分成一个数组，再检测数组里的内容，若不符合要求var arr_len = 0; $('.textarea').on('keyup', function () { var text = $(this).val(); var arr = text.split('\n'); // 当换行时 if (arr.length != arr_len) { arr_len = arr.length; $('.container .waring').html(''); var html = ''; for (var i = 0, t = arr.length; i < t; i++) { var f = arr[i].indexOf('uu') > -1; if (f) { $('.container .content').html('' + arr[i] + ''); // 在content中添加这一行的内容 var width = $('.container .s').width(); // 计算这些内容的宽度 var top = 20 * (i + 1); $('.container .waring').append(''); } } } }); 这种添加提示线的方法，也可以用在第一章节里。不过这个方案也有个缺陷，当用户编辑当前的内容时，当前内容的下划线应当消失，而不是一直显示。 总结 # 当然，这两种方法都有不同的缺陷，也只能根据实际项目的需求来两者取其轻。