New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
febs-browser
Advanced tools
febs-browser - npm Package Compare versions
Comparing version 0.7.0 to 0.7.1
| febs 库是一些常用的工具的合集; | ||
| febs库模拟了jquery的常用方法(dom操作/事件/css等), 当页面未引入jquery时, 会自动设置全局变量 `$` 为内部实现的jquery相关方法. | ||
| febs实现了jquery的常用方法(dom操作/事件/css/遍历等), 当页面引入febs前如果未引入jquery, 会自动设置全局变量 `$` 为内部实现的jquery相关方法. | ||
| 大多数场景下可以使用febs库代替jquery, 而解决jquery臃肿的问题. | ||
| > 兼容ie9及以上浏览器 | ||
| # Install | ||
@@ -62,3 +64,3 @@ | ||
| - [net](#net) | ||
| - [$](#jquery) | ||
| - [jquery $](#jquery) | ||
@@ -364,6 +366,8 @@ # 说明 | ||
| febs库模拟了jquery的常用方法(dom操作/事件/css等), 当页面未引入jquery时, 会自动设置全局变量 `$` 为内部实现的jquery相关方法. | ||
| febs库模拟了jquery的常用方法(dom操作/事件/css等), 当页面引入febs前如果未引入jquery, 会自动设置全局变量 `$` 为内部实现的jquery相关方法. | ||
| 目前已经实现的方法如下: | ||
| ### 常用 | ||
| ```js | ||
@@ -378,128 +382,38 @@ | ||
| * - node. | ||
| * 不支持带空格多层结构的情况. | ||
| */ | ||
| $(); | ||
| $(selector?:string|dom|HTMLElement); | ||
| /** | ||
| * @desc: hasClass | ||
| */ | ||
| hasClass( cName:string ): boolean; | ||
| /** | ||
| * @desc: addClass | ||
| */ | ||
| addClass( cName:string ): $; | ||
| /** | ||
| * @desc: removeClass | ||
| */ | ||
| removeClass( cName:string ): $; | ||
| /** | ||
| * @desc: toggleClass | ||
| */ | ||
| toggleClass( cName:string ): $; | ||
| /** | ||
| * @desc: remove | ||
| */ | ||
| remove(): void; | ||
| append(selector?:string|dom|HTMLElement): $; | ||
| appendTo(selector?:string|dom|HTMLElement): $; | ||
| prepend(selector?:string|dom|HTMLElement): $; | ||
| prependTo(selector?:string|dom|HTMLElement): $; | ||
| before(selector?:string|dom|HTMLElement): $; | ||
| insertBefore(selector?:string|dom|HTMLElement): $; | ||
| after(selector?:string|dom|HTMLElement): $; | ||
| insertAfter(selector?:string|dom|HTMLElement): $; | ||
| /** | ||
| * @desc: append | ||
| */ | ||
| append(node:any): $; | ||
| /** | ||
| * appendTo | ||
| */ | ||
| appendTo(node:any): $; | ||
| /** | ||
| * @desc: prepend | ||
| */ | ||
| prepend(node:any): $; | ||
| /** | ||
| * @desc: prependTo | ||
| */ | ||
| prependTo(node:any): $; | ||
| /** | ||
| * @desc: before | ||
| */ | ||
| before(node:any): $; | ||
| /** | ||
| * insertBefore | ||
| */ | ||
| insertBefore(node:any): $; | ||
| /** | ||
| * @desc: after | ||
| */ | ||
| after(node:any): $; | ||
| /** | ||
| * @desc: insertAfter | ||
| */ | ||
| insertAfter(node:any): $; | ||
| /** | ||
| * @desc: attr. | ||
| */ | ||
| attr(attrName:any, value:any): string; | ||
| /** | ||
| * @desc: removeAttr | ||
| */ | ||
| removeAttr(name:any): $; | ||
| /** | ||
| * @desc: empty. | ||
| */ | ||
| empty(): $; | ||
| /** | ||
| * @desc: html. | ||
| */ | ||
| html(v:string): string; | ||
| /** | ||
| * @desc: text. | ||
| */ | ||
| text(v:string): string; | ||
| /** | ||
| * @desc: val. | ||
| */ | ||
| val(v:string): string; | ||
| css(name:string, value:string): string; | ||
| ``` | ||
| ### 事件. | ||
| /** | ||
| * @desc: css. | ||
| */ | ||
| css(name:string, value:string): string; | ||
| ```js | ||
| /** | ||
| * @desc: on. | ||
| */ | ||
| on(eventname:string, foo:any): $; | ||
| /** | ||
| * @desc: one. | ||
| */ | ||
| one(event:string, f:any): $; | ||
| /** | ||
| * @desc: off. | ||
| */ | ||
| off(eventname:string, foo:any): $; | ||
| /** | ||
| * @desc: trigger. | ||
| */ | ||
| off(eventname:string, foo?:any): $; | ||
| trigger(eventname:string): $; | ||
| ready(f?:any):$; | ||
@@ -526,2 +440,12 @@ unload(f?:any):$; | ||
| submit(f?:any):$; | ||
| ``` | ||
| ### 遍历 | ||
| ```js | ||
| parent(selector?:string|dom|HTMLElement) : $; | ||
| parents(selector?:string|dom|HTMLElement) : $; | ||
| children(selector?:string|dom|HTMLElement) : $; | ||
| prev(selector?:string|dom|HTMLElement) : $; | ||
| next(selector?:string|dom|HTMLElement) : $; | ||
| ``` |
587
libs/dom.js
@@ -26,21 +26,90 @@ ( function( global, factory ) { | ||
| function _getElement(name) { | ||
| // - parentNodes 父节点 (HTMLNode) | ||
| // - name 子节点selector. | ||
| // - notAllChildren 仅查询一层子节点. | ||
| // 返回匹配到的元素集合. | ||
| function _matchElement(parentNodes, name, notAllChildren) { | ||
| var elems; | ||
| var tag = 0; // 0-tag, 1-id, 2-class. | ||
| if (name[0] == '.') { | ||
| tag = 2; | ||
| name = name.substr(1); | ||
| } | ||
| else if (name[0] == '#') { | ||
| tag = 1; | ||
| name = name.substr(1); | ||
| } else { | ||
| name = name.toUpperCase(); | ||
| } | ||
| if (!parentNodes || parentNodes.length == 0) { | ||
| if (2 == tag) { | ||
| elems = window.document.getElementsByClassName(name); | ||
| } | ||
| else if (1 == tag) { | ||
| elems = window.document.getElementById(name); | ||
| if (elems) elems = [elems]; | ||
| else elems = []; | ||
| } | ||
| else { | ||
| elems = window.document.getElementsByTagName(name); | ||
| } | ||
| } | ||
| else { | ||
| elems = []; | ||
| for (var i = 0; i < parentNodes.length; i++) { | ||
| var node1 = parentNodes[i].childNodes; | ||
| if (!node1) continue; | ||
| var node = []; | ||
| for (var j = 0; j < node1.length; j++) { | ||
| node.push(node1[j]); | ||
| } | ||
| for (var j = 0; j < node.length; j++) { | ||
| if (2 == tag) { | ||
| if (_hasClass(node[j], name)) { | ||
| elems.push(node[j]); | ||
| continue; | ||
| } | ||
| } | ||
| else if (1 == tag) { | ||
| if (node[j].id == name) { | ||
| elems.push(node[j]); | ||
| continue; | ||
| } | ||
| } | ||
| else { | ||
| if (node[j].nodeName.toUpperCase() == name) { | ||
| elems.push(node[j]); | ||
| continue; | ||
| } | ||
| } | ||
| if (!notAllChildren) { | ||
| var nn = node[j].childNodes; | ||
| if (nn && nn.length > 0) { | ||
| for (var k = 0; k < nn.length; k++) { | ||
| node.push(nn[k]); | ||
| } | ||
| if (j > 20) { | ||
| node = node.slice(j+1); | ||
| j = 0; | ||
| } | ||
| } | ||
| } | ||
| } // for. | ||
| } // for. | ||
| } // if..else. | ||
| return elems; | ||
| } | ||
| // - parentNode 仅筛选此节点下的节点. | ||
| function _getElement(name, parentNode) { | ||
| if (name == '') name = null; | ||
| var _elem; | ||
| var _isarr = false; | ||
| if (typeof name === 'string') { | ||
| if (name[0] == '.') { | ||
| if(name.indexOf(' ') >= 0) { | ||
| throw 'Don\'t allow dom have wordspace'; | ||
| } | ||
| _elem = window.document.getElementsByClassName(name.substr(1)); | ||
| _isarr = true; | ||
| } | ||
| else if (name[0] == '#') { | ||
| if(name.indexOf(' ') >= 0) { | ||
| throw 'Don\'t allow dom have wordspace'; | ||
| } | ||
| _elem = window.document.getElementById(name.substr(1)); | ||
| _isarr = false; | ||
| } | ||
| else if (name[0] == '<') { | ||
| if (name[0] == '<') { | ||
| _elem = window.document.createElement('div'); | ||
@@ -58,7 +127,18 @@ _elem.innerHTML = name; | ||
| else { | ||
| if(name.indexOf(' ') >= 0) { | ||
| throw 'Don\'t allow dom have wordspace'; | ||
| if (name.indexOf('<') > 0 || name.indexOf('>') > 0) | ||
| throw new Error('Syntax error, unrecognized'); | ||
| var names = name.split(' '); | ||
| var nodes = parentNode ? [parentNode] : null; | ||
| for (var i = 0; i < names.length; i++) { | ||
| if (names[i] != '') | ||
| nodes = _matchElement(nodes, names[i], !!parentNode); | ||
| } | ||
| _elem = window.document.getElementsByTagName(name); | ||
| _isarr = true; | ||
| if (nodes.length <= 1) { | ||
| _elem = nodes[0]; | ||
| _isarr = false; | ||
| } else { | ||
| _elem = nodes; | ||
| _isarr = true; | ||
| } | ||
| } | ||
@@ -76,2 +156,4 @@ } else { | ||
| function _hasClass( element, cName ){ | ||
| if (!element || !element.className) | ||
| return false; | ||
| return !!element.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); // ( \\s|^ ) 判断前面是否有空格 （\\s | $ ）判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断 | ||
@@ -157,2 +239,5 @@ } | ||
| class Dom { | ||
| // _elem; | ||
| // _isArr; | ||
| /** | ||
@@ -165,6 +250,12 @@ * 支持 | ||
| * - node. | ||
| * 不支持带空格多层结构的情况. | ||
| */ | ||
| constructor(name) { | ||
| if (name instanceof Dom) { | ||
| // | ||
| // save in '_elem', '_isArr' | ||
| // | ||
| if (name === window.document || name == window) { | ||
| this._elem = name; | ||
| this._isArr = false; | ||
| } | ||
| else if (name instanceof Dom) { | ||
| this._elem = name._elem; | ||
@@ -180,2 +271,3 @@ this._isArr = name._isArr; | ||
| this[0] = this._elem; | ||
| this.length = this._elem ? 1 : 0; | ||
| } else { | ||
@@ -189,3 +281,7 @@ for (var i = 0; i < this._elem.length; i++) { | ||
| var _this = this; | ||
| this.bind = this.on; | ||
| this.unbind = this.off; | ||
| this.live = this.on; | ||
| this.die = this.off; | ||
@@ -195,2 +291,3 @@ if (name === window.document) { | ||
| this.unload = function(f) { if (f) { window.document.addEventListener('unload', f); return _this; } } | ||
| this.context = window.document; | ||
| } | ||
@@ -200,2 +297,5 @@ else if (name === window) { | ||
| } | ||
| else { | ||
| this.context = window.document; | ||
| } | ||
@@ -235,19 +335,7 @@ if (typeof name === 'function') { | ||
| if (this._isArray()) { | ||
| var _proto = Object.getPrototypeOf(this); | ||
| for (var i = 0; i < this._elem.length; i++) { | ||
| for (const key in _proto) { | ||
| if (key != '__proto__' && key != 'constructor') { | ||
| // 不覆盖native方法. | ||
| if (!this._elem[i][key]) { | ||
| this._elem[i][key] = _proto[key].bind(this._elem[i]); | ||
| } | ||
| } | ||
| if (this._elem) { | ||
| if (this._isArray()) { | ||
| for (var i = 0; i < this._elem.length; i++) { | ||
| this._domtify(this._elem[i]); | ||
| } | ||
| delete this._elem[i].length; | ||
| this._elem[i]._isArr = false; | ||
| this._elem[i]._elem = this._elem[i]; | ||
| this._elem[i][0] = this._elem[i]; | ||
| } | ||
@@ -277,3 +365,3 @@ } | ||
| addClass( cName ){ | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { return this; } | ||
| if (this._isArray()) { | ||
@@ -294,3 +382,3 @@ for (var i = 0; i < this._elem.length; i++) { | ||
| removeClass( cName ){ | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { return this; } | ||
| if (this._isArray()) { | ||
@@ -311,3 +399,3 @@ for (var i = 0; i < this._elem.length; i++) { | ||
| toggleClass( cName ){ | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { return this; } | ||
| if (this._isArray()) { | ||
@@ -334,3 +422,3 @@ for (var i = 0; i < this._elem.length; i++) { | ||
| remove(){ | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { return this; } | ||
| if (this._isArray()) { | ||
@@ -344,2 +432,3 @@ for (var i = 0; i < this._elem.length; i++) { | ||
| } | ||
| return this; | ||
| } | ||
@@ -351,3 +440,3 @@ | ||
| append(node) { | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { return this; } | ||
| node = new Dom(node); | ||
@@ -369,3 +458,3 @@ if (this._isArray()) { | ||
| appendTo(node) { | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { return this; } | ||
| if (!this._isArray()) { | ||
@@ -382,3 +471,3 @@ var dom = new Dom(node); | ||
| prepend(node) { | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { return this; } | ||
| node = new Dom(node); | ||
@@ -400,3 +489,3 @@ if (this._isArray()) { | ||
| prependTo(node) { | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { return this; } | ||
| if (!this._isArray()) { | ||
@@ -413,3 +502,3 @@ var dom = new Dom(node); | ||
| before(node) { | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { return this; } | ||
| node = new Dom(node); | ||
@@ -431,3 +520,3 @@ if (this._isArray()) { | ||
| insertBefore(node) { | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { return this; } | ||
| var dom = new Dom(node); | ||
@@ -448,3 +537,3 @@ if (!dom._isArray()) { | ||
| after(node) { | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { return this; } | ||
| node = new Dom(node); | ||
@@ -466,3 +555,3 @@ if (this._isArray()) { | ||
| insertAfter(node) { | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { return this; } | ||
| var dom = new Dom(node); | ||
@@ -483,3 +572,7 @@ if (!dom._isArray()) { | ||
| attr(attrName, value) { | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { | ||
| if (typeof value !== 'undefined') | ||
| return this; | ||
| return; | ||
| } | ||
| if (typeof value === 'undefined') { | ||
@@ -498,2 +591,3 @@ if (!this._isArray()) { | ||
| } | ||
| return this; | ||
| } | ||
@@ -506,3 +600,3 @@ } | ||
| removeAttr(name) { | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { return this; } | ||
| if (this._isArray()) { | ||
@@ -523,3 +617,3 @@ for (var i = 0; i < this._elem.length; i++) { | ||
| detach() { | ||
| throw 'unimplement'; | ||
| throw new Error('unimplement'); | ||
| } | ||
@@ -531,3 +625,3 @@ | ||
| clone() { | ||
| throw 'unimplement'; | ||
| throw new Error('unimplement'); | ||
| } | ||
@@ -539,3 +633,3 @@ | ||
| replaceAll() { | ||
| throw 'unimplement'; | ||
| throw new Error('unimplement'); | ||
| } | ||
@@ -547,3 +641,3 @@ | ||
| unwrap() { | ||
| throw 'unimplement'; | ||
| throw new Error('unimplement'); | ||
| } | ||
@@ -554,3 +648,3 @@ /** | ||
| wrap() { | ||
| throw 'unimplement'; | ||
| throw new Error('unimplement'); | ||
| } | ||
@@ -561,3 +655,3 @@ /** | ||
| wrapAll() { | ||
| throw 'unimplement'; | ||
| throw new Error('unimplement'); | ||
| } | ||
@@ -568,3 +662,3 @@ /** | ||
| wrapinner() { | ||
| throw 'unimplement'; | ||
| throw new Error('unimplement'); | ||
| } | ||
@@ -576,3 +670,3 @@ | ||
| empty() { | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { return this; } | ||
| if (this._isArray()) { | ||
@@ -593,3 +687,7 @@ for (var i = 0; i < this._elem.length; i++) { | ||
| html(v) { | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { | ||
| if (typeof v !== 'undefined') | ||
| return this; | ||
| return; | ||
| } | ||
| if (typeof v === 'undefined') { | ||
@@ -612,2 +710,3 @@ if (this._isArray()) { | ||
| } | ||
| return this; | ||
| } | ||
@@ -621,3 +720,7 @@ } | ||
| text(v) { | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { | ||
| if (typeof v !== 'undefined') | ||
| return this; | ||
| return; | ||
| } | ||
| if (typeof v === 'undefined') { | ||
@@ -640,2 +743,3 @@ if (this._isArray()) { | ||
| } | ||
| return this; | ||
| } | ||
@@ -648,3 +752,7 @@ } | ||
| val(v) { | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { | ||
| if (typeof v !== 'undefined') | ||
| return this; | ||
| return; | ||
| } | ||
| if (typeof v === 'undefined') { | ||
@@ -667,2 +775,3 @@ if (this._isArray()) { | ||
| } | ||
| return this; | ||
| } | ||
@@ -676,3 +785,7 @@ } | ||
| css(name, value) { | ||
| if (!this._elem) { return; } | ||
| if (!this._elem) { | ||
| if (typeof value !== 'undefined') | ||
| return this; | ||
| return; | ||
| } | ||
| if (typeof value === 'undefined') { | ||
@@ -697,2 +810,3 @@ if (!this._isArray()) { | ||
| } | ||
| return this; | ||
| } | ||
@@ -706,7 +820,8 @@ } | ||
| if (!eventname) | ||
| throw 'need event name'; | ||
| throw new Error('need event name'); | ||
| if (typeof foo !== 'function') | ||
| throw 'on need function params'; | ||
| throw new Error('on need function params'); | ||
| if (!this._elem) { return this; } | ||
| if (this._isArray()) { | ||
@@ -752,3 +867,3 @@ for (var i = 0; i < this._elem.length; i++) { | ||
| if (!event) | ||
| throw 'need event name'; | ||
| throw new Error('need event name'); | ||
@@ -766,4 +881,5 @@ var _this = this; | ||
| if (!eventname) | ||
| throw 'need event name'; | ||
| throw new Error('need event name'); | ||
| if (!this._elem) { return this; } | ||
| if (!foo) { | ||
@@ -798,3 +914,3 @@ if (this._isArray()) { | ||
| if (typeof foo !== 'function') | ||
| throw 'off need function params'; | ||
| throw new Error('off need function params'); | ||
@@ -839,4 +955,6 @@ if (this._isArray()) { | ||
| if (!eventname) | ||
| throw 'need event name'; | ||
| throw new Error('need event name'); | ||
| if (!this._elem) { return this; } | ||
| if (this._isArray()) { | ||
@@ -857,5 +975,332 @@ for (var i = 0; i < this._elem.length; i++) { | ||
| /** | ||
| * @desc: parent | ||
| * @return: | ||
| */ | ||
| parent(selector) { | ||
| if (!this._elem) { return new Dom(); } | ||
| var sel; | ||
| if (selector) | ||
| sel = new Dom(selector); | ||
| if (this._isArray()) { | ||
| var dom = new Dom(); | ||
| dom._elem = []; | ||
| dom._isArr = true; | ||
| dom.length = 0; | ||
| for (var i = 0; i < this._elem.length; i++) { | ||
| if (this._elem[i].parentNode) { | ||
| if (!sel || sel._isElementIn(this._elem[i].parentNode)) { | ||
| this._domtify(this._elem[i].parentNode); | ||
| dom._elem.push(this._elem[i].parentNode); | ||
| dom[dom.length] = this._elem[i].parentNode; | ||
| dom.length++; | ||
| } | ||
| } | ||
| } | ||
| if (dom._elem.length == 0) dom._elem = null; | ||
| return dom; | ||
| } else { | ||
| if (!this._elem.parentNode) return new Dom(); | ||
| if (!sel || sel._isElementIn(this._elem.parentNode)) { | ||
| return new Dom(this._elem.parentNode); | ||
| } | ||
| return new Dom(); | ||
| } // if. | ||
| } | ||
| /** | ||
| * @desc: parents | ||
| * @return: | ||
| */ | ||
| parents(selector) { | ||
| if (!this._elem) { return new Dom(); } | ||
| var sel; | ||
| if (selector) | ||
| sel = new Dom(selector); | ||
| if (this._isArray()) { | ||
| var nodes = []; | ||
| for (var i = 0; i < this._elem.length; i++) { | ||
| if (!this._elem[i].parentNode) continue; | ||
| var elem = this._elem[i]; | ||
| while (elem.parentNode) { | ||
| if (elem.parentNode == window || elem.parentNode == window.document) | ||
| break; | ||
| if (!sel || sel._isElementIn(elem.parentNode)) { | ||
| var j; | ||
| for (j = 0; j < nodes.length; j++) { | ||
| if (nodes[j].isSameNode(elem.parentNode)) { | ||
| break; | ||
| } | ||
| } | ||
| if (j >= nodes.length) | ||
| nodes.push(elem.parentNode); | ||
| } | ||
| elem = elem.parentNode; | ||
| } | ||
| } // for. | ||
| var dom = new Dom(); | ||
| if (nodes.length > 0) { | ||
| dom._elem = nodes; | ||
| dom._isArr = true; | ||
| dom.length = nodes.length; | ||
| for (var i = 0; i < nodes.length; i++) { | ||
| dom._domtify(nodes[i]); | ||
| dom[i] = nodes[i]; | ||
| } | ||
| } | ||
| return dom; | ||
| } | ||
| else { | ||
| if (!this._elem.parentNode) return new Dom(); | ||
| var nodes = []; | ||
| var elem = this._elem; | ||
| while (elem.parentNode) { | ||
| if (elem.parentNode == window || elem.parentNode == window.document) | ||
| break; | ||
| if (!sel || sel._isElementIn(elem.parentNode)) { | ||
| nodes.push(elem.parentNode); | ||
| } | ||
| elem = elem.parentNode; | ||
| } | ||
| var dom = new Dom(); | ||
| if (nodes.length > 0) { | ||
| dom._elem = nodes; | ||
| dom._isArr = true; | ||
| dom.length = nodes.length; | ||
| for (var i = 0; i < nodes.length; i++) { | ||
| dom._domtify(nodes[i]); | ||
| dom[i] = nodes[i]; | ||
| } | ||
| } | ||
| return dom; | ||
| } // if. | ||
| } | ||
| /** | ||
| * children | ||
| * @param {*} selector | ||
| */ | ||
| children(selector) { | ||
| if (!this._elem) { return new Dom(); } | ||
| if (this._isArray()) { | ||
| var nodes = []; | ||
| for (var i = 0; i < this._elem.length; i++) { | ||
| var sel; | ||
| if (selector) | ||
| sel = _getElement(selector, this._elem[i]); | ||
| else { | ||
| sel = {_elem: [], _isarr: true}; | ||
| for (var j = 0; j < this._elem[i].childNodes.length; j++) { | ||
| sel._elem.push(this._elem[i].childNodes[j]); | ||
| } | ||
| } | ||
| if (!sel._elem) | ||
| continue; | ||
| if (sel._isarr) { | ||
| nodes = nodes.concat(sel._elem); | ||
| } else { | ||
| nodes.push(sel._elem); | ||
| } | ||
| } | ||
| var dom = new Dom(); | ||
| dom._elem = nodes; | ||
| dom._isArr = true; | ||
| dom.length = nodes.length; | ||
| for (var i = 0; i < nodes.length; i++) { | ||
| this._domtify(nodes[i]); | ||
| dom[i] = nodes[i]; | ||
| } | ||
| return dom; | ||
| } | ||
| else { | ||
| var sel; | ||
| if (selector) | ||
| sel = _getElement(selector, this._elem); | ||
| else { | ||
| sel = {_elem: [], _isarr: true}; | ||
| for (var j = 0; j < this._elem.childNodes.length; j++) { | ||
| sel._elem.push(this._elem.childNodes[j]); | ||
| } | ||
| } | ||
| var dom = new Dom(); | ||
| dom._elem = sel._elem; | ||
| dom[0] = sel._elem; | ||
| dom._isArr = sel._isarr; | ||
| dom.length = sel._elem ? 1 : 0; | ||
| if (sel._isarr && sel._elem) { | ||
| for (var i = 0; i < sel._elem.length; i++) { | ||
| this._domtify(sel._elem[i]); | ||
| dom[i] = sel._elem[i]; | ||
| } | ||
| dom.length = sel._elem.length; | ||
| } | ||
| return dom; | ||
| } // if..else. | ||
| } | ||
| /** | ||
| * next | ||
| * @param {*} selector | ||
| */ | ||
| next(selector) { | ||
| if (!this._elem) { return new Dom(); } | ||
| var dom; | ||
| if (selector) { | ||
| dom = this.parent(); | ||
| dom = dom.children(selector); | ||
| } | ||
| if (this._isArray()) { | ||
| var nodes = []; | ||
| for (var i = 0; i < this._elem.length; i++) { | ||
| if (!dom || dom._isElementIn(this._elem[i].nextSibling)) { | ||
| if (this._elem[i].nextSibling) | ||
| nodes.push(this._elem[i].nextSibling); | ||
| } | ||
| } | ||
| var dom1 = new Dom(); | ||
| dom1._elem = nodes; | ||
| dom1._isArr = true; | ||
| dom1.length = nodes.length; | ||
| for (var i = 0; i < nodes.length; i++) { | ||
| this._domtify(nodes[i]); | ||
| dom1[i] = nodes[i]; | ||
| } | ||
| return dom1; | ||
| } | ||
| else { | ||
| var nodes; | ||
| if (!dom || dom._isElementIn(this._elem.nextSibling)) { | ||
| if (this._elem.nextSibling) | ||
| nodes = this._elem.nextSibling; | ||
| } | ||
| var dom1 = new Dom(); | ||
| dom1._elem = nodes; | ||
| dom1[0] = nodes; | ||
| dom1._isArr = false; | ||
| dom1.length = nodes ? 1 : 0; | ||
| return dom1; | ||
| } // if..else | ||
| } | ||
| /** | ||
| * prev | ||
| * @param {*} selector | ||
| */ | ||
| prev(selector) { | ||
| if (!this._elem) { return new Dom(); } | ||
| var dom; | ||
| if (selector) { | ||
| dom = this.parent(); | ||
| dom = dom.children(selector); | ||
| } | ||
| if (this._isArray()) { | ||
| var nodes = []; | ||
| for (var i = 0; i < this._elem.length; i++) { | ||
| if (!dom || dom._isElementIn(this._elem[i].previousSibling)) { | ||
| if (this._elem[i].previousSibling) | ||
| nodes.push(this._elem[i].previousSibling); | ||
| } | ||
| } | ||
| var dom1 = new Dom(); | ||
| dom1._elem = nodes; | ||
| dom1._isArr = true; | ||
| dom1.length = nodes.length; | ||
| for (var i = 0; i < nodes.length; i++) { | ||
| this._domtify(nodes[i]); | ||
| dom1[i] = nodes[i]; | ||
| } | ||
| return dom1; | ||
| } | ||
| else { | ||
| var nodes; | ||
| if (!dom || dom._isElementIn(this._elem.previousSibling)) { | ||
| if (this._elem.previousSibling) | ||
| nodes = this._elem.previousSibling; | ||
| } | ||
| var dom1 = new Dom(); | ||
| dom1._elem = nodes; | ||
| dom1[0] = nodes; | ||
| dom1._isArr = false; | ||
| dom1.length = nodes ? 1 : 0; | ||
| return dom1; | ||
| } // if..else | ||
| } | ||
| // 将普通节点设置为Dom对象. | ||
| _domtify(node) { | ||
| if (node instanceof Dom) | ||
| return; | ||
| if (node._domtify) | ||
| return; | ||
| var _proto = Object.getPrototypeOf(this); | ||
| for (const key in _proto) { | ||
| if (key != '__proto__' && key != 'constructor') { | ||
| // 不覆盖native方法. | ||
| if (!node[key]) { | ||
| node[key] = _proto[key].bind(node); | ||
| } | ||
| } | ||
| } | ||
| for (const key in this) { | ||
| if (key != '__proto__' && key != 'constructor' && typeof this[key] === 'function') { | ||
| // 不覆盖native方法. | ||
| if (!node[key]) { | ||
| node[key] = this[key].bind(node); | ||
| } | ||
| } | ||
| } | ||
| delete node.length; | ||
| node._isArr = false; | ||
| node._elem = node; | ||
| // node[0] = node; | ||
| node.__domtify = true; | ||
| if (node != window) { | ||
| node.context = window.document; | ||
| } | ||
| } | ||
| // 当前是否是数组. | ||
| _isArray() { | ||
| return this._isArr; | ||
| } | ||
| // 指定节点是否存在于本对象中. | ||
| _isElementIn(node) { | ||
| if (!this._elem) return false; | ||
| if (!this._isArray()) { | ||
| if (this._elem.isSameNode(node)) { | ||
| return true; | ||
| } | ||
| } else { | ||
| for (var i = 0; i < this._elem.length; i++) { | ||
| if (this._elem[i].isSameNode(node)) | ||
| return true; | ||
| } | ||
| } | ||
| return false; | ||
| } | ||
| }; | ||
@@ -862,0 +1307,0 @@ |
@@ -414,4 +414,4 @@ /** | ||
| return new Promise(function(resolve, reject) { | ||
| if(!window["$"]) { | ||
| throw 'need jquery.ajax in ie9<= browsers.'; | ||
| if(!window["$"] && !window["$"].ajax) { | ||
| throw new Error('need jquery.ajax in ie9<= browsers.'); | ||
| } | ||
@@ -418,0 +418,0 @@ window["$"].ajax({ |
@@ -38,2 +38,11 @@ { | ||
| }, | ||
| "keywords": [ | ||
| "browser", | ||
| "jquery", | ||
| "zepto", | ||
| "crc32", | ||
| "string", | ||
| "net", | ||
| "febs" | ||
| ], | ||
| "engines": { | ||
@@ -62,3 +71,3 @@ "node": ">=7" | ||
| "name": "febs-browser", | ||
| "version": "0.7.0" | ||
| "version": "0.7.1" | ||
| } |
140
README.md
| febs 库是一些常用的工具的合集; | ||
| febs库模拟了jquery的常用方法(dom操作/事件/css等), 当页面未引入jquery时, 会自动设置全局变量 `$` 为内部实现的jquery相关方法. | ||
| febs实现了jquery的常用方法(dom操作/事件/css/遍历等), 当页面引入febs前如果未引入jquery, 会自动设置全局变量 `$` 为内部实现的jquery相关方法. | ||
| 大多数场景下可以使用febs库代替jquery, 而解决jquery臃肿的问题. | ||
| > 兼容ie9及以上浏览器 | ||
| # Install | ||
@@ -62,3 +64,3 @@ | ||
| - [net](#net) | ||
| - [$](#jquery) | ||
| - [jquery $](#jquery) | ||
@@ -364,6 +366,8 @@ # 说明 | ||
| febs库模拟了jquery的常用方法(dom操作/事件/css等), 当页面未引入jquery时, 会自动设置全局变量 `$` 为内部实现的jquery相关方法. | ||
| febs库模拟了jquery的常用方法(dom操作/事件/css等), 当页面引入febs前如果未引入jquery, 会自动设置全局变量 `$` 为内部实现的jquery相关方法. | ||
| 目前已经实现的方法如下: | ||
| ### 常用 | ||
| ```js | ||
@@ -378,128 +382,38 @@ | ||
| * - node. | ||
| * 不支持带空格多层结构的情况. | ||
| */ | ||
| $(); | ||
| $(selector?:string|dom|HTMLElement); | ||
| /** | ||
| * @desc: hasClass | ||
| */ | ||
| hasClass( cName:string ): boolean; | ||
| /** | ||
| * @desc: addClass | ||
| */ | ||
| addClass( cName:string ): $; | ||
| /** | ||
| * @desc: removeClass | ||
| */ | ||
| removeClass( cName:string ): $; | ||
| /** | ||
| * @desc: toggleClass | ||
| */ | ||
| toggleClass( cName:string ): $; | ||
| /** | ||
| * @desc: remove | ||
| */ | ||
| remove(): void; | ||
| append(selector?:string|dom|HTMLElement): $; | ||
| appendTo(selector?:string|dom|HTMLElement): $; | ||
| prepend(selector?:string|dom|HTMLElement): $; | ||
| prependTo(selector?:string|dom|HTMLElement): $; | ||
| before(selector?:string|dom|HTMLElement): $; | ||
| insertBefore(selector?:string|dom|HTMLElement): $; | ||
| after(selector?:string|dom|HTMLElement): $; | ||
| insertAfter(selector?:string|dom|HTMLElement): $; | ||
| /** | ||
| * @desc: append | ||
| */ | ||
| append(node:any): $; | ||
| /** | ||
| * appendTo | ||
| */ | ||
| appendTo(node:any): $; | ||
| /** | ||
| * @desc: prepend | ||
| */ | ||
| prepend(node:any): $; | ||
| /** | ||
| * @desc: prependTo | ||
| */ | ||
| prependTo(node:any): $; | ||
| /** | ||
| * @desc: before | ||
| */ | ||
| before(node:any): $; | ||
| /** | ||
| * insertBefore | ||
| */ | ||
| insertBefore(node:any): $; | ||
| /** | ||
| * @desc: after | ||
| */ | ||
| after(node:any): $; | ||
| /** | ||
| * @desc: insertAfter | ||
| */ | ||
| insertAfter(node:any): $; | ||
| /** | ||
| * @desc: attr. | ||
| */ | ||
| attr(attrName:any, value:any): string; | ||
| /** | ||
| * @desc: removeAttr | ||
| */ | ||
| removeAttr(name:any): $; | ||
| /** | ||
| * @desc: empty. | ||
| */ | ||
| empty(): $; | ||
| /** | ||
| * @desc: html. | ||
| */ | ||
| html(v:string): string; | ||
| /** | ||
| * @desc: text. | ||
| */ | ||
| text(v:string): string; | ||
| /** | ||
| * @desc: val. | ||
| */ | ||
| val(v:string): string; | ||
| css(name:string, value:string): string; | ||
| ``` | ||
| ### 事件. | ||
| /** | ||
| * @desc: css. | ||
| */ | ||
| css(name:string, value:string): string; | ||
| ```js | ||
| /** | ||
| * @desc: on. | ||
| */ | ||
| on(eventname:string, foo:any): $; | ||
| /** | ||
| * @desc: one. | ||
| */ | ||
| one(event:string, f:any): $; | ||
| /** | ||
| * @desc: off. | ||
| */ | ||
| off(eventname:string, foo:any): $; | ||
| /** | ||
| * @desc: trigger. | ||
| */ | ||
| off(eventname:string, foo?:any): $; | ||
| trigger(eventname:string): $; | ||
| ready(f?:any):$; | ||
@@ -526,2 +440,12 @@ unload(f?:any):$; | ||
| submit(f?:any):$; | ||
| ``` | ||
| ### 遍历 | ||
| ```js | ||
| parent(selector?:string|dom|HTMLElement) : $; | ||
| parents(selector?:string|dom|HTMLElement) : $; | ||
| children(selector?:string|dom|HTMLElement) : $; | ||
| prev(selector?:string|dom|HTMLElement) : $; | ||
| next(selector?:string|dom|HTMLElement) : $; | ||
| ``` |
@@ -300,3 +300,3 @@ // Type definitions for febs | ||
| */ | ||
| constructor(name:string); | ||
| constructor(selector?:string|dom|HTMLElement); | ||
@@ -331,3 +331,3 @@ /** | ||
| */ | ||
| append(node:any): dom; | ||
| append(selector?:string|dom|HTMLElement): dom; | ||
@@ -337,3 +337,3 @@ /** | ||
| */ | ||
| appendTo(node:any): dom; | ||
| appendTo(selector?:string|dom|HTMLElement): dom; | ||
@@ -343,3 +343,3 @@ /** | ||
| */ | ||
| prepend(node:any): dom; | ||
| prepend(selector?:string|dom|HTMLElement): dom; | ||
@@ -349,3 +349,3 @@ /** | ||
| */ | ||
| prependTo(node:any): dom; | ||
| prependTo(selector?:string|dom|HTMLElement): dom; | ||
@@ -355,3 +355,3 @@ /** | ||
| */ | ||
| before(node:any): dom; | ||
| before(selector?:string|dom|HTMLElement): dom; | ||
@@ -361,3 +361,3 @@ /** | ||
| */ | ||
| insertBefore(node:any): dom; | ||
| insertBefore(selector?:string|dom|HTMLElement): dom; | ||
@@ -367,3 +367,3 @@ /** | ||
| */ | ||
| after(node:any): dom; | ||
| after(selector?:string|dom|HTMLElement): dom; | ||
@@ -373,3 +373,3 @@ /** | ||
| */ | ||
| insertAfter(node:any): dom; | ||
| insertAfter(selector?:string|dom|HTMLElement): dom; | ||
@@ -414,15 +414,29 @@ /** | ||
| /** | ||
| * html. | ||
| */ | ||
| parent(selector?:string|dom|HTMLElement) : dom; | ||
| parents(selector?:string|dom|HTMLElement) : dom; | ||
| children(selector?:string|dom|HTMLElement) : dom; | ||
| prev(selector?:string|dom|HTMLElement) : dom; | ||
| next(selector?:string|dom|HTMLElement) : dom; | ||
| /** | ||
| * @desc: on. | ||
| */ | ||
| on(eventname:string, foo:any): dom; | ||
| bind(eventname:string, foo:any): dom; | ||
| live(eventname:string, foo:any): dom; | ||
| /** | ||
| * @desc: one. | ||
| * @desc: off. | ||
| */ | ||
| one(event:string, f:any): dom; | ||
| off(eventname:string, foo?:any): dom; | ||
| unbind(eventname:string, foo?:any): dom; | ||
| die(eventname:string, foo?:any): dom; | ||
| /** | ||
| * @desc: off. | ||
| * @desc: one. | ||
| */ | ||
| off(eventname:string, foo?:any): dom; | ||
| one(event:string, f:any): dom; | ||
@@ -456,5 +470,5 @@ /** | ||
| [index:number]: any; | ||
| [index:number]: dom; | ||
| } | ||
| export function $(n:any):dom; |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by3.52%
1272034
- Lines of code
- increased by6.81%
12453
Worsened metrics
- Number of lines in readme file
- decreased by-14.53%
447
No dependency changes