Fork me on GitHub

手写promise

Promise 规范

promise 最早是在 commonjs 社区提出来的，当时提出了很多规范。比较接受的是 promise/A 规范。但是 promise/A 规范比较简单，后来人们在这个基础上，提出了 promise/A+规范，也就是实际上的业内推行的规范；es6 也是采用的这种规范，但是 es6 在此规范上还加入了 Promise.all、Promise.race、Promise.catch、Promise.resolve、Promise.reject 等方法。

我们可以通过脚本来测试我们写的 Promise 是否符合 promise/A+的规范。将我们实现的 Promise 加入以下代码：

Promise.defer = Promise.deferred = function () {
  let dfd = {};
  dfd.promise = new Promise((resolve, reject) => {
    dfd.resolve = resolve;
    dfd.reject = reject;
  });
  return dfd;
};

然后通过 module.exports 导出，安装测试的脚本：

npm install -g promises-aplus-tests

在实现 Promise 的目录执行以下命令：

promises-aplus-tests promise.js

接下来，脚本会对照着 promise/A+的规范，对我们的脚本来一条一条地进行测试。

more >>

展开全文 >>

css格式化上下文（BFC、IFC）

BFC

Formatting context (格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

那么 BFC 是什么呢？

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素 ，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

more >>

展开全文 >>

typescript基础

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

区别

TypeScript JavaScript
JavaScript 的超集用于解决大型项目的代码复杂性 一种脚本语言，用于创建动态网页
可以在编译期间发现并纠正错误 作为一种解释型语言，只能在运行时发现错误
强类型，支持静态和动态类型 弱类型，没有静态类型选项
最终被编译成 JavaScript 代码，使浏览器可以理解 可以直接在浏览器中使用
支持模块、泛型和接口 不支持模块，泛型或接口
支持 ES3，ES4，ES5 和 ES6 等 不支持编译其他 ES3，ES4，ES5 或 ES6 功能
社区的支持仍在增长，而且还不是很大 大量的社区支持以及大量文档和解决问题的支持

安装

npm install - g typescript

编译

tsc helloworld.ts
// helloworld.ts => helloworld.js

在线学习语法和特性

more >>

展开全文 >>

前端3大框架原理比较分析

首先了解一下浏览器的渲染原理《How Browsers Work》译文由于最近在探索框架性能，各框架的正确使用场景，对框架的数据绑定原理做了如下的总结：

1、Angular
Angular 的数据观测采用的是脏检查（dirty checking）机制。每一个指令都会有一个对应的用来观测数据的对象，叫做 watcher；一个作用域中会有很多个 watcher。每当界面需要更新时，Angular 会遍历当前作用域里的所有 watcher，对它们一一求值，然后和之前保存的旧值进行比较。如果求值的结果变化了，就触发对应的更新，这个过程叫做 digest cycle。
脏检查有两个问题：

more >>

展开全文 >>

剖析commonjs与es module

前言

今天我们来深度分析一下 Commonjs 和 Es Module，希望通过本文的学习，能够让大家彻底明白 Commonjs 和 Es Module 原理，能够一次性搞定面试中遇到的大部分有关 Commonjs 和 Es Module 的问题。

老规矩我们带上疑问开始今天的分析 🤔🤔🤔：

  1. Commonjs 和 Es Module 有什么区别 ？
  2. Commonjs 如何解决的循环引用问题 ？
  3. 既然有了 exports，为何又出了 module.exports? 既生瑜，何生亮 ？
  4. require 模块查找机制 ？
  5. Es Module 如何解决循环引用问题 ？
  6. exports = {} 这种写法为何无效 ？
  7. 关于 import() 的动态引入 ？
  8. Es Module 如何改变模块下的私有变量 ？
  9. … more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

前端攻城狮
记录分享自己工作、学习中学到的知识