*
* ☆★☆★☆★☆★☆★☆JavaScript草稿集☆★☆★☆★☆★☆★☆
*
* By Barret Lee
★JQuery★<!--<script type="text/javascript" src="http:code.jquery.com/jquery-latest.js"></script>-->
★★★★★★★★公共部分★★★★★★★★
function printf(obj) {
document.write(obj + "<br>");
}
function $(obj) {
return document.getElementById(obj);
}
function forEach(obj) {
for (m in obj) {
printf(m + ':' + obj[m]);
}
}
★★★★★★★★注释方式★★★★★★★★★
*
* <!--[CDATA[
*
* ]]-->
★★★★★★★★alertBox★★★★★★★★
function alertBox() {
"use strict";
var coverLayer = document.createElement("div");
var contentLayer = document.createElement("div");
coverLayer.setAttribute("id", "coverLayer");
contentLayer.setAttribute("id", "contentLayer");
contentLayer.innerHTML = "<p>Huazhong University Of Science And Technology</p>";
document.body.appendChild(coverLayer);
document.body.appendChild(contentLayer);
}
window.onload = alertBox;
★★★★★★★★基本数据类型★★★★★★★★
var x = parseFloat("20.33");
var y = parseInt("11", 8);
var z = Math.sin(Math.PI / 2);
var s = "this is a string.";
var a = [1, 2, 4, 3];
var o = {first: 1, second: 2, third: 3};
var result = o.valueOf();
printf(result + "<br>");
printf(1 + "2" + "<br>"); 12
printf((a instanceof Array) + "<br>");
printf((a.constructor) + "<br>");
printf(o.hasOwnProperty("first") + "<br>");
★★★★★★★★arguments数组★★★★★★★★
function plus(x, y, z) {
"use strict";
if (arguments.length !== 3) {
throw new Error(arguments.callee);
}
return x + y + z;
}
plus(2, 3);
printf(plus(2, 3, 4));
var cal = {
x: 1,
y: 2,
f: function () {
"use strict";
return this.x + this.y;
}
};
printf(cal.f() + "<br>");
★★★★★★★★函数call和apply★★★★★★★★
function fCall(x, y) {
return x + y;
}
var res = fCall.call(cal, 1, 2);
var res1 = fCall.apply(cal,[6, 9]);
printf(res + "<br>");
printf(res1 + "<br>");
★★★★★★★★类和继承★★★★★★★★
function people(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
people.prototype.info = function () {
printf("My name is " + this.name + ", I'm " + this.age + " years old." + "<br>");
}
var humen = new people("Lijing", 19, "man");
humen.info();
★★★★★★★★IE4 && IE5 没有apply函数，利用prototype来构造这样的原型函数★★★★★★★★
if (!Function.prototype.apply) {
Function.prototype.apply = function (object, parameters) {
var f = this;
var o = object || window;
var args = patameters || [];
o._$_apply_$_ = f;
var stringArgs = [];
for (var i = 0; i < args.length; i++) {
stringArgs[i] = "args[" + i + "]";
}
var arglist = stringArgs.join(",");
var methodcall = "o._$_apply_$_(" + arglist + ");";
var result = eval(methodcall);
delete o._$_apply_$_;
return result;
};
}
★★★★★★★★类属性,类方法,类私有成员,子类与超类★★★★★★★★
function Rectangle(width, height) {
this.width = width;
this.height = height;
}
Rectangle.prototype.area = function () {
return this.width * this.height;
}
function PositionRectangle(x, y, w, h) {
Rectangle.call(this, w, h);
this.x = x;
this.y = y;
}
PositionRectangle.prototype = new Rectangle();
delete PositionRectangle.prototype.width;
delete PositionRectangle.prototype.height;
PositionRectangle.prototype.constructor = PositionRectangle;
var r = new PositionRectangle(2, 2, 2, 2);
printf(r.area());
printf(r instanceof PositionRectangle && r instanceof Rectangle && r instanceof Object);
注：可以使用call和apply来调用被覆盖的函数
such as: Circle.prototype.toString.apply(this);
★★★★★★★★非继承的扩展★★★★★★★★
function borrowMethods(borrowFrom, addTo) {
var from = borrowFrom.prototype;
var to = addTo.prototype;
for (m in from) {
if (from[m] != "function") continue;
to[m] = from[m];
}
}
★★★★★★★★确定对象类型★★★★★★★★
△ typeof null → "object";
typeof undefined → "undefined";
typeof 数组 → "object";
typeof 函数 → "function"
△ instanceof 和构造函数 constructor
【特点：他们只能允许根据已经知道的类来进行测试对象，无法用于检查未知的对象】
△ 用Object.toString()测试对象的类型
△ 鸭子类型识别（Duck Typing）
★★★★★★★★渐变效果★★★★★★★★
function setOpacity(obj, val) {
if (document.documentElement.filters){
obj.style.filter = "alpha(opacity=" + val + ")";
}else {
obj.style.opacity = val / 100;
}
}
function fadeIn(obj) {
var val = 10;
var t = setInterval(function(){
if (val >= 100) {
clearInterval(t);
}
setOpacity(obj, val);
val += 10;
}, 250);
}
★★ fadeIn($("changeBox"));
function setWidth(obj, val) {
obj.style.width = parseInt(val) + "px";
}
function setHeight(obj, val) {
obj.style.height = parseInt(val) + "px";
}
function slide(obj) {
var val = 0;
var t = setInterval(function(){
if (val >= 300) {
clearInterval(t);
}
setWidth(obj, val);
setHeight(obj, val);
val += 10;
}, 80);
}
★★ slide($("changeBox"));
function setTop(obj, val) {
obj.style.top = parseInt(val) + "px";
}
function setLeft(obj, val) {
obj.style.left = parseInt(val) + "px";
}
function move(obj) {
var val = 0;
var t = setInterval(function(){
if (val >= 300) {
clearInterval(t);
}
setTop(obj, val);
setLeft(obj, val);
val += 10;
}, 80);
}
★★ move($("changeBox"));
★★★★★★★★正则表达式★★★★★★★★
正则表达式中的特殊符号有 ^ $ . * + ? = ! | \ / () [] {}
*|------------------------------------------------------------
* | [...] 括号内任意字符
* | [^...] 非上
* | . 除换行符和其他Unicode行终止符之外的任意字符
* | \w 任何ASCII单字字符
* | \W 非上
* | \s 任何Unicode空白
* | \S 非上
* | \d 任何ASCII数字，等价于[0-9]
* | \D 非上
* | \b 匹配一个词语的边界
* | \B 非上
* | {n, m} 匹配至少 n 至多 m 次
* | {n,} 匹配至少 n 次
* | {n} 匹配恰好 n 次
* | ? 匹配前一项0或1次
* | + 匹配前一项1次或多次
* | * 匹配前一项0次或多次
* | ^ 匹配字符串开头
* | $ 匹配字符串结尾
* | i 忽略大小写
* | g 全局匹配
* | m 多行匹配
* |-------------------------------------------------------------
var text = "JavaScript is not Java, thanks god, that is true! Java is not Javascript!!";
var url = "http:www.baidu.com/pic.html"
var Reg = /java/gi;
var RegUrl = /(\w+):\/\/([\w.]+)\/(\S*)/;
var res = url.match(RegUrl);
var res = text.replace(/Java/gi, "JAVA");
var res = Reg.exec(text);
var res = Reg.test(text);
printf(text);
printf(res);
★★★★★★★★drag拖动★★★★★★★★
var box = document.getElementById("box");
var drag = {
start: function(evt) {
var e = window.event || evt;
box.startX = e.clientX - box.offsetLeft;
box.startY = e.clientY - box.offsetTop;
document.onmousemove = drag.ondrag;
document.addEventListener ? document.addEventListener("mouseup",drag.stop,false) : document.attachEvent("onmouseup",drag.stop);
},
ondrag: function(evt) {
var e = window.event || evt;
with(box.style) {
position = "absolute";
left = e.clientX - box.startX + "px";
top = e.clientY - box.startY + "px";
};
},
stop: function() {
document.onmousemove = "";
document.detachEvent ? document.detachEvent("onmouseup",drag.start) : document.removeEventListener("mouseup",drag.start,false);
},
init: function() {
box.addEventListener ? box.addEventListener("mousedown",drag.start,false) : box.attachEvent("onmousedown",drag.start);
}
}
drag.init();
★★★★★★★★浏览器Location和History★★★★★★★★
Location: protocol + host + pathname + search
printf(document.location == document.URL); true
在大多数情况下，document.location和location.href是相同的，但是，当存在服务器重定向时，
document.location包含的是装载的URL，而location.href包含的则是原始请求的文档的URL
|-------self, window
|
|-------navigator
|
|-------frames[] |------forms[]--------elments[]------options[]
| |
|-------location |------anchors[]
| |
|-------document--------|------links[]
| |
|-------history |------images[]
| |
|-------screen |------applets[]
for(m in navigator){printf(m + ":" + screen[m]);}
printf(window.screenX);
printf(window.screenY);
printf(window.outerWidth);
printf(window.outerHeight);
printf(window.innerWidth);
printf(window.innerHeight);
以上属性IE7下没有
printf("");
printf(screen.width);
printf(screen.height);
printf(screen.availWidth);
printf(screen.availHeight);
子窗口和父窗口的相互控制
function openWin() {
childWin = window.open("javascript:'<h1>hello</h1>'", "newWin", "height=0,width=0");
var val = 0;
var t = setInterval(function(){
if (val > 400){
clearInterval(t);
}
childWin.resizeTo(val,val);
childWin.moveTo(val,val);
val += 10;
},100);
childWin.opener.focus();
childWin.opener.close();
}
function closeWin() {
childWin.close();
}
document.onclick = openWin;
document.onkeydown = closeWin;
★★★★★★★★ERROR提示★★★★★★★★
window.onerror = function (msg, url, line) {
alert("Wow..my gosh!!! You got an error.\n\n" + "【Error】: " + msg + "\n【url】: " + url + "\n【line】: " + line);
}
★★★★★★★★document★★★★★★★★
帧结构演示
<html>
<frameset cols="200,*">
<frame src="./gustbook.html">
<frame src="/gustbook.html" name="view_frame">
</frameset>
</html>
function w() {
printf("something");
}
setTimeout(w,1000); 覆盖原来的文本
注：一个文档绝不应该从时间句柄中调用他自己的write()方法
★document.open
功能：打开一个新文档，并擦除当前文档的内容。
语法：document.open(mimetype,replace)
参数：
mimetype：可选。规定正在写的文档的类型。默认值是"text/html"。
replace：可选。当此参数设置后，可引起新文档从父文档继承历史条目。
注1：open()方法将擦除当前HTML文档的内容，开始一个新的文档，新文档用write()方法或writeln()方法编写。
注2：调用open()方法打开一个新文档并且用write()方法设置文档内容后，必须记住用close()方法关闭文档，并迫使其内容显示出来。
注3：属于被覆盖的文档的一部分的脚本或事件句柄不能调用该方法，因为脚本或事件句柄自身也会被覆盖。
★document.close
功能：close()方法可关闭一个由open()方法打开的输出流，并显示选定的数据。
语法：document.close()
参数：无。
注：该方法将关闭open()方法打开的文档流，并强制地显示出所有缓存的输出内容。如果您使用write()方法动态地输出一个文档，必须记住当你这么做的时候要调用close()方法，以确保所有文档内容都能显示。
★一旦调用了close()，就不应该再次调用write()，因为这会隐式地调用open()来擦除当前文档并开始一个新的文档。
★★★★★★★★节点类型★★★★★★★★
|--------------------------------|
| 接口 nodeType值 |
|--------------------------------|
| Element 1 |
| Text 3 |
| Document 9 |
| Comment 8 |
| DocumentFragment 11 |
| Attr 2 |
|--------------------------------|
★★★★★★★★document.documentElement★★★★★★★★
引用的是 html
appendChild(), insetBefore(), replaceChild()
可以用document.createDocumentFragment()来创建一个DocumentFragment
function reverse(n) {
var f = document.createDocumentFragment();
while (n.lastChild) f.appendChild(n.lastChild);
n.appendChild(f);
}
★★★★★★★★查询选定的文本★★★★★★★★
function getSelectedText() {
if (window.getSelection) {
return window.getSelection().toString();
}else if (document.getSelection) {
return document.getSelection();
}else {
return document.selection.createRange().text;
}
}
function start() {
var text = getSelectedText();
if (text) {
$("changeBox").innerHTML = text;
window.open("http:www.baidu.com/s?wd=" + encodeURIComponent(text));
}
}
if (!document.all) {
window.onmouseup = start;
}else {
document.attachEvent("onmouseup", start);
}
var o = $("changeBox");
printf(o.offsetTop);
printf(o.offsetLeft);
printf(o.clientWidth);
printf(o.clientHeight);
printf(o.scrollTop);
printf(o.scrollLeft);
printf(o.offsetWidth);
printf(o.offsetHeight);
★★★★★★★★Key Event and Mouse Event★★★★★★★★
屏蔽右键菜单,可以应用到任何一个区域
oncontextmenu="window.event.returnValue=false"
document.onmousedown = function (e) {
var e = window.event || e;
if (e.button == 0) {
document.body.style.background = "red";
}else if (e.button == 1) {
document.body.style.background = "blue";
}else {
document.body.style.background = "yellow";
}
}
document.onkeydown = function (e) {
var e = window.event || e;
if (e.shiftKey) {
alert("shift");
}if (e.ctrlKey) {
alert("ctrl");
}else if (e.altKey) {
alert("alt");
}else {
alert("others");
}
}
★★★★★★★★合成事件★★★★★★★★
Document.createEvent()创建, Event.initEvent(), UIEvent.initEvent(), MouseEvent.initEvent.initMouseEvent()初始化
dipatchEvent方法来分派事件
IE中，使用Document.createEventObjec来创建一个新的事件对象。然后使用目标元素的fireEvent()方法来分派他
var DataEvent = {};
DataEvent.send = function (target, datatype, data) {
if (typeof target == "string") target = $(target);
if (document.createEvent) {
var e = createEvent("Events");
e.initEvent("dataavailable", true, false);
}else if (document.createEventObject) {
var e = document.createEventObject();
}else return;
e.datatype = datatype;
e.data = data;
if (target.dispatchEvent) target.dispatchEvent(e);
else if (target.fireEvent) target.fireEvent("ondataavailable", e);
};
DataEvent.receive = function (target, handler) {
if (typeof target == "string") target = $(target);
if (target.addEventListener) target.addEventListener("dataavailable", handler, false);
else if (target.attachEvent) target.attachEvent("ondataavaliable", handler);
}
★★★★★★★★IE支持客户端永久性★★★★★★★★
var username = "hustskyking";
var password = "psw";
var memory = $("changeBox");
memory.style.behavior = "url('#default#userData')";
memory.setAttribute("username", username);
memory.setAttribute("password", password);
memory.save('myPersistentData');
var now = (new Date()).getTime();
var expires = now + 10*24*60*60*1000;
memory.expires = (new Date(expires)).toUTCString();
var memory = $("changeBox");
memory.load("myPersistentData");
alert(memory.getAttribute("username"));
★★★★★★★★AJAX★★★★★★★★
function loadXMLDoc()
{
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
$("changeBox").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "response.php?func=" + printf("Instead of origin HTML"), true);
xmlhttp.send();
}
window.onclick = loadXMLDoc;
function createXHR() {
var aVersions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0"];
for (var i = 0; i < aVersions; i++) {
try {
var oXHR = new ActiveXObject(aVersions[i]);
return oXHR;
}catch(oError){
不执行任何操作
}
}
throw new Error("MSXML is not installed.");
}
在给src特性复制的同时会下载一个图像，这意味着甚至无需将该图像添加到页面中
基于图像实现跨域通信
*
* 启动并连续向服务器发送骑牛的最佳方式是什么？在有些情况下，最好是从服务器与载入一些信息，
* 以便能够快读相应用户的操；而在另外一些情况下，你可能想在不同的时间间隔内，向服务器发送
* 数据或者从服务器接收数据。
var oImg = document.createElement("img");
oImg.onload = function() {
alert("Image is ready");
}
oImg.src = "./images/001.gif";
document.body.appendChild(oImg);
function createIFrame(){
var oframe = document.createElement("iframe");
oframe.name = "myIFrame";
oframe.id = "myIFrame";
oframe.style.cssText = "height:500px; width:400px; border:none";
oframe.src = "http:jqueryui.com/demos/droppable/accepted-elements.html";
document.body.appendChild(oframe);
}
createIFrame();
面向对象的Javascript
1.公共成员
function Customer() {
this.firstName = "John";
this.lastName = "Smith";
this.getFullName = function () {
return this.firstName + " " + this.lastName;
}
}
var john = new Customer();
2.私有变量
function Customer(firstName, lastName) {
var _firstName = firstName;
var _lastName = lastName;
this.getFullName = function () {闭包
return _firstName + " " + _lastName;
}
}
prototype属性
扩展类的定义
如果在prototype属性所引用的对象里没有找到，它会到这个引用对象的prototype属性里查找，如此递归查询。
Customer.prototype.getFullName = function () {
return this.firstName + " " + this.lastName;
}
面向对象编程和继承
function Partner() {
this.partnerId = "";
}
Partner.prototype = new Customer();
与上等价
Partner.prototype = {
firstName: "",
lastName: ""
}
★★★★★★★★Cookie★★★★★★★★
function setCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function deleteCookie(name) {
setCookie(name,"",-1);
}
|
文章概要 原文地址：KV Storage, the Web’s First Built-in Module原文时间：2019年3月翻译计划：https://github.com/barretlee/translation-plan翻译人员：小胡子哥在...
文章概要 相信很多人对 Node 的 Stream 已经不陌生了，不论是请求流、响应流、文件流还是 socket 流，这些流的底层都是使用 stream 模块封装的，甚至我们平时用的最多的 console.log 打印日志也使用了它，不信你打开 No...
文章概要 “0.1 + 0.2 = ?”，这道题如果给小学生，他会立马告诉你答案是 0.3，但是交给一些程序去计算，结果就不是那么简单了。-->
文章概要 -->在 Node.js 中有一个模块叫做 VM，它提供了几个 API，允许代码在 V8 虚拟机上下文中运行，如：const vm = require('vm');const sandbox = { a: 1, b: 2 };const script = new vm.Script('a + b');const context = new vm.createContext(sandbox);script.runInContext(context);vm.Script 中的代码是预编译好的，通过 vm.createContext 将代码加载到一个上下文环境中，置入沙箱（sandbox），然后通过 script.runInContext 执行代码，整个操作都在封闭的 VM 中进行。这是 Node.js 提供给我们的便捷功能，那么，在浏览器环境中呢？是否也能做到将代码运行在沙箱中？本文带着大家来探索一番。
