浅谈JavaScript中的对象及Promise对象的实现


Posted in Javascript onNovember 15, 2015

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数。下面小编给大家收集整理些javascript中的对象及promise对象的实现。具体内容如下:

到处都是对象

浅谈JavaScript中的对象及Promise对象的实现

window对象

常用的属性和方法介绍

location

包含页面的URL,如果改变这个属性,浏览器会访问新的URL

status

包含将在浏览器状态去显示的一个串。一般在浏览器左下角

onload:

包含了需要在页面完全加载后调用的函数

document:

包含DOM

alert方法:

显示一个提醒

prompt方法:

类似于alert,不过会从用户那得到信息

open

打开一个新窗口

close

关闭窗口

setTimeout:

指定的时间间隔后调用一个处理函数

setlnterval

以一个指定的时间间隔反复调用一个处理函数

谈谈window.onload

 通过向window的onload属性指定一个函数,可以确保在页面加载和DOM完全建立之前不会运行代码。

 用于改变DOM的函数

window.onload = function(){
   //code here 
 }
 //function是一个匿名函数,赋给onload

我们之所以不说window.inload = init(),是因为我们不是调用函数,而是要使用它的值。

 将一个函数的值赋给window对象的inload属性,让它在页面加载完后,执行。

 创建window.onload处理程序有两种方法-----使用函数名和使用匿名函数。

 这两种方法基本上都会做同一件事,但如果赋给window.onload的函数还要在别处使用,则选择使用函数名

document对象

常用的属性和方法介绍

domain:

提供文档的服务器的域,如kelion.com.

title:

通过document.title,可以获得文档的标题

URL:

文档的URL

getElementById方法:

根据元素id获取这个元素

getElementsByTagName,

getElementsByClassName:

这两个方法类似前一个,只不过他们使用标记和类来获取元素

createElement:

创建适合包含在DOM中的新的元素

谈谈createElement

//创建<li>元素,
 var li = document.createElement("li"); 
 //给刚创建的元素赋值
 li.innerHTML = "songName";
 //获取<ul>元素
 var ul = document.getElementById("playlist")
 //把<li>元素增加到ul中
 ul.appendChild(li)

注:在进行第8行代码前,li元素始终都是独立于DOM之外的

元素对象

常用的属性和方法介绍:

innerHTML:

包含元素的内容

childElementCount:

保存元素的个数

firstChild

第一个子元素

appendChild方法:

insertBefore方法:

用于插入元素,作为一个元素的子元素

getAttribute方法
setAttribute方法

使用者两个方法来设置和获取元素中的属性:如“src”,“id”,“class”等

最后来了解下button对象

button对象有一个经常用的属性:

onclick(用于监听一个按钮是否被按下了)。 

var button = document.getElementById("Button"); //button只是一个变量名,可以是button1,button2等等,但本质是一个按钮
 button.onclick = handleButtonClick;

 ps:浅谈Javascript中Promise对象的实现

 很多做前端的朋友应该都听说过Promise(或者Deferred)对象,今天我就讲一下我对Promise的认识

What?

Promise是CommonJS的规范之一,拥有resolve、reject、done、fail、then等方法,能够帮助我们控制代码的流程,避免函数的多层嵌套。如今异步在web开发中越来越重要,对于开发人员来说,这种非线性执行的编程会让开发者觉得难以掌控,而Promise可以让我们更好地掌控代码的执行流程,jQuery等流行的js库都已经实现了这个对象,年底即将发布的ES6也将原生实现Promise

Why

想象这样一个场景,两个异步请求,第二个需要用到第一个请求成功的数据,那么我们代码可以这样写

ajax({
    url: url1,
    success: function(data) {
      ajax({
        url: url2,
        data: data,
        success: function() {
        }
      });
    }
  });

如果继续下去在回调函数中进行下一步操作,嵌套的层数会越来越多。我们可以进行适当的改进,把回调函数写到外面

