jLim - compact JavaScript framework


/ Published in: JavaScript
Save to your folder(s)

jLim is a small JavaScript base code. It can be used to built your own JavaScript library or framework.


Copy this code and paste it in your HTML
  1. /**
  2.  * jLim Core
  3.  *
  4.  * @fileOverview
  5.  * Contains basic methods for jLim framework.
  6.  * Released under MIT license.
  7.  * @package jLim
  8.  * @requires DOMReady and SimpleSelector
  9.  * @author Victor Villaverde Laan
  10.  * @link http://www.freelancephp.net/jlim-small-javascript-framework/
  11.  * @link https://github.com/freelancephp/jLim
  12.  */
  13. (function (window, SS, DOMReady) {
  14.  
  15. /**
  16.  * jLim factory function
  17.  * @namespace jLim
  18.  * @param {String|DOMElement|DOMElement[]} selector
  19.  * @param {String|DOMElement|DOMElement[]} [context=document] !! Will be ignored if selector is not a string !!
  20.  * @return {jLim.fn.init} New instance
  21.  */
  22. var jLim = function (selector, context) {
  23. return new jLim.fn.init(selector, context);
  24. },
  25. original$ = window.$,
  26. $ = jLim,
  27. $$ = SS.select,
  28. document = window.document;
  29.  
  30. /**
  31.  * jLim functions
  32.  * @namespace jLim.fn
  33.  */
  34. $.fn = {
  35.  
  36. /**
  37. * @property {DOMElement[]} els Selected elements
  38. */
  39. els: [],
  40.  
  41. /**
  42. * @property {String|DOMElement|DOMElement[]} selector Selector used for selection
  43. */
  44. selector: [],
  45.  
  46. /**
  47. * @property {String|DOMElement|DOMElement[]} context Context used for the selection
  48. */
  49. context: [],
  50.  
  51. /**
  52. * Set elements for given selection.
  53. * @constructor
  54. * @param {String|DOMElement|DOMElement[]} selector
  55. * @param {String|DOMElement|DOMElement[]} [context=document] !! Will be ignored if selector is not a string !!
  56. */
  57. init: function (selector, context) {
  58. // set selector and context property
  59. this.selector = selector || document;
  60. this.context = context || document;
  61.  
  62. // get elements by selector
  63. if (typeof selector == 'string'){
  64. // trim spaces at the begin and end
  65. selector = $.trim(selector);
  66.  
  67. if (selector == 'body' && ! context){
  68. // set body
  69. this.els = document.body;
  70. } else if (selector.substr( 0, 1 ) == '<'){
  71. // create element
  72. this.els = $.create(selector);
  73. } else {
  74. // find elements
  75. this.els = $.selector(selector, context);
  76. }
  77. } else if ($.isFunction(selector)){
  78. // set DOM ready function
  79. $.ready( selector );
  80. } else if (selector instanceof $.fn.init){
  81. this.els = selector.get();
  82. } else {
  83. this.els = selector;
  84. }
  85.  
  86. // make sure elements property is an array
  87. if (!$.isArray(this.els)) {
  88. this.els = this.els ? [this.els] : [];
  89. } else {
  90. // remove doubles
  91. this.els = $.clearDuplicates(this.els);
  92. }
  93.  
  94. // support for using jLim object as an array
  95. // set indices
  96. for (var i in this.els)
  97. this[i] = this.els[i];
  98.  
  99. // set length property
  100. this.length = this.els.length;
  101. },
  102.  
  103. /**
  104. * Get element (return all current elements when no index is given)
  105. * @param {Integer} index
  106. * @return {DOMElement|DOMElement[]}
  107. */
  108. get: function (index) {
  109. if (typeof index == 'undefined')
  110. return this.els;
  111.  
  112. var el = (index === -1)
  113. ? this.els.slice(index)
  114. : this.els.slice(index, +index + 1);
  115.  
  116. return el.length ? el[0] : null;
  117. },
  118.  
  119. /**
  120. * Get count of current elements
  121. * @return {Integer}
  122. */
  123. size: function () {
  124. return this.els.length;
  125. },
  126.  
  127. /**
  128. * Call function for each element
  129. * @param {Function} fn
  130. * @param {Array} args
  131. * @return {This}
  132. */
  133. each: function (fn) {
  134. $.each(this.els, fn);
  135. return this;
  136. },
  137.  
  138. /**
  139. * Find elements within the current elements (context)
  140. * @param {String} selector
  141. * @return {jLim.fn.init} Instance of new selection
  142. */
  143. find: function (selector) {
  144. return this.chain(selector, this.els);
  145. },
  146.  
  147. /**
  148. * Add to the current elements in a new created jLim object
  149. * @param {String|DOMElement|DOMElement[]} selector When selector is not a string the context will be ignored
  150. * @param {String|DOMElement|DOMElement[]} [context]
  151. * @return {jLim.fn.init} Instance of new selection
  152. */
  153. add: function (selector, context) {
  154. var $new = this.chain(selector, context),
  155. els = this.els.concat($new.get());
  156.  
  157. $new.els = $.clearDuplicates(els);
  158. return $new;
  159. },
  160.  
  161. /**
  162. * Set one of current elements as new jLim object
  163. * @param {Integer} index Negative integer also possible, -1 means last item
  164. * @return {jLim.fn.init} Instance of new selection
  165. */
  166. eq: function (index) {
  167. return this.chain(this.get(index));
  168. },
  169.  
  170. /**
  171. * Set slice of current elements as new jLim object
  172. * @param {Integer} start Like the first param of the standard Array.slice() function
  173. * @param {Integer} [end] Like the second param of the standard Array.slice() function
  174. * @return {jLim.fn.init} Instance of new selection
  175. */
  176. slice: function (start, end) {
  177. var els = this.els.slice(start, end || this.els.length);
  178. return this.chain(els);
  179. },
  180.  
  181. /**
  182. * Get index of given element
  183. * @param {String|DOMElement|DOMElement[]} When more than one element, only the index of the first will be returned
  184. * @return {Integer} Index of given element
  185. */
  186. index: function (element) {
  187. var el = jLim(element).get(0);
  188.  
  189. for (var x = 0, y = this.length; x < y; x++) {
  190. if (this.els[x] === el)
  191. return x;
  192. }
  193.  
  194. return null;
  195. },
  196.  
  197. /**
  198. * Chain completely new jLim object
  199. * @param {String|DOMElement|DOMElement[]} selector When selector is not a string the context will be ignored
  200. * @param {String|DOMElement|DOMElement[]} [context]
  201. * @return {jLim.fn.init} Instance of new selection
  202. */
  203. chain: function (selector, context) {
  204. var $new = jLim(selector, context);
  205. $new.prevjLim = this;
  206. return $new;
  207. },
  208.  
  209. /**
  210. * Set pointer to previous jLim object
  211. * @return {jLim.fn.init} Previous jLim object in the chain
  212. */
  213. end: function () {
  214. return this.prevjLim || jLim(null);
  215. }
  216.  
  217. };
  218.  
  219. /**
  220.  * @memberOf jLim.fn
  221.  * @deprecated Use .chain() method instead
  222.  */
  223. $.fn.$ = $.fn.chain;
  224.  
  225. /**
  226.  * @class jLim.fn.init
  227.  * @exports jLim.fn as this.prototype
  228.  */
  229. $.fn.init.prototype = $.fn;
  230.  
  231. /**
  232.  * For extending objects
  233.  * @memberOf jLim
  234.  * @memberOf jLim.fn
  235.  * @return {Object|Array}
  236.  */
  237. $.extend = $.fn.extend = function () {
  238. // target is current object if only one argument
  239. var i = 0,
  240. target = this,
  241. deep = false,
  242. obj, empty, item, x;
  243.  
  244. // check extending recursive (deep)
  245. if (typeof arguments[0] === 'boolean') {
  246. deep = true;
  247. i = 1;
  248.  
  249. if (arguments.length > 2){
  250. i = 2;
  251. target = arguments[1];
  252. }
  253. } else if (arguments.length > 1){
  254. i = 1;
  255. target = arguments[0];
  256. }
  257.  
  258. // loop through all source objects
  259. for (x = i; x < arguments.length; x++) {
  260. obj = arguments[x];
  261.  
  262. // copy object items (properties and methods)
  263. for (item in obj){
  264. if (obj[item] === target)
  265. continue;
  266.  
  267. if (deep && typeof obj[item] == 'object' && obj[item] !== null) {
  268. // item is also object, make copy
  269. empty = $.isArray(obj[item]) ? [] : {};
  270. target[item] = $.extend(deep, target[item] || empty, obj[item]);
  271. } else {
  272. // copy property or method
  273. target[item] = obj[item];
  274. }
  275. }
  276. }
  277.  
  278. // return modified target
  279. return target;
  280. };
  281.  
  282. $.extend(
  283. /**
  284. * @lends jLim
  285. */
  286. {
  287. /**
  288. * Prevent conflicts with $ namespace
  289. * @return jLim
  290. */
  291. noConflict: function () {
  292. window.$ = original$;
  293. return jLim;
  294. },
  295.  
  296. /**
  297. * Selector method
  298. * @param {String} selector
  299. * @param {String|DOMElement|DOMElement[]} [context=document]
  300. * @return {DOMElement|DOMElement[]|Array}
  301. */
  302. selector: function (selector, context) {
  303. return $$(selector, context);
  304. },
  305.  
  306. /**
  307. * Add callbacks for when DOM is ready
  308. * @param {Function} fn
  309. */
  310. ready: function (fn) {
  311. DOMReady.add(fn, [jLim]);
  312. },
  313.  
  314. /**
  315. * Create DOM element
  316. * @param {String} html
  317. * @return {DOMElement|DOMElement[]}
  318. */
  319. create: function (html) {
  320. var ph = document.createElement('div'),
  321. els = [];
  322.  
  323. ph.innerHTML = html;
  324.  
  325. // get created elements
  326. els = ph.childNodes;
  327.  
  328. // return element or array of elements
  329. return els.length == 1 ? els[0] : els;
  330. },
  331.  
  332. /**
  333. * Each function for arrays and objects
  334. * @param {Object|Array} obj
  335. * @param {Function} fn
  336. */
  337. each: function (obj, fn) {
  338. var item, retVal;
  339.  
  340. // call given function for each item
  341. for (item in obj) {
  342. retVal = fn.call(obj[item], item, obj[item]);
  343.  
  344. // do not continue further when return value is false
  345. if (retVal === false)
  346. break;
  347. }
  348. },
  349.  
  350. /**
  351. * Trim spaces (also tabs and linefeeds)
  352. * @param {String} str
  353. * @return {String}
  354. */
  355. trim: function (str) {
  356. return str.replace(/^\s+/, '').replace(/\s+$/, '');
  357. },
  358.  
  359. /**
  360. * Check if item exists in array
  361. * @param {Array} arr
  362. * @param {Mixed} item
  363. * @return {Boolean}
  364. */
  365. itemExists: function (arr, item) {
  366. return SS.itemExists(arr, item);
  367. },
  368.  
  369. /**
  370. * Return array without duplicate entries
  371. * @param {Array} arr
  372. * @return {Array}
  373. */
  374. clearDuplicates: function (arr) {
  375. return SS.clearDuplicates(arr);
  376. },
  377.  
  378. /**
  379. * Check if argument is array
  380. * @param {Mixed} obj
  381. * @return {Boolean}
  382. */
  383. isArray: function (obj) {
  384. return Object.prototype.toString.call(obj) === '[object Array]';
  385. },
  386.  
  387. /**
  388. * Check if argument is function
  389. * @param {Mixed} obj
  390. * @return {Boolean}
  391. */
  392. isFunction: function (obj) {
  393. return Object.prototype.toString.call(obj) === '[object Function]';
  394. }
  395. }
  396. );
  397.  
  398. /**
  399.  * Make jLim global
  400.  * @ignore
  401.  */
  402. window.jLim = window.$ = jLim;
  403.  
  404. })(window, SimpleSelector, DOMReady);

URL: http://www.freelancephp.net/jlim-small-javascript-framework/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.