知道h5bp项目吗?HTML5 Boilerplate是什么?

发表于:
来源:阿酷技术学习
作者:simplefastbest

无意中看到Boilerplate,我也不知道它是干什么用得,我就checkout了一个看了一下.

它其实就是一个.

  • 写html5页面的模板,定义了ICON,webmanifest
  • 内置了js库modernizr,和jquery.
  • 内置了css,normalize.css对浏览器特性的覆写.
  • 一个高性能web服务器配置,我只研究了一下nginx.

看代码:

<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">

这两行代码主要是指 rel=manifest作用是把web app应用安装在手机主屏幕,提供原生应用体验的配置模板,它提供的site.webmanifest模板是这样的.关于web apps manifest,请参考此文:web app manifest学习笔记

{
  "short_name": "",
  "name": "",
  "icons": [{
    "src": "icon.png",
    "type": "image/png",
    "sizes": "192x192"
  }],
  "start_url": "/?utm_source=homescreen",
  "background_color": "#fafafa",
  "theme_color": "#fafafa"
}

 

 第二号代码的作用是,当用户添加web app到主屏幕时,显示的图标.

代码:

<!--[if IE]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->

这行代码是IE的条件性注释IF IE语句,关于它请看条件性注释IF IE语句文章.这段代码主要表示,如果浏览器能解析这段话,说明是IE,而且版本小于IE10,那么提示让用户升级.

//先引用一个公用的库
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
//如果没有加载成功,则使用本地的.
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>

这段代码作用加载jquery,当然你要换成你的资源地址或国内的静态开源库.

还有这行代码:

<script src="js/plugins.js"></script>

看plugins.js代码

// Avoid `console` errors in browsers that lack a console.
(function() {
  var method;
  var noop = function () {};
  var methods = [
    'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
    'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
    'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
    'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
  ];
  var length = methods.length;
  var console = (window.console = window.console || {});

  while (length--) {
    method = methods[length];

    // Only stub undefined methods.
    if (!console[method]) {
      console[method] = noop;
    }
  }
}());

// Place any jQuery/helper plugins in here.

 此主要是为解决调试时CONSOLE代码忘记删除,IE报错,js不能继续执行.加上此插件,IE下就不会有此问题了.

另外,它还提供了404模板,高性能apache和nginx配置.有时间再研究..

h5bp项目地址:

https://github.com/h5bp/html5-boilerplate