分析一个类似于jquery的小框架 (2)
核心构造函数
(function ( window, undefined ) {
// 定义Itcast构造函数
function Itcast ( selector ) {
return new Itcast.fn.init( selector );
}
Itcast.fn = Itcast.prototype = {
constructor: Itcast,
type: 'Itcast',
length: 0,
// 核心模块内容
init: function ( selector ) {
// 假设 这里 的 init 就是 jq 的init, 因此可以考虑各种参数
// '', null, undefined
if ( !selector ) {
return this;
}
// str
if ( typeof selector == 'string' ) {
// 这里可能是 html 的字符串, 也可能是 选择器
if ( selector.charAt( 0 ) === '<' ) {
// 是 html 字符串
// 将字符串转换成 DOM 对象, 并加到 this 中
[].push.apply( this, Itcast.parseHTML( selector ) );
} else {
// 是选择器
// 获取元素, 并加到 this 中
// 使用 Itcast.Select
[].push.apply( this, Itcast.Select( selector ));
}
return this;
}
// fn
if ( typeof selector == 'function' ) {
}
//,目的是将selector对应的dom元素包装成Itcast对象
// dom,如果selector是DOM对象
//这里是构造函数,this指新建的对象(伪数组),返回this,会直接return
if ( selector.nodeType ) {
//当selector直接就是dom的时候,Itcast是伪数组,
// 直接将dom对象加入到this中即可
this[0] = selector;
this.length = 1;
return this;
}
// itcast,本来就是Itcast对象,可以直接返回,也可以便利出来,包装依次再返回
if ( selector.type == 'Itcast' ) {
return selector;
}
// 不知道的 return this
//如果是数组,或对象,认为selector.length>=0就是数组、伪数组,遍历
if( selector.length >= 0){
[].push.apply( this ,selector );
}else{
this[0] = selector;
this.length = 1;
}
return this;
// 。否则是对象,与dom一样
},
//toArray方法,将Itcast对象(伪数组)转换成数组返回
toArray:function(){
return [].slice.apply(this, 0);
},
// 。slice方法能截取,并返回一个数组
//get方法: 参数:index索引: 返回值:索引对应的DOM对象
//功能: 将index对应的Itcast伪数组中的DOM对象返回
//如果index不存在,、index》0 index《0
get:function( index ){
if( index === undefined){
return this.toArray();
}
if( index >= 0 ){
return this[ index ];
}else{
return this[ this.length + index];
}
},
//eq方法 参数:index, 返回值:Itcast对象
//功能:将索引对应的Itcast中的DOM包装成Itcast对象返回
eq: function( index ){
return this.constructor(this.get( index ));
},
//first: 返回第一个
first: function(){
return this.eq( 0 );
},
// last: 返回最后一个
last: function (){
return this.eq( -1 );
},
//each方法:实例方法,由Itcast对象调用
// ,参数: callback 函数 , 返回值:this。链式编程用
//功能: 遍历Itcast对象中的dom对象,并带入callback函数中操作
each:function(callback){
this.each(this,callback);
return this;
},
//map方法: 映射,将dom对象的操作结果返回,
map: function(callback){
this.map( this, callback);
return this;
}
};
Itcast.fn.init.prototype = Itcast.fn;
// 添加 extend 方法
Itcast.extend = Itcast.fn.extend = function ( obj ) {
for ( var k in obj ) {
this[ k ] = obj[ k ];
}
};
//添加核心模块的工具方法(静态成员)
Itcast.extend({
// each方法, 参数:array数组伪数组,对象,callback 操纵函数
//功能: 将array中的成员遍历操作,当callback返回false时停止循环
// 返回值: array原数组
each: function( array , callback){
if( array.length >= 0 ){
for( var i =0 ; i<array.length ; i++ ){
var res = callback.call( array[ i ] , i , array[ i ]);
if( res === false){
break;
}
}
}else{
for( var k in array){
var res = callback.call( array[ k ], k ,array[ k ]);
if( res === false){
break;
}
}
}
return array;
},
//map方法 返回值:经过操作之后 的新数组
// .参数:array(数组,伪数组,对象)callback(回调函数)
// 功能: 将array遍历,然后带入callback函数中,函数的返回值组成新数组,返回该数组
map: function(array , callback){
var res = [];
if( array.length >= 0 ){
for( var i = 0 ; i<array.length ; i++){
var result = callback.apply(array[ i ], array[ i ] , i);
if( result !== undefined ){
res.push(result);
}
}
}else{
for(var k in array){
var result = callback.apply( array[ i ], array[i] , i);
if( result !== undefined){
res.push(result);
}
}
}
return res;
}
})
Itcast.parseHTML = (function () {
var node = document.createElement( 'div' );
function parseHTML ( str ) {
node.innerHTML = str;
var arr = [];
arr.push.apply( arr, node.childNodes );
return arr;
};
return parseHTML;
})();
分析一个类似于jquery的小框架 (2)的更多相关文章
- 分析一个类似于jquery的小框架
在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , und ...
- 【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建
/* * @Author: 我爱科技论坛 * @Time: 20180715 * @Desc: 实现一个类似于JQuery功能的框架 * V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架. ...
- 【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装
// DOM框架(选择器框架) (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现 ...
- 【JavaScript框架封装】实现一个类似于JQuery的缓存框架的封装
// 缓存框架 (function (xframe) { /** * 实现了缓存框架的临时存储功能(内存存储) * @type {{data: Array, get: (function(*): *) ...
- 【JavaScript框架封装】实现一个类似于JQuery的动画框架的封装
// 动画框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 ...
- 【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装
// 属性框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 获取/设置某一个元素 ...
- 【JavaScript框架封装】实现一个类似于JQuery的选择框架的封装
// 选择框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 ...
- 【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装
// 事件框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 实现一个浏览器的基本 ...
- 【JavaScript框架封装】实现一个类似于JQuery的内容框架的封装
// 内容框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * .html()用为读 ...
随机推荐
- Three.js开发指南---使用three.js里的各种光源(第三章)
本章的主要内容 1 three.js有哪些可用的光源 2 什么时候用什么光源. 3 如何调整配置各种光源 4 如何创建镜头炫光 一 光源 光源大概有7种, 其中基础光源有4种 环境光(AmbientL ...
- ReactJS入门指南
ReactJS入门指南 本文旨在介绍ReactJS的基本知识,并一步步详细介绍React的基本概念和使用方法等,以及相应的Demo.本文在很大程度上参考了React官方文档和官方指南.如果你英语还不错 ...
- DELPHI 各版本下载
各版本中国下载地址: http://pan.baidu.com/s/1eQ1QGy2 http://pan.baidu.com/s/1qWK3mw8 (有新版本发布时,会同步最新官网地址) ───── ...
- 有wsdl地址生成客户端调用
新建Java Project 1.项目名称:HelloWorldClient 2.建好的项目 3.生成客户端 选择HelloWorldClient 填写wsdl地址(参考:myeclipse构建web ...
- Python不完全入门指南
适用范围: 有一定编程基础,想快速入门python的人群 说明: 使用jupyter notebook编写,可以使用nbviewer网站进行查看. Python不完全入门指南 项目放在github上, ...
- HDU3068 最长回文串
题目大意:给出一个字符串,求其回文串的长度.有多组数据. 分析:manacher算法模板题. //在原字符串两边和中间插入一个从未出现的字符,比如‘#’.然后再在最前面插入一个‘*’.#include ...
- 停掉Linux固定的进程
ps -ef | grep php 查看进程ID,和信息 kill -s 9 1827 相关命令 ps -ef , ps -aux , pgrep php ,
- windows 下编译log4cxx(x64)
参考链接 http://blog.csdn.net/hnu_zxc/article/details/7786060 http://blog.chinaunix.net/uid-20384806-id- ...
- JavaScript的学习5
一.DOM对象 1.DOM对象:Document Object Model 文档对象模型,主要是用来提供了操作HTML文档的属性与方法 2.DOM的分类: a.核心DOM:为操作XML和HTML ...
- 调用 SSPI 失败,请参见内部异常。接收到的消息异常,或格式不正确。
完整异常信息: System.Security.Authentication.AuthenticationException: 调用 SSPI 失败,请参见内部异常. ---> System.C ...