首页 > 代码库 > 6.21

6.21

一、fuction的四种方法

// 1, 方法调用模式
// 当一个函数被保存为对象的一个属性时,我们称之它为该对象的一个方法,那么this被绑定到该对象上
var myObject={
name : "myObject" ,
value : 0 ,
increment : function(num){
this.value += typeof(num) === ‘number‘ ? num : 0;
return this;
} ,
toString : function(){
return ‘[Object:‘ + this.name + ‘ {value:‘ + this.value + ‘}]‘;
}
}
alert(myObject.increment(10).increment(20).toString()); // [Object:myObject {value:30}]
// 2, 函数调用模式
// 当一个函数并非一个对象的函数时,那么它被当作一个函数来调用,this被绑定到全局对象上。这是语言设计的一个错误。倘若语言设计正确,当内部函数调用时,this应该仍然绑定到外部函数的this变量上
var myObject={
name : "myObject" ,
value : 0 ,
increment : function(num){
this.value += typeof(num) === ‘number‘ ? num : 0;
return this;
} ,
toString : function(){
return ‘[Object:‘ + this.name + ‘ {value:‘ + this.value + ‘}]‘;
},
getInfo: function(){
var self=this;
return (function(){
//return this.toString(); // 内部匿名函数中this指向了全局对象window, 输出 [object Window]
return self.toString(); // 定义一个变量selft并给它赋值为this,那么内部函数通过该变量访问到指向该对象的this
})();
}
}
alert(myObject.increment(10).increment(20).toString()); // [Object:myObject {value:30}]
// 3, 构造器调用模式
// JavaScript是一门基于原型继承的语言, 这意味着对象可以直接从其他对象继承属性, 该语言是无类别的。
// 如果一个函数前面带上new来调用,那么将创建一个隐藏连接到该函数的prototype成员的新对象,同时this将会被绑定到构造函数的实例上。
function MyObject(name){
this.name = name || ‘MyObject‘;
this.value=http://www.mamicode.com/0;
this.increment = function(num){
this.value += typeof(num) === ‘number‘ ? num : 0;
};
this.toString = function(){
return ‘[Object:‘ + this.name + ‘ {value:‘ + this.value + ‘}]‘;
}
this.target = this;
}

MyObject.prototype.getInfo = function(){
return this.toString();
}
// 同时创建一个MyObject.prototype对象,myObject继承了MyObject.prototype的所有的属性, this绑定到了MyObject的实例上
var myObject = new MyObject();
myObject.increment(10);
alert(myObject.value); //10

var otherObject = new MyObject();
otherObject.increment(20);
alert(otherObject.value); //20

alert(myObject.target===myObject); // ture
alert(myObject.target.getInfo()); // [Object:MyObject {value:10}]
// 4, Apply 调用模式
// JavaScript是一门函数式的面向对象编程语言,所以函数可以拥有方法。 函数的apply方法,如同该对象拥有此方法,此时this指向该对象。
// apply接收两个参数,第一个是要绑定的对象(this指向的对象),第二个是参数数组.
function MyObject(name){
this.name = name || ‘MyObject‘;
this.value = http://www.mamicode.com/0;
this.increment = function(num){
this.value += typeof(num) === ‘number‘ ? num : 0;
};
this.toString=function(){
return ‘[Object:‘+this.name+‘ {value:‘+this.value+‘}]‘;
}
this.target=this;
}
function getInfo(){
return this.toString();
}
var myObj = new MyObject();
alert(getInfo.apply(myObj)); //[Object:MyObject {value:0}], this指向myObj
alert(getInfo.apply(window)); //[object Window], this指向window

二、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>
);

JSX 文件中的功能由 Web Service 进行 XML 映射时调用。WebLogic Workshop 扩展了 ECMAScript 语言,支持将 XML 作为本机类型,从而可以在脚本中直接处理 XML。

三、eval的使用方法

eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。

语法:eval(string)

参数描述
string 必需。要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句。

例如:<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>

四、AJAX

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。

最简单的情况下,$.ajax() 可以不带任何参数直接使用。

注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

语法:

jQuery.ajax([settings])
参数描述
settings

可选。用于配置 Ajax 请求的键值对集合。

可以通过 $.ajaxSetup() 设置任何选项的默认值。

步骤:

step1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象;
step2. 创建一个新的HTTP请求,并指定改HTTP请求的方法、URL以及验证信息;
step3. 设置响应HTTP状态变化的函数;
step4. 发送HTTP请求;
step5. 获取异步调用返回的数据;
step6. 使用javascript和DOM实现局部刷新;

