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 应用程序是至关重要的,也是移动应用程序开发的一项重要任务.开发人员可以使用框架实现的功能高效地达到他们的开发目标.这些预实现的组件采用优秀 ...
随机推荐
- msp430项目编程37
msp430中项目---usb接口编程37 1.电路工作原理 2.代码(显示部分) 3.代码(功能实现) 4.项目总结
- android连数据库
package com.rockcheck.mes; import android.os.AsyncTask; import android.support.v7.app.AppCompatActiv ...
- T1191 数轴染色 codevs
http://codevs.cn/problem/1191/ 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Descr ...
- mongDB的常用操作总结
目录 常用查询: 查询一条数据 查询子元素集合:image.id gte: 大于等于,lte小于等于... 查询字段不存在的数据not 查询数量: 常用更新 更新第一条数据的一个字段: 更新一条数据的 ...
- linux svn配置hooks
先创建仓库: svnadmin create /data/svn/my.com 再配置权限: #cd /data/svn/my.com/conf/ #vim svnserve.conf 配置 [gen ...
- 新建mvc项目
第一步 第二步 第三步,ok项目建好
- discuz搬家
1.需要重命名forumdata下面的cache和templates文件夹 2.如果数据库账户名和密码有改动过,需要修改config.inc.php 3.保证uc_server的链接正确!
- Tar压缩文件
[root@test /root]# tar [-zxcvfpP] filename [root@test /root]# tar -N 'yyyy/mm/dd' /path -zcvf targ ...
- [转]通俗易懂的php多线程解决方案
原文: https://www.w3cschool.cn/php/php-thread.html --------------------------------------------------- ...
- IOS Object和javaScript相互调用
在IOS开发中有时会用到Object和javaScript相互调用,详细过程例如以下: 1. Object中运行javascript代码,这个比較简单,苹果提供了非常好的方法 - (NSString ...