模拟jQuery框架,利用原生的js技术,封装一个js框架,以加深对jQuery的常用api的使用和面向对象原理的理解;
一:结构部分
首先利用闭包,构造一个自执行函数,然后利用选择器函数Sizzle,获取dom元素;其后设置入口函数jQuery,返回一个F的实例;
然后对jQuery.prototype进行设置;其后修改F的原型指向jQuery的原型,最后暴露出去两个接口$和jQuery;
二:jQuery.fn.extend = jQuery.extend = function(){}
通过向jQuery的原型和jQuery上添加一个extend方法(详见下面代码extend部分);
可以实现扩展工具类方法和dom操作、css操作类的方法;
jQuery.fn.extend(object); 对jQuery.fn即jQuery.prototype
得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。 代码如下,欢迎指正
(function (window) {
  //伪数组借用数组的push和splice方法
var arr = [];//Array.prototype;
var push = arr.push;
var splice = arr.splice; //jQuery.extend()工具类方法中的type部分代码预处理
var toString = Object.prototype.toString;
var types = "Number,String,Boolean,Null,Undefined,Array,Object,Function,Math,Date,RegExp".split(",");
var class2type = {};
for (var i = 0; i < types; i++) {
var type = types[i];
class2type["[object " + type + "]"] = type.toLowerCase();
}
/**
* 获取dom元素的伪数组nodelist 不考虑兼容性问题;
* @param selector
* @returns {NodeList}
* @constructor
*/
var Sizzle = function (selector) {
return document.querySelectorAll(selector);
} /**
* 设置入口函数,返回F的实例对象
* @param selector
* @returns {*}
*/
function jQuery(selector) {
return jQuery.fn.F(selector);
} /**
* jQuery.prototype设置
* @type {{constructor: jQuery, F: Function}}
*/
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
version: "0.0.1",
F: function (selector) {
if (jQuery.isString(selector)) {
if (selector.charAt(0) === "<" && selector.charAt(selector.length - 1) === ">" && selector.length >= 3) {
//eg:$("<input>");
var div = document.createElement("div");
div.innerHTML = selector;
//for(var i =0;i<div.childNodes.length;i++){
// var child = div.childNodes[i];
// push.call(this.child);
//}
push.apply(this, div.childNodes);
} else {
//eg:$("div")
splice.call(this, 0, this.length);
var elements = Sizzle(selector);
push.apply(this, elements);
}
} else if (selector.nodeType) {
//鸭式辨型思想
//this[0] = selector;
//this.length = 1;
push.call(this, selector);
} else if (selector.version === this.version) {
return selector;
}
return this;//实现链式编程
}
} /**
* extend方法
* @type {Function}
*/
jQuery.fn.extend = jQuery.extend = function () {
var argLen = arguments.length;
var arg0 = arguments[0];
var sources = [];
var target;
if (argLen === 0) return this;
if (argLen === 1) {
sources.push(arg0);
target = this;
} else {
//for(var i=1;i<argLen;i++){
// sources.push(arguments[i]);
//}
push.apply(sources, arguments);
target = arg0;
} for (var i = 0; i < sources.length; i++) {
var source = sources[i];
for (var key in source) {
target[key] = source[key];
}
}
return target;
}
/**
* 工具类方法,添加到jQuery中,使用$.方法名()调用
*/
jQuery.extend({
    //判断数据类型
type: function (data) {
return class2type[toString.call(data)];
},
    //判断是不是字符串
isString: function (str) {
return jQuery.type(str) === "string";
},
    //判断是不是函数
isFunction: function (fn) {
return jQuery.type(fn) === "function";
},
     //抛出异常
error: function (msg) {
throw new Error(msg);
},
     //去除字符串两边的空格
trim: function (str) {
return str.replace(/^\s+|\s+$/g, "");
},
     //遍历(数组的遍历或者对象的遍历)
each: function (array, callback) {
var len = array.length;
var i;
if (typeof len === "number" && len >= 0) {
for (i = 0; i < len;) {
if (callback.call(array[i], i, array[i++]) === false) {
break;
}
}
} else {
for (i in array) {
if (callback.call(array[i], i, array[i]) === false) {
break;
}
}
}
}
}) //jQuery.fn中的each方法:这样F的实例,即jQuery的对象拥有的each方法
jQuery.fn.extend({
each: function (callback) {
jQuery.each(this, callback);
return this;
}
})
//css模块
jQuery.fn.extend({
css: function () {
var argLen = arguments.length;
var arg0 = arguments[0];
var arg1 = arguments[1];
if (argLen === 0) return this;
if (argLen === 1) {
if (jQuery.isString(arg0)) {
//表示获取第一个dom元素的css样式
var firstDom = this[0];
return window.getComputedStyle(firstDom, null)[arg0];
} else {
//是一个对象的时候表示设置多个样式
//return this.each(function(){
// var dom = this;
// jQuery.each(arg0,function(styleName,styleValue){
// dom.style[styleName] = styleValue;
// })
//})
return this.each(function () {
jQuery.extend(this.style, arg0);
});
}
} else {
//传递两个参数;设置单个css样式
return this.each(function () {
this.style[arg0] = arg1;
})
} },
    //显示
show: function () {
return this.css("display", "block");
},
    //隐藏
hide: function () {
return this, css("display", "none");
},
    //切换显示和隐藏
toggle: function () {
return this.each(function () {
var $this = $(this);
$this.css("display") === "none" ? $this.show() : $this.hide();
})
}
})
//属性模块
jQuery.fn.extend({
attr: function (arg0, arg1) {
var argLen = arguments.length;
if (argLen === 0) return this;
if (argLen === 1) {
if (jQuery.isString(arg0)) {
//获取第一个dom元素的属性值
var firstDom = this[0];
return firstDom.getAttribute(arg0);
} else {
//设置一个对象的属性
return this.each(function () {
var dom = this;
jQuery.each(function (className, classValue) {
dom.setAttribute(className, classValue);
}) })
}
} else {
//两个参数;设置属性
return this.each(function () {
this.setAttribute(arg0, arg1);
})
}
},
hasClass: function (className) {
//遍历,只要有一个dom元素含有className这个类名就返回true
var isExist = false;
this.each(function () {
if ((" " + this.className + " ").indexOf(" " + className + " ") > -1) {
isExist = true;
return false;
}
})
return isExist;
},
addClass: function (className) {
var classNames = className.split(" ");
return this.each(function () {
for (var i = 0; i < classNames.length; i++) {
var singleClassName = className[i];
if (!$(this).hasClass(singleClassName)) {
this.className += " " + singleClassName;
}
}
}) },
removeClass: function (className) {
if (!className) {
//删除全部类名
return this.each(function () {
this.className = "";
})
} else {
//删除一个或者多个类名
var classNames = className.split(" ");
return this.each(function () {
var domClassName = " " + this.className + " ";
for (var i = 0; i < classNames.length; i++) {
var singleClassName = " " + classNames[i] + " ";
domClassName = domClassName.replace(singleClassName, " ");
}
this.className = $.trim(domClassName);
})
}
}
})
//dom操作方法模块
jQuery.fn.extend({
appendTo: function () {
var $parent = $(arguments[0]);
return this.each(function () {
var child = this;
$parent.each(function () {
var parent = this;
parent.appendChild(child.cloneNode(true));
})
}) },
prependTo: function () {
var $parent = $(arguments[0]);
return this.each(function () {
var child = this;
$parent.each(function () {
var parent = this;
parent.insertBefore(child.cloneNode(true), parent.firstChild);
})
})
},
append: function () {
var $parent = $this;
var $child = $(arguments[0]);
$child.appendTo($parent);
return this;
},
prepend: function () {
var $parent = $this;
var $child = $(arguments[0]);
$child.prependTo($parent);
return this;
},
remove: function () {
return this.each(function(){
this.parentNode.removeChild(this);
})
},
html: function (html) {
if (html === undefined) {
//返回第一个dom元素的html
var firstDom = this[0];
return firstDom.innerHTML;
}
//如果为null或者其他参数时候
return this.each(function () {
this.innerHTML = html;
//this.innerHTML = html===null?"":html;
})
},
text: function (text) {
if (html === undefined) {
var str = "";
this.each(function () {
str += this.innerText;
})
return str;
}
return this.each(function () {
this.innerText = text;
})
}
}) //事件模块
jQuery.fn.extend({
on:function(type,callback){
return this.each(function(){
this.addEventListener(type,callback);
})
}
})
var eventTypes = "click dblclivk keydown keyup mousedown mouseup mouseout mouseenter mouseleave load".split(" ");
for(var i =0;i<eventTypes.length;i++){
var eventType = eventTypes[i];
$.fn[eventType] = (function(){
var type = eventType;
return function(callback){
return this.on(type,callback);
}
})()
} //F的实例 = jQuery的实例
jQuery.fn.F.prototype = jQuery.fn;
//暴露出去两个接口
window.$ = window.jQuery = jQuery;
})(window)

