(function (global) {
var document = global.document,//变成局部变量提高搜索的性能
init;
// 核心函数
function itcast(selector) {
return new itcast.fn.init(selector);
} // 核心原型--方法库 存储所有的方法
itcast.fn = itcast.prototype = {
constructor: itcast,
length: 0//确保时伪数组对象,伪数组没有元素,但是长度属性必须有为0 才能称为伪数组
};
// 构造函数init
/*构造函数,因为函数里的变量用户无法获取到,进行操作,函数可以通过函数名拿到原型,来操作*/
init = itcast.fn.init = function (selector) {
// 处理null undefined
if (!selector) {
return this;
}
// 处理字符串
if (itcast.isString(selector)) {
// 处理Html字符串解析
if (itcast.isHTML(selector)) {
// 将html字符串 转换成 html元素
// '<div><p>123</p></div><div><p>456</p></div>'
// var o = {} == {0: 1,1: 2,2: 3,length: 3};
// var ar = [1, 2, 3];
// 借调数组的push方法 伪数组存储数据 格式如{0: 1,1: 2,2: 3,length: 3}; 方便存储 和使用
Array.prototype.push.apply(this, itcast.parseHTML(selector));
}
// handle: selector
else { //处理选择器
Array.prototype.push.apply(this,
document.querySelectorAll(selector));
}
return this;
}
//处理单个节点
if (itcast.isNode(selector)) {
this[0] = selector;
this.length = 1;
return this;
}
};
//可传入多个参数的方法
itcast.extend = function () {
var args = arguments;
for (var i = 0, l = args.length; i < l; i++) {
for (var k in args[i]) {
this[k] = args[i][k];
}
}
};
//类型判断方法 和 工具类方法 是同一个函数,传如不同的对象,处理的东西不同 因此不会产生覆盖的现象
// 类型判断方法 用作过滤
itcast.extend({
isString: function (obj) {//判断是不是字符串
return typeof obj === 'string';
},
isHTML: function (obj) {
//判断是不是Html字符串
/*以 “<” 开头
长度大于3
以“>” 结尾
满足以上所有条件才为真
*/
return obj.charAt(0) === '<' && obj.charAt(obj.length - 1) === '>' &&
obj.length >= 3;
},
isNode: function (obj) {//判断是不是dom节点
// !!obj 过滤无效值 并且 节点类型在obj中存在,返回
return !!obj && 'nodeType' in obj; // return !!obj && obj.nodeType;
}
});
// 工具类方法
itcast.extend({
parseHTML: function (html) {//将Html字符串解析方法
//创建div用来装innerHtml解析的标签,方便调用innerHTML属性,和node = div.firstChild。
var div = document.createElement('div'),
node,
ret = [];//以数组的形式存储创建的标签,最后再以伪数组的形式存储 div.innerHTML = html;
// 遍历节点
for (node = div.firstChild; node; node = node.nextSibling) {
if (node.nodeType === 1) {
ret.push(node);
}
}
return ret;
},
each: function (obj, callback) {//遍历方法
var i = 0,
l = obj.length; for (; i < l; i++) {
if (callback.call(obj[i], i, obj[i]) === false) {
break;
}
}
}
});
// 实现init对象继承自itcast.prototype
// init对象也 可 被称为itcast对象
init.prototype = itcast.prototype; /*将itcast暴露在全局 给用户使用,必须暴露一个让用户操作,
不暴露用户无法操作,尽量少暴露,越多污染的可能性就会越大*/
global.$ = global.itcast = itcast; }(window));

jQuery的矿建结构小demo举例的更多相关文章

  1. js 模仿jquery 写个简单的小demo

    <div id="div" style="background:red;width:100px;height:300px"> 123123123 & ...

  2. AngularJs分层结构小demo

    后端mvc分层,前端也要分层才对嘛.分层的好处不言而喻.简直太清晰,容易维护.反正清爽的一逼.不信你看. 思路:分为controller层和service层.controller层再提取一个公共的层. ...

  3. jQuery实现tab选项卡效果小demo

    html页面: <section> <h2>Section Title</h2> <ul class="tab-nav"> < ...

  4. 新手 gulp+ seajs 小demo

    首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...

  5. Nancy之基于Nancy.Hosting.Self的小Demo

    继昨天的Nancy之基于Nancy.Hosting.Aspnet的小Demo后, 今天来做个基于Nancy.Hosting.Self的小Demo. 关于Self Hosting Nancy,官方文档的 ...

  6. Nancy之基于Nancy.Owin的小Demo

    前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katan ...

  7. React问答小demo

    在学习react初期,看了一些视频和资料,react基础知识差不多学完,跟着网上的一个教程,做了一个小型的问答demo. 需求看图说: 1.点击"添加"按钮,显示问题输入表单,再次 ...

  8. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  9. 一个基于ES5的vue小demo

    由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...

随机推荐

  1. c# 循环语句练习题;

    1. 求100以内质数的和 2. 兔子问题 3. 九九乘法表:   一行一行打印: 4. 有一张超大的纸:   纸质的厚度是0.01:   对折多少次,可以达到珠峰的高度:   按照8848来计算: ...

  2. zabbix 添加jvm监控

    1. zabbix 服务端安装,监控jmx 需要--enable-java zabbix 客户端不需要 --enable-java 2.zabbix_server端安装jdk 安装jdk [root@ ...

  3. 部署lvs-rrd监控LVS

    1.安装rrdtool .tar.gz cd rrdtool- ./configure -prefix=/usr/local/rrdtool make make instal 安装完毕后将rrdtoo ...

  4. Delphi 重写控件的一个例子。

    unit DBGridEx;   interface   uses   Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, ...

  5. 在ASP.Net MVC 中,如何在Global.asax中配置一个指向Area内部的默认Route

    ASP.Net MVC 中配置Route的时候可以设置一个默认的Route. 比如我要在输入http://localhost的时候默认进入http://localhost/home/index.可以在 ...

  6. Search Insert Position——LeetCode

    Given a sorted array and a target value, return the index if the target is found. If not, return the ...

  7. qt项目转vs项目

    Qt creator是一个非常好用的跨平台项目管理工具和集成开发环境(IDE).但是对于我自己来说Visual Studio依然是我最顺手的开发工具,由于Qt使用了moc,这样要是自己管理Visual ...

  8. SRM 504(2-1000pt)

    DIV2 1000pt 题意:对于一个n*m的矩阵,每个格子都有一个颜色B或者W.对矩阵A执行以下程序后变成矩阵B.给出矩阵B,求A.(若有多种情况,输出字典序最小的).(n,m <= 16) ...

  9. Java 内省 Introspector

    操纵类的属性,有两种方法 反射 内省 面向对象的编程中,对于用户提交过来的数据,要封装成一个javaBean,也就是对象 其中Bean的属性不是由字段来决定的,而是由get和Set方法来决定的 pub ...

  10. [置顶] C++中RTTI机制剖析

    C++中要想在运行时获取类型信息,可没有Java中那么方便,Java中任何一个类都可以通过反射机制来获取类的基本信息(接口.父类.方法.属性.Annotation等),而且Java中还提供了一个关键字 ...