ECMAScript
是一种由 ECMA 组织制定和发布的脚本语言规范
- JavaScript 是 ECMA 的实现
- JS 包含三个部分
- ECMAScript (核心语法)
- BOM (浏览器对象模型)
- DOM (文档对象模型)
- ES 的几个重要版本
- ES5 —— 09年发布
- ES6 (ES2015)
- ES7 (ES2016)
webpack
发表于
项目构建(build)
静态资源
什么叫静态资源？
- 我们通过标签的某些属性 (href、src、url…) 引入的资源叫静态资源
常见的静态资源？
- js
- css
- images
- fonts
静态资源的特点？
- 需要发送请求拿到具体内容
- 会在页面请求位置加载对应的资源
什么是项目构建?
- 编译项目中的 js、sass、less
- 合并 js / css 等资源文件
- 压缩 js / css / html 等资源文件
- js 语法检查
项目构建的作用
- 解决网页中引入静态资源过多加载速度慢、错综复杂的依赖关系的问题
- 如何解决?
- 合并压缩
- 简化项目构建, 自动化完成构建
Webpack
Gulp 是 基于任务 的, Webpack 是 基于整个项目 的
JS模块化
发表于
canvas
发表于
canvas
canvas 是 HTML5 新增的元素, 可以通过 js 中的脚本来 绘制图形、创建动画
canvas 元素具有默认的宽高
- width: 300px; height:150px;
canvas 标签的 width / height (不能在 css 中指定)
- width
- height
- 指定宽高只能在标签内指定 或者 js 设置
1
<canvas id="canvas" width="300" height="150"></canvas>
1
2
3
4
5
6canvas.width = document.documentElement.clientWidth
canvas.height = document.documentElement.clientHeight
window.onresize = function () {
canvas.width = document.documentElement.clientWidth
canvas.height = document.documentElement.clientHeight
}
替换内容
- 支持 canvas 的浏览器会忽略容器中的替换内容
- 不支持的浏览器会显示替换内容
1
2
3<canvas>
<span>您的浏览器不支持canvas</span>
</canvas>
HTML5
发表于
Zepto.js
发表于
art-template
发表于
jQuery
发表于
跨域
发表于
表单提交
发表于