最前端

我的工作,我的生活,点点滴滴...

一款媲美Firebug的Web前端插件


web developer

大家或许不知道有一款和Firebug相媲美的web前端插件—- Web Developer Toolbar,这也是我用的第一个firefox插件,它有很多实用的甚至连Firebug也无法媲美的功能。

以下是十个你可能从未了解过的关于Web Developer Toolbar的强大功能:

  • 1. 辅助线功能——Display Line Guides(Miscellaneous)

    当然,你正在使用 背景网格来设计你的网站。但是,万一你需要去快速地核查在页面上(或者是图形上)一些元素的平面图时,这个非常方便的功能可以让你任意添加许多个人的水平和垂直的指导。

  • 2. 浏览图象信息——View Image Information(Images)

    在Images菜单中,有许多与图片有关的功能。然而,我喜欢“浏览图象信息(View Image Information)选项,以很快的方式去看看一张页面上所有的图片,包括了背景图片,所有的东西都列在一个新的标签上,连同路径、尺寸、以及文件大小。

  • 3. 浏览色彩信息——View Color Information(Miscellaneous)

    我已经数不清有多少次,我需要去查看关于一个页面元素的色彩信息。Colorzilla是我通常所使用的工具,但是,如果要为一个标题找到正确的配色,有时候可能会非常棘手。
    而利用Web Developer Toolbar这一功能就会非常的简单,并且在一个新的标签中,列出了完整的CSS配色(带有样本)。

  • 4. 显示元素信息——Display Element Information(Informaition)

    你是否仍旧突出显示一个页面的元素,然后从文章背景菜单中选择“浏览选择来源(View Selection Source)”,去找出它是如何编码的?
    然后停止,用Ctrl+Shift+F来代替。点击一个元素去看看它的信息(分类/编号、位置、尺寸、等等)。你也可以看到那个元素的来龙去脉,如果你需要为你所采用的风格添加一些额外的特别环节,那真的是非常有用!

  • 5. 浏览页面信息——View Page Information(Information)

    点击这个选项,在标签弹出框窗口中,获取关于你的页面的多种信息。在这里,你可以看到关于你页面的各种信息,以及形式的详细资料、链接信息和详细的图片信息(包括文件大小、尺寸和预览)。
    并且,在Web Developer Toolbar的右边,单击绿色的符号,便可获取此功能。

  • 6. 显示密码——Show Passwords(Forms)

    窗体菜单对任何一个人来说,都是非常有用的一个工具。但是“显示密码(Show Passwords)”选项,可能是一个你从来不知道其存在的功能。

    大部分我都保存到了Firefox的密码管理中,如果我一直都需要去知道这个究竟是什么,只需要点击它,就可以得到这个信息。

  • 7. 嵌入式形式领域——Populate Form Fields(Forms)

    说起窗体,当需要去测试时,这个功能是非常有用的。如果你确实需要收到这样的形式,你可以通过选项菜单(Options)改变默认邮件地址。

  • 8. 屏幕表现——Small Screen Rendering(Miscellaneous)

    想知道你的网站在移动设备上是如何表现出来的?这个选项给了你一个大概的印象,它至少向你展示了你的工具条是否显示在你的主要内容之上。

  • 9. 标出所有未被访问过的链接——Mark All Links Unvisited(Miscellaneous > Visited Links)

    这对某些前提来说,是非常有用的功能。假定你想对你的所有链接在他们的自然状态下做一个屏幕截图,只需快速点击原始页面。当你在运行一个可用性的测试时,它也同样有用,并且,你需要为下一项任务重新安排你的页面。

  • 10. 浏览速度报告——View Speed Report(Tools)

    出于某些原因,你应该点击页面,并且从文章背景菜单中去获得“Tools”子菜单,从而获取“Web Developer”选项。这个功能驱动了Web Site Optimization的 Web Page Analyzer
    这个服务告诉你,在不同连接速度时,如何快速加载你的网页,并且同时提供其他相关页面有价值的信息,包括基于其分析的介绍去加快你的网站的速度(提示:让你的图片更小一点,并且不要使用那么多HTML代码、CSS、以及scripts等等)

附加:编辑HTML(Miscellaneous)
相信我们都知道Web Developer Toolbar所提供的关于CSS可怕的编辑功能。但是你知道吗,你可以用同样的方式来编写HTML代码。
为了网站的发展而利用这一功能,对于打磨网站内容来说,它真的是非常的方便。例如:当你在一个特定的空间里,试着去编辑标题或者一些内容时,它就显得非常的方便。
在Web Developer Toolbar中,这是我最喜欢的功能,尽管它鲜为人知。它还有很多我不没用过,或者不知道怎么用的功能(比如:Enable Auto Completion、Show Window Chrome、Display Object Information),大家好好研究!

