分析一个类似于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()用为读 ...
随机推荐
- Beta版本冲刺——day3
No Bug 031402401鲍亮 031402402曹鑫杰 031402403常松 031402412林淋 031402418汪培侨 031402426许秋鑫 站立式会议 大将回归,基本功能接口也 ...
- U盘容量变小的处理方式
我就说一下win7下的步骤吧,xp应该差不多,管理员身份运行命令行(快捷键win+R), diskpart回车 list disk回车 看看你的u盘是哪一个,选择他(select disk X回车) ...
- Rails ---> routes.rb 详解
理解路由的目的 看懂routes.rb文件中的代码 使用经典的hash风格或者现在比较流行的Restful风格构造你自己的路径 断定一个路径会映射到哪一个controller和action 路由的双重 ...
- ife-task0003学习收获总结
+ 编写可维护的css原则是,尽量减少改动时要编辑的地方(减少代码重复). + CSS布局奇淫技巧之-高度自适应 高度自适应:通过绝对定位来解决高度自适应的问题,元素不设置高度,设置绝对定位,将top ...
- ios打包出来为pkg的处理方法
Add LSRequiresIPhoneOS YES to your Info.plist The key can be found as Application requires iPhone en ...
- 使用PowerDesigner把oom设计图导出jpg格式的图片
1: 按住Shift键点击鼠标选择要导出的对象,必须先选择. 2: 选择Edit—>Export Image 到出你需要的格式,如下图
- Stream 同步错误之解决方案 ORA-00001 ORA-26787 ORA-26786
stream是 oracle 11g 支持的数据同步技术, 虽然该技术已经不是什么新技术, 但目前国内采用该技术开发的软件不多见. stream 同步软件项目参与近一年, 近期软件上线实施, 效果不 ...
- flash builder (fb) 与flash professional cs6(fla) 联合调试
注意加载的swf名字与项目(fla)名字一致,在fb进行构建,如果fla代码做了修改,保持在fb构建最新.
- Object.defineproperty实现数据和视图的联动
Object.defineproperty语法 var o = {}; // 创建一个新对象 // Example of an object property added with definePro ...
- android-studio设置代理
/home/{user}/.gradle/gradle.properties org.gradle.jvmargs=-Xmx1536m -DsocksProxyHost=127.0.0.1 -Dsoc ...