五、http Request

http Request为传输请求

httpRequest对象常用的方法:

1. 获得客户机信息     getRequestURL方法返回客户端发出请求时的完整URL。     getRequestURI方法返回请求行中的资源名部分。     getQueryString 方法返回请求行中的参数部分。     getRemoteAddr方法返回发出请求的客户机的IP地址      getRemoteHost方法返回发出请求的客户机的完整主机名     getRemotePort方法返回客户机所使用的网络端口号     getLocalAddr方法返回WEB服务器的IP地址。     getLocalName方法返回WEB服务器的主机名      getMethod得到客户机请求方式  

2.获得客户机请求头 

    getHeader(string name)方法      getHeaders(String name)方法      getHeaderNames方法 

 3. 获得客户机请求参数(客户端提交的数据)     getParameter(name)方法     getParameterValues(String name)方法     getParameterNames方法      getParameterMap方法

六、什么是事件

事件是可以被控件识别的操作,如按下确定按钮,选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件,如窗体的加载、单击、双击等事件,编辑框(文本框)的文本改变事件,等等。

七、WINDOW

Window 对象表示浏览器中打开的窗口。

如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。

注释:没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。

Window 对象集合

集合描述
frames[]

返回窗口中所有命名的框架。

该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架或 <iframe>。属性 frames.length 存放数组 frames[] 中含有的元素个数。注意,frames[] 数组中引用的框架可能还包括框架,它们自己也具有 frames[] 数组。

Window 对象属性

属性描述
closed 返回窗口是否已被关闭。
defaultStatus 设置或返回窗口状态栏中的默认文本。
document 对 Document 对象的只读引用。请参阅 Document 对象。
history 对 History 对象的只读引用。请参数 History 对象。
innerheight 返回窗口的文档显示区的高度。
innerwidth 返回窗口的文档显示区的宽度。
length 设置或返回窗口中的框架数量。
location 用于窗口或框架的 Location 对象。请参阅 Location 对象。
name 设置或返回窗口的名称。
Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener 返回对创建此窗口的窗口的引用。
outerheight 返回窗口的外部高度。
outerwidth 返回窗口的外部宽度。
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent 返回父窗口。
Screen 对 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() 在指定的毫秒数后调用函数或计算表达式。

Window 对象描述

Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中,Window 对象是全局对象,所有的表达式都在当前的环境中计算。也就是说,要引用当前窗口根本不需要特殊的语法,可以把那个窗口的属性作为全局变量来使用。例如,可以只写 document,而不必写 window.document。

同样,可以把当前窗口对象的方法当作函数来使用,如只写 alert(),而不必写 Window.alert()。

除了上面列出的属性和方法,Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。

Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口,而不仅仅是隐式地引用它时,可以使用这两个属性。除了这两个属性之外,parent 属性、top 属性以及 frame[] 数组都引用了与当前 Window 对象相关的其他 Window 对象。

要引用窗口中的一个框架,可以使用如下语法:

frame[i]		//当前窗口的框架
self.frame[i]	//当前窗口的框架
w.frame[i]	//窗口 w 的框架

要引用一个框架的父窗口(或父框架),可以使用下面的语法:

parent		//当前窗口的父窗口
self.parent	//当前窗口的父窗口
w.parent 		//窗口 w 的父窗口

要从顶层窗口含有的任何一个框架中引用它,可以使用如下语法:

top		//当前框架的顶层窗口
self.top		//当前框架的顶层窗口
f.top		//框架 f 的顶层窗口

新的顶层浏览器窗口由方法 Window.open() 创建。当调用该方法时,应把 open() 调用的返回值存储在一个变量中,然后使用那个变量来引用新窗口。新窗口的 opener 属性反过来引用了打开它的那个窗口。

一般来说,Window 对象的方法都是对浏览器窗口或框架进行某种操作。而 alert() 方法、confirm() 方法和 prompt 方法则不同,它们通过简单的对话框与用户进行交互。

八、DOM

什么是 DOM?
通过 JavaScript,您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西,JavaScript 就需要对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。

在 1998 年,W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。

所有的浏览器都执行了这个标准,因此,DOM 的兼容性问题也几乎难觅踪影了。

DOM 被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3):
Core DOM
定义了一套标准的针对任何结构化文档的对象
XML DOM
定义了一套标准的针对 XML 文档的对象
HTML DOM
定义了一套标准的针对 HTML 文档的对象。

6.21