(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++到Qt)

    从相对路径说开来(从C++到Qt) 转载自:http://blog.csdn.net/dbzhang800/article/details/6363165 在Qt论坛经常看到网友抱怨: QPixmap ...

  2. NtQuerySystemInformation的使用(提供50余种信息)

    今天,我们主要讨论的是一个函数NtQuerySystemInformation(ZwQuerySystemInformation).当然,你不要小看这么一个函数,它却为我们提供了丰富的系统信息,同时还 ...

  3. 【HDOJ】2364 Escape

    bfs.题目做的不细心,好多小错误.尤其注意起始点就是边界的情况.wa了八次. #include <iostream> #include <cstdio> #include & ...

  4. HDU4681 String(dp)

    题目链接. #include <iostream> #include <cstdio> #include <cstring> #include <cstdli ...

  5. Linux Kernel ‘test_root()’函数本地拒绝服务漏洞

    漏洞名称: Linux Kernel ‘test_root()’函数本地拒绝服务漏洞 CNNVD编号: CNNVD-201306-432 发布时间: 2013-06-25 更新时间: 2013-06- ...

  6. POJ-1151-Atlantis(线段树+扫描线+离散化)[矩形面积并]

    题意:求矩形面积并 分析:使用线段树+扫描线...因为坐标是浮点数的,因此还需要离散化! 把矩形分成两条边,上边和下边,对横轴建树,然后从下到上扫描上去,用col表示该区间有多少个下边,sum代表该区 ...

  7. 【转】java 容器类使用 Collection,Map,HashMap,hashTable,TreeMap,List,Vector,ArrayList的区别

    原文网址:http://www.360doc.com/content/15/0427/22/1709014_466468021.shtml java 容器类使用 Collection,Map,Hash ...

  8. zoj 2706 线段树

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1706 trick:关于正数和负数的整除问题,正数整除是自动向下取整的 ...

  9. 环境搭建之maven分布式系统

    shoppingmall项目: 一.父工程  shoppingmall-parent  (packaging为pom) 此是本项目的顶级工程,所有子工程都应该继承他,主要可承担以下任务: a.集中定义 ...

  10. [置顶] cocos2d-x 植物大战僵尸(4) 帽子僵尸的产生

         大家早上好,趁着阳光美好的时候,我打算写下博客:今天要说的是僵尸的产生了,这块和太阳因子的产生比较相似,大体上的区别在于僵尸的基类这块:我在考虑是详细的写还是大体的写,本着对自己作业的态度和 ...