function A() {
    ajax({
      url: url1,
      success: function(data) {
        B(data);
      }
    });
  }
  function B(data) {
    ajax({
      url: url2,
      success: function(data) {
        ......
      }
    });
  }

即使是改写成这样,代码还是不够直观,但是如果有了Promise对象,代码就可以写得非常清晰,一目了然,请看

new Promise(A).done(B);

这样函数B就不用写在A的回调中了

How

目前的ES标准中还未支持Promise对象,那么我们就自己动手,丰衣足食吧。思路大致是这样的,用2个数组(doneList和failList)分别存储成功时的回调函数队列和失败时的回调队列
* state: 当前执行状态,有pending、resolved、rejected3种取值
* done: 向doneList中添加一个成功回调函数
* fail: 向failList中添加一个失败回调函数
* then: 分别向doneList和failList中添加回调函数
* always: 添加一个无论成功还是失败都会调用的回调函数
* resolve: 将状态更改为resolved,并触发绑定的所有成功的回调函数
* reject: 将状态更改为rejected,并触发绑定的所有失败的回调函数
* when: 参数是多个异步或者延迟函数,返回值是一个Promise兑现,当所有函数都执行成功的时候执行该对象的resolve方法,反之执行该对象的reject方法

下面是我的具体实现过程:

var Promise = function() {
  this.doneList = [];
  this.failList = [];
  this.state = 'pending';
};
Promise.prototype = {
  constructor: 'Promise',
  resolve: function() {
    this.state = 'resolved';
    var list = this.doneList;
    for(var i = 0, len = list.length; i < len; i++) {
      list[0].call(this);
      list.shift();
    }
  },
  reject: function() {
    this.state = 'rejected';
    var list = this.failList;
    for(var i = 0, len = list.length; i < len; i++){
      list[0].call(this);
      list.shift();
    }
  },
  done: function(func) {
    if(typeof func === 'function') {
      this.doneList.push(func);
    }
    return this;
  },
  fail: function(func) {
    if(typeof func === 'function') {
      this.failList.push(func);
    }
    return this;
  },
  then: function(doneFn, failFn) {
    this.done(doneFn).fail(failFn);
    return this;
  },
  always: function(fn) {
    this.done(fn).fail(fn);
    return this;
  }
};
function when() {
  var p = new Promise();
  var success = true;
  var len = arguments.length;
  for(var i = 0; i < len; i++) {
    if(!(arguments[i] instanceof Promise)) {
      return false;
    }
    else {
      arguments[i].always(function() {
        if(this.state != 'resolved'){
          success = false;
        }
        len--;
        if(len == 0) {
          success ? p.resolve() : p.reject();
        }
      });
    }
  }
  return p;
}
Improve

目前只是实现了Promise的基础功能,但仍然还有无法处理的情况,例如要实现3个或3个以上的异步请求的串行,目前我的Promise没有办法支持new Promise(A).then(B).then(C)这样的形式,jQuery在1.7的版本中为Deferred(Promise)对象实现了pipe函数,可以通过这个函数实现上述功能,代码为$.Deferred(A).pipe(B).then(C),我尝试去读了jQuery这部分的代码,但是没能读懂,希望有大神能够给一些实现思路

Javascript 相关文章推荐
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
js实现密码强度检验
Jan 15 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
JS运算符优先级与表达式示例详解
Sep 04 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 Javascript
javascript 中的 delete及delete运算符
Nov 15 #Javascript
详解JavaScript函数对象
Nov 15 #Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 #Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 #Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 #Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 #Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 #Javascript
You might like
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
php统计数组元素个数的方法
2015/07/02 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
js操作select控件的几种方法
2010/06/02 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
基于vue2实现左滑删除功能
2017/11/28 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
python 瀑布线指标编写实例
2020/06/03 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
如何开发一个JQuery插件
2016/07/28 面试题
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
数控技术应届生求职信
2013/11/13 职场文书
销售主管竞聘书
2014/03/31 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
Win11查看设备管理器
2022/04/19 数码科技