html

图标（icon）是一个应用中非常重要的角色。在应用内设置了合适的图标，可以极大的丰富用户界面，提升用户体验。 在前端业务开发过程中，几乎每天都会接触到图标，如果项目使用了组件库，那么通常是直接使用组件库提供的Icon组件；或者是使用UI设计师给的图标；又或者自己封装一个Icon组件。 最近在研究组件库，看到Icon组件的时候，发现并没有想象中那么简单。于是仔细研究了一下图标，希望你看完这篇文章后，不再为图标而烦恼。 图标类型 图标是一个统称，它包含了不同的格式或实现方式。图标不一定是一个图片，比如字体图标（Iconfont）。以图标的格式或实现方式可以分为一下几种： 图片图标：png、jpg等图片格式，栅格化图标 SVG图标：SVG文档，矢量化图标 字体图标：使用字体来渲染图标，矢量化图标 图片图标在使用上和图片无异，在过去的网页开发中是非常常用的图标格式，通常会使用雪碧图进行加载优化。 SVG图标是现在最常见的图标形式之一，因为它可以自由定制，也能很方便的导出为图片格式。 字体图标则是将图标以字体的形式渲染出来，它也可以使用SVG图标来制作。 在这里我们主要研究SVG图标和字体图标。 字体图标原理 字体图标相对比较特殊，这里简单介绍一下它的原理。浏览器渲染文字的时候，会先将其转为unicode编码，然后去匹配对应的字体文件并将其渲染到屏幕上。基于这个原理，我们便能制作一个特殊的字体，渲染的是一个图形，而不是一个文字。 浏览器有一些默认支持的字体图标，它是一组unicode字符集，完整列表可访问此链接。下面是一个示例，直接在HTML中输入unicode编码，就能显示对应的字体图标。支持十进制和十六进制两种格式。下面是一个简单的示例。 <p>Icon: &#9733;</p> <p>Icon: &#x2605;</p> 除了直接在标签中使用，我们也可以将unicode通过css代码放到content属性中，font-awesome等多数字体图标库都是基于此方式实现的。 <p> Icon: <i class="icon-star"></i> </p> .icon-star::before { content: "\2605"; } 在content属性中的语法是 “\ + 十六进制代码”，与HTML中有点区别。 图标尺寸 图标尺寸通常不是固定的，在不同的位置需要设置不同的大小。我们在设置尺寸时一般都会使用 width 和 height 来设置宽高。但是对于图标来说，经常需要与文字对齐，使用宽高来设置尺寸会比较麻烦。因此我们可以使用另一种方式来设置图标的尺寸—— font-size 。 使用font-size设置尺寸 使用 font-size 来设置尺寸属于css的一个技巧，其原理是基于css中的 em 单位，它是一个动态的单位，真实大小取决于 font-size 的值。因此我们可以将需要定制尺寸的地方，按比例替换为 em 单位，理论上就能使用 font-size 来控制尺寸。比如下面的代码，我们尝试使用 font-size 来控制一个 div 的大小。 // <div class="box"></div> .box { width: 1em; height: 1em; background: red; } 此时我们去设置 div 的 font-size ，便可以改变它的尺寸。下图左边是默认（16px）尺寸，右边的 font-size 为32px。...

web-components是一个比较新的开发技术，但组件化思想已经实际应用了很长时间，代表性的组件话框架有vue, react等。web-components可以直接使用原生HTML和Javascript来封装通用的 web 组件，其拥有简单直接、无任何依赖等特点，是 web 前端开发的一个强有力的技术。 文章前半部分讲web-components相关接口，最后有一个进度条组件实例，点击这里可直接跳转。 Web-Components API Web-Components API有三个核心部分，分别是：Custom elements, Shadow DOM, HTML templates。 Custom elements custom elements顾名思义，允许我们自定义通用的 HTML 标签，可以是一个包含特定功能如：日历、时间显示、进度条等。 创建自定义元素 使用自定义元素，必须先使用customElements.define(name, constructor, options)方法注册元素后才能使用，参数分别为元素名称，元素构造函数，选项（可选）。自定义元素名称不能是单个字母。 生命周期 自定义元素生命周期有 4 个回调函数： connectedCallback：当 custom element 首次被插入文档 DOM 时调用。 disconnectedCallback：当 custom element 从文档 DOM 中删除时调用。 adoptedCallback：当 custom element 被移动时调用。 attributeChangedCallback：当 custom element 增加、删除、修改自身属性时调用。 Shadow DOM 通常情况下，我们封装 web 组件的时候，需要将组件内部的样式封装进去，同时也要避免被外部样式干扰。Shadow DOM是隐藏在一个 DOM 节点里面的节点树，主要特点就是于外部 DOM 树隔离，使组件维护成本大大降低。Shadow DOM并不是新鲜玩意儿，而是浏览器内部 API 实现，我们常用的一些标签如带控制按钮的video标签，其内部就是一个Shadow DOM树。 创建 Shadow DOM Shadow DOM有几个核心概念： Shadow host: 一个常规 DOM 节点，Shadow DOM 会被添加到这个节点上。 Shadow tree: Shadow DOM 内部的 DOM 树。 shadow root: Shadow tree的根节点。 Shadow root: Shadow tree 的根节点。 Shadow boundary: Shadow DOM 结束的地方，也是常规 DOM 开始的地方。 创建Shadow DOM需要用到attachShadow({ mode: 'open' })方法，参数中mode的取值有两个：open, closed，用来配置是否可以从外部获取shadow tree。该函数返回一个Shadow Root。...