You are at the archive for the 工作研究 category


work record II:有关Singleton

09月 8th

Singleton,有人翻译叫:“单例、单件”啥啥的。有关php的singleton,baidu不到多少有用的介绍,都是你抄我我抄你的。没啥意思。更详细的参考,应该直接看官方文档:php singleton 。
Singleton的主要设计思想就是:将对象的构造声明成一个私有方法,再把他本身丢到一个静态变量里面。通过判断静态变量的有无,来自己实例化自己。
一个简单的例子:

class Example{
private static $instance;

private function __construct(){ }

public function callObj(){
if(!self::$instance){
self::$instance = new Example();
}
return self::$instance;
}

function doSomething(){ …….. }
}
然后会这样调用:
$obj = Example::callObj();
$obj->doSomething();
ok,到现在为止,都很容易。
那么我遇到了什么?
最初我的function __construct()是空的,我实例化了对象之后,企图直接在callObj()中通过$this->doSomething();。按照我之前的理解,既然我上面已经实例化了该对象,之后应该就直接可以用了。结果非常囧,无论如何也不能调用$this,只能使用self,这样就有些个不方便了。
怎么回事情?
继续看了一下文档然后自己尝试了一下,原来是这样来解析的:

$obj = Example::callObj()已经实例化对象并返回,之后调用的$obj->doSomething()中,使用$this是不会有任何问题。和范例一样
在没有返回实例化的对象之前,在callObj()中只能使用self来调用方法,不能直接使用$this->doSomething(),这种情况下,方法doSomething中都不能使用$this
但是:如果是通过构造函数:__construct()来调用的,那么在__construct中可以使用$this关键字没有任何问题。

没了,就是这样一个小问题,这里记录一下

如何模拟低网速状态

08月 28th

遇到了什么?
在做项目时,通常容易遇到一个问题:在项目环境中拥有良好的表现,功能很酷很炫,但是在实际发布上线之后,却发现因为用户网速不理想,容易产生一些意料不到的状况,例如页面的可用性出现障碍。而且这些问题通常在进行测试的时候也难以发现,因为测试多半也和我们处于同样网络条件下。这个时候我们需要模拟在低网速下产品的表现。
如何解决?FIDDLER or NET LIMITER!
FIDDLER
一个由微软出品的软件,记录了所有的http通讯的debug工具。他可以允许你查看所有的http请求,设置断点,监控进出流量数据等,同时还可以支持几乎所有的浏览器。
官方地址:http://www.fiddlertool.com/fiddler/
在经过简单的安装完成之后,默认fiddler支持ie,firefox等其他浏览器需要手工配置,方法如下:
1.选择:工具->选项,单击网络选项卡,然后点击设置

2.如下图所示,在自动代理配置URL中填入D:/[FIDDLER INSTALL PATH]/Scripts/BrowerPAC.js。*请在fiddler的安装目录下找到BrowerPAC.js文件

 
3.启动浏览器及fiddler之后就可以监控firefox了。其他浏览器也可以类似设置。
如果设置了对firefox的监控,但是却关闭了fiddler,是不能够继续浏览网页。
启动fiddler并监控之后,我们可以看到如下页面:

这时选择rules->performance->simulate modem speeds。再次刷新你的浏览器窗口。ok我们就可以看到模拟低网速条件下页面的反应了。当然,它还有其他很多非常强大的功能。
 
NET LIMITER 2
一个监控软件,可以对整个机器的网络状况进行监控和控制,可以指定某个特定进程的的网络请求,而不局限于浏览器。
官方地址:http://www.netlimiter.com/download.php
但是这个软件的pro版本并不是免费软件。而且它需要在你的机器中安装一个服务。
 
它的使用也很简单,我们只需要找到浏览器进程,然后在如图红框所示的limit上选中既可。
什么时候需要低网速下的检测?
通常我们的项目环境下网速都非常理想,飞快的网速可以掩盖很多问题。但是用户不一样。用户可能是一台老旧的机器,和服务器的连接也很缓慢。
保持用户的可访问性始终是前端开发工程师应该尽力去做到的:

我们需要尽量把重要的内容先展示在用户面前;
在脚本没有加载完成的时候用户任然可以最低限度的得到他所欲获得的,或者给予用户一定的提示;
尽可能快的呈现页面。

这些时候,我们都需要去利用这个工具来让尽可能的模拟用户的处境,设身处地的体验一下用户的感受。这样的页面才是一个有责任心的页面。
如果你做的不够好,那么是以为你靠的不够近。

