1、canvas:设置width和height
不是style中的样式,而是标签属性:
<canvas width="100" height="100"></canvas> <!-- right -->
canvas.attr("width",100);canvas.sttr("height",100); //right
<canvas style="width:100px; height:100px; "></canvas> <!-- wrong-->
canvas.css({"width":"100px","height":"100px"}); //wrong!
2、context = canvas.get(0).getContext('2d'); //此处需要用到DOM元素,而不是jquery元素!
/
1、只设置body100%无法使页面100%显示,还需要设置html为100%。
html,body{
width:100%;
height:100%;
}
2、require/exports 和 import/export 的区别
简单来说import和require都JavaScript模块规范,不过背后的实现区别还是蛮大的,而你在vue里面使用import和require其实是没有区别的(Webpack1),因为最后都会转成require。
require/exports 和 import/export 形式不一样
require/exports 的用法只有以下三种简单的写法:
const fs = require('fs')
exports.fs = fs
module.exports = fs
而 import/export 的写法就多种多样:
import fs from 'fs'
import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'
export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'
require/exports 和 import/export 本质上的差别
形式上看起来五花八门,但本质上:
- CommonJS 还是 ES6 Module 输出都可以看成是一个具备多个属性或者方法的对象;
- default 是 ES6 Module 所独有的关键字,export default fs 输出默认的接口对象,import fs from 'fs' 可直接导入这个对象;
- ES6 Module 中导入模块的属性或者方法是强绑定的,包括基础类型;而 CommonJS 则是普通的值传递或者引用传递。
1、2 相对比较好理解,3 需要看个例子:
// counter.js
exports.count = 0
setTimeout(function () {
console.log('increase count to', exports.count++, 'in counter.js after 500ms')
}, 500)
// commonjs.js
const {count} = require('./counter')
setTimeout(function () {
console.log('read count after 1000ms in commonjs is', count)
}, 1000)
//es6.js
import {count} from './counter'
setTimeout(function () {
console.log('read count after 1000ms in es6 is', count)
}, 1000)
分别运行 commonjs.js 和 es6.js:
➜ test node commonjs.js
increase count to 1 in counter.js after 500ms
read count after 1000ms in commonjs is 0
➜ test babel-node es6.js
increase count to 1 in counter.js after 500ms
read count after 1000ms in es6 is 1
import是read-only的。举个例子
a.js
module.exports = 0;
main.js
var a0 = require('./a.js');
import a1 from './a.js';
a0++; /// 1
a1++; ///报错,babel直接编辑不过
1、import静态编译,import的地址不能通过计算
require就可以,例如 const url = "a" + "b";
Import url 直接报错了
require(url)不会报错
所以require都会用在动态加载的时候。
2、node 直接支持 require , 没有直接支持 import 。
特别是 node8 ,已经支持 es6 绝大多数特性和 es7 的绝大多数特性,就是没有 import。
3、import 是在编译过程中执行,而common的require是同步。
还有import传的是值引用,require是值拷贝。
import无论在node和浏览器上都不能直接使用吧,需要babel编译
//
1、在webpack打包的时候,可以在js文件中混用require和export。但是不能混用import 以及module.exports,必须配对使用(import->export)(require->module.exports)。