hello,JavaScript | 关注学习前端技术,前端开发,前端,JavaScript,css,html,js,前台,ued,视觉设计(这就是seo?)

Archive for 一月 2010

一/10

30

Google将抛弃IE6用户

据国外媒体报道,Google显然已经受够了IE6浏览器。Google公司周五宣布,从3月1日起,Google文档和Google主站将终止对IE6浏览器的支持

Google官方博客表示:“许多其他公司已经停止支持IE6这类旧式浏览器。如果IE用户希望继续使用这些产品,那么他们就必须至少升级到IE7。”

在最近针对Google和美国公司的攻击中,IE6漏洞被攻击者广为使用。1月22日,微软发布紧急安全补丁,修复了IE中存在的高危漏洞。

据网络调研机构StatCounter统计,IE6的安全性要低于微软最新发布的IE8,尽管IE6市场份额不断下滑,但仍有13.5%的网民使用IE6。

Google站点的浏览器支持标准是:Firefox 3.0或更高版本,Chrome 4.0或更高版本,以及Safari 3.0或更高版本。Google公司表示:“从3月1日开始,Google文档和Google主站的主要功能将无法支持旧式浏览器。”

博主PS:各大公司应该联合起来抵制ie6,尤其是国内的公司

· ·

一/10

28

淘宝菊花盛开 分外妖娆(转)

54564655434

这篇文章多少有点扯淡的意味,不过如果有一天你在淘宝买东西的时候,发现满地菊花的时候千万不要惊诧。

去年12月25日,淘宝发布了新的《成人类目商品新发布标准》,明确表示“成人类目器具类商品极其外包装对于敏感部位必须遮盖”,事实上淘宝此举已经算是走在了很多部门的前面,因为我们可以看到生活中的很多成人用品店没有这样的做法,直接赤裸裸的展示,这是淘宝的进步。

不过是不是可以在浏览成人用品的时候给出准入提示,类似网吧门口的“未成年人禁止入内”,同时禁止支付宝认证年龄低于18岁的未成年人浏览。估摸着啥时候成人用品店门口也得挂这么一面牌子,不知道会不会进行实名认证。

让人惊诧的是,淘宝在示例中使用了菊花对敏感部分进行遮挡,一时间网上参与讨论者众多,大家纷纷讨论未来淘宝是否可能由B2C交易平台变成菊花台,以及淘宝作出这一指示背后的深刻含义。

菊花,是一种花。

同时在成年人的讨论中,它也被用来形容身体某个孔状部位,据说菊花盛开那也是千年难得一见的盛景,也就是俗称的爆菊花。周董同学深情款款演绎的《菊花台》一歌,更是将菊花一词的普及带向了一个新的高潮。

所以,用菊花是抬举还是玷污,这是一个问题。不过淘宝帖子里面那张菊花盛开的画面,仍然让人久久回味、无法忘怀,堪称千古难得一见的珍品。

· ·

一/10

11

NetBeans的文件比较功能

NetBeans是一个很注重易用性的IDE,他的界面简洁而且易用,插件风格统一,下面就来介绍一个很实用的功能:

文件对比

文件对比可以比对两个文件的不同,这在多人协作中很重要,例如:我是前端,我做好了页面demo之后,要交给后台开发,可是我后来发现一些问题,需要修改这个页面,这个时候后台如果使用文件对比就可以很清晰地看到我都修改了哪些地方了,也免得我挨个给开发指点修改哪里了.

在NetBeans里,可以通过下图的方法打开文件对比

2010-01-11 14 39 04

弹出对话框,选择一个要对比的文件,之后会出现一个漂亮的两栏界面:

2010-01-11 14 43 42

在上面的中间位置,有个1/11,说明这两个文件有11个不同的位置,现在显示在屏幕上的是第一个.

现在拖动右边的滚动条,可以查看三种比较出来的不同

(1)粉红色,左边比右边多出的

2010-01-11 14 54 57

(2)浅绿色,右边比左边多出来的

