0%
3245 字 --- 耗时5 分钟.

8 月实习总结

在南京实习已经三个多月了,这段时间学到了不少知识,尤其是在 Web 安全这方面,我觉得这对我以后从事前端行业有很大的帮助,比如对 Http 协议、响应状态码等一些前端用到的知识有着非常深刻的理解。

目前公司里开发的语言是 Python,系统是 Ubuntu,项目用 GitLab 管理,经常用到正则表达式匹配。这四个对以后的路也有很大的帮助,比如 Python 这们语言和 JS 很像,在某些思路(比如函数作为第一对象)都极大的相似;Win虽然好用,却真的很丑陋,还是开源的 Linux 好用;关于 Git 自然不必多说;几乎所有的语言都支持正则表达式,而如果不去深入研究,也只是懂得其中的皮毛而已,根本不会体会到正则表达式的强大。

程序员的自我修养,学会解决问题的能力,在工作的过程中,难免会遇到一些稀奇古怪却很令人兴奋的 bug,通过 google baidu 并把它们解决。

.gitignore 文件不起作用

Git 中有时候有一些本地的文件,我们并不想把它们进行管理,例如一些 test 文件夹下面的测试用例,再或者 npm 管理的node_modules 文件夹,文件内容很大,还不如用户自己通过npm install 命令自己安装。这个时候可以在根目录下面建一个 .gitignore 文件,写入一些不想加入版本管理的文件或文件夹。

至于如何屏蔽一些文件或文件夹,网上的教程很多。我在使用的时候,出现了一个小问题,就是把需要屏蔽的文件加入到 .gitignore 中后失效,后来经过 google,发现是缓存中已经存在的原因。

大致的情况是这样的:

我平时用 Git 不喜欢用某些界面来管理,喜欢用 Git 命令行,感觉用习惯了也很酷。

我在项目中加入了一些 test 测试文件,放到 test 文件夹下面,然后一不小心,把它们加入到 cache 中(git add .)

这个时候我才想起来在 .gitignore 文件中加入屏蔽,echo /test >>.gitignore,为时已晚,通过 git status查看,发现

已经还是无法避免掉 test 文件夹,原因是已经在 git cache 中存在了,stackoverflow 提供了方法

//在执行rm之前,特别强调要先 commit,不然数据丢失
git rm -r --cached .  
git add .  
git commit -m "update .gitignore file"  

结果在执行 git add . 之后

解决!

CSS 中的 inline-block

CSS元素分为块元素和行内元素,常见的块级元素有 div, p, ul, li, form, table, h1~h6, hr等,行内元素有 span, a, b, em, br, input, image, label, strong, textarea等。

无论块级元素还是行内元素,都可以通过设置 display:inline-block;的方式在行内以块级元素显示。但是有一个问题困扰我很就,如下代码:

<head>  
    <style type="text/css">
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background: blue;
        }
    </style>
</head>  
<body>  
    <span></span>
    <span></span>
</body>  

效果图:

就像上图显示的那样,inline-block 元素之间有空隙,大致可以通过以下几种方法解决:

设置父元素font-size : 0px;

<style type="text/css">  
    body{
        font-size: 0;
    }
    span{
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background: blue;
    }
</style>  

span 元素的父元素是 body,这里设置body 的 font-size 为 0,看下效果:

但是这个效果有一个非常大的弊端,或者说这是一个非常蠢的解决方案,首先是它可能会在某些浏览器失效(好像已经修复了),这个不管,然后:

<body>  
    <span>Hello</span>
    <span>World</span>
</body>  

修改 html 代码

通过修改 css 代码,有一定弊端,可以通过修改 HTML 元素来实现,删除 span 标签之间的回车

<body>  
    <span>Hello</span><span>World</span>
</body>  

如果你决定这样会导致代码可读性,可以通过

//拓展到下一行
<body>  
    <span>Hello</span
    ><span>World</span>
</body>  
// or 注释
<body>  
    <span>Hello</span><!--
    --><span>World</span>
</body>  

哈哈,总之,把该死的 font-size:0 忘记。

原理我想也心知肚明了,肯定是回车在搞鬼,它就像 p 标签一样。

浏览器缓存

在搭自己博客和主页的时候,碰到了浏览器缓存的问题,大致描述一下:

有时候觉得网站的某些样式不是很漂亮,或者字体大小不合适,或者某个背景颜色有点深(其实我的审美已经严重扭曲),一天一天的积累,把它慢慢的修改,久而久之,一些 CSS、JS 文件变化很大。

但是,浏览器都有缓存,之前打开的网页浏览器会保存缓存一定的时间,当再次访问的时候,如果还是同名的文件,浏览器会从本地缓存中找,如果找到且缓存的有效期没有到,就不用向服务器再次申请,比如,下面是我博客某个 CSS 资源的响应头:

其中标红框的就是服务器向用户的浏览器发送的缓存要求,大致就是说这个 CSS 文件你可以放到缓存中(public 只有在刷新的时候才会向服务器请求),缓存的有效期是一年(356 * 24 * 60 * 60 = 31536000,单位是秒)。

看着都要哭了,也就是说,如果我修改了某个 CSS 文件,别人不刷新网页,是无法获得新的 CSS 资源(这个 max-age 是右 Ghost 的默认设置造成的)。

解决办法也是有的,那就是资源重命名,给浏览器造成一种假象,就是它要访问的资源不在缓存:

<head>  
    <link rel="stylesheet" type="text/css" href="/style.css">
    //把原来的资源改成另一个名字
    <link rel="stylesheet" type="text/css" href="/style-0916.css">
</head>  

现在好多的构建构建 gulp、webpack 都带重命名插件,使用起来也很方便。