小别致真东西
小别致真东西
文章77
标签31
分类26
回到首页
文章归档
关于博客
© 2021 小别致真东西 Powered by Hexo & Nexmoe
Hexo 草稿功能

Hexo 草稿功能
2021年09月01日 531 字 大概 2 分钟

创建文章

个人比较喜欢通过命令行创建一篇新的博客，通过命令行初始化的博客会自动创建博客的开头部分（包含标题、创建日期等）

$ hexo new <filename>
BFC 浅谈

BFC 浅谈
2021年08月31日 1k 字 大概 4 分钟

写在前面

Block formatting context （块级格式化上下文）

一块独立的渲染区域、内部元素的渲染不会影响边界以外的元素

页面文档由块block构成 每个block在页面上占据自己的位置
使用新的元素构建BFC overflow：hidden | auto | scroll； 只要不为visible 新的空间
告诉浏览器，外面的环境影响不到我了 我重新来进行Block formatting 布局和定位

核心：
新的BFC，给出了新的不受外界影响的块级格式化环境
block 块级-> 页面的基础
formatting context 格式化-> 渲染

浏览器构建文档树的时候 布局和定位元素

网页的定位（大） 文档流正常，浮动，定位，flex，table
广义的定位 块级元素的定位 垂直的定位；行内元素 左右定位 通过内容来确定
狭义的定位：
float 浮动元素，在一行的开始或者结束
flex 弹性布局
position

BFC 在正常的文档流里面重建一个新的上下文环境

