6.21心得

object对象
1、属性
Object自带一个prototype的属性，即Object.prototype，Object.prototype本身也是一个对象，也会有一些属性和方法。如下：
1、属性
Object.prototype.writable：默认为false
Object.prototype.enumerable：默认为false
Object.prototype.configurable：默认为false
Object.prototype.constructor：用于创建一个对象的原型。
2、常用方法
复制代码
Object.prototype.hasOwnProperty():返回一个布尔值，表示某个对象是否含有指定的属性，而且此
属性非原型链继承。
Object.prototype.isPrototypeOf():返回一个布尔值，表示指定的对象是否在本对象的原型链中。
Object.prototype.propertyIsEnumerable():判断指定属性是否可枚举。
Object.prototype.toString():返回对象的字符串表示。
Object.prototype.watch():给对象的某个属性增加监听。
Object.prototype.unwatch():移除对象某个属性的监听。
Object.prototype.valueOf():返回指定对象的原始值。
复制代码
2、方法
Object.assign(target, …sources):把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。
Object.create(proto,[propertiesobject]):创建一个拥有指定原型和若干个指定属性的对象。
Object.defineProperties(obj, props)：在一个对象上添加或修改一个或者多个自有属性，并返回该对象。
Object.defineProperty(obj, prop, descriptor)：直接在一个对象上定义一个新属性，或者修改一个已经存在的属性
，并返回这个对象。obj：需要定义属性的对象。prop：需定义或修改的属性的名字。descriptor：将被定义或
修改的属性的描述符。
Object.entries(obj)：返回一个包含由给定对象所有可枚举属性的属性名和属性值组成的 [属性名，属性值] 键
值对的数组，数组中键值对的排列顺序和使用for…in循环遍历该对象时返回的顺序一致。
举例：
var obj = { foo: “bar”, baz: 42 };
console.log(Object.entries(obj)); // [ [‘foo’, ‘bar’], [‘baz’, 42] ]
Object.freeze(obj)：冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，
不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说，这个对象
永远是不可变的。该方法返回被冻结的对象。
Object.getOwnPropertyDescriptor(obj, prop)：返回指定对象上一个自有属性对应的属性描述符。
Object.getOwnPropertyNames(obj)：返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性）
组成的数组。
举例：
// 类数组对象
var obj = { 0: “a”, 1: “b”, 2: “c”};
console.log(Object.getOwnPropertyNames(obj).sort()); // [“0”, “1”, “2”]
Object.getPrototypeOf(object)：返回该对象的原型。
Object.is(value1, value2)：判断两个值是否是同一个值。
Object.isExtensible(obj)：判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）。
Object.isFrozen(obj)：判断一个对象是否被冻结（frozen）。
Object.isSealed(obj)：判断一个对象是否是密封的（sealed）。密封对象是指那些不可扩展的，且所有自
身属性都不可配置的（non-configurable）且属性不可删除的对象（其可以是可写的）。
Object.keys(obj)：返回一个由给定对象的所有可枚举自身属性的属性名组成的数组，数组中属性名的排
列顺序和使用for-in循环遍历该对象时返回的顺序一致
举例：
var arr = [“a”, “b”, “c”];
alert(Object.keys(arr)); // 弹出”0,1,2”
// 类数组对象
var obj = { 0 : “a”, 1 : “b”, 2 : “c”};
alert(Object.keys(obj)); // 弹出”0,1,2”
Object.preventExtensions(obj)：让一个对象变的不可扩展，也就是永远不能再添加新的属性。
Object.setPrototypeOf(obj, prototype)：将一个指定的对象的原型设置为另一个对象或者null
Object.values(obj)：返回一个包含指定对象所有的可枚举属性值的数组，数组中的值顺序和使用for…in
循环遍历的顺序一样。
举例：
var obj = { foo: “bar”, baz: 42 };
console.log(Object.values(obj)); // [‘bar’, 42]
jsx
React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM
的操作从而提升性能。
JSX简介
JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。
当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。
如下(JS写法)
var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
等价于(JSX写法)
代码
var root =(
<ul className="my-list">
<li>First Text Content</li>
<li>Second Text Content</li>
</ul>
);
代码
后者将XML语法直接加入JS中,通过代码而非模板来高效的定义界面。之后JSX通过翻译器转换
为纯JS再由浏览器执行。在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript，JSX的
语法不会带来任何性能影响。另外，由于JSX只是一种语法，因此JavaScript的关键字class, for等
也不能出现在XML中，而要如例子中所示，使用className, htmlFor代替，这和原生DOM在JavaScript
中的创建也是一致的。JSX只是创建虚拟DOM的一种语法格式而已,除了用JSX,我们也可以用JS代码
来创建虚拟DOM.
JSX语法介绍
大括号里是JavaScript，不要加引号，加引号就会被当成字符串。
三元表达式
JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入
JavaScript表达式.例如:
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
上述代码经过JSX编译后会得到：
var person = React.createElement(
Person,
{name: window.isLoggedIn ? window.name : ''}
);
数组递归
数组循环,数组的每个元素都返回一个React组件。
代码
var lis = this.todoList.todos.map(function (todo) {
return (
<li>
<input type="checkbox" checked={todo.done}>
<span className={'done-' + todo.done}>{todo.text}</span>
</li>
);
});

