VuePress搭建支持PWA的博客

桌面端预览

配置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"
  }]
}

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

• ES6基于文件的模块

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

一、配置命令

配置用户名和邮箱

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

前言

思考以下几个问题：

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

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

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方法

React

环境搭建

1. Node.js
2. 创建项目

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

0-Intro

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

关于 video.js：

引用官方的自我介绍：

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

封装通用组件

主要思想

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

封装组件主要分三类：

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

封装普通展示型组件

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

前言

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

现状与痛点

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

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;
}

demo

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

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

前言

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

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

引言

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

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

主要功能

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

0.图片上传思路

1. 监听一个input(type=‘file’)的onchange事件，这样获取到文件file；
2. 将file转成dataUrl;
3. 然后根据dataUrl利用canvas绘制图片压缩，然后再转成新的dataUrl；
4. 再把dataUrl转成Blob；
5. 把Blob append进FormData中；
6. xhr实现上传。

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

target 配置

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

lib 配置

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

例子

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

前言

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

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

测试

provide提供的count：{{count}}

使用自定义组件

前言

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

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