[JavaScript知识库]前端知识记录

JS

import VS require

简介

• require/exports 是 CommonJS/AMD 中为了解决模块化语法而引入的。
• import/export 是ES6引入的新规范（涉及浏览器引擎兼容问题）。

调用时机

• require 是运行时调用，所以理论上可以运作在代码的任何地方。
• import 是编译时调用，所以必须放在文件的开头。

本质

• require 是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把结果赋值给某个变量。它是普通的值拷贝传递。
• import 是解构过程。使用import导入模块的属性或者方法是引用传递。且import是read-only的，值是单向传递的。default是ES6 模块化所独有的关键字，export default {} 输出默认的接口对象，如果没有命名，则在import时可以自定义一个名称用来关联这个对象。

require

在模块中，将所要导出的数据存放在module的export属性中，在经过CommonJs/AMD规范的处理，在需要的页面中使用require指定到该模块，即可导出模块中的export属性并执行赋值操作（值拷贝）。

// module.js
module.exports = {
    a: function() {
        console.log('exports from module');
    }
}

// sample.js
var obj = require('./module.js');
obj.a()  // exports from module

import

// module.js
export function test(args) {
  console.log(args);
}
// 定义一个默认导出文件, 一个文件只能定义一次
export default {
  a: function() {
    console.log('export from module');
  }
}
export const name = 'gzc'

// 使用_导出export default的内容
import _, { test, name } from './a.js'
test(`my name is ${name}`)  // 模板字符串中使用${}加入变量

简书：JS中的「import」和「require 」

html2canvas：HTML截图

截图

方法一：

function convert() {
	html2canvas(document.body).then(canvas => {
		document.body.appendChild(canvas)
	});
}

html2canvas(document.querySelector("#capture")).then(canvas => {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");  // 获取存储路径
    document.body.appendChild(image)
});

方法二（特定元素）：

html2canvas(document.querySelector("#capture")).then(canvas => {
  document.body.appendChild(canvas)
});

保存到文件（引入FileSaver.js） 未实现

https://github.com/eligrey/FileSaver.js

需要先通过node.js安装

npm install file-saver --save
bower install file-saver

import { saveAs } from 'file-saver';
FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })
var FileSaver = require('file-saver');
function TakeScreenshot()
{
	html2canvas(document.body).then(function(canvas) {
		canvas.toBlob(function(blob) {
			saveAs(blob, "test.png");
		});
	});
}

方法二（下载到浏览器默认路径）

let aLink=document.createElement('a');
aLink.href='imgUrl.png'//设置下载的图片链接
aLink.download='imgName.png'//设置图片下载之后的名称
aLink.click()//触发点击事件

JS - 使用 html2canvas 将页面保存成图片（或对指定元素截图）
fileSaverJS 客户端保存文件

HTML转pdf

工具

https://github.com/wuxue107/bookjs-eazy
https://gitee.com/wuxue107/screenshot-api-server

HTML转图片

https://phantomjs.org/