2010-01-11 14 56 07

(3)浅蓝色,左右一样多,但是内容不同的

2010-01-11 14 57 49

还可以导出差异,生成报告等,其他功能自己去探索吧,反正都是中文版

·

一/10

10

“模板+数据->构建->视图”模式让代码更清晰易改

前奏

MVC模式在js里已经很久之前就被实现了,但是这种自动化的模式是否适合js目前的性能就值得讨论了,mvc在脚本语言中的发扬光大我嚼的是ruby on rails的功劳,所以后来很多mvc框架都跟rails非常相似,包括php中我了解过的几个框架和几个js的mvc框架,都是强调一个自动化,习惯优于配置,但是这样造成了初始化的时候耗费了大量性能资源,运行时也要随时处理分配三层代码,性能浪费严重.

前几天在懒懒交流会上听玉伯讲了一个重构之美,说到JavaScript代码就应该写的像JavaScript,而不是写的跟java一样,或者像ruby一样,其中有一个原因我想就是JavaScript原生的写法省掉了一些为了转换写法做出的中间处理,而且可以充分利用js的一些特性,所以写js没必要写的多炫,没必要想jQuery一样N句代码可以写成一句话,这中间jQuery要做一些解析,这些解析就是性能啊.况且这种写法会造成重构麻烦,和其他的js难以结合,而且时间长了,甚至忘了js到底应该怎么写了,会jQuery的人不一定会js.

问题来了

http://mission.jianghu.taobao.com/umissionList.htm?tracelog=MISSION004

2010-01-10 14 07 33

这个是淘江湖中的一个任务页面,里面有个弹出窗口,现在线上的代码不是我写的,我只是拿来做个例子,当然是反面的例子.这个弹出窗口是可以重用的,也就是每次点击不同的任务都会重新在js里构造这个弹出窗口的内容.

我透露下源代码里构造html的js函数:

//生成任务的HTML
    function	taskHtml(data_task,staticServer){

        var contentHtml="";
        contentHtml+='
    '; contentHtml+='
  • '; contentHtml+='
  • '+data_task.missionName+'
  • '; contentHtml+='
  • '+data_task.missionDetail+'
  • '; contentHtml+='
  • 任务目标:'+data_task.missionStep+'
  • '; if(data_task.missionInfo){ contentHtml+='
  • '+data_task.missionInfo+'
  • '; } contentHtml+='
任务奖励淘金币:'+data_task.missionScore+'继续完成任务
'; contentHtml+='
'; return contentHtml; }

这么简单的一个弹出层被写成这样,可能是时间太紧作者来不及思考,直接构造了这个函数,可是我前几天接到任务说要改掉这个弹出框,我把html重新改了,然后进到这个函数,我的天啊,这叫我怎么改啊,乱七八糟一大团,而且如果以后还有一个人想改这里的话,又是一个乱七八糟,说不定还会怨我写的不好.
其实前几天恰好我想了一个好办法来解决这个问题,这个办法很简单,很明了,很直观,很容易重构.

如果是我,我会这样做

我前几天要做一个网页,他上面的内容都是js根据后台数据自动生成的,也就是你看这个页面的源代码的时候,除了js和一个外套你什么都看不到,而这个网页里面的元素很多都是重复的,对于这样的需求我首先想到的是”模板”这个词,对于大量重复的视图,自然而然想到要用模板来解决这种事情了.那好我们就开始动工吧.

需求:我要在一个页面里面构造100个内容不同但是框架相同的栏目,他的html如下:



哦,看起来好简单,如果你想到了用字符串来串接html和数据的话,欧耶,你写出来的代码就会是上面那样的,一团糟,不容易修改,而且字符串的串接性能堪忧,虽然我即将使用模板来实现这个东西,但是我嚼的模板的解析速度比字符串的串接速度还要快,我只用了两次正则而已.

这么做:我把模板和数据都预先定义好,然后定义一个通用函数,这个函数可以根据数据和模板构建html,而且它是通用的,任何html都可以用他来构建,只需要数据和模板是配套的.

这里的数据要是标准的才行,我把它定义成这样:

/***************************主页项目的js------数据部分**********************************/
            /**
             *下面的数据结构部分,所有的数据对象都必须遵从此结构,便于后面的自动化处理
             */
            /**
             * 主页项目的数据
             */
            M.ItemData=function(){}
            M.ItemData.prototype={
                data:{
                    username:"sffffffffffffffffffffffffffffffffffffffffffffs",
                    content:"ss",
                    time:"ss",
                    yes_num:0,
                    no_num:0
                },
                /**
                 *转换字符串到对象
                 */
                transO:function(str){

                }
            }

transO函数是为了和ajax交互的函数,将data构造成html后缀形式,和本文无关,data里保存了这个模板中要用到的所有数据,注意书写顺序不能改变.
有了数据,下一步就是设定一个模板了,可以将模板定义成一个字符串放在js中,也可以作为一个display:none的元素放在html里,之后用innerHTML读出来
我是放在html里的,模板如下:


其中的”$!data”就是模板参数了,之后通过一个函数我们将把数据和模板混合在一起生成一个完整的html,然后inner到要inner的地方就ok了.

重点函数:把模板和数据混合起来

M.ViewBuilder=function(){
                /**
                 *这是一个视图构建类,传进一个模板字符串和数据结构,将其构造成html
                 */
                return{
                    /**
                     *构造函数
                     *param s 数据结构,必须符合一定的规则
                     *param tpl_id 存放模板的html元素
                     */
                    build:function(s,tpl_id){
                        var s=s;
                        if(s==null||tpl_id==null){
                            alert("ViewBuilder->build()的参数不完整")
                        }else if(s.data==null){
                            alert("ViewBuilder->build()的参数不是指定的数据结构吧")
                        }
                        //获取到模板字符串
                        var tpl=document.getElementById(tpl_id),tpl_str=tpl.innerHTML,reg_str="",count=1,replace_txt="";
                        //根据数据构造正则字符串
                        for(var data1 in s.data){
                            reg_str+="([\\s\\S]*?)\\$\\!"+data1+"";
                            count++
                        }
                        reg_str+="([\\s\\S]*)"
                        //构造完毕,生成正则字符串
                        var reg=new RegExp(reg_str);
                        //在模板字符串里执行这个正则
                        reg.exec(tpl_str)
                        count=1
                        tpl_str=""
                        //根据匹配的数据重新构造html
                        for(var data in s.data){
                            tpl_str+=RegExp["$"+count]+s.data[data]
                            count++
                        }
                        tpl_str+=RegExp["$"+count]
                        //返回html结构的字符串,ok
                        return tpl_str

                    }
                }
            }()

解释都在注释中,只是执行了一次正则,而不是循环执行的,那样会影响效率
这样我们就可以让模板变得清晰了,而且如果要修改结构只需要修改模板即可,模板跟平常的html没有差异,修改起来当然简单明了,而且这个构造函数是可重用的,在其他数据和模板中可以用,例如:我可以再定义一个投票的数据结构:

             /**
             * 投票的数据
             */
            M.VoteData=function(){}
            M.VoteData.prototype={
                data:{
                    id:0,//当前投票项目的id(数据库中的id)
                    yesorno:1//投的是yes就是1,no就是0
                },
                /**
                 * 根据数据构造请求字符串
                 */
                transS:function(){
                    return "id="+this.id+"&yesorno="+this.yesorno;
                }
            }

只要数据结构符合标准和顺序,那就没有问题,好了,本文到此为止

· · · · ·

一/10

9

2009年重新设计过的著名的Logo

Logo设计的好坏,关系着一个企业如何树立形象的问题。Logo设计本身就是一个困难的课题,有了著名的Logo,将它重新设计就是一项更加挑战的工作。如果处理不当,他会带来怎样的后果?文中列出了2009年重新设计过的著名Logo,在这里不评判他们的好坏,只是列在这里,供大家来参考。

1、Telcom

image

2、Play Station 3

image

3、Sunny Delight

image

4、Lays

image

5、Sony Ericsson

image

6、Yale

image

7、Sprite

image

8、Segd

image

9、Pfizer

image

10、Opera

image

11、OMCA

image

12、MSN

image

13、Nicklodeon

image

14、Movistar

image

15、Meiji

image

16、Kraft Foods

image

17、Doctor WHO

image

18、Jack in the box

image

19、France

(全文…)

一/10

8

别人不支持而我支持的就能叫做css hack么?

什么能叫做css hack呢?
ie6的_.ie6,ie7的*,ie8的\0这些都是很出名的hack,他们之所以称得上是hack是有理由的:
(1)他们大多是浏览器的bug造成的,或者微软故意选取了一些蹩脚的方式来做hack,而且保证这些hack不会被别人使用
(2)浏览器不会修复这些hack,如果说一个方法,暂时可以用作hack,而有一天微软修复了ie6,让它不能辨认_,那么这个”_”就不能叫做hack了
(3)我支持的别人不支持的不能轻易用作hack

刚才要用到chrome和Safari的hack,我在网上搜了一下,大多数都是说将伪类”nth-of-type(1)”作为hack,我晕啊,这是css的标准属性啊,只是有的浏览器没实现而已,而且趋势是最终这个属性会被其他浏览器实现,这种东西也能做hack?
前一阵,这个hack可以用来区分chrome和Firefox,而现在Firefox也实现了这个属性,如果你以前做过100个网站,里面用了100处这个hack,欧耶,那你有事情做了,重新重构吧,累死人不偿命啊.

其他浏览器有可能实现,或者是浏览器超前实现的不能用作hack,hack必须是不会改变的,不过对于chrome来说我还真不知道该用什么hack比较安全,现在奉上chrome的hack.2010年1月份目前可用.
@media screen and (-webkit-min-device-pixel-ratio:0) {
body { background-color: blue; }
}
此hack在被某些压缩工具压缩后会失效

· · ·

一/10

8

省市区联动菜单到底应该怎么设计?(非js讨论)

为什么写这篇文章

这几天被一个省市菜单纠结了,测试给我提了N多bug,都是关于省市联动菜单的,大家就省市菜单到底应该具有何种行为持有各自的异议,特别是我,跟大家观点都不同,当然也有不少常识性的行为被我忽略了,下面是我这几天的bug列表,其中大部分都是关于这个联动的,当然js上联动实现起来也不难,这里讨论的不是技术细节,不讨论如何实现,只讨论联动到底应该怎样才能让用户感觉自己在使用一个自然而然的产品.
2010-01-08 16 15 53
我这个联动组件是在淘宝里使用的比较普遍的一个联动,不知道为什么问题还这么多,特别是我刚拿过来的时候,可用性极差.样式如下:

2010-01-08 16 26 03

先不说这个组件有什么不好的,一个联动组件至少应该有这些基本的行为才能符合人的习惯:

(1),让用户一眼就可以看出这是一个做什么的组件.

(2),让用户在很短的时间内就可以熟练操作这个组件.

(3),可以保证用户的任何选择都不会引起数据的逻辑错误.

这是基本的三条,上面这个组件首先不符合第一条,不要因为我们一看就知道这是一个联动组件就行了,要把自己想象成一个从来没见过这种组件的电脑白痴,他第一次看到这个组件会认出来么,如果我是个电脑白痴,我会不会试着去点第二个和第三个下拉列表呢?然后才知道第一个可以点?看到的第一眼,如果我不做任何操作,我会知道这是干什么的么?

显然上面这个控件做不到这一点,他只是在旁边做了一个文字指示,但是用户仍然会困惑,特别是有三个下拉框,应该先点击哪个呢?会出现什么结果呢?

下面是点击第一个下拉菜单后的样式

2010-01-08 16 39 26

选中省后,市出现了,但是第一个元素是空的,仍然没有指示下一步该做什么,其实世界上有很多人对此会手足无措,即使大部分人知道应该去点第二个,下拉后才会看到市的选项.

我们来做个改变吧

这样的组件不知道为什么被其他项目采用了,反正我们这个项目里,大家对这个组件很有意见,大家都踊跃提出意见,造成我的bug数目急剧上升,改了又改,大家还是不满意.

总结下吧,应该让联动菜单有哪些行为呢?

(1)需要在三个联动菜单中显示三个默认值,来引导用户,让他看一眼就知道这里是让你选省市区的,开始我们定的是显示三个”请选择”,后来觉得还是不够明了,分别改成了”省份”,”城市”,”区(县)”,这样用户看到这个组件的时候至少知道这里原来是用来选省市区的呀.我们把空白替换成了省份,城市和区(县)

2010-01-08 16 49 19

(2)选择省后,城市下拉里填充元素,但是仍然显示一个城市给用户,而不是设置默认的市,这是为什么呢?有人说默认的省市区可以让用户更省力,可是上面说过了第三条我们要保证数据的准确性,不能设置任何默认值,以便获取尽量真实的用户地址,如果设置了默认的地址,用户直接点确定,当然这里是搜索,不需要太准备的数据,但是如果是在设置的地方,一定不能设置默认值

2010-01-08 16 50 57
(全文…)

· · ·

一/10

5

公安部加强监控微博QQ群 应对社会矛盾

武汉晚报1月6日报道 日前,2009年度全国政法工作电视电话会议在北京京西宾馆召开。此次会议一改过去的惯常做法,利用3个小时的时间,采取电视电话会议形式召开全国政法工作会议,这在历史上是第一次。同时,中央政法各单位不再分系统另行召开年度工作会议。特别值得注意的是,各省、市、县党委和政府主要负责同志都参加了此次电视电话会议。

近年群体性事件接连发生

会议指出,面对形势的深刻变化,政法工作还存在诸多不适应。因此,下一阶段,全国政法机关将紧紧抓住影响社会和谐稳定的源头性、根本性、基础性问题,深入推进社会矛盾化解、社会管理创新、公正廉洁执法三项重点工作。

根据中央要求,化解社会矛盾,关键在于抓源头,清积案,建机制,强基层,努力化解老矛盾,有效预防新矛盾,进一步形成依法有序表达诉求、及时有效解决社会问题的环境。

从近年来高位运行的信访总量、接连发生的群体性事件中不难看出,这些信访和群体性事件背后反映的大多是因利益诉求而引起的人民内部矛盾,是改革发展过程中的问题。

有关专家指出, 群体性事件、个人极端事件是矛盾问题堆积、激化的结果。中央已经明确要求,进一步集中力量,打一场排查化解矛盾的攻坚战,努力化解老矛盾,有效预防新矛盾,更加注重机制建设。

一些新媒体带来负面作用

进入新的发展阶段,我国社会事业建设与经济发展不协调的问题日益凸显,特别是社会管理仍存不少薄弱环节。反映到高层的信息显示,近年来一些城中村、城乡接合部成为治安乱点,一些特殊人群成为违法犯罪的主体,一些新媒体为有害信息的传播和不良舆论导向提供了平台。所有这些,使加强社会管理工作面临着前所未有的严峻挑战。

针对社会管理的薄弱环节,中央明确要求,应下大力气尽快解决一些重点问题。据悉,根据中央要求,法院、检察院、公安、司法各单位也已展开具体部署,落实中央要求。

在参与社会管理方面,政法各单位也部署了一系列措施。例如,公安部提出,将有效整合各种资源,加强网上管控,将网警力量向县级公安机关延伸,将网上巡控触角向QQ群、微博客等管理薄弱空间延伸,提高网上发现、侦查、控制和处置能力,严防形成隐蔽性犯罪组织

· · ·

Theme Design by devolux.nh2.me