前端模块化-CommonJS,AMD,CMD,ES6

模块化解决什么问题

随着 JavaScript 工程越来越大，团队协作不可避免，为了更好地对代码进行管理和测试，模块化的概念逐渐引入前端。模块化可以降低协同开发的成本，减少代码量，同时也是“高内聚，低耦合”的基础。

模块化主要解决两个问题：

  1. 命名冲突
  2. 文件依赖：比如 bootstrap 需要引入 jquery，jquery 文件的位置必须要 bootstrap.js 之前引入。
more >>

展开全文 >>

JavaScript 垃圾回收

垃圾回收

JavaScript 具有自动垃圾回收机制，这种垃圾回收机制原理其实很简单：找出那些不再继续使用的变量，然后释放其所占用的内存，垃圾回收器会按照固定的时间间隔周期性地执行这一操作。局部变量只有在函数执行的过程中存在，在这个过程中，会为局部变量在栈（或者堆）内存上分配空间，然后在函数中使用这些变量，直至函数执行结束。垃圾回收器必须追踪哪个变量有用哪个没用，对于不再有用的变量打上标记，以备将来回收其占用的内存，用于标识无用变量的策略主要有标记清除法和引用计数法。

more >>

展开全文 >>

JavaScript 常见的内存泄漏

什么是内存泄漏

JavaScript 是一种垃圾回收语言，垃圾回收语言通过周期性地检查之前被分配的内存是否可以从应用的其它部分访问来帮助开发者管理内存。内存泄露是指当一块内存不再被应用程序使用的时候，由于某种原因，这块内存没有返还给操作系统或者内存池的现象。内存泄漏可能会导致应用程序卡顿或者崩溃。

more >>

展开全文 >>

Vim 学习

本文的内容来自 vimtutor(v1.7)，在 Unix 系统下输入 “vimtutor” 即可进入教学模型。这里记录下来学习点滴，方便以后查看。

Vim 简介

Vim 是一款由 Vi 派生出来的命令行编辑器，具有语法高亮、代码折叠、多语言支持、多视图等强大的功能，并且支持插件扩展和调用脚本语言。Vim 有多种模式，其中最常用的为插入和执行模式，仅仅通过键盘来在这些模式之中切换，大大提高了程序开发效率。

Vim 使用

移动光标

1
2
3
4
5
6
要移动光标使用 h、j、k、l 键
     ^
     k        
< h       l >
     j
     v
more >>

展开全文 >>

使用 requestAnimationFrame 实现动画

如何实现一个动画

我们来实现一个最简单的需求，将一个元素从屏幕左边均匀地移动到屏幕右边。

下面是效果:

more >>

展开全文 >>

JavaScript 循环与异步

JS 中的循环与异步

JS 中有多种方式实现循环：for; for in; for of; while; do while; forEach; map 等等。假如循环里面的内容是异步并且 await 的，那异步代码究竟是像 Promise.all一样将循环中的代码一起执行，还是每次等待上一次循环执行完毕再执行呢？

首先看结论

forEach 和 map, some, every 循环是并行执行的，相当于 Promise.all，其它 for, for in, for of, while, do while 都是串行执行的。

先定义异步函数 foo 和可遍历数组 arr：

1
2
3
4
5
6
7
8
9
const arr = Array.from({ length: 5 }, (v, k) => k)
const foo = i => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(i)
      resolve('')
    }, 1000)
  })
}
more >>

展开全文 >>

正则表达式格式化查询参数

记录一下，通过一行正则表达式和 replace 方法简单实现正则表达式格式化查询参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const url = 'https://lz5z.com/000/?a=123&b=456&c=%E4%B8%AD%E6%96%87'
/** 
 * 格式化查询字符串(正则实现) 
 * @param url url地址 
 * @return {Object} 格式化的json对象 
 */
function formatUrl(url) {
    const reg = /(?:[?&]+)([^&]+)=([^&]+)/g
    let data = {}

    function fn(str, key, value) {
        data[decodeURIComponent(key)] = decodeURIComponent(value)
    }
    url.replace(reg, fn)
    return data
}

console.log(formatUrl(url)) // { a: '123', b: '456', c: '中文' }

下次面试官问你的时候，你能答上来吗？😉😉😉

more >>

展开全文 >>

JavaScript 深拷贝和浅拷贝

在 JavaScript 引用数据类型中，变量保存的是一个指向堆内存的指针，当需要访问引用类型（如对象，数组等）的值时，首先从栈中获得该对象的地址指针，然后再从堆内存中取得所需的数据。

1
2
3
4
5
let obj1 = { x: 1, y: 2 }
let obj2 = obj1
obj2.x = 2
console.log(obj1) // { x: 2, y: 2 }
console.log(obj2) // { x: 2, y: 2 }

以上的拷贝方式就是浅拷贝，当 obj2 的值改变时，obj1 的值也随之发生改变。

more >>

展开全文 >>

Shell 学习

Shell 变量

  • 变量默认都是字符串类型
  • 变量名和等号之间不能有空格
  • 命名：只能使用英文字母，数字和下划线，首个字符不能以数字开头
  • 查看变量 set 命令，删除变量 unset variable_name
  • set -u 调用未声明变量报错（默认无提示）

变量叠加

1
2
3
4
x=123
x="$x"456
x=${x}789
echo $x # 123456789
more >>

展开全文 >>

HTTP/2 学习

HTTP/2.0 简介

  1. HTTP/2 标准于 2015 年发布，目前大部分主流浏览器均已提供支持。
  2. HTTP/2 没有改变 HTTP 的应用语义，其请求方法、状态码、URI 等核心概念与 HTTP/1.1 保持一致。
  3. HTTP/2 采用了二进制而非明文来打包、传输客户端—服务器间的数据。
  4. HTTP/2 的前身是 SPDY 协议。
  5. HTTP/2 中 TLS 为可选，但是大厂商如 chrome 和 firefox 表示只会实现基于 TLS 的 HTTP/2。所以要部署 HTTP/2，首先要升级 HTTPS。
  6. HTTP/2 通过以下举措，减少网络延迟，提供浏览器加载速度：
    • 对 HTTP 头字段进行数据压缩(即 HPACK 算法)；
    • HTTP/2 服务端推送(Server Push)；
    • 请求管线化；
    • 修复 HTTP/1. 0版本以来未修复的队头阻塞问题；
    • 对数据传输采用多路复用，让多个请求合并在同一 TCP 连接内。
more >>

展开全文 >>

Web 安全学习

去年一家专门做企业安全的公司来我们公司做测试和培训，经过他们一周多的测试，找到了公司多个项目中存在的很多问题，惊奇地发现，我们组的前端项目竟然没有发现一个漏洞。虽然没有找到并不代表没有，但是从中也能看出我们组在这方面还是有些实力的。而我对安全方面可以说是没有多少积累，最近抽时间学习一下 web 安全相关的知识。

XSS

XSS(Cross Site Script) 跨站脚本攻击，是攻击者利用网站漏洞在网站上注入恶意客户端代码，以获取访问权限，冒充用户，修改 HTML 内容等。恶意内容一般包括 JavaScript，主要方式是获取用户的隐私数据，例如 cookie，session 等。

XSS 攻击可以分为 3 类：存储型、反射型、基于 DOM。

more >>

展开全文 >>

tag:

<div>精通 JavaScript、Python、Ruby、Java、Lisp等技术<sup>名词拼写</sup>。 擅长各种从入门到放弃。 毕业于世界著名学府——北大<sup>青鸟</sup>。 如果你也有志于成为一名程序员<sup>鼓励师</sup>的话，请联系我。</div>