// 创建一个新的SpeechRecognition对象
var recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();
recognition.lang = 'en-US'; // 设置语言
recognition.interimResults = false; // 设置是否返回临时结果
recognition.maxAlternatives = 1; // 设置返回的最大替代词数量
// 当识别到语音结束时，返回结果
recognition.onresult = function(event) {
console.log('You said: ', event.results[0][0].transcript);
};
// 开始语音识别
recognition.start();
Fetch API提供了一个获取资源的接口（包括跨域）。任何使用过 XMLHttpRequest 的人都能轻松上手，但新的API提供了更强大和灵活的功能集。
第一个参数是URL地址。
第二个参数（可选）是fetch使用的选项（method、headers等选项）
fetch会返回一个promise对象，resolve对应请求的Response。
一个布尔值来标示该Response是否读取过Body
headers
此Response所关联的Headers 对象.
ok
一个布尔值来标示该Response成功(状态码200-299) 还是失败.
redirected
该Response是否来自一个重定向，如果是的话，它的URL列表将会有多个
status
Response的状态码 (例如, 200 成功).
statusText
与该Response状态码一致的状态信息 (例如, OK对应200).
type
Response的类型 (例如, basic, cors).
url
Response的URL.
arrayBuffer()
读取 Response对象并且将它设置为已读（因为Responses对象被设置为了 stream 的方式，所以它们只能被读取一次） ,并返回一个被解析为ArrayBuffer格式的promise对象
blob()
读取 Response对象并且将它设置为已读（因为Responses对象被设置为了 stream 的方式，所以它们只能被读取一次） ,并返回一个被解析为Blob格式的promise对象
formData()
读取Response对象并且将它设置为已读（因为Responses对象被设置为了 stream 的方式，所以它们只能被读取一次） ,并返回一个被解析为FormData格式的promise对象
json()
读取 Response对象并且将它设置为已读（因为Responses对象被设置为了 stream 的方式，所以它们只能被读取一次） ,并返回一个被解析为JSON格式的promise对象
text()
读取 Response对象并且将它设置为已读（因为Responses对象被设置为了 stream 的方式，所以它们只能被读取一次） ,并返回一个被解析为USVString格式的promise对象
var myImage = document.querySelector('.my-image');
fetch('flowers.jpg').then(function(response) {
return response.blob();
}).then(function(response) {
var objectURL = URL.createObjectURL(response);
myImage.src = objectURL;
});
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
fetch(url, {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json'
})
})
var formData = new FormData();
var fileField = document.querySelector("input[type='file']");
formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);
fetch('https://example.com/upload', {
method: 'PUT',
body: formData
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
弹窗和弹框是网站应用中经常用到的技术，但是在页面弹出一个全屏的弹窗的时候，还是可以使用触摸来滑动弹窗下面的页面。
为了用户有更好的体验，可以使用以下代码，在弹窗的时候禁用滚动，弹窗关闭的时候再次启用滚动。
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}
$(selector)
$(selector,context)
$(Element|Document|Window)
$('<img/>')
$('<img/>',{
src: url
})
DOMContentLoaded
jQuery(function(){});
$(document).ready(function(){});
ES6的Proxy对象可以用来拦截一个Object对象的属性的修改，这次我们利用它来实现一个简单的双向绑定。
废话不多说，请看代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>View to model</title>
</head>
<body>
<div>
<!-- 使用'bind-to'的属性来标记这个输入框里的值会对Model里的属性进行修改 -->
<input bind-to="name" />
<input bind-to="name" />
</div>
<!-- 使用#属性名#来把Model里的值映射到DOM中 -->
<span>#name#</span>
<span>#name#</span>
<button onclick="reset()">reset</button>
<script type="text/javascript">
var handler = {
// 拦截属性的设置，触发试图的更新
set: function(target, key, value, receiver) {
target[key] = value;
updateView(propertyName);
return Reflect.set(target, key, value);
},
};
// 双向绑定的对象
var model = new Proxy({}, handler);
// 双向绑定列表
var inputs = {},views = {};
var all = document.all;
// 遍历所有DOM元素
for(var i=0,l=all.length;i<l;i++){
// 找到所有有bind-to的输入框
if(all[i].getAttribute('bind-to')){
var dom = all[i];
var propertyName = dom.getAttribute('bind-to');
inputs[propertyName] = inputs[propertyName] ? inputs[propertyName] : [];
views[propertyName] = views[propertyName] ? views[propertyName] : [];
inputs[propertyName].push(dom);
dom.addEventListener('change',function function_name(e) {
var propertyName = e.target.getAttribute('bind-to');
model[propertyName] = e.target.value;
})
}
// 找到所有model驱动的页面元素
if(all[i].innerHTML && all[i].innerHTML.length>2 &&
all[i].innerHTML[0] == '#' &&
all[i].innerHTML[all[i].innerHTML.length-1] == '#'){
var propertyName = all[i].innerHTML.slice(1,all[i].innerHTML.length-1);
inputs[propertyName] = inputs[propertyName] ? inputs[propertyName] : [];
views[propertyName] = views[propertyName] ? views[propertyName] : [];
views[propertyName].push(all[i]);
}
}
// 更新View
function updateView(propertyName) {console.log('update ' + propertyName);
if(views[propertyName]){
for(var i = 0,l = views[propertyName].length;i < l;i++){
views[propertyName][i].innerText = model[propertyName];
}
}
if(inputs[propertyName]){
for(var i = 0,l = inputs[propertyName].length;i < l;i++){
inputs[propertyName][i].value = model[propertyName];
}
}
}
function reset() {
for(var name in model){
model[name] = '';
}
}
</script>
</body>
</html>
Promise是我们处理异步操作的时候经常用到的。
有的时候我们会需要顺序执行很多异步操作，如果操作比较少的时候还可以写成a.then(b).then(c)...,可是如果异步操作很多的时候就不能这样写了。
可以利用数组的reduce函数达到同样的效果，这个时候不管有多少异步操作都可以连在一起了。
代码如下：
function waitPromise(time) {
console.log(time);
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('resolved');
}, time);
});
}
function log(data) {
return new Promise((resolve, reject) => {
console.log(data + '@' + (new Date().getSeconds()));
resolve();
});
}
var ps = [];
for (var i = 0; i < 3; i++) {
let time = (i + 1) * 1000;
ps.push(() => waitPromise(time));
ps.push(log);
}
console.log('started' + '@' + (new Date().getSeconds()));
var p = Promise.resolve();
ps.reduce((p, c) => {
return p.then(c)
}, p).then(() => {
console.log('all finished');
}).catch(reject => {
console.log('reject', reject)
});
输出结果:
started@59 1000 resolved@0 2000 resolved@2 3000 resolved@5 all finished
jQuery.extend可以扩展jQuery对象本身。
用来在jQuery命名空间上增加新函数，或者合并对象。
1. 增加方法：
$.extend({
hello: function () {
console.log(this)//function jQuery(selector, context)
}
});
$.hello();
var obj1 = {'name' : 'sheng00'};
var obj2 = {'sex' : 'Male'};
$.extend(obj1, obj2);
console.log(obj1)//Object {name: "sheng00", sex: "Male"}
用来扩展 jQuery 元素集来提供新的方法（通常用来制作插件）
$.fn.extend({
turn_red: function () {
return this.each(function () {
this.style.color = 'red'
});
}
});
$('.elements').turn_red(); // sets color to red
效果和jQuery.fn.turn_red=function(){}是一样的
有的时候我们在动态生成页面内容的时候，需要动态应用filter，这里和大家分享一下方法
[
{val:"text"},
{val:"upper text",filter:"uppercase"},
{val:new Date(),filter:"date",formatter:"yyyy-MM-dd"}
]
数据的值和格式都是动态的
这时候我们需要再写一个filter去动态应用数据的格式
angular.module("app",[])
.filter('use_filter', function ($filter) {
return function (value, filterName, formatter) {
return filterName ?
(formatter ?
$filter(filterName)(value, formatter) :
$filter(filterName)(value)) :
value;
};
});
{{item.val| use_filter:item.filter:item.formatter}}
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.js"></script>
</head>
<body ng-controller="ctrl">
<div class="container">
<ul>
<li ng-repeat="item in data">
<span>{{item| json}}</span>{{item.val| use_filter:item.filter:item.formatter}}
</li>
</ul>
</div>
<script>
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.data = [
{val:"text"},
{val:"upper text",filter:"uppercase"},
{val:new Date(),filter:"date",formatter:"yyyy-MM-dd"}
];
})
.filter('use_filter', function ($filter) {
return function (value, filterName, formatter) {
return filterName ?
(formatter ?
$filter(filterName)(value, formatter) :
$filter(filterName)(value)) :
value;
};
});
</script>
</body>
</html>
提示：你可以先修改部分代码再运行。
angular.element(document.getElementById('yourControllerElementID')).scope().yourmethod();
使用以下代码可以判断是否开启了strict模式
var isStrict = (function () { return !this; })();
console.log(isStrict);
因为在strict模式下，上面函数里的this是undefined
而在非strict模式下，上面函数里的this是Window（如果在浏览器里运行）或者其他运行环境，比如node等