发表于 | 分类于

记录下js中比较常用的设计模式

单例模式

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class Singleton{
  constructor(name){
    this.name = name
    this.instance = null   
  }
  static getInstance(name){
    if(!this.instance){
      this.instance = new Singleton(name)
    }
    return this.instance
  }
  getName(){
    console.log(this.name)
  }
}
var a = Singleton.getInstance('sven1');
var b = Singleton.getInstance('sven2');
// a 和 b 指向同一个实例
console.log(a===b)  // true

发布订阅模式

发布—订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状
态发生改变时，所有依赖于它的对象都将得到通知。

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
class EventTarget {
    constructor() {
        this.handlers = {};
    }
    // 添加订阅
    addHandler(type, handler) {
        if (typeof this.handlers[type] == "undefined") {
            this.handlers[type] = [];
        }
        this.handlers[type].push(handler);
    }
    // 执行
    fire(type) {
        var handlers = this.handlers[type];
        if (!handlers) return;
        for (var i = 0, len = handlers.length; i < len; i++) {
            handlers[i]();
        }
    }
    // 移除订阅
    removeHandler(type) {
        if (this.handlers[type] instanceof Array) {
            delete this.handlers[type];
        }
    }
}
var ex = new EventTarget();
// 添加订阅者
ex.addHandler('work', function () {
    console.log('work')
})
ex.addHandler('search', function () {
    console.log('search')
})
ex.addHandler('come', function () {
    console.log('come')
})
ex.addHandler('work', function () {
    console.log('work222')
})
ex.addHandler('work', function () {
    console.log('work3333')
})
// 发布消息
ex.fire('work');
ex.fire('search');
// 执行打印
work
work222
work3333
search
阅读全文 »

发表于 | 分类于

puppeteer介绍

Puppeteer是一个用户界面自动化工具。它通过使用Chrome无界面模式和DevTools协议的组合来实现这一点。正如上面的引用所言，它使用一个更上层的API来封装其功能，让用户界面测试自动化变得轻而易举。

它能做什么？

  • 生成网页截图或者 PDF
  • 高级爬虫，可以爬取大量异步渲染内容的网页
  • 模拟键盘输入、表单自动提交、登录网页等，实现 UI 自动化测试
  • 捕获站点的时间线，以便追踪你的网站，帮助分析网站性能问题

API

API 地址 https://github.com/GoogleChrome/puppeteer/blob/v1.4.0/docs/api.md

实例

截图

首先实现一个简单的百度首页截图功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const puppeteer = require('puppeteer');
(async () => {
  // 打开浏览器
  const browser = await puppeteer.launch();
  // 打开页面
  const page = await browser.newPage();
  // 跳转页面
  await page.goto("https://www.baidu.com/");
  // 截图
  await page.screenshot({ path: "baidu.png" });
  // 关闭浏览器
  await browser.close();
})();

生成pdf

1
2
3
4
5
6
7
8
9
10
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com/', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'baidu.pdf', format: 'A4'});
  await browser.close();
})();

爬取页面

以我的博客首页https://aromameng.github.io/为例，爬取每篇博客的标题。

这个功能可以用于爬取api数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const puppeteer = require("puppeteer");
(async() => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto("https://aromameng.github.io/", { waitUntil: "networkidle2" });
    // page.evaluate 中可以直接操作dom
    const links = await page.evaluate(() => {
        const anchors = Array.from(document.querySelectorAll(".post-title-link"));
        return anchors.map(anchor => anchor.textContent);
    });
    // 打印标题
    console.log(links.join("\n"));
    browser.close();
})();

更多功能还在学习中。。。

参考

发表于 | 分类于

产生原因

因为retina屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px,所以在高清屏下看着1px总是感觉变大了

主要有以下几种解决方式：

使用scale缩放

利用伪元素和scale缩放

