js写html代码有什么框架,JS - 教你制作一个类似于jQuery的小框架（附样例）

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，使用样例

hangge.com

//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);

})

• 条目1
• 条目2
• 条目3

运行结果如下：