专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

实践

  • 在VIM里 调用多种浏览器 预览html php 等文件

    / 分类: 工具,实践 / 25 Comments

    最近这段时间睡眠严重不足,脑袋发晕的时候就要放送下,so改善vim。产生个想法:把自己喜欢的editplus的功能都搞到vim上面来。这个就是其中之一:在浏览器中预览当前文件。有时间的话,可能要写点从editplus转型到VIM的东西。

    优点1:
    囊括了主要的浏览器:chrome、firefox、oprea、ie、ietester(随自己喜欢可以增加更多,比如safari),浏览器的简称:cr、ff、op、ie、ie6、ie7、ie8、ie9、iea,简称、路径以键值对方式都保存到browsers中。
    上面的简称大部分人应该都明白了,ie就是系统默认的ie,最后一个iea是在ietester中使用所有版本的ie同时预览(IE5.5-IE9)。

    IETester 的Arguments可以见 : http://www.my-debugbar.com/wiki/IETester/CommandLineArguments

    优点2:
    本地文件自动以file://开头或http://开头的两种方式预览。如果文件在htdocs就用http方式打开,否则用file方式。
    file://开头的地址预览html一般没问题,但是预览php或aspx等就显得苍白无力了。这里可以设置一个htdocs/wwwroot的文件夹地址,然后预览的时候匹配文件是否在这个文件夹内(支持子目录),如果在就用http://方式打开,否则就用file://方式。

    无论前端开发者或者程序员都及其适合。自夸完毕,下面说下使用:
    在_vimrc中加入下面的代码,然后按F4+cr - 在chrome预览,F4+ff  - 在firefox下预览……。方式就是F4+浏览器简称(应该比用F4+1234的数字形式便于记忆)。当然,这个完全可以自己diy的。

    下面fuc里面的浏览器地址需要自己修改,我的文件夹目录和你的可能是有不同的。还有htdocs文件夹、本地的预览的端口号,我使用的是8090.

    " 在浏览器预览 for win32
    function! ViewInBrowser(name)
        let file = expand("%:p")
        exec ":update " . file
        let l:browsers = {
            \"cr":"D:/WebDevelopment/Browser/Chrome/Chrome.exe",
            \"ff":"D:/WebDevelopment/Browser/Firefox/Firefox.exe",
            \"op":"D:/WebDevelopment/Browser/Opera/opera.exe",
            \"ie":"C:/progra~1/intern~1/iexplore.exe",
            \"ie6":"D:/WebDevelopment/Browser/IETester/IETester.exe -ie6",
            \"ie7":"D:/WebDevelopment/Browser/IETester/IETester.exe -ie7",
            \"ie8":"D:/WebDevelopment/Browser/IETester/IETester.exe -ie8",
            \"ie9":"D:/WebDevelopment/Browser/IETester/IETester.exe -ie9",
            \"iea":"D:/WebDevelopment/Browser/IETester/IETester.exe -all"
        \}
        let htdocs='E:\\apmxe\\htdocs\\'
        let strpos = stridx(file, substitute(htdocs, '\\\\', '\', "g"))
        if strpos == -1
           exec ":silent !start ". l:browsers[a:name] ." file://" . file
        else
            let file=substitute(file, htdocs, "http://127.0.0.1:8090/", "g")
            let file=substitute(file, '\\', '/', "g")
            exec ":silent !start ". l:browsers[a:name] file
        endif
    endfunction
    nmap <f4>cr :call ViewInBrowser("cr")<cr>
    nmap <f4>ff :call ViewInBrowser("ff")<cr>
    nmap <f4>op :call ViewInBrowser("op")<cr>
    nmap <f4>ie :call ViewInBrowser("ie")<cr>
    nmap <f4>ie6 :call ViewInBrowser("ie6")<cr>
    

    另外有同学想要linux下面的例子, 我没有环境, Mac下面这样是OK的,可以参考:

    " 在浏览器预览 for Mac
    function! ViewInBrowser(name)
        let file = expand("%:p")
        let l:browsers = {
            \"cr":"open -a \"Google Chrome\"",
            \"ff":"open -a Firefox",
        \}
        let htdocs='/Users/leon1/'
        let strpos = stridx(file, substitute(htdocs, '\\\\', '\', "g"))
        let file = '"'. file . '"'
        exec ":update " .file
        "echo file .' ## '. htdocs
        if strpos == -1
            exec ":silent ! ". l:browsers[a:name] ." file://". file
        else
            let file=substitute(file, htdocs, "http://127.0.0.1:8090/", "g")
            let file=substitute(file, '\\', '/', "g")
            exec ":silent ! ". l:browsers[a:name] file
        endif
    endfunction
    nmap <Leader>cr :call ViewInBrowser("cr")<cr>
    nmap <Leader>ff :call ViewInBrowser("ff")<cr>
    
  • PHP 读取大文件的X行到Y行的内容

    / 分类: 开发,实践 / 5 Comments

    最新写了个小程序,需要读取一个文件的几行内容,但是文件比较大,所以研究了下PHP读取大文件的几行内容的方法,写了一个方法,代码如下(加了注释):

    //返回文件从X行到Y行的内容(支持php5、php4)
    function getFileLines($filename, $startLine = 1, $endLine=50, $method='rb') {
    $content = array();
    $count = $endLine - $startLine;
    if(version_compare(PHP_VERSION, '5.1.0', '>=')){// 判断php版本(因为要用到SplFileObject,PHP>=5.1.0)
    $fp = new SplFileObject($filename, $method);
    $fp->seek($startLine-1);// 转到第N行, seek方法参数从0开始计数
    for($i = 0; $i <= $count; ++$i) {
    $content[]=$fp->current();// current()获取当前行内容
    $fp->next();// 下一行
    }
    }else{//PHP<5.1
    $fp = fopen($filename, $method);
    if(!$fp) return 'error:can not read file';
    for ($i=1;$i<$startLine;++$i) {// 跳过前$startLine行
    fgets($fp);
    }
    for($i;$i<=$endLine;++$i){
    $content[]=fgets($fp);// 读取文件行内容
    }
    fclose($fp);
    }
    return array_filter($content); // array_filter过滤:false,null,''
    }

    Ps:
    上面都没加"读取到末尾的判断":!$fp->eof() 或者 !feof($fp),加上这个判断影响效率,自己加上测试很多很多很多行的运行时间就晓得了,而且这里加上也完全没必要。

    从上面的函数就可以看出来使用SplFileObject比下面的fgets要快多了,特别是文件行数非常多、并且要取后面的内容的时候。fgets要两个循环才可以,并且要循环$endLine次。

    此方法花了不少功夫,测试了很多中写法,就是想得出效率最高的方法。哪位觉得有值得改进的欢迎赐教。

    使用,返回35270行-35280行的内容:

    echo '<pre>';var_dump(getFileLines('test.php',35270,35280));
  • 开发全屏web操作项目,浏览器全屏的解决

    / 分类: 开发,实践 / No Comments

    目前为移动开发一个项目,是全触摸屏的,基于web的,当然我的工作只限于前端开发的工作,完成项目首先要解决的就是浏览器全屏展示网页。像移动的自助缴费系统、ATM机等有些应该是这样做的(记得有次还在某个银行看到了win2000的启动界面)

    找了下资料,以前的文章应该是通过js打开一个全屏的浏览器窗口的吧,不过那个好像会出现一些问题。

    后来才找到了IE的Kiosk Mode全屏模式(Kiosk ModeKiosk Software广泛用于公共电脑或者嵌入系统,如可以上网的公共电话、ATM、机场自助服务系统、网吧管理软件等) ,在ie的快捷方式里面加入“-k”这个参数,就实现了真正的全屏,而非F11(IE下的F11浏览器的菜单和底部的状态栏)还是能看到部分的。

    Kiosk模式下的一些快捷键:

    Alt + 左箭头:上一页
    Alt + 右箭头:下一页
    Ctrl + D:加到我的收藏夹
    Ctrl + H:开启历史文件夹
    Ctrl + B:开启整理收藏夹
    Ctrl + L:输入网址,开启新网页
    Ctrl + N:开新窗口
    Ctrl + R:刷新(或按 F5)
    Ctrl + W:关闭目前的窗口(或按 Alt+F4)

    该方法只对起始页有效,通过该页弹出的窗口不是全屏幕窗口

    还有一个就是chrome浏览器下的F11,这个效果是目前使用过的浏览器里面全屏比较彻底的,但是上面还是有一条黑边,鼠标移上去就好提示按F11退出全屏,所以根据需要最好的就是IE下面的Kiosk模式了,据说是IE5.0+都支持,我用IE8测试是没问题的。

  • 删除重复内容行

    / 分类: 工具,实践 / 1 Comment

    由于要处理一个两万多行的数据,但要删除其中内容重复的行,所以找了几个方法:

    1. 用sed替换重复内容,使用命令 -n "G;s/\n/&&/;/^\(.*\n\).*\n\1/d; s/\n//;h;P" "$(FilePath)" (这里是在editplus里的使用,注意$(FilePath)必须是带路径的文件名)。当然sed不需依赖editplus,可以单独使用的。优点:删除重复内容后,顺序结构不变。缺点:不支持UTF-8,处理大文件时(2w多行)就不行了。

    2.使用editplus-工具-排序,勾选"删除重复"。可惜不想把内容排序,却被自动排序了。(勾选"区分位置",好像没用?),这个效率相当快~差不多是瞬间完成的,之所以没放弃editplus,确实它的优点有很多。

    3.使用一个批处理

    @echo off
    :: 删除重复的行,但不能保留空行
    :: 对不符合变量命名规则、变量个数超过限制的文本都无法正确处理
    (echo 清除重复行后的文件内容:& echo.)>str_.txt
    for /f "delims=" %%i in (testText.txt) do (
      if not defined %%i set %%i=A & echo %%i>>str_.txt)
    :: start str_.txt

    当然也不支持utf8,效率也比较慢,处理2w多行用了1分多钟,不过排序没有改变:)。

  • 用css 写的一个浏览器检测

    / 分类: 开发,工具,实践 / No Comments

    这个用css hacks 判断浏览器大概是上个月写的,其中的hacks基本涵盖了大部分浏览器,本页面经过测试的浏览器:IE5.0、IE5.5、IE6、 IE7、IE8(beta1&beta2)、Opera 9.5, Firefox 3, Safari4、K-Meleon、Google Chrome。 其实用css判断浏览器是没有什么意义的,其主要意义就在于css hack在多浏览器下的使用,及如何用更少的css代码来实现各种主流浏览器的兼容。这个页面里的css hacks基本上囊括了ie系列(ie5.0-IE8)的csshack,同时也加入了不太常用的针对Opera和Safari的css hacks。

    演示可以见:https://xhl.me/demo/html/browser_detector.html

    在css hacks方面,我觉得最好不要用!important来提升指定样式的优先权,我不喜欢这它,因为如果使用它的话,你可能会发现写出的css代码相对较多。当然也不是完全不用它,目的只是当我们加入hacks时,是否要考虑一下如何才能使css的代码更精简?顺便也应该想到,当我们写XHTML代码时,是否考虑某处用div合适,还是ul合适,或者是dl合适?当我们写javascript的时候呢,是否也可以使用最少的代码来实现某一效果?有些人只是写出了div、css代码就很自豪的说自己已经会div、css了,当我问他浏览器兼容和HTML标签语义化时,他却说不出。其实有很多地方值得我们去研究,上次帮公司做的网页,css和js代码基本都被我压缩的不能再压缩了,先手工压缩再机器压缩,很爽很爽:), 不过他们说我变态~。其实这样网站的效率才能达到最高。

    我的做法就是在做网页时,应该以firefox来作为参照,然后再在ie和其他浏览器下测试,这样写出的css代码可能会是最少的。还有就是善用display:inline来解决ie下margin加倍,善用clear:both,有时也可以这样:<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->,给IE单独做一个css。因为之前做的是门户级的网站,写了很多页面,从中也学到了很多新知识,一时想不起来了,有时间再整理出来。还有只要结构写的好,不需要hack大部分也都能兼容。能不用hack就不用。