jLim - 紧凑的 JavaScript 框架
1. [代码][JavaScript]代码
/*!
* jLim Core
*
* jLim is a small JavaScript base code. It can be used to built your own
* JavaScript library or framework.
*
* @version 0.1.1
* @author Victor Villaverde Laan
* @link http://www.freelancephp.net/jlim-small-javascript-framework/
* @license MIT license
*/
(function ( window ) {
/**
* jLim function
* @param {string|DOM node|array of DOM nodes} selector When selector is not a string the context will be ignored
* @param {string|DOM node|array of DOM nodes} context
* @return {jLim} New instance
*/
var jLim = window.jLim = function ( selector, context ) {
return new jLim.core.init( selector, context );
};
// set $ global ( when not already exists )
if ( ! window.$ )
window.$ = jLim;
/**
* jLim Core
*/
jLim.core = jLim.prototype = {
els: [],
selector: [],
context: [],
/**
* Init function, set selected elements
* @param {string|DOM node|array of DOM nodes} selector When selector is not a string the context will be ignored
* @param {string|DOM node|array of DOM nodes} context Optional, default is document
*/
init: function ( selector, context ) {
// set selector and context property
this.selector = selector || document;
this.context = context || document;
// get elements by selector
if ( typeof selector == 'string' ) {
// trim spaces at the begin and end
selector = jLim.trim( selector );
if ( selector == 'body' ) {
// set body
this.els = document.body;
} else if ( selector.substr( 0, 1 ) == '<' ) {
// create element
this.els = jLim.create( selector );
} else {
// find elements
this.els = jLim.selector( selector, context );
}
} else if ( jLim.isFunction( selector ) ) {
// set DOM ready function
jLim.ready( selector );
} else if ( selector instanceof jLim ) {
this.els = selector.get();
} else {
this.els = selector;
}
// make sure elements property is an array
if ( ! jLim.isArray( this.els ) )
this.els = this.els ? [ this.els ] : [];
// support for using jLim object as an array
// set indices
for ( var i in this.els )
this[ i ] = this.els[ i ];
// set length property
this.length = this.els.length;
},
/**
* Get element (return all current elements when no index given)
* @param {integer} index
* @return {DOM node|array of DOM nodes}
*/
get: function ( index ) {
if ( typeof index == 'undefined' )
return this.els;
var el = ( index === -1 )
? this.els.slice( index )
: this.els.slice( index, +index + 1 );
return el.length ? el[0] : null;
},
/**
* Get count of current elements
* @return {integer}
*/
size: function () {
return this.els.length;
},
/**
* Call function for each element
* @param {function} fn
* @param {array} args
* @return {this} For chaining
*/
each: function ( fn, args ) {
jLim.each( this.els, fn, args );
return this;
},
/**
* Find elements within the current elements (context)
* @param {string} selector
* @return {jLim} Instance of new selection
*/http://www.huiyi8.com/css3/
find: function ( selector ) {css3教程
return this.chain( selector, this.els );
},
/**
* Add to the current elements in a new created jLim object
* @param {string|DOM node|array of DOM nodes} selector When selector is not a string the context will be ignored
* @param {string|DOM node|array of DOM nodes} context Optional, when none is given it will use the context of current jLim object
* @return {jLim} Instance of new selection
*/
add: function ( selector, context ) {
var $new = this.chain( selector, context || this.context ),
els = this.els.concat( $new.get() );
$new.els = els;
return $new;
},
/**
* Set one of current elements as new jLim object
* @param {integer} index Negative integer also possible, -1 means last item
* @return {jLim} Instance of new selection
*/
eq: function ( index ) {
return this.chain( this.get( index ) );
},
/**
* Set slice of current elements as new jLim object
* @param {integer} start Like the first param of the standard Array.slice() function
* @param {integer} end Like the second param of the standard Array.slice() function
* @return {jLim} Instance of new selection
*/
slice: function ( start, end ) {
var els = this.els.slice( start, end || this.els.length );
return this.chain( els );
},
/**
* Chain content as new jLim object
* @param {string|DOM node|array of DOM nodes} selector When selector is not a string the context will be ignored
* @param {string|DOM node|array of DOM nodes} context Optional
* @return {jLim} Instance of new selection
*/
chain: function ( selector, context ) {
var $new = jLim( selector, context );
$new.prevjLim = this;
return $new;
},
/**
* Set pointer to previous jLim object
* @return {jLim} Previous jLim object in the chain
*/
end: function () {
return this.prevjLim || jLim( null );
}
};
// init function gets core prototype
jLim.core.init.prototype = jLim.core;
/**
* Extend method
* @return {jLim|jLim.core|object|array|boolean}
*/
jLim.extend = jLim.core.extend = function () {
// target is current object if only one argument
var i = 0,
target = this,
deep = false,
obj, empty, item, x;
// check extending recursive (deep)
if ( typeof arguments[ 0 ] === 'boolean' ) {
deep = true;
i = 1;
if ( arguments.length > 2 ) {
i = 2;
target = arguments[ 1 ];
}
} else if ( arguments.length > 1 ) {
i = 1;
target = arguments[ 0 ];
}
// loop through all source objects
for ( x = i; x < arguments.length; x++ ) {
obj = arguments[ x ];
// copy object items (properties and methods)
for ( item in obj ) {
if ( obj[ item ] === target )
continue;
if ( deep && typeof obj[ item ] == 'object' && obj[ item ] !== null ) {
// item is also object, make copy
empty = jLim.isArray( obj[ item ] ) ? [] : {};
target[ item ] = jLim.extend( deep, target[ item ] || empty, obj[ item ] );
} else {
// copy property or method
target[ item ] = obj[ item ];
}
}
}
// return modified target
return target;
};
/**
* Extent basic functions
*/
jLim.extend({
/**
* Selector method
* @param {string} selector
* @param {string|DOM node|array of DOM nodes} context Default document
* @return {DOM node|array of DOM nodes|empty array}
*/
selector: function ( selector, context ) {
return jLim.$$( selector, context );
},
/**
* Add DOMReady callbacks
* @param {function|string} fn When string will be run like code with eval()
* @return {this}
*/
ready: function ( fn ) {
// default use the DOMReady add() method
jLim.DOMReady.add( fn );
// return this for chaining
return this;
},
/**
* Create DOM element
* @param {string} html
* @return {DOM element|array of DOM elements}
*/
create: function ( html ) {
var ph = document.createElement( 'div' ),
els = [];
ph.innerHTML = html;
// get created elements
els = ph.childNodes;
// return element or array of elements
return els.length == 1 ? els[0] : els;
},
/**
* Each function for arrays and objects
* @param {object|array} obj
* @param {function} fn
* @return {this}
*/
each: function ( obj, fn ) {
var item, retVal;
// call given function for each item
for ( item in obj ) {
retVal = fn.call( obj[ item ], item, obj[ item ] );
// do not continue further when return value is false
if ( retVal === false )
break;
}
// return this for chaining
return this;
},
/**
* Trim spaces
* @param {string} str
* @return {string}
*/
trim: function ( str ) {
return str.replace( /^\s+/, '' ).replace( /\s+$/, '' );
},
/**
* Check if argument is array
* @param {mixed} obj
* @return {boolean}
*/
isArray: function ( obj ) {
return ( Object.prototype.toString.call( obj ) === "[object Array]" );
},
/**
* Check if argument is function
* @param {mixed} obj
* @return {boolean}
*/
isFunction: function ( obj ) {
return ( Object.prototype.toString.call( obj ) === "[object Function]" );
}
});
/**
* External components
*/
/**
* DOMReady
*
* @version 1.0
* @link http://www.freelancephp.net/domready-javascript-object-cross-browser/
* @license MIT license
*/
jLim.DOMReady=(function(){var fns=[],isReady=false,errorHandler=null,getFunc=function(fn){if(typeof fn=='string')return function(){eval(fn);};return fn;},ready=function(){isReady=true;for(var x=0;x<fns.length;x++){try{fns[x]();}catch(err){if(errorHandler)errorHandler(err);}}};this.setOnError=function(fn){errorHandler=getFunc(fn);return this;};this.add=function(fn){fn=getFunc(fn);if(isReady){fn();}else{fns[fns.length]=fn;}return this;};if(window.addEventListener){document.addEventListener('DOMContentLoaded',function(){ready();},false);}else{(function(){if(!document.uniqueID&&document.expando)return;var tempNode=document.createElement('document:ready');try{tempNode.doScroll('left');ready();}catch(err){setTimeout(arguments.callee,0);}})();}return this;})();
/**
* SS
*
* @version 0.1
* @link http://www.freelancephp.net/simple-css-selector-function/
* @license MIT license
*/
var $$=function(selector,context){var isObjType=function(o,type){return Object.prototype.toString.call(o)==='[object '+type+']';},isDesc=function(d,a){return d.parentNode==a||d.tagName.toUpperCase()!='HTML'&&isDesc(d.parentNode,a);},s=selector,c=context,els=[];s=s.split(',');c=isObjType(c,'String')?$$(c):c&&c.length?c:document;if(!isObjType(c,'Array'))c=[c];for(var i in c){for(var j in s){var strim=s[j].replace(/\s+/g,''),sp=s[j].split(' '),op=strim.substr(0,1),name=strim.substr(1),tels=[],nextContext;if(sp.length>1){nextContext=$$(sp[0],c[i]);tels=$$(sp.slice(1).join(' '),nextContext);els=els.concat(tels);}else if(op=='#'){tels[0]=c[i].getElementById?c[i].getElementById(name):document.getElementById(name);if(tels[0]&&isDesc(tels[0],c[i]))els.push(tels[0]);}else if(op=='.'){var expr=new RegExp('\\b'+name+'\\b'),all=c[i].getElementsByTagName('*');for(var v=0,w=all.length;v<w;v++){if(expr.test(all[v].className))els.push(all[v]);}}else{tels=c[i].getElementsByTagName(strim);for(var y=0,z=tels.length;y<z;y++)els.push(tels[y]);}}}return els.length==1?els[0]:els;};
jLim.$$=$$;
})( window );
jLim - 紧凑的 JavaScript 框架的更多相关文章
- javascript 框架、根基技巧、布局、CSS、控件 JavaScript 类库
预筹备之 JavaScript 今朝支流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,得到了用户的普遍好评.海内的一些框架许多也是模仿 jQuery 对 JavaScr ...
- 顶级的JavaScript框架、库、工具及其使用
几乎每隔一个星期,就有一个新的 JavaScript 库席卷网络社区!Web 社区日益活跃.多样,并在多个领域快速成长.想要研究每一个重要的 JavaScript 框架和库,是个不可能完成的任务.接下 ...
- JavaScript框架设计(三) push兼容性和选择器上下文
JavaScript框架设计(三) push兼容性和选择器上下文 博主很久没有更博了. 在上一篇 JavaScript框架设计(二) 中实现了最基本的选择器,getId,getTag和getClass ...
- JavaScript框架设计(四) 字符串选择器(选择器模块结束)
JavaScript框架设计(四) 字符串选择器(选择器模块结束) 经过前面JavaScript框架设计(三) push兼容性和选择器上下文的铺垫,实现了在某一元素下寻找,现在终于进入了字符串选择器 ...
- 偶的《javascript框架设计》终于出版
#cnblogs_post_body p{ text-indent:2em!important; } 历时两年多,我的书终于付梓出版了.应各方面的要求,写软文一篇,隆重介绍一下此书对各位程序员的钱途有 ...
- JS读书心得:《JavaScript框架设计》——第12章 异步处理
一.何为异步 执行任务的过程可以被分为发起和执行两个部分. 同步执行模式:任务发起后必须等待直到任务执行完成并返回结果后,才会执行下一个任务. 异步执行模式:任务发起后不等待任务执行完成,而是马上 ...
- 15款加速 Web 开发的 JavaScript 框架
JavaScript 可以通过多种方式来创建交互式的网站和 Web 应用程序.利用 JavaScript,可以让你移动 HTML 元素,创建各种各样的自定义动画,给你的访问者更好的终端用户体验. 对于 ...
- T3 - 构建大型 Web 应用的 JavaScript 框架
T3 是一个用于构建大型 Web 应用程序的客户端 JavaScript 框架.T3 和大多数的 JavaScript 框架不同.它的意思是一小部分的整体架构,它允许你建立可扩展的客户端代码.T3 应 ...
- 【今日推荐】移动 Web 开发的10个最佳 JavaScript 框架
选择正确的 JavaScript 框架,对于开发移动 Web 应用程序是至关重要的,也是移动应用程序开发的一项重要任务.开发人员可以使用框架实现的功能高效地达到他们的开发目标.这些预实现的组件采用优秀 ...
随机推荐
- 安卓解析JSON文件
安卓解析JSON文件 根据JOSN文件的格式,文件只有两种数据,一是对象数据,以 {}为分隔,二是数组,以[]分隔 以下介绍安卓如何解析一个JSON文件,该文件存放在assets目录下,即:asset ...
- 标准C程序设计七---13
Linux应用 编程深入 语言编程 标准C程序设计七---经典C11程序设计 以下内容为阅读: <标准C程序设计>(第7版) 作者 ...
- SQL入门随笔(上机实验报告)
<数据定义部分> 一.定义模式和删除模式 a.为用户定义一个模式学生—课程模式 S-T CREATE SCHEMA "S-T" AUTHORIZATION USE ...
- Codeforces 123 E Maze
Discription A maze is represented by a tree (an undirected graph, where exactly one way exists betwe ...
- configure: error: Cannot find php_pdo_driver.h.
安装pdo_mysql cd /usr/local/src/php-5.4.0/ext/pdo_mysql/ /usr/local/php/bin/phpize # /usr/local/php为 ...
- 【Nutch基础教程之七】Nutch的2种执行模式:local及deploy
在对nutch源码执行ant runtime后,会创建一个runtime的文件夹.在runtime文件夹下有deploy和local 2个文件夹. [jediael@jediael runtime]$ ...
- HTML--比较实用的小例子
常用的前端实例: 1略 2.在网页商城中的图片当我们把鼠标放上去之后,图片会显示一个有颜色的外边框,图片某一部分的字体的颜色并发生改变 鼠标放上去之前 鼠标放上去之后: 实现的代码: <!DOC ...
- SQL基础-->层次化查询(START BY ... CONNECT BY PRIOR)
--====================================================== --SQL基础-->层次化查询(START BY ... CONNECT BY ...
- CSP:使用CryptoAPI解码X509证书内容
微软的CryptoAPI提供了一套解码X509证书的函数,一个X509证书解码之后,得到一个PCCERT_CONTEXT类型的结构体指针. 通过该结构体,我们就能够获取想要的证书项和属性等. X509 ...
- Java集合框架:Arrays工具类
java.util.Arrays类能方便地操作数组,它提供的方法都是静态的.整个Arrays工具类的实现有3000+行.可是归纳总结一下可知它有下面功能(9个): 1. asList 定义: @Saf ...