我的前端常范错误集锦和部分易混淆点

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 出生在野生规范当中，什么叫做野生规范？即这些规范是 JavaScript 社区中的开发者自己草拟的规则，得到了大家的承认或者广泛的应用。比如 CommonJS、AMD、CMD 等等。import/export 则是名门正派。TC39 制定的新的 ECMAScript 版本，即 ES6（ES2015）中包含进来。

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都会用在动态加载的时候。

两者规范不一样，require是CommonJs,AMD,CMD规范中定义的模块请求方式，import是es6规范定义的模块请求方式，从规范与实现定义来说 require是动态加载，import是静态加载，从底层的运行来讲，require是在程序运行的时候去解析而import是在编译的时候去做解析请求包，require是请求整个包对象而import是只请求模块中需要的请求的部分。现在import应该还只能算是ES6的语法规范，babel打包的话打出来应该还是跟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)。