iframe 在ie 6 下的bug

08月 8th

概要
iframe这个东西让人又爱又恨。有很多好处,比如跨域通讯,一定要这东西。再比如嵌套某些页面,业务需求要这样做,没这个东西还真会提高系统的复杂度
在wui项目中,大量使用了iframe,无意中遇到一个iframe 的bug。
兼容性:
ie 6 only
表现:
iframe在ie 6中载入时候,如果载入页面body高度大于iframe高度,会出现一个横向的滚动条。
原因:
页面宽度等于viewprot的宽度+scroll的宽度。假设iframe宽度是400px,页面宽度是100%,载入页面时,宽度应该是400px;当页面高度不高于iframe高度时候,没有任何问题。但是当页面高度高于iframe高度时,正确的计算应该是400px-scroll宽度。但ie 6的计算任然是400px,由于页面多出来了一个滚动条的宽度,就导致在iframe中出现了横向滚动条。
解决办法
在网上搜索到的解决办法有如下几种:
1) Set the body style of the page that appears within the iframe to: display: inline; (<body style="display: inline"> or use a style sheet or set the style in the header) The reason this works is because it forces the body with to be only as wide as its content.
2) [...]

万恶的haslayout

08月 6th

之前只知道ie的haslayout会对IE的渲染产生影响,却不知道会对javascript也会产生影响。
在一个项目里面,为了让div可以自动适应高度并修复ie 的iframe滚动条bug,通过脚本来控制一个div的高度,但是怎么调脚本都有问题。我崩溃了。本来还以为是自己的逻辑出了问题,逐步排查之后,却发现某个元素的clientHeight,在ie下面是0。原来这个元素没有haslayout。
范例脚本:
<span id=”testHasLayout” style=”padding-top:20px;display:block”>test it</span> <script type=”javascript/text”> var obj=document.getElementById(”testHasLayout”); alert(obj.clientHeight); obj.style.zoom=”1″; alert(obj.clientHeight); </script>

原来如果在IE下,对象没有haslayout属性时,是没有办法通过脚本来获取他的clientHeight属性的。IE6,7均是如此
在这里再次回顾一下这个重要的概念:
默认拥有haslayout的元素:

<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>

能够让元素拥有haslayout的css属性

position: absolute
Refers to its containing block, and that’s where some problems begin.
float: left|right
The float model has a lot of quirks due to some aspects of a layout element.
display: inline-block
Sometimes [...]

忽悠?忽悠的时候想着用户才是双赢

08月 1st

长期一来,国内的门户都有一个做法:那就是放一张很有诱惑的图片,引诱人去点。结果你点击进去之后,发现是某某频道的首页或者list页面,一堆一堆的信息把你给埋在下面,你完全找不到之前吸引你进来的内容。
因为在门户网站呆过,所以深刻明白PV对于门户网站意味着什么。从这一点上我理解这种做法,它是企图吸引用户得到更多的点击。但是站在用户的角度,又反感这样的做法,所以门户网站上面推荐的那些花花绿绿的东西,一般是不敢去点的。
新办法
刚发现sohu现在有了一个新做法,改动不多,却起码想办法去平衡了这两点:

这张图片还不错哦
点一下,然后看看发生了什么?没错,他仍然跳转到了一个新的页面,但是他在页面上做了一个锚点,直接引导用户到了吸引它的地方,同时采用了标红来突出显示,提醒用户:你刚才关注的内容在这里。

和同事交流了一下,大家都认为这是一个好办法,虽然我现在还是要多点一次,但是起码我没有受骗的感觉了。这个良好的感觉会让我更多的、放心的点一下它推荐的内容。不过这种良好的感觉似乎是在矮个中找高个,被恶劣的国内互联网环境给逼的。以前doodoo说过:最初国内互联网发家的那批人,都是耍流氓。当用户已经忍受不了他们的流氓之后,他们开始高举大旗漂白了,凸显之下他们又起来了。莫非中国的网民和中国农民都能忍?人性本质上是一样的。

再看看去年“设计大讲堂”上提到的商业,用户,技术平衡的那个点。我认为商业利益是不能妥协的。但是作为UEDer来说。我们应该尽可能的去寻找好的办法来平衡。不起眼的改动可能就是那个点的存在。成功的可能就是多走了这一小步。

« Previous Entries

Size

Colors