JS - 教你制作一个类似于jQuery的小框架（附样例）

2017-06-08 发布：hangge 阅读：1324

jQuery 想必大家都不陌生。作为一个快速、简洁的 JavaScript 框架，它封装许多 JavaScript 常用的功能代码。jQuery 具有许多优秀的特性：比如独特的链式语法和短小清晰的多功能接口，高效灵活的 css 选择器等等。

本文通过仿造 jQuery 功能来构建一个 js 小框架，一来可以让我们能够更好地理解市面上框架的工作原理，二来可以学习下如何将各种对象功能封装成一个框架。

一、实现简单的框架封装

这里我们创建一个名叫 hangge 的框架。它只是一个非常简单的雏形，用来演示如何实现框架的定义，以及属性、方法的扩展。

1，框架代码

//框架对象（叫做hangge）
var hangge = function (name) {

   this.url  = "hangge.com";
   this.name = name;

   this.info = function () {
       console.log('名称：' + this.name + ' 网址：' + this.url);
   }
}

//扩展属性
hangge.prototype.country = '中国';

//扩展方法
hangge.prototype.doSomething = function () {
   console.log(this.name + ' 在做些什么事情！');
}

2，使用样例

//实例化一个对象
var hg = new hangge('航歌');

console.log('--- 调用对象里面的方法 ---');
hg.info();

console.log('--- 调用对象扩展属性和方法 ---');
console.log(hg.country);
hg.doSomething();

运行结果如下：

二、实现一个真正的框架

前面只是一个简单的演示，下面我们正式来构建一个实现 jQuery 许多基本功能的框架。

1，框架功能

实现简单的 id 选择器
支持链式调用
实现 html 方法（支持获取、或设置 html 内容）
实现 attr 方法（支持获取、或设置元素属性）
实现 ready 方法（页面所有 dom 对象加载完毕之后才执行）
实现 parent 方法（获取父对象）

2，框架代码

//框架对象（叫做hangge）
var hangge = function (select) {
    return hangge.prototype.init(select);
}

hangge.prototype = {
    //初始化方法
    init:function (select) {
        this.id_obj = null;
        //如果是对象类型，就保存当前对象，然后返回this
        if(select !=null && typeof select == "object"){
            this.id_obj = select;
            return this;
        }
        //如果是字符串类型，就获取对象，然后返回this
        if(select !=null && typeof select == "string" && document.getElementById(select) != null){
            this.id_obj = document.getElementById(select);
            return this;
        }
        return this;
    },
    //判断对象是否为空
    isNull:function (n) {
        if(n == null){
            return true;
        }
        return false;
    },
    html:function (v) {
        //表示有选择到dom对象
        if(!this.isNull(this.id_obj)){
            //表示是获取html内容
            if(v == undefined){
                return this.id_obj.innerHTML;
            }else if(v != null){
                this.id_obj.innerHTML = v;
            }
        }else{
            return null;
        }
    },
    attr:function (k,v) {
        //表示有选择到dom对象
        if(!this.isNull(this.id_obj)){
            //表示是获取html内容
            if(k != null && v == undefined){
                return this.id_obj.getAttribute(k);
            }else if(k != null && v != null){
                this.id_obj.setAttribute(k,v);
            }
        }else{
            return null;
        }
    },
    ready:function (fn) {
        document.onreadystatechange=function () {
            if(document.readyState =='complete'){
                fn();
            }
        }
    },
    parent:function () {
        //如果对象为空，那么就需要返回空对象
        if(this.isNull(this.id_obj)) return god();
        //如果不为空就需要返回父对象
        return hangge(this.id_obj.parentNode);
    }
};

3，使用样例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <script src="hangge.js"></script>
    <script>
      //dom元素加载完毕后执行
      hangge().ready(function () {
          //获取元素的html内容
          console.log(hangge("li1").html());
          //设置元素的html内容
          hangge("li1").html("条目1的新内容！")

          //获取元素的属性
          console.log(hangge("li1").attr("date-name"));
          //设置元素的属性
          hangge("li1").attr("date-name",'my-list-1');

          //访问父元素，并使用链式调用
          console.log(hangge("li1").parent().parent().html());

          //alert(god("abc").parent().parent().attr("date-name"));
          //alert(111);
      })
    </script>
  </head>
  <body>
    <div>
      <ul>
        <li id="li1" date-name="list-1">条目1</li>
        <li id="li2" date-name="list-2">条目2</li>
        <li id="li3" date-name="list-3">条目3</li>
      </ul>
    </div>
  </body>
</html>

运行结果如下：