AJax技术

javascript 学习(9)

字号+ 作者:H5之家 来源:H5之家 2016-09-12 15:17 我要评论( )

remove: function(element) { element = $(element); element.parentNode.removeChild(element); }, getHeight: function(element) { element = $(element); return element.offsetHeight; } } /** * 为 Element.to

  remove: function(element) {
    element = $(element);
    element.parentNode.removeChild(element);
  },
   
  getHeight: function(element) {
    element = $(element);
    return element.offsetHeight;
  }
}

/**
 * 为 Element.toggle 做了一个符号连接,大概是兼容性的考虑
 */
var Toggle = new Object();
Toggle.display = Element.toggle;

/*--------------------------------------------------------------------------*/

/**
 * 动态插入内容的实现,MS的Jscript实现中对象有一个 insertAdjacentHTML 方法(http: //msdn.microsoft.com/workshop/author/dhtml/reference/methods/insertadjacenthtml.asp)
 * 这里算是一个对象形式的封装。
 */
Abstract.Insertion = function(adjacency) {
  this.adjacency = adjacency;
}

Abstract.Insertion.prototype = {
  initialize: function(element, content) {
    this.element = $(element);
    this.content = content;
   
    if (this.adjacency && this.element.insertAdjacentHTML) {
      this.element.insertAdjacentHTML(this.adjacency, this.content);
    } else {
     /**
      * gecko 不支持 insertAdjacentHTML 方法,但可以用如下代码代替
      */
      this.range = this.element.ownerDocument.createRange();
     /**
      * 如果定义了 initializeRange 方法,则实行,这里相当与定义了一个抽象的 initializeRange 方法
      */
      if (this.initializeRange) this.initializeRange();
      this.fragment = this.range.createContextualFragment(this.content);

     /**
      * insertContent 也是一个抽象方法,子类必须实现
      */
      this.insertContent();
    }
  }
}

/**
 * prototype 加深了我的体会,就是写js 如何去遵循 Don’t Repeat Yourself (DRY) 原则
 * 上文中 Abstract.Insertion 算是一个抽象类,定义了名为 initializeRange 的一个抽象方法
 * var Insertion = new Object() 建立一个命名空间
 * Insertion.Before|Top|Bottom|After 就象是四个java中的四个静态内部类,而它们分别继承于Abstract.Insertion,并实现了initializeRange方法。
 */
var Insertion = new Object();

Insertion.Before = Class.create();
Insertion.Before.prototype = (new Abstract.Insertion('beforeBegin')).extend({
  initializeRange: function() {
    this.range.setStartBefore(this.element);
  },
 
  /**
   * 将内容插入到指定节点的前面, 与指定节点同级
   */
  insertContent: function() {
    this.element.parentNode.insertBefore(this.fragment, this.element);
  }
});

Insertion.Top = Class.create();
Insertion.Top.prototype = (new Abstract.Insertion('afterBegin')).extend({
  initializeRange: function() {
    this.range.selectNodeContents(this.element);
    this.range.collapse(true);
  },
 
  /**
   * 将内容插入到指定节点的第一个子节点前,于是内容变为该节点的第一个子节点
   */
  insertContent: function() { 
    this.element.insertBefore(this.fragment, this.element.firstChild);
  }
});

Insertion.Bottom = Class.create();
Insertion.Bottom.prototype = (new Abstract.Insertion('beforeEnd')).extend({
  initializeRange: function() {
    this.range.selectNodeContents(this.element);
    this.range.collapse(this.element);
  },
 
  /**
   * 将内容插入到指定节点的最后,于是内容变为该节点的最后一个子节点
   */
  insertContent: function() {
    this.element.appendChild(this.fragment);
  }
});


Insertion.After = Class.create();
Insertion.After.prototype = (new Abstract.Insertion('afterEnd')).extend({
  initializeRange: function() {
    this.range.setStartAfter(this.element);
  },

  /**
   * 将内容插入到指定节点的后面, 与指定节点同级
   */
  insertContent: function() {
    this.element.parentNode.insertBefore(this.fragment,
      this.element.nextSibling);
  }
});

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Ajax 教程 入门 学习

    Ajax 教程 入门 学习

    2016-09-02 14:01

  • 学习javascript:牛人的讲座视频和PPT

    学习javascript:牛人的讲座视频和PPT

    2016-08-22 13:00

  • 最全面的JavaScript调试技巧总结

    最全面的JavaScript调试技巧总结

    2016-08-21 15:01

  • 学习javaweb时的Ajax笔记

    学习javaweb时的Ajax笔记

    2016-08-18 11:00

网友点评
t