eval
定义和用法
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
语法
eval(string)
返回值
通过计算 string 得到的值（如果有的话）。
说明
该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。
如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性，并通过该属性调用它，则 ECMAScript 实现允许抛出一个 EvalError 异常。
抛出
如果参数中没有合法的表达式和语句，则抛出 SyntaxError 异常。
如果非法调用 eval()，则抛出 EvalError 异常。
如果传递给 eval() 的 Javascript 代码生成了一个异常，eval() 将把该异常传递给调用者。
提示和注释
提示：虽然 eval() 的功能非常强大，但在实际使用中用到它的情况并不多。
代码：
<script type="text/javascript">

eval("x=10;y=20;document.write(x*y)")

document.write(eval("2+2"))

var x=10
document.write(eval(x+17))

</script>
输出：
200
4
27

ajax
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。
AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
AJAX 是一种独立于 Web 服务器软件的浏览器技术。　AJAX 基于下列 Web 标准：
JavaScriptXMLHTMLCSS在 AJAX 中使用的 Web 标准已被良好定义，并被所有的主流浏览器支持。AJAX 应用程序独立于浏览器和平台。
Web 应用程序较桌面应用程序有诸多优势；它们能够涉及广大的用户，它们更易安装及维护，也更易开发。
不过，因特网应用程序并不像传统的桌面应用程序那样完善且友好。通过 AJAX，因特网应用程序可以变得更完善，更友好
第一步，创建xmlhttprequest对象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest对象用来和服务器交换数据。

var xhttp;
if (window.XMLHttpRequest) {
//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {
// 针对浏览器，比如IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。
xmlhttp.open(method,url,async) method包括get 和post，url主要是文件或资源的路径，async参数为true(代表异步)或者false（代表同步）
xhttp.send();使用get方法发送请求到服务器。
xhttp.send(string);使用post方法发送请求到服务器。
代码
get：
xhttp.open("GET", "ajax_info.txt", true);
xhttp.open("GET", "index.html", true);
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);xhttp.send();
post：
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
post表单
xhttp.open("POST", "ajax_test.aspx", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
sync=true 当服务器准备响应时将执行onreadystatechange函数。
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "index.aspx", true);
xhttp.send();

