Jun

(() => '\u5b66\u4e60\u8ba9\u6211\u5feb\u4e50\uff0c\u5de5\u4f5c\u4f7f\u6211\u5f00\u5fc3')()


  • 首页

  • 标签

  • 归档

  • 代码片段

  • 关于

  • 搜索

workbox缓存策略测试

发表于 2018-11-13

文章使用当时最新版本:3.4.1,由于api变化较快,可能文章不在准确…

workbox 参考资料:

  • https://developers.google.com/web/tools/workbox/
  • https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
  • workbox 是google 提供的简化service worker 使用库,包含预加载和运行时缓存,以及提供几种常用的缓存策略,也可以自定义,然后加上一堆的插件,控制过期时间缓存的条件等 …

预加载

注:目前项目预加载并未采用这种方式,而是通过动态插入 preload ,然后http cache control 浏览器缓存 ,不依赖service worker

1
2
3
workbox.precaching([
// 要预加载的资源列表,可以沟通过 构建输出必要的manifest
]);

阅读全文 »

私有NPM搭建笔记

发表于 2018-06-26

为什么需要私有NPM

  1. 首先公司内部的项目是必须私有。
  2. 跨项目公共代码维护极不方便。
  3. 方便积累维护自己的公共包。

常用私有NPM的解决方案

  • cnpm 淘宝cnpm 方案 http://blog.fens.me/nodejs-cnpm-npm/

  • npm 官方提供 https://github.com/npm/npm-registry-couchapp

  • verdaccio (sinopia fork) https://www.verdaccio.org/

选择使用verdaccio

  • 简单,简单,简单,无需配置数据库
  • 无需同步所有的npm包,不会磁盘爆掉

大概下面长这样:
verdaccio npm

阅读全文 »

Vue 接触式依赖的简单例子

发表于 2018-04-26

接触式依赖收集的最基础实现

如下例子:
当点击按钮做对象赋值,能够触发render函数的重新执行

1
2
3
4
5
6
7
8
9
10
<!-- GLOBAL Html -->
<div style="padding: 30px;">
<div id="renderDiv1"></div>
<div id="renderDiv2" style="margin-top: 10px;"></div>
<div style="margin: 20px 0;">
<button onclick="window.reactiveObj.a = new Date()">
点击查看最新时间
</button>
</div>
</div>
阅读全文 »

Javascript ES6 class

发表于 2018-04-04

ES6的 class 大部分功能都可以通过ES5来实现,所以也就有ES6的 class 只是语法糖的说法,但也有一些认为并不是所有 class 的特性都可以被es5实现,也就认为并不是是语法糖了。

这里不纠结语法糖的概念,只是用es5去实现ES6 class 的一些特性,主要参考 babel、Bublé 的实现。

寄生组合式继承

先回忆下 寄生组合式继承 ,这个是红皮书里面在介绍OOP继承时最后最完美的继承方法,其它的继承方法名字也不记得了。

抄来的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 继承原型的方法
function inheritPrototype(SubType, SuperType){
// 设置派生类的原型为基类原型的副本
// 并修正原型的 constructor 属性指向到派生类
SubType.prototype= Object.create(SuperType.prototype);
SubType.prototype.constructor=SubType;
}

// 基类
function Person(name){
this.name=name;
}
Person.prototype.sayName= function() {
console.log(this.name + ' ' + this.gender +' '+this.age);
}

// 派生类
function Child(name, gender, age){
Person.call(this, name); // 执行基类的构造函数,获取到基类构造函数中的 实例方法/属性
this.age=age;
this.gender=gender;
}

// 继承
inheritPrototype(Child, Person);
Child.prototype.sayAge=function() {
console.log(this.name + ' '+this.age);
}

// 实例化派生类 男
var child = new Child('Liu.Jun','male', 18);
child.sayName(); // Liu.Jun male 19
child.sayAge(); // Liu.Jun 19

阅读全文 »

关于遍历树形结构的方法

发表于 2017-07-17

这也是一个常见的问题,一个数形结构的数据,需要依次查找到每一个叶子节点。

如:这里使用数组结构,需要查找遍历出叶子结点

1
2
3
4
5
6
/* GLOBAL js */
window.treeArr = [
[2,[3, [4,5,6]],[7,[8],9,[10, [11]]]],
[20, [21,22,[23,[24]]]],
[[30,31],[32]]
];

递归

最容易想到的方案就是使用递归了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function queryLeafNode(data) {
let result = [];

const hasChild = Array.isArray(data) && data.length > 0;

if (hasChild) {
data.forEach(item => {
result = result.concat(queryLeafNode(item));
});
} else {
result.push(data);
}
return result;
}

console.log(queryLeafNode(treeArr));

每个节点依次判断是否为根节点,直到根节点为止,也就是 深度优先

阅读全文 »

css 清除浮动和bfc

发表于 2016-05-05

如下代码,页面中元素使用float样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!-- GLOBAL Html -->
<div class="line line1 clearfix">
<div class="lineItem"></div>
<div class="lineItem"></div>
<div class="lineItem"></div>
</div>
<div class="line line2 clearfix">
<div class="lineItem lineItem1"></div>
<div class="lineItem"></div>
<div class="lineItem"></div>
</div>

<style>
.line {
padding: 20px;
background-color: #a3a2a2;
}
.line+.line {
margin-top: 20px;
}
.lineItem {
width: 100px;
height: 100px;
background-color: #00bcd4;
float: left;
}
.lineItem+.lineItem {
margin-left: 20px;
}
</style>
阅读全文 »

css 实现左右左边固定,右边自适应的布局

发表于 2016-05-05

这是一个比较古老的面试题,面试css的时候会问能有多少种方案来实现,没有标准答案,答案越多越好,主要是考查对css基础布局的理解和掌握情况

页面如下结构:

1
2
3
4
5
<!-- GLOBAL Html -->
<div class="box">
<div class="left">200px</div>
<div class="right">自适应</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* GLOBAL css */
.xxSection {
padding: 0;
}
.box {
position: relative;
height: 100vh;
background: #efefef;
}

.left {
width: 200px;
background: #409EFF;
height: 100%;
}
.right {
background: #42b983;
height: 100%;
}
阅读全文 »
1…56

Jun

记录前端开发领域相关的知识点,包含不限于Javascript、前端工程、Vue开发 等

57 日志
88 标签
Creative Commons
Links
  • MDN
  • mermaid
© 2021 Jun
由 Hexo 强力驱动 v3.9.0
|
主题 – NexT.Muse v7.0.0