随笔分类 -  web前端

react 技术栈项目轻量化方案调研
摘要：react 技术栈项目轻量化方案调研 团队的新项目，无论是pc端的还是移动端的，都已全面转移到了 react 的技术栈。 然而，对移动端来说，react 框架脚本的体量还是有些偏大。 在后续项目比较成熟，需要重点考虑性能的时候，如何优化其加载，是一个不得不考虑的问题。 寻找方案 优化加载，我首先想到 阅读全文
posted @ 2017-05-08 17:43 snadn 阅读(478) 评论(0) 推荐(0) 编辑
service worker 实战
摘要：service worker 实战 service worker 是现代浏览器的一个新特性，伴随着谷歌的 PWA 概念一起，在近期广泛的出现在大家的视野里。 关于 service worker 的概念和相关的机制，本文不再介绍，大家可以参考 mdn 或自行 google。 本文主要说说我是怎么使用 阅读全文
posted @ 2017-04-05 15:09 snadn 阅读(743) 评论(0) 推荐(0) 编辑
那些年使用npm进行依赖管理所踩的坑
摘要：那些年使用npm进行依赖管理所踩的坑 废话 公司的项目用上了node来做前后端分离，相应的自然离不开使用npm来对依赖的第三方包进行管理。 npm使用的语义化版本号管理想法很好，使用 安装依赖包时，自动加上的 的版本号，看上去似乎也很有道理。 然而现实总是那么残酷，在经历了多次：在开发环境还跑的好好 阅读全文
posted @ 2016-03-28 10:24 snadn 阅读(1811) 评论(0) 推荐(0) 编辑
移动端web开发tips记录
摘要：记录几个最近开发踩的坑1. 页面加载时的window size 并不可靠。 问题：使用window.innerHeight 取到的高度并不一定是真实高度。 该问题在新打开的webview中尤其明显。所以必要时可加定时器进行校验。2. 避免使用window.onresize事件 问题：由于移动端浏览器... 阅读全文
posted @ 2014-12-12 19:32 snadn 阅读(208) 评论(0) 推荐(0) 编辑
angularjs开发的几个tips记录
摘要：第一次使用angularjs做项目是做360音乐的wap站（http://m.music.so.com/）。开发的过程中把angularjs好好的了解了一下，也踩了许多坑。现在记录下一些注意点：1. scope的继承。 angular里的scope是基于原型继承的。所以子scope在使用属性，尤其是... 阅读全文
posted @ 2014-10-20 19:26 snadn 阅读(248) 评论(0) 推荐(0) 编辑
duration异常导致的移动端音频无法播放问题
摘要：现象：1.在移动端播放音频文件的时候发现部分mp3音频文件在我的s4上无法播放，在使用转码工具将其重新转成mp3后，就能播放了。2.将不能播放的文件上传到云盘后，使用云盘的资源地址，发现可以在移动端播放。3.对比http请求，发现对云盘资源的请求里有206响应。然后看之前不能播放的请求，里面也是有range头的，只是之前的资源不支持range。4.对于移动端不能播放的资源，在pc端是可以播放的。结论：移动端对音频文件的格式要求更严，若无法取到其中的duration信息，会尝试发送range头通过206响应获取。若还获取不到，则资源无法播放。ps：以上不能播放的资源，在ios上（new ipad 阅读全文
posted @ 2014-02-25 18:55 snadn 阅读(581) 评论(0) 推荐(0) 编辑
移动端web开发的几个tips记录
摘要：1. 高度处理移动端可以放心的使用min-height和max-height了，也应该学会灵活使用这些属性。line-height和height避免同时使用，让line-height撑起高度即可。否则容易出现line-height>height的情况，导致显示效果不居中甚至少一截的情况。2. 兼容相关移动端可以使用很多css3和html5的东西，但要注意支持的情况，而有些属性使用时需要前缀。（兼容可以参考http://caniuse.com/#index）。比如Box-sizing这个属性，在移动端就很有用，但在Android4.0以前需要加-webkit-的前缀。又比如Android虽 阅读全文
posted @ 2014-02-12 19:34 snadn 阅读(295) 评论(0) 推荐(0) 编辑
关于ie8中微软雅黑字体显示的问题
摘要：最近在做一个页面的时候，发现在ie8浏览器（也包括ie7）中，字体有显示发虚，甚至大小不一样的问题。经过追查，发现原来是使用透明滤镜后，对字体的渲染造成了影响。解决方法有两种：若需要使用透明滤镜，可以给使用滤镜的元素加一个背景色。效果如下，不过字体还是有一些发虚。当然，最根本的方法还是避免使用滤镜了。 阅读全文
posted @ 2014-01-23 12:29 snadn 阅读(2605) 评论(0) 推荐(0) 编辑
移动端audio使用的一个注意事项
摘要：这几天做移动端的音乐播放，果然是踩坑不断呀！其中一个就是，做好的播放功能，在pc上可用，在手机上的壳子浏览器可用，可偏偏在原生浏览器和chrome上不行。折腾了好久（主要还是移动端的调试真心不方便呀），最终定位到问题是： 移动端一个audio对象的第一次播放，必须是一个用户触发的行为。至少在我目前4.3的三星s4的原生浏览器和chrome31上是这样的，相信在以后的版本上也会是这样。所以对于异步获取播放的资源链接再进行播放的实现，在这两个浏览器上就会失效。解决方法：既然不能异步，最简单的方法就是换成同步呗。当然，这对于项目来说是不现实的……上面提到，这个限制对于同一个audio对象，只在其初. 阅读全文
posted @ 2013-12-08 13:20 snadn 阅读(2535) 评论(2) 推荐(0) 编辑
关于window.opener的一个小记录
摘要：window.opener对象，相信一看这名字就能猜到这个是打开当前页面的来源页面对象。和parent，top，等相似。这里要记录的是：虽然通过opener获取location时有跨域的的限制。但却可以通过直接更改location对象使来源页面重定向！个人认为这应该算一个大坑，一个严重的安全漏洞了。 阅读全文
posted @ 2013-12-08 12:58 snadn 阅读(192) 评论(0) 推荐(0) 编辑
【翻译】行高的相关计算
摘要：原文链接：http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#line-height译者序：翻译该段文档，是因为自己在写相应的样式时遇到了疑惑，于是找文档看说明，发现很多地方和自己以前的理解还是有很大的差异，阅读后收获颇丰，而且网上目前的中文参考资料中似乎也找不到原滋原味的定义。于是决定自己翻译一下，也算是对自己的锻炼吧。第一次翻译，错误和不足的地方欢迎大家指正。ps：没想到短短的一段文档翻译居然用了两三周时间才完成。文章仅为翻译，对知识点的整理和总结等以后有时间再考虑吧。阅读该文档时需注意每个用词，不同用词有不同含义，相似的用词往 阅读全文
posted @ 2013-09-10 20:11 snadn 阅读(925) 评论(1) 推荐(1) 编辑
关于line-height的一些个人经验整理
摘要：关于2：该条错误。关于3：inline-block的baseline，定义于http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align最后一行。关于tips2：line-height不影响inline元素的高度，但影响其使用vertical-align属性时的展现效果。（即vertical-align使用line-height形成的行盒进行定位）ps：该内容仅为个人进行经验记忆的记录。 阅读全文
posted @ 2013-08-09 18:50 snadn 阅读(260) 评论(1) 推荐(0) 编辑
让js复用smarty模板
摘要：让js复用smarty模板场景：tabview或者加载更多内容的时候，往往需要从后端获取数据，然后用js生成相应的html代码，插入到相应的位置。通常方法：1. 后端直接build相应模板，然后输出到前端。优点：smarty模板功能强大，能使用php语法，方便调用php中自定义的处理逻辑，只用写smarty模板缺点：加载时传输数据大。2. 前端使用js模板，用后端给的数据build。优点：仅传输需要的数据缺点：页面第一次展现时需要再次发送请求build需要的数据，对于展现的实时性和seo都不是很友好3：混合使用smarty和js模板优点：解决前两个的问题缺点：需要维护两套模板，开发和维护成本太 阅读全文
posted @ 2013-07-19 21:20 snadn 阅读(959) 评论(0) 推荐(0) 编辑
chrome控制台查看函数作用域
摘要：使用chrome控制台打断点可以看到函数执行时候的scope这是很早之前就知道的。但使用console.dir也可以查看到函数的scope却是今天调试时的意外收获。调试代码：<!doctype html><html><head> <meta charset="utf-8" /> <title>test</title></head><body><script type="text/javascript">var t1=1;var a=function 阅读全文
posted @ 2013-06-20 20:01 snadn 阅读(1465) 评论(1) 推荐(0) 编辑
父容器高度大于子图片高度的原因
摘要：现象： 父容器高度大于子图片高度 View Code （不知道怎么在博客里插入js）div高度比图片高度大。原因：img是inline元素，有假想元素。基于baseline定位时，父容器高度为... 阅读全文
posted @ 2013-06-18 17:36 snadn 阅读(701) 评论(2) 推荐(0) 编辑
postMessage使用测试
摘要：1. 父页面<html><head> <meta charset="gbk"> <title>引用页面</title></head><body><button id='openNewWindow'>弹出新窗口</button><button id='sendMessage'>发送消息</button><input id='message' value='0'><i 阅读全文
posted @ 2013-06-18 15:22 snadn 阅读(1236) 评论(0) 推荐(0) 编辑
父容器定宽，ul不定宽，li不折行
摘要：做水平滚动轮播时的思考。ul宽度不会被撑开，但scrollwidth会撑开。<html><head> <title>test-li不折行</title> <meta charset="gbk" /> <style type="text/css"> ul{ white-space: nowrap; padding: 0; margin: 0; overflow: auto;} li{ width: 900px; height: 200px; background-color: gree 阅读全文
posted @ 2013-04-26 13:15 snadn 阅读(639) 评论(0) 推荐(0) 编辑
获取鼠标进入容器方向
摘要：<html><head> <title>获取鼠标进入容器方向</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script type="text/javascript" src="http://dev.qwrap.com/download/latest/apps/qwrap.js?20121011"></script>< 阅读全文
posted @ 2012-12-18 13:47 snadn 阅读(211) 评论(0) 推荐(0) 编辑
2012年12月13日
摘要：var s = 0;var l = 4;var timer = null;var isback = false;W(document).on('mousewheel', function(e) { var isTop = document.body.scrollTop == document.documentElement.scrollTop; if (isTop && !isback && s < 100 && e.detail < 0) { clearTimeout(timer); console.log(s, l 阅读全文
posted @ 2012-12-13 19:33 snadn 阅读(116) 评论(0) 推荐(0) 编辑