浅谈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 相关文章推荐
Extjs学习笔记之六 面版
Jan 08 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 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+mysql保存和输出文件
2006/10/09 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
三种php连接access数据库方法
2013/11/11 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
php中namespace及use用法分析
2016/12/06 PHP
基于jquery的时间段实现代码
2012/08/02 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
学习jQuey中的return false
2015/12/18 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
Vue的轮播图组件实现方法
2018/03/03 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
pyv8学习python和javascript变量进行交互
2013/12/04 Python
python对数组进行反转的方法
2015/05/20 Python
python处理html转义字符的方法详解
2016/07/01 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
python os模块在系统管理中的应用
2020/06/22 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
求职信的七个关键技巧
2014/02/05 职场文书
股份合作协议书
2014/09/10 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python