FE-Basics

📒 前端基础知识。

FE-Basics

技能树

BFC

BFC 定义: BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。

BFC 布局规则:

内部的 Box 会在垂直方向，一个接一个地放置。
Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
每个元素的 margin box 的左边，与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC 的区域不会与 float box 重叠。
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算 BFC 的高度时，浮动元素也参与计算

哪些元素会生成 BFC:

根元素
float 属性不为 none
position 为 absolute 或 fixed
display 为 inline-block, table-cell, table-caption, flex, inline-flex
overflow 不为 visible

参考

浏览器渲染页面过程

用户输入 URL 地址
对 URL 地址进行 DNS 域名解析
建立 TCP 连接（三次握手）
浏览器发送 HTTP 请求报文
服务器返回 HTTP 响应报文
关闭 TCP 连接（四次挥手）
浏览器解析文档资源并渲染页面

TCP

TCP 三次握手

TCP 四次挥手

JS 单线程运行机制

消息队列：消息队列是一个先进先出的队列，它里面存放着各种消息。
事件循环：事件循环是指主线程重复从消息队列中取消息、执行的过程。

主线程只会做一件事情，就是从消息队列里面取消息、执行消息，再取消息、再执行。当消息队列为空时，就会等待直到消息队列变成非空。而且主线程只有在将当前的消息执行完成后，才会去取下一个消息。这种机制就叫做事件循环机制，取一个消息并执行的过程叫做一次循环。消息就是注册异步任务时添加的回调函数。

事件循环

macroTask(宏任务): 主代码块, setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering

microTask(微任务): process.nextTick, Promise, Object.observe, MutationObserver

事件

事件流

事件捕获阶段
处于目标阶段
事件冒泡阶段

事件委托

不在事件的发生地（直接 dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素 DOM 的类型，来做出不同的响应。

举例：最经典的就是 ul 和 li 标签的事件监听

HTML

基础标签

<head></head>

<meta />

<link rel="stylesheet" href="" />

<title></title>

<body></body>

<center></center>

<section></section>

<article></article>

<aside></aside>

<div></div>

<ul></ul>

<li></li>

<p></p>

<h1></h1>
~
<h6></h6>

<button></button>

<input type="text" />

<a href=""></a>

<span></span>

<strong></strong>

<i></i>

CSS

CSS 样式

优先级: 行内样式 > 链接式 > 内嵌式 > @import 导入式

选择器

/* 选择所有元素 */
* {
}

/* 选择 div 元素 */
div {
}

/* 选择类名元素 */
.class {
}

/* 选择 id 元素 */
#id {
}

/* 选择 div 元素内的所有 p 元素 */
div p {
}

/* 选择 div 元素内下一层级的 p 元素 */
div > p {
}

css 选择器权重: !important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认

文本溢出

// 文本溢出单行显示
.single {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 文本溢出多行显示
.multiple {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

CSS3 新特性

transition：过渡
transform：旋转、缩放、移动或者倾斜
animation：动画
gradient：渐变
shadow：阴影
border-radius：圆角

Javascript

原型与原型链

实例的 proto 属性（原型）等于其构造函数的 prototype 属性。
Object.proto === Function.prototype
Function.prototype.proto === Object.prototype
Object.prototype.proto === null

继承实现

function extend(child, parent) {
    var F = function () {}; // 空函数为中介，减少实例时占用的内存

    F.prototype = parent.prototype; // f继承parent原型

    child.prototype = new F(); // 实例化f，child继承，child、parent原型互不影响

    child.prototype.constructor = child; // child构造函数指会自身，保证继承统一

    child.super = parent.prototype; // 新增属性指向父类，保证子类继承完备
}

深拷贝

function deepCopy(s, t) {
    t = t || (Object.prototype.toString.call(t) === "[object Array]" ? [] : {});

    for (var i in s) {
        if (typeof s[i] === "object") {
            t[i] = deepCopy(s[i], t[i]);
        } else {
            t[i] = s[i];
        }
    }

    return t;
}

Ajax

var ajax = {};

ajax.get = function (url, fn) {
    var xhr = new XMLHttpRequest();

    xhr.open("GET", url, true);

    xhr.onreadystatechange = function () {
        if (
            xhr.readyState === 4 &&
            (xhr.status === 200 || xhr.status === 403)
        ) {
            fn.call(this, xhr.responseText);
        }
    };

    xhr.send();
};

ajax.post = function (url, data, fn) {
    var xhr = new XMLHttpRequest();

    xhr.open("POST", url, true);

    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    xhr.onreadystatechange = function () {
        if (
            xhr.readyState === 4 &&
            (xhr.status === 200 || xhr.status === 403)
        ) {
            fn.call(this, xhr.responseText);
        }
    };

    xhr.send(data);
};

格式化日期

function formatDate(date, format) {
    if (arguments.length === 0) return null;

    format = format || "{y}-{m}-{d} {h}:{i}:{s}";

    if (typeof date !== "object") {
        if ((date + "").length === 10) date = parseInt(date) * 1000;
        date = new Date(date);
    }

    const dateObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay(),
    };

    const dayArr = ["一", "二", "三", "四", "五", "六", "日"];

    const str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (match, key) => {
        let value = dateObj[key];

        if (key === "a") return dayArr[value - 1];

        if (value < 10) {
            value = "0" + value;
        }

        return value || 0;
    });

    return str;
}