1
2
3
4
5
6
7
8
9
10
li:before{
  content: "";
  position: absolute;
  border-bottom: 1px solid #000;
  width: 100%;
  bottom: 0;
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

背景渐变

使用背景渐变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
li{
  list-style: none;
  line-height: 50px;
  height: 50px;
  position: relative;
  border: none;
  background-image: -webkit-linear-gradient(90deg,#000,#000 50%,transparent 50%);
  background-image: -moz-linear-gradient(90deg,#000,#000 50%,transparent 50%);
  background-image: -o-linear-gradient(90deg,#000,#000 50%,transparent 50%);
  background-image: linear-gradient(0,#000,#000 50%,transparent 50%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
}

使用背景图片

这种方式缺点蛮明显的，不能更改边框颜色

1
2
3
4
5
6
7
8
li{
  list-style: none;
  line-height: 50px;
  height: 50px;
  position: relative;
  border: 1px solid transparent;
  border-image: url(border.gif) 2 repeat;
}
阅读全文 »

发表于 | 分类于

常用的几种两列等高布局，任何一边高度自适应，另一边同时自适应相同高度。

在后台管理系统中这种布局比较常见

html布局相同

1
2
3
4
<div class='container'>
  <div class='left'></div>
  <div class='right'></div>
</div>

主要有以下几种方式：

flex布局

优点不用说了，简单快速

缺点的话就是兼容性不好，flex属于css3的属性

1
2
3
4
5
6
7
8
9
10
11
.container{
  display:flex;
}
.left{
  width: 200px;
  background:red;
}
.right{
  flex:1;
  background:green;
}

table实现

优点同上，简单，兼容性比flex好，支持ie8及以上

缺点：ie6/7不支持

1
2
3
4
5
6
7
8
9
10
11
12
.container{
  display:table;
}
.left{
  width: 200px;
  background:red;
  display:table-cell;
}
.right{
  background:green;
  display:table-cell;
}
阅读全文 »

发表于 | 分类于

常用的几种3列布局，即左右两边宽度固定，中间自适应，这也是css面试中大概率会问的问题。

主要有以下几种方式：

圣杯布局

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
34
<div class="container">
    <div class="main"></div>
    <div class="sub"></div>
    <div class="extra"></div>
</div>
.container {
    padding-left: 210px;
    padding-right: 190px;
}
.main {
    float: left;
    width: 100%;
    height: 300px;
    background-color: rgba(255, 0, 0, .5);
}
.sub {
    position: relative;
    left: -210px;
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -100%;
    background-color: rgba(0, 255, 0, .5);
}
.extra {
    position: relative;
    right: -190px;
    float: left;
    width: 180px;
    height: 300px;
    margin-left: -180px;
    background-color: rgba(0, 0, 255, .5);
}

双飞翼布局

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
<div class="main-wrapper">
    <div class="main"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>
.main-wrapper {
    float: left;
    width: 100%;
}
.main {
    height: 300px;
    margin-left: 210px;
    margin-right: 190px;
    background-color: rgba(255, 0, 0, .5);
}
.sub {
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -100%;
    background-color: rgba(0, 255, 0, .5);
}
.extra {
    float: left;
    width: 180px;
    height: 300px;
    margin-left: -180px;
    background-color: rgba(0, 0, 255, .5);
}
阅读全文 »

发表于 | 分类于

最近在学习react-native，在做项目过程中发现可用的样式真的少的可怜呀，很多想法不能通过css来实现，开发体验也是蛮痛苦的。

react-native 布局的核心是flex，这块还是蛮愉快的，不需要考虑兼容性，但跟web的flex还是有些区别。

下面记录会用到的react-native会用到的flex属性。

flexDirection

该属性可以指定主轴的方向

可用值：

row、column

!!! 注意和 Web 不同，React Native 默认的是 column

justifyContent

该属性用来定义伸缩项目沿主轴线的对齐方式

可用值：

flex-start、flex-end、center、space-between、space-around

alignItems

该属性用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式

可用值：

flex-start、flex-end、center、stretch

flexWrap

该属性主要用来指定伸缩容器的主轴线方向空间不足的情况下，是否换行以及如何换行

可用值：

nowrap、wrap

flex

该属性定义伸缩项目的放大比例，默认值是 0。

alignSelf

该属性用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式

可用值：

auto、flex-start、flex-end、center、stretch

发表于 | 分类于

记录下使用Vscode中用的一些插件。从sublime、webStorm 到 Atom，再到vscode 。

目前用的最顺心的是vscode。理由很简单，打开快、插件也越来越齐全。。。

这个工具还是用NodeJs开发的，这个也是要学习的，路漫漫。。。

阅读全文 »

发表于 | 分类于

记录下在使用linux过程中遇到的问题，记录下来，方便以后查阅

连不了网

  • VMware 设置中网络连接方式设置为NAT模式
  • 检查服务中的DHCP服务是否开启
  • 如果还是上不了网，那就在虚拟机的编辑菜单里，点击”虚拟网络编辑器”，直接点击左下角的回复默认默认设置，然后点击确定。最后重新设置网络连接选项为NAT模式

关闭 Hyper-V

启动不了VMware，报错说必须关闭Hyper-V，有几项检查：

  • 服务中将Hyper-V相关都关闭
  • 控制面板——程序与功能——启用和关闭Window功能 中将Hyper-V勾选去掉
  • 前面两个都不管用的话，以管理员身份运行命令提示符， 执行命令 bcdedit /set hypervisorlaunchtype off ， 重启电脑，运行vm，
    如果想要恢复hyper启动， bcdedit / set hypervisorlaunchtype auto

发表于 | 分类于

关于BFC，应用很广泛，经常使用它来清除浮动，但都没有好好的研究过它的原理，为什么这样做能清除浮动。

关于BFC的定义，MDN上的解释：(https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

简单来说，BFC 就是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

MDN上列举了很多条形成BFC的条件，下面列举比较常用的几条：

  • float的值不能为none
  • overflow的值不能为visible
  • display的值为table-cell, table-caption, inline-block中的任何一个
  • position的值不为relative和static 
阅读全文 »

发表于 | 分类于

整理下linux的一些常用命令，方便随时取用

目录操作

  • 创建目录 mkdir

    1
    2
    3
    4
    5
    // 创建js目录
    mkdir js   
    // 在目录/usr/meng下建立子目录test，并且只有文件主有读、写和执行权限，其他人无权访问
    mkdir -m 700 /usr/meng/test

  • 删除目录 rm

1
2
3
4
5
6
-d：直接把欲删除的目录的硬连接数据删除成0，删除该目录；
-f：强制删除文件或目录；
-i：删除已有文件或目录之前先询问用户；
-r或-R：递归处理，将指定目录下的所有文件与子目录一并处理；
--preserve-root：不对根目录进行递归操作；
-v：显示指令的详细执行过程。
1
2
// 删除test example，删除前询问
rm -i test example
  • 文件或目录重新命名 mv
    1
    2
    3
    4
    5
    // 将文件ex3改名为new1
    mv ex3 new1
    // 将目录/usr/men中的所有文件移到当前目录
    mv /usr/men/* .
阅读全文 »