asyn=false 则将不需要写onreadystatechange函数，直接在send后面写上执行代码。
xhttp.open("GET", "index.aspx", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。
onreadystatechange属性存储一个当readyState发生改变时自动被调用的函数。
readyState属性，XMLHttpRequest对象的状态，改变从0到4，0代表请求未被初始化，1代表服务器连接成功，2请求被服务器接收，3处理请求，4请求完成并且响应准备。
status属性，200表示成功响应，404表示页面不存在。
在onreadystatechange事件中，服务器响应准备的时候发生，当readyState==4和status==200的时候服务器响应准备。
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
//函数作为参数调用
<!DOCTYPE html>
<html>
<body>
<p id="demo">Let AJAX change this text.</p>
<button type="button"
onclick="loadDoc('index.aspx', myFunction)">Change Content
</button>
<script>
function loadDoc(url, cfunc) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
cfunc(xhttp);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction(xhttp) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
</body>
</html>

http Request
XHR英文全名XmlHttpRequest，中文可以解释为可扩展超文本传输请求。Xml可扩展标记语言，
Http超文本传输协议，Request请求。XMLHttpRequest对象可以在不向服务器提交整个页面的情
况下，实现局部更新网页。当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服
务器端接受数据并处理后，向客户端反馈数据。 XMLHttpRequest 对象提供了对 HTTP 协议的完
全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步
或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为
XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。
XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。
对象编辑
浏览器支持
XMLHttpRequest 得到了所有现代浏览器较好的支持。唯一的浏览器依赖性涉及 XMLHttpRequest 对象
的创建。在 IE 5 和 IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数。正如在 XMLHttpRequest
对象这一节所介绍的。
W3C 标准化
XMLHttpRequest 对象还没有标准化，但是 W3C 已经开始了标准化的工作，本手册介绍的内容都是基
于标准化的工作草案。
当前的 XMLHttpRequest 实现已经相当一致。但是和标准有细微的不同。例如，一个实现可能返回 null，
而标准要求是空字符串，或者实现可能把 readyState 设置为 3 而不保证所有的响应头部都可用。
事件
onreadystatechange：
每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时，它也可能调用多次。
方法编辑
abort() 取消当前响应，关闭连接并且结束任何未决的网络活动。
getAllResponseHeaders() 把 HTTP 响应头部作为未解析的字符串返回。
getResponseHeader() 返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头
部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。
open() 初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
send() 发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
setRequestHeader() 向一个打开但未发送的请求设置或添加一个 HTTP 请求。
局限性：XmlHttpRequest不支持跨域访问，这是由网景公司(netscape)在开发浏览器时定义的同源策略导致的。

js事件
事件是可以被 JavaScript 侦测到的行为。
举例：
鼠标点击
页面或图像载入
鼠标悬浮于页面的某个热点之上
在表单中选取输入框
确认表单
键盘按键
注意：事件通常与函数配合使用，当事件发生时函数才会执行。
onload 和 onUnload
当用户进入或离开页面时就会触发 onload 和 onUnload 事件。
onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。
onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。
onFocus, onBlur 和 onChange
onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。
onChange代码：
<input type="text" size="30" id="email" onchange="checkEmail()">
onSubmit
onSubmit 用于在提交表单之前验证所有的表单域。
代码：
<form method="post" action="xxx.htm" onsubmit="return checkForm()">
onMouseOver 和 onMouseOut
onMouseOver 和 onMouseOut 用来创建“动态的”按钮。
onMouseOver代码：
<a href="http://www.w3school.com.cn"
onmouseover="alert('An onMouseOver event');return false">

</a>

window
Window 对象
Window 对象表示浏览器中打开的窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，
并为每个框架创建一个额外的 window 对象。
注释：没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。
Window 对象集合
frames[] 返回窗口中所有命名的框架。
该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 <iframe>。
属性 frames.length 存放数组 frames[] 中含有的元素个数。注意，frames[] 数组中引用的框架
可能还包括框架，它们自己也具有 frames[] 数组。
Window 对象属性
closed 返回窗口是否已被关闭。
defaultStatus 设置或返回窗口状态栏中的默认文本。
document 对 Document 对象的只读引用。
history 对 History 对象的只读引用。
innerheight 返回窗口的文档显示区的高度。
innerwidth 返回窗口的文档显示区的宽度。
length 设置或返回窗口中的框架数量。
location 用于窗口或框架的 Location 对象。
name 设置或返回窗口的名称。
Navigator 对 Navigator 对象的只读引用。
opener 返回对创建此窗口的窗口的引用。
outerheight 返回窗口的外部高度。
outerwidth 返回窗口的外部宽度。
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent 返回父窗口。
Screen 对 Screen 对象的只读引用。
self 返回对当前窗口的引用。等价于 Window 属性。
status 设置窗口状态栏的文本。
top 返回最顶层的先辈窗口。
window window 属性等价于 self 属性，它包含了对窗口自身的引用。
screenLeft
screenTop
screenX
screenY
只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。
Window 对象方法
alert() 显示带有一段消息和一个确认按钮的警告框。
blur() 把键盘焦点从顶层窗口移开。
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
close() 关闭浏览器窗口。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup() 创建一个 pop-up 窗口。
focus() 把键盘焦点给予一个窗口。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
prompt() 显示可提示用户输入的对话框。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。

dom
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理
可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被
组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
Document Object Model的历史可以追溯至1990年代后期微软与Netscape的
“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予
浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、
ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览
器无法正常显示。DOM即是当时蕴酿出来的杰作。
DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。
换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点
很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。
DOM
DOM 是遵循 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"
W3C DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
XML DOM 是：[1]
用于 XML 的标准对象模型
用于 XML 的标准编程接口
中立于平台和语言
W3C 标准
XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。
换句话说：XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。
HTML DOM 是：[2]
HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法（接口）。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

posted on 2017-06-22 13:00 时光在飞逝阅读(121) 评论(0) 编辑收藏举报