跳至主要內容
requestAnimationFrame动画

requestAnimationFrame动画

function animate({timing, draw, duration}) {

  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    // timeFraction 从 0 增加到 1
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // 计算当前动画状态
    let progress = timing(timeFraction);

    draw(progress); // 绘制

    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }

  });
}
Mr.He小于 1 分钟JavaScriptrequestAnimationFrame
Web使用File

Web使用File

访问文件

<input type="file" id="input">
Mr.He大约 2 分钟JavaScriptFileReader
文件上传

文件上传

文件上传demo

接下来看一个简单的文件上传的例子：

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="image_uploads">Choose images to upload (PNG, JPG)</label>
    <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple>
  </div>
  <div class="preview">
    <p>No files currently selected for upload</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>
Mr.He大约 2 分钟JavaScriptFile
脚本defer & async

脚本defer & async

defer

defer 特性告诉浏览器不要等待脚本。相反，浏览器将继续处理 HTML，构建 DOM。脚本会“在后台”下载，然后 等 DOM 构建完成后，脚本才会执行。

换句话说：

  • 具有 defer 特性的脚本不会阻塞页面。
  • 具有 defer 特性的脚本总是要等到 DOM 解析完毕，但在 DOMContentLoaded 事件之前执行。
Mr.He大约 2 分钟JavaScriptFileReader
call、apply、bind

call、apply、bind

  1. 为context对象定义属性 fn ，并赋值this
  2. 此时的this指向myCall的调用者
  3. 判断是否有别的参数，决定context.fn时是否传参

自定义Call

Function.prototype.myCall = function(context = window, ...args){
	context.fn = this
	let result
	if(args.length){
		result = context.fn(...args)
	}else{
		result = context.fn()
	}
	delete context.fn
	return result
}
Mr.He小于 1 分钟JavaScript
深拷贝

深拷贝

  1. 判断传入值是否为对象
  2. 创造一个新对象，迭代传入对象进行赋值
  3. 对象的value为对象的话，递归调用函数
  4. 迭代完毕返回这个对象
  5. 传入非对象直接返回这个值

基础版本

function clone(target){
	if(typeof target === 'object'){
		const cloneTarget = {}
		for(let key in target){
			cloneTarget[key] = clone(target[key])
		}
		return cloneTarget
	}else{
		return target
	}
}
Mr.He小于 1 分钟JavaScriptnew
Promise简单实现

Promise简单实现

调用方式

const p = new MyPromise((resolve, reject) => {
	setTimeout(() => resolve('foo'), 500)
})

p.then((res) => { console.log(res) }, (err) => {})
Mr.He小于 1 分钟JavaScriptPromise
await串联/并联

await串联/并联

await 串联→等待

async function series() {
  await wait(500);
  await wait(500);
  return "done!";
}
Mr.He小于 1 分钟JavaScriptawait
Blob

Blob

Blob是什么 ？

不可变的，类似文件对象的原始数据

const blob = new Blob(blobParts, options)
Mr.He大约 3 分钟JavaScriptBlob
new关键字

new关键字

  1. 创建一个新对象
  2. 新对象内部[[Prototype]]赋值为 构造函数的prototype属性
  3. this指向新对象
  4. 给新对象添加属性
  5. 如果返回非空对象，则返回该对象；否则，返回刚创建的对象

代码实现

function create() {
	// 1.
	let obj = new Object()
	// 2.
	let Con = [].shift.call(arguments) // 获取第一个参数
	obj.__proto__ = Con.prototype
	// 3&4
	let result = Con.call(obj, ...arguments)
	// 5
	return typeof result === 'object' ? result || obj : obj
}
Mr.He小于 1 分钟JavaScriptnew