一份来自腾讯互娱-创意设计中心的移动页面用户行为报告
JS实用技巧手记（七）
本系列文章旨在记录一些实用的javascript技巧，既可以作为一个知识的积累，又可以作为闲暇时打发时间写写代码的记录。同时也方便日后翻阅~
1. 操作DOM class
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 判断某个对象是否有指定的className function hasClass(ele,cls) { return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); } // 给指定对象添加className function addClass(ele,cls) { if (!this.hasClass(ele,cls)) ele.className += " "+cls; } // 删除className function removeClass(ele,cls) { if (hasClass(ele,cls)) { var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); ele.className=ele.className.replace(reg,' '); } } |
2. 分解url
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 正则： /^([^:]+):\/\/(?:([^:@]+):?([^@]*)@)?(?:([^/?#:]+):?(\d*))([^?#]*)(?:\?([^#]+)?)?(?:#(.+)?)?$/ // 结果格式： Array [scheme] => http [host] => quchao.com [user] => user [pass] => pass [path] => /about-me [query] => t=100102 [fragment] => hash ) // demo: 'http://user:pass@xuanfenge.com:80/category/?s=css3#first' .match(/^([^:]+):\/\/(?:([^:@]+):?([^@]*)@)?(?:([^/?#:]+):?(\d*))([^?#]*)(?:\?([^#]+)?)?(?:#(.+)?)?$/); // 结果 ["http://user:pass@xuanfenge.com:80/category/?s=css3#first", "http", "user", "pass", "xuanfenge.com", "80", "/category/", "s=css3", "first"] |
3. 获取url参数
2015/12
19 周六
渐进式 H5 设计与实现
前言
由于 H5 页面适用于移动网络传输，跨终端，且方便快速迭代，此外在 App 应用里加入h5的混合开发越来越普遍，如微信里面即将要上线的 H5 微信运动等。
Norman 的认知处理的 3 个层次：本能层、行为层、反思层。相当于对事物或信息的最初认知，之后才会产生行为，这时候才要更多地考虑物理操作的负荷，即手指的操作频次，不同输入模式的切换。所以将本能层放到了首位吧，否则即使操作再简单，认知不正 确或不清楚，直接会影响用户对产品的整体验。就像我们在考虑如何扩大功能的时候，要兼顾到如何简化界面。但是过度重视本能设计而虚弱行为设计（沉浸在产品中以完成日常任务和活动等的功能设计），炫酷的效果也只能是昙花一现？而且在实现 H5 页面的时候还要考虑各终端性能，屏幕大小等因素，所以用渐进式的方式来权衡本能设计与行为设计。 查看全文
2015/11
21 周六
高清ICON SVG解决方案
前言
随着硬件快速的发展，Retina技术发展至今，目前Google Nexus6的devicePixelRatio已经到了3.5，虽然目前主流的Retina显示器还是以devicePixelRatio = 2的为主，但是为了更好的用户体验，前端和视觉同学经常都要为了各种图标能够在Retina屏幕下高清显示而头痛。下面先介绍下目前的一些常规的解决方案。
1.多倍图片
目前用的比较多的做法是兼容devicePixelRatio = 2 就做实际图片大小的两倍，devicePixelRatio= 3就做三倍，有些人可能会直接做3倍的图片，这样就可以同时兼容devicePixelRatio = 2 ，但是这样其实对于devicePixelRatio = 1和devicePixelRatio = 2的用户他们就会浪费带宽去加载devicePixelRatio = 3的图片，所以为了提升用户体验，一般我们会分开做几套图片，根据用用户的devicePixelRatio判断让他们加载对应的图片。
2.iconfont字体图标
在很多国外的响应式站点里一般会采用iconfont，因为可以直接通过font-size和color属性来控制icon的大小和颜色，非常方便，而且由于iconfont本身就是字体文件，会矢量适配各种不同devicePixelRatio，但是在PC上当图标小于等于16px时，或者复杂度高的图标会出现比较严重锯齿，图标无法展示清晰，特别在chrome下的表现尤为严重。
正因为如此这个技术在推进过程中遇到许多困难，因为在很多场景下图标确实会较小甚至小于16px，而且有些16px的图标如果复杂度较高，iconfont实现出来的icon会经常出现看不清的情况，而且国内PC用户是占最多的，所以iconfont的这种表现效果很多用户和设计师无法接受。 查看全文
2015/11
21 周六