前端开辟小技能（来自知乎）

2019年8月30日 216次阅读 来源: jack2wang

1.You Might Not Need jQuery

不必jQuery，原生js怎样完成，能够参考这里：You Might Not Need jQuery 。原生js愈来愈好了，假如是简朴的页面，没必要引入一个巨大的jQuery，尤其在手机端，对速率流量敏感的处所，别的最好本身简朴封装一些经常运用的函数，比方toggleClass等。。。

2.Firefox检察源代码功用搜检页面毛病

页面写完后，记得用Firefox 检察页面源代码功用，能够一眼发明未闭合标签、未转义的HTML字符，假如不嫌贫苦，能够提交代码到 http://validator.w3.org/ 考证HTML、CSS，下面图片来自CSDN当前首页源码，能够看到Firefox赤色高亮了毛病的HTML代码，_blank背面多了一个双引号。
《前端开辟小技能（来自知乎）》

3.罕用id

假如不在页面顶用js援用元素，只管不要设置元素的id，也只管不要用#main{}来设置元素css款式，而是用class体式格局.main{},由于

  • 能够防备ID反复，形成毛病

  • 能够轻易引入新CSS复写款式，别的应该相对防止行内css款式.

4.max-device-width

运用 max-device-width检测而不是max-width来兼容手机、平板等，能够防止桌面浏览器由于窗口小，而看到貌寝的手机页面结果。

@media only screen and (max-device-width:980px){}

5.flex规划

多列规划，不斟酌初级浏览器能够运用CSS3的flex规划，能够做到比浮动更好掌握，如我写的样例代码，垂直、程度居中能够很轻易完成：
《前端开辟小技能（来自知乎）》

6.二维码天生当前网址的插件

装个二维码天生当前网址的插件，以轻易检察手机现实显现结果，如今挪动端日趋主要，作为前端，肯定不能无视挪动端的显现结果，虽然浏览器都支撑挑选device来测试差异的装备显现结果，但毕竟和实在装备有差异，尤其在测试微信内的页面时刻，异常轻易。

7.让一个块级元素在某区域内上下左右居中

<div class="container">
    <div class='box'></div>
</div>

<style type="text/css">
      .container{
          border: 1px solid #000;
          width: 300px;
          height: 300px;
          position: relative;
      }
      .box{
          border: 1px solid #000;
          width: 50px;
          height: 50px;
          /*magic blow*/
          position: absolute;
          margin: auto;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
      }
  </style>

结果：
《前端开辟小技能（来自知乎）》

诠释：道理就是让 box 本身既要往左也要往右，既要往上也要往下。这时刻它就手足无措了，只好待在中心。

8.chrome中隐蔽元素

在 Chrome 浏览器的 Elements 内里选中某个元素，按 h 能够隐蔽该元素。

9.恰当运用localStorage缓存HTML表单内容.

恰当运用localStorage缓存HTML表单内容，防备浏览器崩溃、死机形成填写丧失.
详细事例移步这里cache form.经由过程‘检察网页源代码’能够看到完成的js，我还没研讨邃晓。。。

10.liveload

运用一些chrome的liveload插件或许grunt、glup这些构建东西的liveload插件，如许能够边写代码变自动革新页面，及时看结果.

未完待续。。。

参考：前端界有哪些越早晓得越好的小技能小学问？

    原文作者：jack2wang
    原文地址: https://segmentfault.com/a/1190000005125344
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