VuePress搭建支持PWA的博客

Tips

本项目是个人独立开发的个人博客项目，已经上线迪诺笔记

桌面端预览

Less than 1 minute

配置PWA要点

{
  "name": "迪诺笔记",
  "short_name": "JohnieXu's Blog",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "哪里会有人喜欢孤独，不过是不喜欢失望罢了。 ——村上春树",
  "icons": [{
    "src": "logo_48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "logo_72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "logo_96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "logo_144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "logo_168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "logo_192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

Less than 1 minute

ES6模块的核心知识点

ES6模块与前ES6模块概念区别

ES6基于文件的模块

即一个文件一个模块，在浏览器 web 环境中需要分别加载各个单独的文件模块，而非将其放入一个大的单独文件加载，当然现阶段对于ES6的模块都是采用 babel 进行 transpile 然后打包成若干个UMD模块。对于考虑是采用单独小文件还是打包后的若干个较大文件，主要是考虑到 HTTP/1.1 高效并发/交替加载多个小文件的性能问题。

About 3 min

Git常用命令整理

一、配置命令

配置用户名和邮箱

git config --global user.name "JohnieXu" // 配置全局用户名为JohnieXu
git config --global user.email "281910378@qq.com" // 配置全局邮箱为281910378@qq.com

查看配置

git config -l // 查看git全局配置信息
or
git config --list

About 22 min

JS原型链

前言

思考以下几个问题：

原型链是什么概念， JS 中为何要引入原型链？
原型链是怎样实现继承的？
构造函数 constructor，proto，ES6 中 class、static、super 和原型链的关系？
如何利用原型链来解释 this 的指向问题？
原型链与区块链？

看下面这段代码的打印结果

function Foo() {
    return this;
}
Foo.getName = function() {
    console.log("1");
};
Foo.prototype.getName = function() {
    console.log("2");
};

new Foo.getName(); // -> 1   等价于new (Foo.getName()) 调用的是构造函数Foo本身的getName方法
new Foo().getName(); // -> 2   等价于(new Foo()).getName() 调用的是实例上(原型上)的getName方法

About 2 min

文章专栏

Less than 1 minute

Ract和Dva的一些核心概念

React

环境搭建

Node.js

创建项目

npx create-react-app react-demo
cd react-demo
npm start

About 4 min

React中使用Video.js

0-Intro

在 React 项目中使用 video.js，实现 HTML5 视频播放器的自定制。

关于 video.js：

引用官方的自我介绍：

video.js is a free and open source HTML5 video player.

About 13 min

React封装通用组件

封装通用组件

主要思想

封装组件的思想主要是将前端页面/业务逻辑等按模块方式进行抽离，复杂的页面布局/逻辑等放入独立写的模块内部，使用详情组件只需要传入组件定义的数据/方法/chidlren等就可以完成相应功能开发。

封装组件主要分三类：

普通展示型组件(函数式组件)
纯逻型组件(容器组件)
通用业务组件(以基础组件/第三方组件为基础+一定的业务逻辑)

封装普通展示型组件

通过函数式组件实现，比较轻量，不带组件的生命周期，不带内部state，后期也可以通过React Hooks添加内部状态数据的控制

About 1 min

Yarn 的 Plug'n'Play 特性

前言

今天在看 ts-loader 的功能特性时看到其支持 Yarn Plug'n'Play。于是花了一些时间了解了一下它的工作原理以及解决的问题并整理出了本篇文章。

现状与痛点

Yarn 团队开发 PnP 特性最直接的原因就是现有的依赖管理方式效率太低。引用依赖时慢，安装依赖时也慢。

About 5 min

frontend-interview

less

是一个css预处理语言，和sass类似，支持函数/变量/模块，不同于poastcss（其不是一个预处理语言，通过各种插件来支持less/sass和autoprefixer等）

变量

以@开头，类似js中的变量，可以用作css值或者属性

// 值
@link-color:    #428bca;
@link-color-hover:  darken(@link-color, 10%);

// css属性
@my-selector: banner;
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

About 16 min

React中使用Quill.js

demo

Less than 1 minute

上拉懒加载

懒加载图片懒加载路由懒加载上拉加载(分页加载)

https://www.cnblogs.com/xing901022/p/5052780.html

Less than 1 minute

全面分析总结BFC原理及实践

前言

经常在面试中被问到“如何清除浮动？”、“为什么 overflow: hidden 可以清除浮动？”等等比较基础的问题。虽然这些题目案在各种写面试题的文章中都有提供答案，但这种教科书式的问答肯定不是我们的目的，与其记住答案不如彻底掌握其核心原理——块级格式化上下文（BFC）。

这篇文章主要就是彻底分析清楚BFC原理、总结BFC经典场景中的用法，最后在实践中总结BFC在H5、小程序开发中的应用。

About 8 min

写一个 CLI 工具抓取奇舞周刊文章链接

引言

前端er 应该都知道奇舞周刊，这是一个技术类博客，上面汇聚了一大批优秀博客作者投稿的技术类文章。我本人每隔几天就会去看看上面的文章，但是它的官网经常打不开，每次想看文章的时候还得一页一页的翻才能找到想看的文章。或者，有时候就想随便找一篇文章看一看作为知识扩展或是温故知新。

基于阅读文章的便利性的考虑，于是开始了本次 CLI 工具的探索，这款工具的核心功能是以开发者的角度来快速的找出奇舞周刊上发布的文章链接。

主要功能

抓取全部文章链接
随机 N 篇文章链接
定时任务自动抓取

About 6 min

前端文件上传总结

0.图片上传思路

监听一个input(type=‘file’)的onchange事件，这样获取到文件file；

将file转成dataUrl;

然后根据dataUrl利用canvas绘制图片压缩，然后再转成新的dataUrl；

再把dataUrl转成Blob；

把Blob append进FormData中；

xhr实现上传。

1.基于H5的File API和input实现

About 12 min

对于 typescript 中 target 与 lib 配置项的理解

target 配置

指定编译后 js 代码所采用的规范，如：用 es5、es6 等

lib 配置

指定当前代码中可以用到的 es6+ 等规范中的新语法特性，当业务代码中使用了 lib 中未指定的语法特性时将报编译错误，像 Symbol 等特性对浏览器平台的兼容性处理需要引入 core-js 等第三方库来 polyfill。

例子

{
  "compileOptions": {
    "target": "es5",
    "lib": ["dom","es2017"]
  }
}

Less than 1 minute

带你全面分析vue-router源码（万字长文）

前言

在前一篇文章中遇到的vue路由组件缓存问题已经解决并对项目进行了适当的优化改进，但是并未开探寻究vue-router的源码，这篇就继续上次的话题，深入分析vue-router源码中对导航守卫、动态参数匹配、过渡效果和异步组件等的实现。

本文分析的源码为vue-router@3.1.3，vue@2.6.11

About 16 min

测试

provide提供的count：{{count}}

使用自定义组件

Less than 1 minute

深入理解JS原型与继承

前言

最近在整体地复习一遍现代前端必备的核心知识点，将会整理成一个前端分析总结文章系列。这篇是其中的第三篇，主要是总结下JS中原型与继承等核心知识点。（另外，此系列文章也可以在语雀专栏——硬核前端系列查看）。

本文首发自迪诺笔记，转载请注明出处😁

About 11 min

Jump to: