发表于

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

workbox 参考资料：

预加载

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

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

阅读全文 »

发表于

为什么需要私有NPM

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

常用私有NPM的解决方案

选择使用verdaccio

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

大概下面长这样：
verdaccio npm

阅读全文 »

发表于

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

如下例子：
当点击按钮做对象赋值，能够触发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>
阅读全文 »

发表于

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

阅读全文 »

发表于

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

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

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

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

阅读全文 »

发表于

如下代码，页面中元素使用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的时候会问能有多少种方案来实现，没有标准答案，答案越多越好，主要是考查对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%;
}
阅读全文 »