jQuery的矿建结构小demo举例
(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举例的更多相关文章
- js 模仿jquery 写个简单的小demo
<div id="div" style="background:red;width:100px;height:300px"> 123123123 & ...
- AngularJs分层结构小demo
后端mvc分层,前端也要分层才对嘛.分层的好处不言而喻.简直太清晰,容易维护.反正清爽的一逼.不信你看. 思路:分为controller层和service层.controller层再提取一个公共的层. ...
- jQuery实现tab选项卡效果小demo
html页面: <section> <h2>Section Title</h2> <ul class="tab-nav"> < ...
- 新手 gulp+ seajs 小demo
首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...
- Nancy之基于Nancy.Hosting.Self的小Demo
继昨天的Nancy之基于Nancy.Hosting.Aspnet的小Demo后, 今天来做个基于Nancy.Hosting.Self的小Demo. 关于Self Hosting Nancy,官方文档的 ...
- Nancy之基于Nancy.Owin的小Demo
前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katan ...
- React问答小demo
在学习react初期,看了一些视频和资料,react基础知识差不多学完,跟着网上的一个教程,做了一个小型的问答demo. 需求看图说: 1.点击"添加"按钮,显示问题输入表单,再次 ...
- 一个基于ES6+webpack的vue小demo
上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...
- 一个基于ES5的vue小demo
由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...
随机推荐
- WinPcap编程(一)
0. 按着文档顺序写的. 开发环境:win10+VS2013. 配置WinPcap环境就不多说.直接给网址:http://blog.sina.com.cn/s/blog_57432f380101qh3 ...
- gcc常用的编译选项
一.程序编译过程 程序编译的时候,要分四个阶段 : 1.预处理阶段,完成宏定义和include文件展开等工作: 2.根据编译参数进行不同程度的优化,编译成汇编代码: 3.用汇编器把汇编代码进一步生成目 ...
- Obj-C的hello,world 2
https://github.com/facebook/facebook-ios-sdk/blob/master/src/FBAppEvents.h + (void)logEvent:(NSStrin ...
- SharePoint DataFormWebPart 通过Caml和xslt聚合内容
以下是一个例子,SPDataSource用于查询内容,DatasourceMode属性指定查询范围(网站集,网站,列表),SelectCommand是Caml查询:Xsl展示内容,下面列子是用tabl ...
- Vessels
Codeforces Round #218 (Div. 2) D:http://codeforces.com/problemset/problem/371/D 题意:就是有一些盘子,盘子里可以装水,这 ...
- cf B Inna and Candy Boxes
题意:输入n,然后输入n个数ai,再输入n个数bi,如果在1-ai中能找到两个数x,y,x和y可以相等,如果x+y=bi,答案加上x*y,否则减去1,让结果尽可能大,输出结果. #include &l ...
- sql server更改机器名后更改数据库机器名
方式一: 本地机器名查询: select * from sys.servers 修改机器名: sp_dropserver 'old server name' sp_addserver 'new ser ...
- Nodejs爬虫进阶教程之异步并发控制
Nodejs爬虫进阶教程之异步并发控制 之前写了个现在看来很不完美的小爬虫,很多地方没有处理好,比如说在知乎点开一个问题的时候,它的所有回答并不是全部加载好了的,当你拉到回答的尾部时,点击加载更多,回 ...
- hg 证书验证失败
hg clone https://bitbucket.org/pygame/pygame 出现abort: error: _ssl.c:504: error:14090086:SSL routines ...
- 搜索(DLX):HOJ 1017 - Exact cover
1017 - Exact cover Time Limit: 15s Memory Limit: 128MB Special Judge Submissions: 6751 Solved: 3519 ...