前言：查看了博客的更新时间，发现9月份没有更新了。一直想着抽空写一篇，不然今年的更新记录要到九月份就被打破了。但它应该被各种事情推迟。当突然觉得自己必须要写点东西的时候，突然发现自己忘记了写博客这个“套路”。(●′ω｀●)φ总觉得自己还是个爱思考的人。最近一直在思考两个问题：自己技术的初衷；自己的技术成长路径；当然这两篇文章我也在打磨，相信很快就会和大家见面。废话不多说了。来到主菜。1.背景颜色和透明度的知识。到了一个新的工作环境后，开发环境从只兼容IE8以上变成了兼容IE6浏览器。所以在第一次做项目的时候，还是遇到了一些低版本IE浏览器的兼容性问题。首先，我们来看一个背景透明度的问题。背景透明有3种解决方案：IE6-7使用滤镜；机会；rgba;但它们也有一些细微的区别如下：示例效果如下（如果可以的话可以写个简单的看demo的效果）：第一个是opcity和rgab的区别，第二个是效果在ie6中：当我们兼容低版本浏览器时，下面的写法可能会满足我们的需求（两个属性都是Write，浏览器识别的属性直接覆盖之前的属性）：.item1{opacity:0.1;//上面的浏览器IE8识别滤镜：progid:DXImageTransform.Microsoft.Alpha(opacity=70);//低版本滤镜IE7-8支持}2.html5标签调用系统发件箱。在HTML5开发过程中，我们可能会有这样的需求：点击按钮调用系统的发送短信窗口，并自动填写发送的号码和内容；网上很容易找到这方面的demo，安卓和ios上也可以找到其他的：点我发一个短信点我发短信但是在实际开发过程中遇到了很多坑.主要原因是：除了Android和IOS系统的写法不同外，ios不同系统版本的写法也不同。而且在不同的应用程序中是不同的。以上原因都是生产环境遇到的问题。一开始因为找不到可以查阅的相关文档，只好不做兼容。无意中在stackoverflow上找到了问题的原因。原文内容如下：翻译后总结如下：因此，如果您在生产环境中调用系统发件箱并填写号码和内容，请注意以上差异。3、使用input标签选择系统文件的问题在html5中，input标签为开发者提供了访问系统文件的能力。老实说，如果你只使用移动系统浏览器中的输入控件，你真的找不到任何问题。但是app的**webview**处处都是坑。以下是一些经验教训。webview访问系统文件遇到的一些问题：触发输入后，页面“闪退”（现象是出现文件选择框，然后立即关闭）；第一次遇到这个问题是在贴吧的客户端，听贴吧的兄弟说后来做了兼容。在华为手机中，可以正常调出系统文件选择窗口，但是无法正常读取系统文件（最后跟客户端的同学确认，如果h5在webview中读取系统文件需要权限，也就是说需要客户端支持）；ios的webview也有这个问题。有兴趣的可以参考这篇苹果开发者文档（点击访问）了解详情，可以参考这篇文章一起阅读：《h5端呼起摄像头扫描二维码并解析》4.传递参数的解决方案在开发过程中遇到过这样的问题：页面很多，saya-z。当我在a页面时，浏览器中的url会有一定的参数，当我完成一系列操作后，就会到达z页面。某天有一个需求，用户在a页面的时候会带上一个参数，决定用户在z页面操作完成后，页面最终会跳转到哪里。那么这个参数应该如何传递给z页面呢？第一种解决方案：在从a页面跳转到z页面的过程中，通过GET在url中加入该参数；此解决方案更常规，也是更好的解决方案。但是你需要在页面中所有的逻辑跳转中添加需要的参数。这是一个比较大的工作量，容易出现遗漏。不推荐使用。方案二：使用html5的新特性sessionStorage解决问题。在a页面，将新添加的需要传递给z页面的参数放在sessionStorage中。在z页面，直接从sessionStorage中获取需要获取的参数值，然后判断页面的最终跳转。这样解决问题，不仅减少了很多工作量，而且解决了工作量会议遗漏的问题。sessionStorage的优点：因为数据是保存在内存中的，当session结束，页面关闭时，数据就会被销毁。html5移动端存储的一些坑：当然在移动端浏览器中使用localStorage和sessionStorage是没有问题的。但是在Androidwebview中，存在localStorage无法向移动盘写入数据的问题。终于通过网络搜索找到了它。在Android上，webview默认不启用localStorage将文件写入磁盘。所以如果需要使用localStorage，需要找客户端支持。具体如下：五、pc端用js生成二维码要求JavaScript生成二维码。当时研究了两个方案：使用qrcodejs和jquery.qrcide，在使用过程中还是遇到了一些坑。总结如下：所以当前端有生成二维码的需求时，可以参考以上两点来决定选择哪个开源库更适合自己的项目。6、在本地存储js字符串看到标题，你可能会“疑惑”为什么要在本地存储js字符串。嗯，有时候业务场景的需求真的很变态，我们来看我描述的一个业务场景。业务场景：由于历史原因，我们的html5页面运行在客户端的webview中，但是客户端标题栏的返回按钮调用了前端js的back方法返回了页面。这时候就会出现问题，如果我们自己的页面跳出我们的h5页面，跳转到第三方页面。第三方页面的js一定不能有我们客户端返回按钮需要的js返回方法。可能有人会说，“卧槽，为什么要这样做，谁一开始就设计成这样的……”或者“让客户同学发布版本，用客户自己的回报来解决问题”。嗯，都说是历史原因，不谈别的，找客户同学出版也不现实，只能想其他办法了。之前讲过html5的客户端存储技术sessionStorage。当然，我要做的就是把前端后台方法保存在sessionStorage中。加载第三方页面时，直接从sessionStorage中读取back方法的字符串，转成js代码，赋值给客户端调用的方法。其实这里的难点在于如何将js字符串转换成可执行的js代码。使用eval执行js代码语句，看下面这个简单的例子：从上面的代码我们可以知道eval可以将简单的js字符串转换成js代码并执行。但是当我们的js字符串比较复杂的时候呢？比如下面这样：functionaaa(){console.log(1);}那么用eval函数可以吗？看下面的例子：从上面的执行结果我们可以知道不管怎么执行都不会得到预期的结果，但是有什么办法可以得到预期的结果呢？答案是：是的。JavaScript中new关键字的使用JavaScript中的一切都是对象。我们在创建函数的时候，除了函数声明和函数表达式之外，还可以通过newFunction来创建函数（这种方法不常用，但在特殊场景下还是很有用的）。那么如何使用newFunction来解决上面的问题呢？请看示例代码：从上面的示例代码和c的执行结果，我想很多人已经知道怎么做了。其实只需要对b的string函数进行简单的修改即可。看代码：上面代码的执行结果b()就是我们要保存的函数体。7、绝对定位的“坑”我们来看一个比较常见的布局。上面的布局是因为footer相对于页面底部是绝对定位的，所以当屏幕太小的时候，会出现footer区域覆盖content区域的问题，如下图：那么我们如何解决这个问题问题？我看到在我们项目的源码中，通过js给footer和contentarea所在的父容器设置了一个最小高度来解决这个问题，这样不好。除了加入复杂的判断，还会引起页面重绘：varwebViewHeight=window.innerHeight;variosCampatibleValue=64;if(webViewHeight<500){webViewHeight=500;}$('#pageWrapper').css('height',webViewHeight);很明显，上面的代码会导致页面重绘（当然这种对系统性能的消耗不是那么容易感知的）。但是这个问题可以用css解决吗？当然可以，那就是给contentcontainer设置一个padding-bottom，它的值就是bottomfooter的高度，如下图：当移动端的屏幕比较低时，出现如下情况会发生：padding-bottom和footer重合。但是页脚永远不会覆盖内容区域的内容。页面上会出现一个滚动条。也许我们最初的设计是为了用户体验，让用户的屏幕不出现滚动条，但是目前还没有完美的方案。在一些小众机型上，为了保证页面的正常显示和用户的正常浏览，我们只能牺牲一点这样的用户体验。8、调用键盘模拟滚动现在大部分的Android和ios系统，当输入框获得焦点，调用系统键盘时，系统键盘会将输入框推到键盘的最上方，方便用户使用输入。但无一例外，尤其是在某些APP中，系统本身的运行并不生效。这时候，如果需要完美的用户体验，就需要人的参与。解决方案：思路很简单，就是检测输入框的焦点事件，当输入框获得焦点时，使用js滚动页面。最好维护一个系统无法正常推送输入框的软件列表（可以通过HTTP的UA获取软件的唯一标识）。能用系统默认的滚动就用系统的，不行就调用js人为干预。函数inputScroll(dom){vartplList=['ss','bb'];vartpl=$.fn.getQueryString(tpl);if(tplList.indexOf(tpl)){dom.focus(function(){varclientHeight=$(window).height();varcontentHeight=clientHeight+clientHeight/2;varsmsInputTop=$(this).offset().top;content.height(contentHeight);window.scrollTo(0,smsInputTop-76);});}}