js框架封装,模拟jQuery封装的更多相关文章

  1. ajx技术解析以及模拟jQuery封装

    1.后台处理程序 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  2. 模拟jquery封装选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. javascript模拟jQuery封装委托事件,兼容IE

    var $ = function(id){ var dom = document.getElementById(id); return { on:function(eventType,element, ...

  4. JS 框架安全报告:jQuery 下载次数超过 1.2 亿次

    尽管 JavaScript 库 jQuery 仍被使用,但它已不再像以前那样流行.根据开源安全平台 Snyk 统计,目前至少十分之六的网站受到 jQuery XSS 漏洞的影响,甚至用于扩展 jQue ...

  5. 借鉴一些关于js框架的东西

    八款Js框架介绍及比较,Dojo .Scriptaculous .Prototype .yui-ext .Jquery .Mochikit.mootools .moo.fx,componentartu ...

  6. 不借助jquery封装好的ajax,你能用js手写ajax框架吗

    不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...

  7. 仿照jquery封装一个自己的js库

    所谓造轮子的好处就是复习知识点,加深对原版jquery的理解.本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包括 ...

  8. 仿照jquery封装一个自己的js库(一)

    所谓造轮子的好处就是复习知识点,加深对原版jquery的理解. 本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包 ...

  9. 模拟jQuery简单封装ajax

    /*模拟jQuery的写法 (简单写法)*/ var $={}; /*ajax*/ $.ajax = function (options) { /* * 请求 * 1.请求接口 type get po ...

随机推荐

  1. tyvj1144 股票

    描述 2130年,股神巴菲特投胎了!他投胎到你身上!你作为股神转世,能力比原股神还要强,你可以预测到今后n天的股价.假设刚开始你的手上有1元钱,你想知道n天后你最多可以赚到多少钱.作为股神转世,你准备 ...

  2. Asp.net的request类

    ASP.NET获取客户端信息,暂时就这几个,有待添加~~ 1. 在ASP.NET中专用属性: 获取服务器电脑名:Page.Server.ManchineName 获取用户信息:Page.User 获取 ...

  3. RPLIDAR使用和测试

    采购的RPLIDAR刚刚到货,先拆封,内部包括雷达主机.线缆.串口USB转接.USB线.   根据说明在此处下载驱动和SDK,雷达的数据实际是通过串口输出的,所以驱动只是针对串口USB转换芯片CP21 ...

  4. 企业开发中选择logback而不是log4j的理由

    不知道看到这篇文章的Java工程师有没有考虑过这个问题:为什么在企业开发中会选择logback来记录日志,而不是log4j呢? 如果你以前没有考虑过这个问题,那么现在如果让你考虑一下,你可能觉的会是因 ...

  5. SpringMVC基础——一个简单的例子

    一.导入 jar 包 二.配置 web.xml 文件 <servlet> <servlet-name>dispatcherServlet</servlet-name> ...

  6. ARM状态和THUMB状态

    ARM处理器的工作状态 在ARM的体系结构中,可以工作在三种不同的状态,一是ARM状态,二是Thumb状态及Thumb-2状态,三是调试状态. <嵌入式系统开发与应用教程(第2版)>上介绍 ...

  7. c# Winforms WebBrowser - Clear all cookies

    Hello,   I recently search for a method to delete all cookies from the build in .NET WinForms WebBro ...

  8. JAVA 继承 extends

    /* 继承 1.提高了代码的复用性,简化了代码 2.让类与类之间产生了继承关系,才有了后面的多态的特性的存在 注意:千万不要为了获取其它类的功能简化代码,而建立继承关系, 必须要类与类之间存在继承关系 ...

  9. ANDROID_MARS学习笔记_S01原始版_010_ContentProvider

    一.简介 一.代码1.xml(1)main.xml <?xml version="1.0" encoding="utf-8"?> <Linea ...

  10. 关于python写GUI桌面应用的一些研究结果

    研究了一下python开发GUI桌面应用的解决方案,研究结果记录如下: EasyGui:控件极为简单,连个基本的grid.list组件都没有,不适合商用,甚至是普通的应用都不行,放弃! Tkinter ...