BFC的约束规则

  • 一、在浏览器进行页面元素布局的时候 同一个BFC的两个相邻的Box的margin 会重叠，与方向无关

    破坏规则 创建新的BFC Context上下文的概念

    如何创建BFC？=>重新规划一个（独立）渲染区域

    • 根元素body，天然是一个BFC
    • overflow:hidden;
    • float 不为none
    • display:inline-block | table-cell | table-caption ｜ flex
    • position:absolute | fixed 只要不为static

      好像只剩块级元素和行内元素不是BFC

  • 二、BFC的高度，浮动元素也要参与计算

    在元素float 之后脱离了文档流没有办法计算确切高度，这种情况我们称之为高度塌陷。解决高度塌陷的前提就是能识别并包含到浮动元素。而BFC就有这个特性，所以BFC也可以计算浮动元素的高度。新建BFC让浮动元素也参与计算 

        <style>
            *{padding: 0;margin: 0;}
            .par{
                border: 5px solid #fcc;
                width: 300px;
                /*这里的overflow并不是为了超出则隐藏，而是为了创建一个BFC*/
                /* overflow: hidden; */
                display: inline-block;
            }
            .child{
                border: 5px solid #f66;  
                width: 100px;
                height: 100px;
                float: left;
                /* clear: both; */
            }
        </style>
    </head>
    <body>
        <!-- 网页的定位（大） 文档流正常，浮动，定位，flex，table -->
        <div class="par">
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </body>
    ```  
    - 三、每个元素的左边，要与包含盒子的左边相接触
    - 四、BFC的区域不会与float box重叠  
    ```html
        <style>
            *{padding: 0;margin: 0;}
            .aside{
                float: left;
                width: 100px;
                height: 150px;
                background-color: #ff6666;
            }
            .main{
                height: 200px;
                background: #ffcccc;
                /* clear: left; */
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <!-- 自适应两栏式布局 类似于flex：1；
        aside 和 main 处于同一BFC（body）下 
        BFC布局规则3 规则4 -->
        <div class="aside"></div>
        <div class="main"></div>
    </body>
    ```   
    ```html
    /*BFC在三栏式布局中的应用*/
        <style>
            *{padding: 0;margin: 0;}
            .container{
                height: 200px;
            }
            .left,.right,.center{
                height: 200px;
            }
            .left{
                background: pink;
                float: left;
                width: 180px;
            }
            .right{
                background: lightblue;
                width: 180px;
                float: right;
            }
            .center{
                background: yellow;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <!-- 三栏式布局 -->
        <div class="container">
            <!-- 页面的结构与呈现效果不一致？想一下 -->
            <div class="left">Left</div>
            <div class="right">Right</div>
            <div class="center">Center</div>
        </div>
    </body>
    ```  

    **注意：**  
    > 通过 overflow:hidden将元素转换为BFC，固然可以解决高度塌陷的问题，但是大范围的应用在布局上是肯定是行不通的，毕竟overflow会造成溢出隐藏的问题，特别是与JS交互的效果时。  

    那有没有一个更好的高度检测方法呢？
    答案是有的，就是我们经常用到的clearfix。  
    ```css
    .clearfix:after{
        content:'';
        display:table;
        clear:both
    }
    .clearfix{
        *zoom:1;/* IE6,7不支持BFC，所以需要通过专有的CSS属性，触发hasLayout。*/
    }

    关于zoom:1

让div在屏幕上居中（水平居中+垂直居中）的方法总结

让div在屏幕上居中（水平居中+垂直居中）的方法总结
2021年08月31日 235 字 大概 1 分钟

  • html代码如下：

        <div class="book">
            <div class="front-cover">
               
            </div>
    </div>

  • Css居中方法 （敲黑板）重点

    • 首先将元素设置成为绝对定位，然后距顶部和左各50%，此时的元素还不是居中的，因此需要通过一定的偏移将其移到理想位置，两种方法的主要思想都是一样的，第一种通过margin-left和margin-top移动元素自身宽高的一半，另一种通过css3的属性transform的translate方法平移元素自身宽高的一半， 代码展示如下：
      ```css
      body {
      color: #ffffff;
      background: #444444;
      }

    .book {

     width: 300px;
 height: 300px;
 position: absolute;
 top: 50%;
 left: 50%;
 /* 第一种 */
 /* 兼容性 未使用css3, ie678 */
 /* margin-left: -150px; */
 /* margin-top: -150px; */
 /*第二种*/
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);

    }
    ```

    两种方法第一种的兼容性更加的好一些，因为其中没有使用Css3的属性 对于ie678的兼容比较友好

stylus之变量与mixin

stylus之变量与mixin
2021年08月31日 683 字 大概 3 分钟

混合书写(Mixins)

变量

  • 在stylus中 可以将常用的样式像表达式中变量赋值一样保存给一个变量、如下：
    /*进行变量的声明*/
    bg_color = #123456;
    box_size = 100px;
    /* 使用 */
    .box
        background-color bg_color
        width box_size
        height box_size
    编译后：
    .box {
       background-color: #123456;
       width: 100px;
       height: 100px;
     }
  • 属性查找
    Stylus有另外一个很酷的独特功能，不需要分配值给变量就可以定义引用属性。下面是个很好的例子，元素水平垂直居中对齐（典型的方法是使用百分比和margin负值），如下：
    #logo
        position: absolute
        top: 50%
        left: 50%
        width: w = 150px
        height: h = 80px
        margin-left: -(w / 2)
        margin-top: -(h / 2)
    在stylus中可以不使用这里的变量w和h, 而是简单地前置@字符在属性名前来访问该属性名对应的值：
    #logo
        position: absolute
        top: 50%
        left: 50%
        width: 150px
        height: 80px
        margin-left: -(@width / 2)
        margin-top: -(@height / 2)

    混合书写

  • 混合书写和函数定义方法一致，但是应用却大相径庭。

例如，在书写Css3样式时我们经常要进行兼容性处理，需要在属性前加上相应的前缀，下面有定义的border-radius(n)方法，其却作为一个mixin（如，作为状态调用，而非表达式）调用。 

    bg_color = #123456;
    box_size = 100px;

    /*定义mixin*/
    border-radius(n)
        -webkit-border-radius n
        -moz-border-radius n
        -ms-border-radius n
        -o-border-radius n
        border-radius n
    .box
        background-color bg_color
        width box_size
        height box_size
        border-radius(5px)
```  
进一步，我们可以利用arguments这个局部变量，传递可以包含多值的表达式,这样就可以給属性传递多个值。  
```css
border-radius()
        -webkit-border-radius arguments
        -moz-border-radius arguments
        -ms-border-radius arguments
        -o-border-radius arguments
        border-radius arguments

Stylus支持通过使用{}字符包围表达式来插入值，其会变成标识符的一部分。例如，-webkit-{‘border’ + ‘-radius’}等同于-webkit-border-radius.

再进一步，在stylus中我们还可以对border-radius再做进一步的处理 类似与js中的函数封装 ，如下(这样对于任何需要做兼容性处理的属性 我们只需要调用两次mixin出入所需参数，大大的简化了一下琐碎代码工作):

 vendor(prop,args)
    -webkit-{prop} args
    -moz-{prop} args
    -ms-{prop} args
    -o-{prop} args
    {prop} args

border-radius(n)
    vendor('border-radius',arguments)
box-shadow(n)
    vendor('boa-shadow',arguments)
.box
    background-color bg_color
    width box_size
    height box_size
    border-radius(5px)

编译后：
 .box {
  background-color: #123456;
  width: 100px;
  height: 100px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  -moz-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  -ms-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  -o-box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
}

如何手动实现一个New操作

如何手动实现一个New操作
2021年08月31日 842 字 大概 3 分钟

写在前面

在所有的前端面试中常常喜欢考面试者如何手写一个new操作符，作为在准备秋招的大三党，我也要考虑这些。
那么我们先看看new操作符都干了什么事情，有哪些操作？通过下面的代码来进行思考： 

// 新建一个类（构造函数）
function Otaku(name, age) {
    this.name = name;
    this.age = age;
    // 自身的属性
    this.habit = 'pk';
}
// 给类的原型上添加属性和方法
Otaku.prototype.strength = 60;
Otaku.prototype.sayYourName = function () {
    console.log('I am ' + this.name);
}
// 实例化一个person对象
const person = new Otaku('乔峰',5000);
person.sayYourName();
console.log(person);//打印出构造出来的实例
```    
![控制台打印结果](http://p9utic4op.bkt.clouddn.com/new.png)   


## 解析  

从控制台打印出来的结果我们可以看出new操作符大概做了一下几件事情：  

 1. 返回（产生）了一个新的对象  
 2. 访问到了类Otaku构造函数里的属性  
 3. 访问到Otaku原型上的属性和方法  并且设置了this的指向（指向新生成的实例对象）
 
通过上面的分析展示，可以知道new团伙里面一定有Object的参与，不然对象的产生就有点说不清了。 先来边写写：  

```js
// 需要返回一个对象 借助函数来实现new操作 
// 传入需要的参数： 类 + 属性
const person = new Otaku('乔峰',5000);
const person1 = objectFactory(Otaku, '鸠摩智', 5000);

// 开始来实现objectFactory 方法 
function objectFactory(obj, name, age) {}
// 这种方法将自身写死了 如此他只能构造以obj为原型，并且只有name 和 age 属性的 obj
// 在js中 函数因为arguments 使得函数参数的写法异常灵活，在函数内部可以通过arguments来获得函数的参数
function objectFactory() {
    console.log(arguements); //{ '0': [Function: Otaku], '1': '鸠摩智', '2': 5000 }
     // 通过arguments类数组打印出的结果，我们可以看到其中包含了构造函数以及我们调用objectfactory时传入的其他参数
    // 接下来就是要想如何得到其中这个构造函数和其他的参数
    // 由于arguments是类数组，没有直接的方法可以供其使用，我们可以有以下两种方法:
    // 1. Array.from(arguments).shift(); //转换成数组 使用数组的方法shift将第一项弹出
    // 2.[].shift().call(arguments); // 通过call() 让arguments能够借用shift方法
    const Constructor = [].shift.call(arguments);
    const args = arguments;
    // 新建一个空对象 纯洁无邪
    let obj = new Object();
    // 接下来的想法 给obj这个新生对象的原型指向它的构造函数的原型  
    // 给构造函数传入属性，注意：构造函数的this属性
    // 参数传进Constructor对obj的属性赋值，this要指向obj对象
    // 在Coustructor内部手动指定函数执行时的this 使用call、apply实现
    Constructor.call(obj,...args);
    return obj;
}

```  

- 上面的代码注释太多，剔除注释以后的代码：

```js
    function objectFactory() {
        let Constructor = [].shift.call(arguments);
        const obj = new Object();
        obj.__proto__ = Conctructor.prototype;
        Constructor.call(obj,...arguments);
        return obj;
    }
```    
- 还有另外一种操作： 

```js
function myNew(Obj,...args){
  var obj = Object.create(Obj.prototype);//使用指定的原型对象及其属性去创建一个新的对象
  Obj.apply(obj,args); // 绑定 this 到obj, 设置 obj 的属性
  return obj; // 返回实例
}
Hexo 博客文章内容加密

Hexo 博客文章内容加密
2021年08月25日 261 字 大概 1 分钟

  • 安装对应依赖

    $ npm install --save hexo-blog-encrypt 
    或
    $ yarn add hexo-blog-encrypt
Nginx

Nginx
2021年08月19日 92 字 大概 1 分钟
  • 高性能的 web 服务器，开源免费
  • 一般用于静态服务、负载均衡
  • 反向代理
  • 访问日志 记录用户访问的每一条信息
Docker 基础学习

Docker 基础学习
2021年08月01日 800 字 大概 3 分钟

容器技术

应用场景：

  • Web 应用的自动化打包和发布
  • 持续集成与发布 CI、CD
  • 自动化测试
Gitflow

Gitflow
2021年05月12日 1.3k 字 大概 6 分钟

Git 操作流程（命令行操作）

基本概念：

  • 工作区
  • 暂存区
  • 远程仓库

相关链接

不同的时间戳获取方式对比

不同的时间戳获取方式对比
2020年08月06日 338 字 大概 1 分钟

在开发过程中经常会遇到时间戳的获取和对比
不同的时间戳获取方式也存在性能的差异，虽然差异不会太大，但是也可以多考虑在日常开发中使用性能更佳的方式

经常用的时间戳的获取方式有：

const timeStamp = new Date().getTime(); // number 类型

// new Date() 返回 实例化的时刻和日期 
const timeStamp = +new Date(); // 通过类型转化为时间戳 number

const timeStamp = Date.now(); // number

测试代码 

 console.time('+new Date()')
  for(var i = 0; i < 650000; i++) {
    var o = + new Date()
  }
  console.timeEnd('+new Date()')

  console.time('new Date().getTime:')
  for(var j = 0; j < 650000; j++) {
    var p = new Date().getTime();
  }
  console.timeEnd('new Date().getTime')

  console.time('Date.now()')
  for(var k = 0; k < 650000; k++) {
    var q = Date.now()
  }
  console.timeEnd('Date.now()')

//  ------ 输出------
+new Date(): 146.077880859375ms
new Date().getTime: 99.68603515625ms
Date.now(): 63.155029296875ms

  • Date.now()
    Date.now() 用的时间最少，它与其它获取时间戳最大的区别就是，一个是 constructor 的 属性，其它是 constructor.prptotype 的属性，实例化的区别，显然实例化对象花的时间更多

  • +new Date()
    涉及到对象实例化、类型转换，转换成数字, 耗时最多

虽然差别不大，但是也算是一种性能的追求

更多具体性能对比参考如下：
date.now() vs new Date()