hxl 发布于 07月23, 2018

你一定是闲得蛋疼才重构的吧

随着“发布”进度条走到100%,重构的代码终于上线了。我露出了老母亲般的围笑……

最近看了一篇文章,叫《史上最烂的开发项目长啥样:苦撑12年,600多万行代码》,讲的是法国的一个软件项目,因为各种奇葩的原因,导致代码质量惨不忍睹,项目多年无法交付,最终还有公司领导入狱。里面有一些细节让人哭笑不得:一个右键响应事件需要花45分钟;读取700MB的数据,需要花7天时间。足见这个软件的性能有多糟心。

如果让笔者来接手这“坨”代码,内心早就飘过无数个敏感词。其实,笔者自己也维护着一套陈酿了将近7年的代码,随着后辈的添油加醋……哦不,添砖加瓦,功能逻辑日益复杂,代码也变得臃肿,维护起来步履维艰,性能也不尽如人意。终于有一天,我听见了内心的魔鬼在呼唤:“重构吧~~”

重构是一件磨人的事情,轻易使不得。好在兄弟们齐心协力,各方资源也配合到位。我们小步迭代了大半年,最后一鼓作气,终于完成了。今天跟大家分享一下这次重构的经验和收益。

挑战

此次重构的对象是一个大型单页应用。它实现了云端文件管理功能,共有10个路由页面,涉及文件上传、音视频播放、图片预览、套餐购买等几十个功能。前端使用QWrap、jQuery、RequireJS搭建,HTML使用PHP模板引擎Smarty编写。

阅读全文 »

hxl 发布于 06月12, 2018

同学,W3C了解一下?

虚拟人物A:“同学,W3C了解一下?”

我:“嗷,是那个Web标准化组织吗?这个组织里的人每天都做什么?平时写不写bug呀?”

你第一次看到W3C这个词的时候,内心是不是秒演上面这段戏?别慌,我们都一样~

直到4月份一个瘦瘦高高的小哥哥来访我数字公司,我才了解这个“神秘”的组织。这个小哥哥叫薛富侨,是W3C中国的北航总部团队成员。他的演讲解答了我心中的很多疑惑,并激发了我加入W3C工作组的兴趣。一周前小编加入Web性能工作组。想了解小编如何参加W3C工作组可以直接跳到最后一节查看~

阅读全文 »

hxl 发布于 03月20, 2015

[译]神马是AMD, CommonJS, UMD?

原文: What is AMD CommonJS and UMD

简介

最近几年,我们可以选择的Javascript组件的生态系统一直在稳步增长。虽然陡增的选择范围是极好的,但当组件混合匹配使用时就会出现很尴尬的局面。开发新手们会很快发现不是所有组件都能彼此“和平相处”。

为了解决这个问题,两种竞争关系的模块规范AMD和CommonJS问世了,它们允许开发者遵照一种约定的沙箱化和模块化的方式来写代码,这样就能避免“污染生态系统”。

阅读全文 »

hxl 发布于 01月07, 2013

IE6下特殊selector规则的表现

在IE6下,.a.x这样的selector,只会识别.x(也就是第二个className)。如果这样写.a.x{background: red;} .b.x{background:blue;}会发现:即使.a和.b指的是两个不同的元素,最后这两个元素的背景色都会是blue。 代码如下:

<style type="text/css">
    div{
        height: 50px;
        border: 1px solid #333;
    }
    .red.box{
        background: red;
        height: 100px;
    }
    .blue.box{
        background: blue;
        width: 200px;
    }
    .green.box{
        background: green;
        border: 3px dashed green;
    }
</style>
<script type="text/javascript" src="http://s0.qhimg.com/lib/qwrap/1141.js"></script>
<script type="text/javascript">
function changeCls(cls){
    W('div').removeClass('red').removeClass('blue').removeClass('green').addClass(cls);
}
</script>

<div id="box" class="box"></div>
<button onclick="changeCls('red')">red</button>
<button onclick="changeCls('blue')">blue</button>
<button onclick="changeCls('green')">green</button>

结果: 在chrome下,点击三个按钮,分别出现对应的样式。 但是在IE6下,无论点击哪个按钮,div的样式不变,符合的样式规则都是:

height: 100px; width: 200px; background: green; border: 3px dashed green;

注:IE6下有绿白相间的边框是因为CSS2指出背景只延伸到内边距,而不是边框。

IE6下的样式

IE6下的样式 运行示例: ie6

在IE6下,#a.x{background:red;} #a.y{background:blue;} #a.z{background:green;}最终的结果是:只有.red的元素的背景色会是red。而只有.green.blue的元素没有背景色。只有第一条规则生效,后两条规则无效。 代码如下:

<style type="text/css">
    div{
        height: 50px;
        border: 1px solid #333;
    }
    .red#box{
        background: red;
        height: 100px;
    }
    .blue#box{
        background: blue;
        width: 200px;
    }
    .green#box{
        background: green;
        border: 3px dashed green;
    }
    </style>
        <script type="text/javascript" src="http://s0.qhimg.com/lib/qwrap/1141.js"></script>
    <script type="text/javascript">
    function changeCls(cls){
        W('div').removeClass('red').removeClass('blue').removeClass('green').addClass(cls);
    }
    </script>

<div id="box"></div>
<button onclick="changeCls('red')">red</button>
<button onclick="changeCls('blue')">blue</button>
<button onclick="changeCls('green')">green</button>

结果: 在chrome下,点击对应的按钮就会有对应规则的样式。 但是在IE6下,只有点击red按钮,才会呈现.red#box的样式,点击其它按钮,只div的样式。

运行示例: ie6

阅读全文 »