在讲模块机制之前，先来说说 CommonJs 规范，我们知道在打包的时候经常会看到 cjs 这个选项，这里的 cjs，我自己之前是一直以为就是commonJs，实际上这是 node 对 CommonJs 的实现，是 node 的模块机制。

ComonJs 规范范围除了模块规范之外，还有二进制、Buffer、字符集编码、I/O 流、进程环境、文件系统、套接字、单元测试、Web 服务器网关接口以及包管理等规范。

最近有个需求，要求在部署过程中离开界面与用户有一个交互，询问用户是否离开页面，然后还给出了相应的样式让我实现。我寻思着关闭窗口，意味着页面销毁，执行栈都不存在了，何谈交互呢？于是我果断的拒绝了这个需求，并评论道无法实现。

后来跟同事交流了一下，同事说之前遇到过类似的需求，有相应的回调函数可以做到，去 mdn 找了下，还真有，但是很遗憾，不能自定义样式，而且在不同的浏览器可能表现不一致。跟产品沟通了下，说明了这种情况，能接受，就加上了。

圆环进度条是我们工作中经常会碰到的一个需求，首先我们来看看要实现一个圆环我们会怎么做？

<div class="wrapper">
  <div class="circle"></div>
</div>

最近发现很多用过的东西过后很容易忘记使用姿势，久了不用就要去翻一翻文档，有一些知道怎么用，但是记忆也很模糊。于是我就想先从一些基础的知识写起，探究知识点背后的运作原理，加深自己对知识的理解。

说到 instanceof，我们大体知道其使用场景，用于检测对象的具体类型。我们一般会怎么用这个操作符呢？

看到张鑫旭大佬的文章讲禁止图片拖动的，我看了看手头的项目，拖了拖一些 icon，拖动会有虚影。于是准备把图片的拖动禁用掉，第一反应是在 App 文件中等视图加载完毕，获取所有的图片，设置为不可拖动，一劳永逸

mounted() {
  this.$nextTick(() => {
    const imgs = document.querySelectorAll('img');
    imgs.forEach((el, i) => { imgs[i].draggable = false; });
  });
}

滚动条样式在火狐、ie、chrome 等浏览器的样式是不一致的，工作中我们经常需要根据自己的需要定制滚动条，这里给出一个兼容的写法

/* The emerging W3C standard
that is currently Firefox-only */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
  width: 12px;
}
*::-webkit-scrollbar-track {
  background: orange;
}
*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(14, 77, 136);
}

在 WebKit 内核的浏览器中，当用户的设置中允许表单自动填充，填充后有一个背景颜色，打开控制台的 styles 看到 input:-internal-autofill-selected 设置了背景色和字体颜色，大喜。在 css 中改完发现无效，明明看到覆盖掉了这个的样式，怎么还是有背景色呢？

时隔四年，再一次面了阿里，上一次还是大三的时候面淘宝的实习岗位。感觉体验很不错，从项目出发，由浅入深，中规中矩的面试，发现了自己的一些不足之处，末了问面试官他们希望招怎样的人才，面试官回答的要点大致如下：

• 基础知识扎实

• 熟悉常用框架的底层原理，能自己实现框架

CSS 常用布局包括元素的水平、垂直居中，单栏布局、三栏布局等，本文分析多种情况下的布局方案。