new 实现

function New(Class) {
    let obj = {};
    obj.__proto__ = Class.prototype;
    let res = Class.call(obj);
    return typeof res === "object" ? res : obj;
}

call 实现

Function.prototype.callfb = function (ctx) {
    if (typeof this !== "function") {
        throw new Error("Function undefined");
    }

    ctx = ctx || window;

    const fn = ctx.fn;

    ctx.fn = this;

    const args = [...arguments].slice(1);

    const res = ctx.fn(...args);

    ctx.fn = fn;

    return res;
};

apply 实现

Function.prototype.applyFb = function (ctx) {
    if (typeof this !== "function") {
        throw new Error("Function undefined");
    }

    ctx = ctx || window;

    const fn = ctx.fn;

    ctx.fn = this;

    const args = arguments[1];

    const res = Array.isArray(args) ? ctx.fn(...args) : ctx.fn();

    ctx.fn = fn;

    return res;
};

bind 实现

Function.prototype.bindFb = function (ctx) {
    const fn = this;

    const args = [...arguments].slice(1);

    const F = function () {};

    const fBind = function () {
        return fn.apply(
            this instanceof fBind ? this : ctx,
            args.concat(...arguments)
        );
    };

    if (fn.prototype) {
        F.prototype = fn.prototype;
    }

    fBind.prototype = new F();

    return fBind;
};

instanceof 实现

function instanceofFb(left, right) {
    let proto,
        prototype = right.prototype;

    proto = left.__proto__;

    while (proto) {
        if (proto === prototype) {
            return true;
        }

        proto = proto.__proto__;
    }

    return false;
}

Promise 实现

function promiseFb(fn) {
    const _this = this;
    this.state = "pending"; // 初始状态为pending
    this.value = null;
    this.resolvedCallbacks = []; // 这两个变量用于保存then中的回调，因为执行完Promise时状态可能还是pending
    this.rejectedCallbacks = []; // 此时需要吧then中的回调保存起来方便状态改变时调用

    function resolve(value) {
        if (_this.state === "pending") {
            _this.state = "resolved";
            _this.value = value;
            _this.resolvedCallbacks.map((cb) => {
                cb(value);
            }); // 遍历数组，执行之前保存的then的回调函数
        }
    }

    function reject(value) {
        if (_this.state === "pending") {
            _this.state = "rejected";
            _this.value = value;
            _this.rejectedCallbacks.map((cb) => {
                cb(value);
            });
        }
    }

    try {
        fn(resolve, reject);
    } catch (e) {
        reject(e);
    }
}

promiseFb.prototype.then = function (onFulfilled, onRejected) {
    // 因为then的两个参数均为可选参数，
    // 所以判断参数类型本身是否为函数，如果不是，则需要给一个默认函数如下（方便then不传参数时可以透传）
    // 类似这样： Promise.resolve(4).then().then((value) => console.log(value))
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (fn) => fn;
    onRejected =
        typeof onRejected === "function"
            ? onRejected
            : (e) => {
                  throw e;
              };

    switch (this.state) {
        case "pending":
            // 若执行then时仍为pending状态时，添加函数到对应的函数数组
            this.resolvedCallbacks.push(onFulfilled);
            this.rejectedCallbacks.push(onRejected);
            break;
        case "resolved":
            onFulfilled(this.value);
            break;
        case "rejected":
            onRejected(this.value);
            break;
        default:
            break;
    }
};

promiseFb.all = function (promises) {
    // 当这个数组里的所有promise对象全部变为resolve状态的时候，才会resolve
    return new Promise((resolve, reject) => {
        let done = gen(promises.length, resolve);
        promises.forEach((promise, index) => {
            promise.then((value) => {
                done(index, value);
            }, reject);
        });
    });
};

function gen(lenth, resolve) {
    let count = 0;
    let values = [];
    return function (i, value) {
        values[i] = value;
        if (++count === lenth) {
            resolve(values);
        }
    };
}

promiseFb.race = function (promises) {
    // 只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话，就会继续进行后面的处理
    return new Promise((resolve, reject) => {
        promises.forEach((promise) => {
            promise.then(resolve, reject);
        });
    });
};

promiseFb.prototype.catch = function (onRejected) {
    // 用于promise方法链时 捕获前面onFulfilled/onRejected抛出的异常
    return this.then(null, onRejected);
};

promiseFb.resolve = function (value) {
    return new Promise((resolve, reject) => {
        resolve(value);
    });
};

promiseFb.reject = function (reason) {
    return new Promise((resolve, reject) => {
        reject(reason);
    });
};

debounce 防抖

function debounce(fn, wait, immediate) {
    let timer;
    return function () {
        if (immediate) {
            fn.apply(this, arguments);
        }
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, wait);
    };
}

throttle 节流

