文章目录
  1. 1. .gitignore 文件不起作用
  2. 2. CSS 中的 inline-block
  3. 3. 浏览器缓存

渔人 » 博客 » 归档

8 月实习总结

作者:宋进忠

时间: 2016/09/16

分类: 实习 标签: 总结 / 实习

在南京实习已经三个多月了,这段时间学到了不少知识,尤其是在 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 提供了方法

1
2
3
4
//在执行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;的方式在行内以块级元素显示。但是有一个问题困扰我很就,如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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;

1
2
3
4
5
6
7
8
9
10
11
12
<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,看下效果:

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

1
2
3
4
<body>
  <span>Hello</span>
  <span>World</span>
</body>

修改 html 代码

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

1
2
3
<body>
  <span>Hello</span><span>World</span>
</body>

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

1
2
3
4
5
6
7
8
9
10
//拓展到下一行
<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 的默认设置造成的)。

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

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

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

Feed

文档信息

文章评论

正在为你加载评论...

Copyright © 2016-2017,本站由 本人 手工打造, 联系方式 ,感谢 Hexo 网站参考 小胡子哥/ 阮一峰老师