背景

最近在打开一些网站的，查看其CSS样式的时候，发现如下图：

所以就很好奇，原来现在CSS样式变量已经可以正式投入生产使用了，所以希望能够做个简单了解。

浏览器的兼容性：

简介

由于自己参与过低代码平台开发，所以希望能把我自己开发低代码中遇到的问题或者一些设计思路进行总结汇总，这是开始写的第一篇，也是比较基础的一篇，关于低代码平台的介绍会放在介绍篇章，这篇就不做过多介绍。

这里为什么会一开始介绍js沙箱设计呢？

因为低代码平台，会运行用户本身自己编写的业务逻辑代码，这里就需要平台去运行用户写的js代码，但是js代码保存到数据库是一个字符串，那么平台应该怎么运行呢？

答案是js沙箱，那么如何设计一个沙箱呢？按照低代码平台的需要特性，主要以下几方面：

• 隔离，隔离是为了保证当前执行代码不影响整个平台的代码
• 插入，沙箱允许插入平台的内置对象
• 容错，沙箱内代码即使有错误，也不影响整个平台执行

主要步骤

• 添加站点地图 sitemap.xml文件和搜索机器人文件robots.txt
• 提交站点到搜索引擎(百度和谷歌)
• hexo针对搜索的优化

添加站点地图

添加站点地图 sitemap.xml

1. 添加hexo插件

   1 2	npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save

2. 修改_config.yml配置

1
2
3
4

sitemap: 
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

搜索机器人文件robots.txt

在source目录下新建robots.txt文件，文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/ 
Allow: /resources/ 
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: https://hoxis.github.io/sitemap.xml
Sitemap: https://hoxis.github.io/baidusitemap.xml

主要以下几方面去收集？

• 八股文，主要针对理论基础知识
• 框架类，主要针对React/Vue等
• 编程题，主要针对各种常用方法进行手动编写
• 算法题，主要是各类算法题进行汇总

简介

由于在面试经常会遇到问题null，undefined，NaN之间的区别，因此想要深入且系统了解一下这些代表空之间的区别，以及它们底层的原理——原型链，同时还要搞明白__proto__和prototype分别是什么。

为了更好系统的理解null，undefined，NaN之间的区别和关系，我们需要从Javascript语言设计底层去理解，为什么一个空值需要设计这么多个。为什么不能像Java，一个null就可以满足？

我们先简单认识三者：

• undefined 表示原始值undefined。它是一个 JavaScript 的 原始数据类型
• null 特指对象的值未设置。它是 JavaScript 基本类型 之一。
• NaN 是一个表示非数字的值

接下来主要从以下两个点去认识null，undefined，NaN之间的区别和关系：

• 数据类型 typeof
• === 判断
• 原型 prototype

背景

最近从网上看到一个有趣的CSS应用，就是纯用CSS也能是父子树展示，具体效果如下：

• 目录节点1

  • 节点1

    • 子节点1-1
    • 子节点1-2
  • 节点2

    • 子节点2-1
    • 子节点2-2

然后里面关联到一篇新闻，就是:has伪元素的出现会给CSS带来极大的变动，这是为什么，不就是一个CSS伪元素吗？因此去了解一下，才发现这个伪元素确实不一样，主要有以下几点：

• 可以选择父级元素， a:has(> img)，包含img元素的a元素
• 可以选择兄弟元素， h1:has(+ p)，后面为p元素的h1元素

为什么有了它之后，CSS会有大变动，因为以往我们的样式都是直接选择 元素 或者 子元素 或者 后面的元素，如果要选择父元素或前面的元素只能通过命名规范去确定，比如上述两个例子：

• a:has(> img)，我们只能通过a.has-img类似样式去命名
• h1:has(+ p)，只能通过h1.next-p类似样式去命名

大概清楚它能带来的变化，接下来我们来详细了解一下它。

背景

之前研究过一篇《移动端适配总结》，里面主要通过布局不变，改变布局组件元素的大小去适应移动端。但是这种方式对于PC端或者Pad等大屏幕并不适合，所以从想找找看是否有新的方案能否满足跨端自适应布局方式。

目前同时解决PC端和移动端的响应式布局的解决方案以下几种：

• 通过@media媒体查询去设置不同尺寸的样式
• 通过Flexbox Grid等现代化布局去做响应式布局

介绍

当hexo的文章越来越多，依靠标题和tag去搜索有点不够用，因此需要支持搜索功能，hexo查询主要依赖本地索引文件生成，具体步骤如下：

• 安装插件: npm install --save hexo-generator-search
• 根目录下的_config.yml中添加如下配置即可

背景

从上一篇《从egg.js转到nest.js》，想对其再深入了解一下，尤其比较好奇Typescript是如何实现IoC和DI，因为在Java的是通过的反射(Spring IoC实现原理)去创建对应的类。因此下文将详细讲解Nest.js中IoC和DI的实现原理。

前置知识

在了解实现原理之前有几个知识概念，需要了解一下：

• IoC和DI
• JavaScript的Reflect
• TypeScript的装饰器

Deprank js重要性排名

一个 JS 工具，按照重要性对本项目的所有脚本进行排序。原理是计算依赖关系，被依赖最多的脚本最重要。

官网：Deprank

例子如下：

1
2
3
4
5
6
7
8
9

| Filename               | Lines | Dependents | PageRank |
----------------------------------------------------------
| fixtures/core.js       | 3     | 1          | 0.284098 |
| fixtures/utils.js      | 4     | 3          | 0.268437 |
| fixtures/user/user.js  | 4     | 1          | 0.132253 |
| fixtures/todo.js       | 6     | 1          | 0.089796 |
| fixtures/user/index.js | 1     | 1          | 0.089796 |
| fixtures/concepts.js   | 4     | 1          | 0.079694 |
| fixtures/index.js      | 4     | 0          | 0.055926 |