function throttle(fn, wait) {
    let prev = new Date();
    return function () {
        const now = new Date();
        if (now - prev > wait) {
            fn.apply(this, arguments);
            prev = now;
        }
    };
}

双向绑定

双向绑定：视图（View）的变化能实时让数据模型（Model）发生变化，而数据的变化也能实时更新到视图层.

Object.defineProperty

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>mvvm</title>
    </head>
    <body>
        <p>数据值：<span id="data"></span></p>
        <p><input type="text" onkeyup="keyup()" /></p>
        <script>
            var obj = {
                data: "",
            };

            function keyup(e) {
                e = e || window.event;
                obj.data = e.target.value; // 更新数据值
            }

            Object.defineProperty(obj, "data", {
                get: function () {
                    return this.data;
                },
                set: function (newVal) {
                    document.getElementById("data").innerText = newVal; // 更新视图值
                },
            });
        </script>
    </body>
</html>

Proxy

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>mvvm</title>
    </head>
    <body>
        <p>数据值：<span id="data"></span></p>
        <p><input type="text" onkeyup="keyup()" /></p>
        <script>
            var obj = new Proxy(
                {},
                {
                    get: function (target, key, receiver) {
                        return Reflect.get(target, key, receiver);
                    },
                    set: function (target, key, value, receiver) {
                        if (key === "data") {
                            document.getElementById("data").innerText = value; // 更新视图值
                        }
                        return Reflect.set(target, key, value, receiver);
                    },
                }
            );

            function keyup(e) {
                e = e || window.event;
                obj.data = e.target.value; // 更新数据值
            }
        </script>
    </body>
</html>

Diff

算法

冒泡排序

两两对比

function bubble(arr) {
    const len = arr.length;

    for (let i = 0; i < len; i++) {
        for (let j = 0; j < len - i - 1; j++) {
            if (arr[j] > arr[j + 1]) {
                let temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    return arr;
}

选择排序

寻找最小的数，将索引保存

function selection(arr) {
    const len = arr.length;
    let minIndex, temp;
    for (let i = 0; i < len - 1; i++) {
        minIndex = i;
        for (let j = i + 1; j < len; j++) {
            if (arr[j] < arr[minIndex]) {
                minIndex = j;
            }
        }
        temp = arr[i];
        arr[i] = arr[minIndex];
        arr[minIndex] = temp;
    }
    return arr;
}

Webpack

常用 loader

file-loader: 加载文件资源，如字体 / 图片等，具有移动/复制/命名等功能；
url-loader: 通常用于加载图片，可以将小图片直接转换为 Date Url，减少请求；
babel-loader: 加载 js / jsx 文件，将 ES6 / ES7 代码转换成 ES5，抹平兼容性问题；
ts-loader: 加载 ts / tsx 文件，编译 TypeScript；
style-loader: 将 css 代码以<style>标签的形式插入到 html 中；
css-loader: 分析@import 和 url()，引用 css 文件与对应的资源；
postcss-loader: 用于 css 的兼容性处理，具有众多功能，例如添加前缀，单位转换等；
less-loader / sass-loader: css 预处理器，在 css 中新增了许多语法，提高了开发效率；

常用 plugin

UglifyJsPlugin: 压缩、混淆代码；
CommonsChunkPlugin: 代码分割；
ProvidePlugin: 自动加载模块；
html-webpack-plugin: 加载 html 文件，并引入 css / js 文件；
extract-text-webpack-plugin / mini-css-extract-plugin: 抽离样式，生成 css 文件；
DefinePlugin: 定义全局变量；
optimize-css-assets-webpack-plugin: CSS 代码去重；
webpack-bundle-analyzer: 代码分析；
compression-webpack-plugin: 使用 gzip 压缩 js 和 css；
happypack: 使用多进程，加速代码构建；
EnvironmentPlugin: 定义环境变量；

设计模式

发布订阅模式

const events = {
    listeners: {},
    subscribe: function (key, fn) {
        if (this.listeners[key]) {
            this.listeners[key] = [];
        }
        this.listeners[key].push(fn);
    },
    trigger: function () {
        const key = Array.prototype.shift.call(arguments);
        if (!this.listeners[key]) return;
        this.listeners[key].forEach((fn) => {
            fn.apply(this, arguments);
        });
    },
    remove: function (key, fn) {
        let fns = this.listeners[key];
        if (!fn) {
            this.listeners[key] = [];
            return;
        }
        for (let index = 0; index < fns.length; index++) {
            const _fn = fns[index];
            if (_fn === fn) {
                fns.splice(index, 1);
            }
        }
    },
};

观察者模式

function Dep() {
    this.subs = [];
}

Dep.prototype.addSub = function (sub) {
    this.subs.push(sub);
};

Dep.prototype.notify = function () {
    this.subs.forEach((sub) => sub.update());
};

const Watcher = function (fn) {
    this.fn = fn;
};
Watcher.prototype.update = function () {
    this.fn();
};

const dep = new Dep();
dep.addSub(
    new Watcher(function () {
        console.log("update");
    })
);

dep.notify();

License

bestvist/FE-Basics

ErrorLooks like something went wrong!

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Error
Looks like something went wrong!

Packages