别忘了优化jQuery 性能

jquery

现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的.
在twitter上发现了<jQuery Performance Rules>这篇文章, 简单的摘译了一下:

  • 1. 总是从ID选择器开始继承

    在jquery中最快的选择器是ID选择器. 因为它直接来自于Javascript的getElementById()方法.
    复制代码 代码如下:

    <div id="content">
    <form method="post" action="/">
    <h2>Traffic Light</h2>
    <ul id="traffic_light">
    <li><input type="radio" class="on" name="light" value="red" /> Red</li>
    <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
    <li><input type="radio" class="off" name="light" value="green" /> Green</li>
    </ul>
    <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
    </div>

    像这样选择按钮是低效的:
    复制代码 代码如下:

    var traffic_button = $(‘#content .button’);

    用ID直接选择按钮效率更高:
    复制代码 代码如下:

    var traffic_button = $(‘#traffic_button’);

    选择多个元素

    提到多元素选择其实是在说DOM遍历和循环, 这些都是比较慢的东西.为了提高性能, 最好从就近的ID开始继承.
    代码如下:

    var traffic_lights = $(‘#traffic_light input’);

     

  • 2. 在class前使用tag

    第二快的选择器是tag选择器($(‘head’)). 同理,因为它来自原生的getElementsByTagName() 方法.
    代码如下:

    <div id="content">
    <form method="post" action="/">
    <h2>Traffic Light</h2>
    <ul id="traffic_light">
    <li><input type="radio" class="on" name="light" value="red" /> Red</li>
    <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
    <li><input type="radio" class="off" name="light" value="green" /> Green</li>
    </ul>
    <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
    </div>

    总是用一个tag name来限制(修饰)class (并且不要忘记就近的ID):
    代码如下:

    var active_light = $(‘#traffic_light input.on’);

    注意: 在jquery中Class是最慢的选择器. IE浏览器下它会遍历所有DOM节点不管它用在那里.

    不要用用tag name来修饰ID. 下面的例子将会遍历所有的div元素来查找id为’content’的哪一个节点:
    代码如下:

    var content = $(‘div#content’);

    用ID修饰ID也是画蛇添足:
    代码如下:

    var traffic_light = $(‘#content #traffic_light’);

  • 3. 将jquery对象缓存起来

    要养成将jquery对象缓存进变量的习惯.

    永远不要这样做:
    代码如下:

    $(‘#traffic_light input.on).bind(‘click’, function(){…});
    $(‘#traffic_light input.on).css(‘border’, ‘3px dashed yellow’);
    $(‘#traffic_light input.on).css(‘background-color’, ‘orange’);
    $(‘#traffic_light input.on).fadeIn(‘slow’);

    最好先将对象缓存进一个变量然后再操作:
    代码如下:

    var $active_light = $(‘#traffic_light input.on’);
    $active_light.bind(‘click’, function(){…});
    $active_light.css(‘border’, ‘3px dashed yellow’);
    $active_light.css(‘background-color’, ‘orange’);
    $active_light.fadeIn(‘slow’);

    为了记住我们本地变量是jquery的封装, 通常用一个$作为变量前缀. 记住,永远不要让相同的选择器在你的代码里出现多次.

    缓存jquery结果,备用

    如果你打算将jquery结果对象用在程序的其它部分,或者你的function会多次执行, 那么就将他们缓存到一个全局变量中.

    定义一个全局容器来存放jquery结果, 我们就可以在其它函数引用它们:
    代码如下:

    // 在全局范围定义一个对象 (例如: window对象)
    window.$my =
    {
    // 初始化所有可能会不止一次要使用的查询
    head : $(‘head’),
    traffic_light : $(‘#traffic_light’),
    traffic_button : $(‘#traffic_button’)
    };

    function do_something()
    {
    // 现在你可以引用存储的结果并操作它们
    var script = document.createElement(‘script’);
    $my.head.append(script);

    // 当你在函数内部操作是, 可以继续将查询存入全局对象中去.
    $my.cool_results = $(‘#some_ul li’);
    $my.other_results = $(‘#some_table td’);

    // 将全局函数作为一个普通的jquery对象去使用.
    $my.other_results.css(‘border-color’, ‘red’);
    $my.traffic_light.css(‘border-color’, ‘green’);
    }

  • 4. 掌握强大的链式操作

    上面的例子也可以写成这样:
    代码如下:

    var $active_light = $(‘#traffic_light input.on’);$active_light.bind(‘click’, function(){…})
    .css(‘border’, ‘3px dashed yellow’)
    .css(‘background-color’, ‘orange’)
    .fadeIn(‘slow’);

    这样可以写更少的代码, 让我们的js更轻量.

  • 5. 使用子查询

    jQuery 允许我们对一个已包装的对象使用附加的选择器操作. 因为我们已经在保存了一个父级对象在变量里, 这样大大提高对其子元素的操作:
    代码如下:

    <div id="content">
    <form method="post" action="/">
    <h2>Traffic Light</h2>
    <ul id="traffic_light">
    <li><input type="radio" class="on" name="light" value="red" /> Red</li>
    <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
    <li><input type="radio" class="off" name="light" value="green" /> Green</li>
    </ul>
    <input class="button" id="traffic_button" type="submit" value="Go" />
    </form>
    </div>

    例如, 我们可以用子查询的方法来抓取到亮或不亮的灯, 并缓存起来以备后续操作.
    代码如下:

    var $traffic_light = $(‘#traffic_light’),
    $active_light = $traffic_light.find(‘input.on’),
    $inactive_lights = $traffic_light.find(‘input.off’);

    提示: 你可以用逗号分隔的方法一次声明多个局部变量–节省字节数

  • 6. 对直接的DOM操作进行限制

    这里的基本思想是在内存中建立你确实想要的东西,然后更新DOM 。这并不是一个jQuery最佳实践,但必须进行有效的JavaScript操作 。直接的DOM操作速度很慢。

    例如,你想动态的创建一组列表元素, 千万不要这么做:
    代码如下:

    var top_100_list = […], // 假设这里是100个独一无二的字符串
    $mylist = $(‘#mylist’); // jQuery 选择到 <ul> 元素for (var i=0, l=top_100_list.length; i<l; i++)
    {
    $mylist.append(‘<li>’ + top_100_list[i] + ‘</li>’);
    }

    我们应该将整套元素字符串在插入进dom中之前全部创建好:
    代码如下:

    var top_100_list = […],
    $mylist = $(‘#mylist’),
    top_100_li = ""; // 这个变量将用来存储我们的列表元素for (var i=0, l=top_100_list.length; i<l; i++)
    {
    top_100_li += ‘<li>’ + top_100_list[i] + ‘</li>';
    }
    $mylist.html(top_100_li);

    我们在插入之前将多个元素包裹进一个单独的父级节点会更快:
    代码如下:

    var top_100_list = […],
    $mylist = $(‘#mylist’),
    top_100_ul = ‘<ul id="#mylist">';for (var i=0, l=top_100_list.length; i<l; i++)
    {
    top_100_ul += ‘<li>’ + top_100_list[i] + ‘</li>';
    }
    top_100_ul += ‘</ul>'; //关闭无序列表
    $mylist.replaceWith(top_100_ul);

    如果你做了以上几条还是担心有性能问题,那么:
    # 试试jquery的 clone() 方法, 它会创建一个节点树的副本, 它允许以"离线"的方式进行dom操作, 当你操作完成后再将其放回到节点树里.
    # 使用 DOM DocumentFragments. 正如jQuery作者所言, 它的性能要明显优于直接的dom操作.

  • 7. 冒泡

    除非在特殊情况下, 否则每一个js事件(例如:click, mouseover, 等.)都会冒泡到父级节点. 当我们需要给多个元素调用同个函数时这点会很有用.

    代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次, 并且可以计算出哪个节点触发了事件.

    例如, 我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class

    像这样绑定事件是低效的:
    代码如下:

    $(‘#entryform input).bind(‘focus’, function(){
    $(this).addClass(‘selected’);
    }).bind(‘blur’, function(){
    $(this).removeClass(‘selected’);
    });

    我们需要在父级监听获取焦点和失去焦点的事件:
    代码如下:

    $(‘#entryform’).bind(‘focus’, function(e){
    var cell = $(e.target); // e.target grabs the node that triggered the event.
    cell.addClass(‘selected’);
    }).bind(‘blur’, function(e){
    var cell = $(e.target);
    cell.removeClass(‘selected’);
    });

    父级元素扮演了一个调度员的角色, 它可以基于目标元素绑定事件. 如果你发现你给很多元素绑定了同一个事件监听, 那么你肯定哪里做错了.

  • 8. 消除无效查询

    尽管jquery可以很优雅的处理没有匹配元素的情况, 但它还是需要花费时间去寻找. 如果你整站只有一个全局js, 那么极有可能把所有的jquery函数塞进$(document)ready(function(){//所有你引以为傲的代码})里.
    只运行在页面里用到的函数. 大多数有效的方法就是使用行内初始化函数, 这样你的模板就能准确的控制何时何处该执行js.
    例如, 你的"文章"页面模板, 你可能会引用如下的代码在body结束处:
    代码如下:

    <script type="text/javascript>
    mylib.article.init();
    </script>
    </body>

    如果你的页面模板包含一些多变的模块可能不会出现在页面中, 或者为了视觉呈现的原因你需要它们能够快速加载, 你可以将初始化函数紧跟在模块之后.
    代码如下:

    <ul id="traffic_light">
    <li><input type="radio" class="on" name="light" value="red" /> Red</li>
    <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
    <li><input type="radio" class="off" name="light" value="green" /> Green</li>
    </ul>
    <script type="text/javascript>
    mylib.traffic_light.init();
    </script>

    你的全局js库可能会是这样子的:
    代码如下:

    var mylib =
    {
    article_page :
    {
    init : function()
    {
    // Article 特有的jQuery函数.
    }
    },
    traffic_light :
    {
    init : function()
    {
    // Traffic light 特有的jQuery函数.
    }
    }
    }

  • 9. 推迟到 $(window).load

    jquery对于开发者来说有一个很诱人的东西, 可以把任何东西挂到$(document).ready下冒充事件. 在大多数例子中你都会发现这样的情况.

    尽管$(document).rady 确实很有用, 它可以在页面渲染时,其它元素还没下载完成就执行. 如果你发现你的页面一直是载入中的状态, 很有可能就是$(document).ready函数引起的.

    你可以通过将jquery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率. 它会在所有的html(包括<iframe>)被下载完成后执行.
    代码如下:

    $(window).load(function(){
    // 页面完全载入后才初始化的jQuery函数.
    });

    多余的功能例如拖放, 视觉特效和动画, 预载入隐藏图像,等等. 都是适合这种技术的场合.

  • 10. 压缩js

    推荐一个js在线压缩地址:
    http://dean.edwards.name/packer/
    http://www.jb51.net/tools/packer.htm

  • 11. 全面掌握jquery库

    知己知彼, 百战百胜. 只有更深入的了解jQuery才能更灵活的使用它. 这里提供一个jQuery的速查手册, 可以打印出来随身携带. 要是有能力将jQuery源码通读一遍那就更好了.

文来自:jQuery Performance Rules ; 译文来自:Rlog.cn . 若转载请注明出处, 谢谢
详细出处参考:http://www.jb51.net/article/22221.htm

半透明背景生成器

半透明背景生成器

(如:30%)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

代码:

;(function(){
    var byId = function(id){
        return document.getElementById(id);
    };
    var dom = function(){
 
    };
    var bgcolor = byId('ID_Bgcolor');
    var per = byId('ID_Per');
    var sub = byId('ID_Sub');
    var preview = byId('ID_Preview');
    var code = byId('ID_Code');
    var toColorRgb = function(str){
        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        var sColor = str.toLowerCase();
        if(sColor && reg.test(sColor)){
            if(sColor.length === 4){
                var sColorNew = "#";
                for(var i=1; i<4; i+=1){
                    sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
                }
                sColor = sColorNew;
            }
            //处理六位的颜色值
            var sColorChange = [];
            for(var i=1; i<7; i+=2){
                sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
            }
            return sColorChange.join(",");
        }else{
            return sColor;
        }
    };
    var getStyle = function(bgcolor,per){
        per = per/100;
        var _bgcolor = bgcolor.replace('#','');
        var ffbg = toColorRgb(bgcolor);
        var iebg = Math.floor(per * 255).toString(16)+_bgcolor;
        var css = ".rgba{background:rgba("+ffbg+", "+per+"); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#"+iebg+"', EndColorStr='#"+iebg+"');*zoom:1;} :root .rgba{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00"+_bgcolor+"', EndColorStr='#00"+_bgcolor+"'); }";
        return css;
    };
    var appendStyle = function(css,id) {
        var head = document.getElementsByTagName('head')[0];
        var old = byId(id);
        if(old){
            head.removeChild(old);
        }
        var style = document.createElement('style');
        style.type = 'text/css';
        style.id = id;
        try {
            style.appendChild(document.createTextNode(css));
        } catch (e) {
            if (style.styleSheet) {
                try {
                    oldCss = style.styleSheet.cssText;
                } catch( e) {
                    oldCss = '';
                }
                style.styleSheet.cssText = oldCss + css;
            } else {}
        }
        head.appendChild(style);
    };
    var show = function(){
        var perVal = per.value;
        perVal = Math.max(0,perVal);
        perVal = Math.min(100,perVal);
        var style = getStyle(bgcolor.value,perVal);
        var code = style.replace('.rgba','.your-css-clz');
        appendStyle(style,'rgbastyle');
        code.innerHTML = '<pr'+'e>'+code+'</p'+'re>';
    };
    show();
    bgcolor.onchange = function(){
        show();
    };
    per.onchange = function(){
        show();
    };
})();