模块化发展历程

模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。

IIFE： 使用自执行函数来编写模块化，特点：在一个单独的函数作用域中执行代码，避免变量冲突。

1
2
3
4
5
(function(){
  return {
    data:[]
  }
})()
more >>

展开全文 >>

module.exports和exports和export和export default的区别，import和require的区别

在es5中，用module.exports和exports导出模块，用require引入模块。
es6新增export和export default导出模块，import导入模块。

CommonJS规范之module.exports和exports & require

模块定义和使用

在 Commonjs 中，一个文件就是一个模块。在一个node执行一个文件时，会给这个文件内生成一个 exports和module对象， 定义一个模块导出通过 exports 或者 module.exports 挂载即可，而module又有一个exports属性。他们之间的关系如下图，都指向一块{}内存区域。

1
2
3
4
5
6
7
exports = module.exports = {};
//utils.js
let a = 100;
console.log(module.exports); //能打印出结果为：{}
console.log(exports); //能打印出结果为：{}
exports.a = 200; //这里辛苦劳作帮 module.exports的内容给改成 {a : 200}
exports = '指向其他内存区'; //这里把exports的指向指走
more >>

展开全文 >>

workbox路由缓存策略

下面介绍一下 workbox 默认提供的几种缓存策略 API，这些 API 可以被当成 handler 使用。

Stale While Revalidate

这种策略的意思是当请求的路由有对应的 Cache 缓存结果就直接返回，在返回 Cache 缓存结果的同时会在后台发起网络请求拿到请求结果并更新 Cache 缓存，如果本来就没有 Cache 缓存的话，直接就发起网络请求并返回结果，这对用户来说是一种非常安全的策略，能保证用户最快速的拿到请求的结果，但是也有一定的缺点，就是还是会有网络请求占用了用户的网络带宽。可以像如下的方式使用 State While Revalidate 策略：

more >>

展开全文 >>

并发请求调度池

问题

请实现如下的函数，可以批量请求数据，所有的url地址在urls参数中，同时可以通过max参数控制请求的并发度，当所有请求结束之后，需要执行callback回调函数。发请求的函数可以直接使用fetch即可。

1
2
3
function sendRequest(urls: string[], max: number, callback: () => void) {
    // TODO
}
more >>

展开全文 >>

js中的eventloop

背景

Event Loop可以说是js老生常谈的一个话题了。作为一枚前端开发，需要清楚的认知浏览器中与node中事件循环与执行机制的不同，不可混为一谈。

浏览器的Event loop是在HTML5中定义的规范，而node中则由libuv库实现。

以下是参考一系列文章后的总结。

more >>

展开全文 >>

js精度问题

JavaScript 为什么不能处理小数运算

先看看下面的程序：

1
2
3
4
5
6
7
8
9
10
var sum = 0;
for(var i = 0; i < 10; i++) {
  sum += 0.1;
}

console.log(sum);

console.log(0.1 + 0.2);

console.log(0.2 + 0.3);

上面的程序会输出1、0.3、0.5吗？

more >>

展开全文 >>

css 3D立方体

曾经被问过实现一个3d立方体，太久不写css了，有些css3的属性一时还有点陌生了，这次通过这个小case也来复习一下css3的变换相关的内容。

html结构

1
2
3
4
5
6
7
8
9
10
<div class="box">
  <div class="container">
    <div class="side front">front</div>
    <div class="side top">top</div>
    <div class="side bottom">bottom</div>
    <div class="side left">left</div>
    <div class="side right">right</div>
    <div class="side back">back</div>
  </div>
</div>
more >>

展开全文 >>

Koa中间件原理

Koa是用Node.js实现的服务框架。在Koa中middleware的使用场景是在请求到来和发送响应之间（也就是在处理HTTP从流入到流出应用这一过程），对代码按照功能进行插件化管理，其重要性不言而喻。

熟悉redux的同学都知道，redux的中间件是采用函数式编程的compose方式对middleware进行组合。而Koa的中间件其实和redux大同小异。

Koa的中间件设计机制可谓风骚无比，本篇笔记，就来彻底搞清楚中间件到底怎么玩起来的

more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    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

Lozoe，<br>毕业于大连皇家民族学院，目前就职于驼厂<br><br>热爱大海与冷笑话，<br/>目前是一枚前端<br/><br/>爱生活，爱健身，爱编码<br>年轻无为，卖马为生。