HTML5兼容性问题
为了使HTML5兼容IE8及更早的IE版本浏览器,加入一段注释,读取html5shiv来解决兼容性问题。
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
HTML5新特性
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储,localStorage 长期存储数据,浏览器关闭后数据不丢失; sessionStorage 的数据在浏览器关闭后自动删除;
语义化更好的内容元素,比如 article、footer、header、nav、section;
表单控件,calendar、date、time、email、url、search;
新的技术,Web Worker, Web Socket
Canvas
moveTo(x,y):起点,(x, y)为指定点
lineTo(x,y):从上一个指定点画到另一个点,指定点变成这个点
closePath():从上一个指定点画回到起点
stroke():真正画的动作(必须有它)
fillStyle:填充颜色
fillRect(x, y, width, height):矩形填充方式,x y为填充的矩形的左上角坐标,后两个参数为填充的矩形的大小
HTML5拖放
1. 首先为了使元素可拖动,把draggable属性设置为true
<img id="drag1" src="img_logo.gif" draggable="true">
2. 然后规定当元素被拖动时发生的动作:ondragstart事件
ev.dataTransfer.setData()方法设置被拖动元素的数据类型和值(这里把它的id存到Text中)
var item = document.getElementById("drag1"); item.ondragstart = function(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
3. 接收的元素设置允许放置:ondragover事件
receiver.ondragover = function(ev) { ev.preventDefault(); }
4. 进行放置:ondrop事件
receiver.ondrop = function(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
调用ev.preventDefault来避免浏览器对数据的默认处理(ondrop事件默认是以链接形式打开)
通过ev.dataTransfer.getData(“Text”)重新拿回之前设置的值,即前边item的id
将被拖元素追加到接收元素中(receiver)
模块化
(function(){ var Widget = function(){....}; // AMD && CMD if(typeof define === 'function'){ define(function(){ return Widget; }); // CommonJS }else if(typeof module !== "undefined" && module !== null){ module.exports = Widget; // window }else{ window.Widget = Widget; } })(); 作者:Treri 链接:https://www.zhihu.com/question/23321329/answer/24199265 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
CommonJs
CommonJs 是服务器端模块的规范,Node.js采用了这个规范。
CommonJS中的require是同步的。模块系统需要同步读取模块文件内容,并编译执行以得到模块接口。但在浏览器端,加载 JavaScript 最佳、最容易的方式是在 document 中插入<script> 标签。但脚本标签天生异步,传统 CommonJS 模块在浏览器环境中无法正常加载。
像Node.js主要用于服务器的编程,加载的模块文件一般都已经存在本地硬盘,所以加载起来比较快,不用考虑异步加载的方式,所以CommonJS规范比较适用。
AMD
异步模块定义规范(Asynchronous Module Definition)制定了定义模块的规则,这样模块和模块的依赖可以被异步加载。这和浏览器的异步加载模块的环境刚好适应(浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题)。
AMD推崇依赖前置,换句话说,在解析和执行当前模块之前,模块作者必须指明当前模块所依赖的模块。
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好 a.doSomething() // ... b.doSomething() // ... });
代表:requireJS
参考:AMD规范
CMD
CMD(Common Module Definition)可以说是AMD的一种变体。它和AMD的主要区别是CMD推崇依赖就近(按需加载),可以把依赖写进你的代码中的任意一行。
define(function(require, exports, module) { var a = require('./a') a.doSomething() var b = require('./b') b.doSomething() })
代码在运行时,首先是不知道依赖的,需要遍历所有的require关键字,找出后面的依赖。具体做法是将function toString后,用正则匹配出require关键字后面的依赖。显然,这是一种牺牲性能来换取更多开发便利的方法。
参考:CMD规范 AMD和CMD的区别
CSS3
圆角:boader-radius
盒阴影:box-shadow
边界图片:boarder-image
背景图像大小:background-size
背景图像定位:background-image
线性渐变:linear-gradient 默认从上到下,0deg指从下到上,rgba(255,0,0,0)的最后一个0代表透明度,另外可以在颜色后面加上百分数代表渐变结点位置。
径向渐变:radial-gradient
变换:transform
- transform: translate(50px, 100px) :右移50px,下移100px
- transform: rotate(30deg):顺时针旋转30度
- transform: scale(2, 4):宽变为2倍,高变为4倍
过渡:transition: property, duration, timing, delay 属性,持续时间(不可省),快进慢出之类(可省),延迟(可省)
动画:
- @keyframes:定义动画的名字、from和to
- animation:哪个动画(上面定义的名字),持续时间
盒模型:
- box-sizing: border-box:使宽高包括内边距和边框
- box-sizing: content-box:默认值
圣杯布局和双飞翼布局
原生Ajax
1. 创建XHR对象
var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
2. 向服务器发送请求
xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();
open的第三个参数:true——异步,false——同步
3. 服务器响应
- onreadystatechange 事件:当 readyState 属性改变时,就会触发该事件
- xmlhttp.readyState:XMLHttpRequest 的状态,从0到4发生变化(4代表全部数据接收完成)
- xmlhttp.status:响应的HTTP状态(200表示成功)
- xmlhttp.responseText:响应返回的文本
xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } }
4. 取消请求:xmlhttp.abort()
跨域
性能优化