跳到主要内容

· 阅读需 4 分钟

看了官网的demo，在使用Popover的时候需要在组件内通过具名插件写出reference，也就是在哪个元素上面显示Popover。又或者通过定义ref的方式，再再指定的元素上面通过v-popover:xxx(ref值)的方式使用Popover

但是如果需要使用的显示Popover元素是第三方的组件库，并且也没有提供slot来使用指令的方式该如何来使用Popover呢？官方文档也没有这种使用方式的说明。。。可能一般不会出现这种调用方式吧

下面说明解决办法，先上解决的链接https://codepen.io/lwcreber/pen/QWbYpqe

在Element-ui源码中

· 阅读需 5 分钟

设计模式​

单例模式​

定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点

实现方法

判断实例是否存在，存在则直接返回，不存在就创建再返回，确保一个类只有一个实例对象

场景： 登录的弹窗，elementui 的messge-box组件

惰性单例

创建对象和管理单例模式的职责被分布在两个不同的方法中，组合起来才具有单例模式的威力

创建对象，即业务逻辑；管理单例模式，即如何来创建并管理实例

管理单例模式代码

· 阅读需 9 分钟

1 src目录结构

.
├── helpers.js
├── index.esm.js
├── index.js
├── mixin.js
├── module
│   ├── module-collection.js
│   └── module.js
├── plugins
│   ├── devtool.js
│   └── logger.js
├── store.js
└── util.js


2 注入到vue中

从index.js中看出就是vue插件的输出格式

export default {
  Store, // 状态管理
  install,
  version: '__VERSION__',
  mapState,
  mapMutations,
  mapGetters,
  mapActions,
  createNamespacedHelpers
}

先看install，在mixin.js中，其实就是兼容处理vue的版本，使得各个版本都可以使用vuex。在vuexInit中往vue中注入 $store 这个属性，就是vuex的实例了，现在可以知道平时使用vuex的时候都是this.$store的方式来调用了

· 阅读需 2 分钟

基础代理配置​

下载nginx到电脑上后，找到nginx.conf文件 添加server

server {
  listen 80;
  server_name testb.com;
  location / {
    proxy_pass http://127.0.0.1:8887;
    proxy_set_header Host $host;
  }
}

listen： 监听端口，现在的方式是监听到域名，然后到http://127.0.0.1:8887这个地址，所以默认80端口 server_name： 就是域名地址，

location： 匹配的路径

proxy_pass：代理到哪个地址， 这里是本地起的node服务，所以是127.0.0.1，需要注意的是本地使用域名，需要设置电脑的hosts文件，添加这个域名到hosts中，比如127.0.0.1 www.testb.com

proxy_set_header：设置代理头信息，这里设置host当前的域名，如果不设置，则默认是代理的地址

代理缓存​

在nginx中，只要有一次缓存，其他用户再次请求时，可以直接使用缓存

nginx缓存配置

proxy_cache_path cache levels=1:2 keys_zone=my_cache:10m;

proxy_cache_path 配置存放地址

cache 目录

levels 是否要创建二级文件夹

keys_zone 名称以及缓存大小

在server中配置

server {
  listen 80;
  server_name test.com;
  location / {
    proxy_cache my_cache;
    proxy_pass http://127.0.0.1:8887;
    proxy_set_header Host $host;
  }
}

在服务端设置'max-age'启用缓存 's-max-age'代理服务器中有效

如果同时设置了'max-age''s-max-age'，代理缓存会使用's-max-age'，浏览器会使用'max-age'

'private'： 只有浏览器能缓存，代理服务器的缓存不生效，也就是's-max-age'无作用

'no-store' 都不缓存

'Vary'：请求头的Vary值相同的时候才使用缓存，也就是第一次请求的该Vary值不缓存，第二次请求时，发现Vary值已经请求过，则使用缓存

· 阅读需 2 分钟

最近在项目中遇到开发的网站不断弹翻译的插件出来，这样的体验是非常糟糕的，一般这种情况都是在英文网站比较多见。

网上搜索也没看到有类似的问题，多数是教你如何关闭这个chrome的插件，这个肯定不能在网站里面提示叫用户手动去关闭插件这种操作的。

对比了几个网站以后，最后发现他们的html标签上的lang属性不一样，发现自己的项目里面html的lang属性竟然是en，去掉这个属性后，果然，不再弹出烦人的翻译插件了

个人理解是浏览器检测到自身的语言与网页的语言不一样时就会弹出翻译的插件，翻译成浏览器设置的语言。大型的网站一般都有切换语言的选择，所以并不需要设置lang属性。或者是网站主要语言是什么语言就设置对应的语言

资料链接

· 阅读需 3 分钟

缓存头的含义​

可缓存性​

public: 在http经过的任何地方（包括代理服务器）都可缓存

private: 发起请求http请求的浏览器

no-cache 任何节点都不缓存，但是要去服务器验证后才能重新请求

· 阅读需 2 分钟

1. 网络模型​

包括应用层（http，ftp） -> 传输层（TCP，UDP）-> 网络层 -> 数据链路层 -> 物理层

· 阅读需 3 分钟

属性类型​

ECMAScript中有两种属性：数据属性、访问器属性

1.数据属性​

数据属性有4个描述其行为到特性

[[configurable]] 表示能否通过delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性

[[Enumnberable]] 表示能否通过for-in循环返回属性。

[[Writable]] 表示能否修改属性的值

[[Value]] 包含这个属性的数据值

· 阅读需 1 分钟

nodejs 内存溢出导致webpack无法编译​

最近重构一个大型项目，重构到后期时出现

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

大概意思就是nodejs的内存溢出了