优化 lay 的 `.find()` 元素操作,并优化大量代码排版,统一风格

pull/1253/head
贤心 2023-05-15 11:27:49 +08:00
parent 50e077537e
commit cd2b504610
1 changed files with 116 additions and 125 deletions

View File

@ -4,51 +4,52 @@
;!function(window){ // gulp build: lay-header ;!function(window){ // gulp build: lay-header
"use strict"; "use strict";
var MOD_NAME = 'lay' //模块名 var MOD_NAME = 'lay'; // 模块名
,document = window.document var document = window.document;
//DOM查找 // 元素查找
,lay = function(selector){ var lay = function(selector){
return new LAY(selector); return new Class(selector);
} };
// DOM 构造器 // 构造器
,LAY = function(selector){ var Class = function(selector){
var index = 0; var that = this;
var nativeDOM = typeof selector === 'object' ? function(){ var elem = typeof selector === 'object' ? function(){
// 仅适配简单元素对象 // 仅适配简单元素对象
return layui.isArray(selector) ? selector : [selector]; return layui.isArray(selector) ? selector : [selector];
}() : ( }() : (
this.selector = selector, this.selector = selector,
document.querySelectorAll(selector || null) document.querySelectorAll(selector || null)
); );
for(; index < nativeDOM.length; index++){
this.push(nativeDOM[index]); lay.each(elem, function(index, item){
} that.push(elem[index]);
});
}; };
/* /*
lay 对象操作 lay 对象操作
*/ */
LAY.prototype = []; Class.fn = Class.prototype = [];
LAY.prototype.constructor = LAY; Class.fn.constructor = Class;
// 普通对象深度扩展 // 普通对象深度扩展
lay.extend = function(){ lay.extend = function(){
var ai = 1 var ai = 1;
,length var length;
,args = arguments var args = arguments;
,clone = function(target, obj){ var clone = function(target, obj){
target = target || (layui.type(obj) === 'array' ? [] : {}); // 目标对象 target = target || (layui.type(obj) === 'array' ? [] : {}); // 目标对象
for(var i in obj){ for(var i in obj){
//如果值为普通对象,则进入递归,继续深度合并 //值为普通对象,则进入递归,继续深度合并
target[i] = (obj[i] && obj[i].constructor === Object) target[i] = (obj[i] && obj[i].constructor === Object)
? clone(target[i], obj[i]) ? clone(target[i], obj[i])
: obj[i]; : obj[i];
} }
return target; return target;
} };
args[0] = typeof args[0] === 'object' ? args[0] : {}; args[0] = typeof args[0] === 'object' ? args[0] : {};
length = args.length length = args.length
@ -61,9 +62,6 @@
return args[0]; return args[0];
}; };
//lay 模块版本
lay.v = '1.0.8';
// ie 版本 // ie 版本
lay.ie = function(){ lay.ie = function(){
var agent = navigator.userAgent.toLowerCase(); var agent = navigator.userAgent.toLowerCase();
@ -73,10 +71,6 @@
}(); }();
/** /**
* 获取 layui 常见方法以便用于组件单独版 * 获取 layui 常见方法以便用于组件单独版
*/ */
@ -90,9 +84,6 @@
}; };
// 数字前置补零 // 数字前置补零
lay.digit = function(num, length){ lay.digit = function(num, length){
if(!(typeof num === 'string' || typeof num === 'number')) return ''; if(!(typeof num === 'string' || typeof num === 'number')) return '';
@ -238,8 +229,14 @@
return matched; return matched;
}; };
/*
* lay 元素操作
*/
// 追加字符 // 追加字符
LAY.addStr = function(str, new_str){ Class.addStr = function(str, new_str){
str = str.replace(/\s+/, ' '); str = str.replace(/\s+/, ' ');
new_str = new_str.replace(/\s+/, ' ').split(' '); new_str = new_str.replace(/\s+/, ' ').split(' ');
lay.each(new_str, function(ii, item){ lay.each(new_str, function(ii, item){
@ -251,7 +248,7 @@
}; };
// 移除值 // 移除值
LAY.removeStr = function(str, new_str){ Class.removeStr = function(str, new_str){
str = str.replace(/\s+/, ' '); str = str.replace(/\s+/, ' ');
new_str = new_str.replace(/\s+/, ' ').split(' '); new_str = new_str.replace(/\s+/, ' ').split(' ');
lay.each(new_str, function(ii, item){ lay.each(new_str, function(ii, item){
@ -264,49 +261,43 @@
}; };
// 查找子元素 // 查找子元素
LAY.prototype.find = function(selector){ Class.fn.find = function(selector){
var that = this; var that = this;
var index = 0, arr = [] var elem = [];
,isObject = typeof selector === 'object'; var isObject = typeof selector === 'object';
this.each(function(i, item){ this.each(function(i, item){
var nativeDOM = isObject ? item.contains(selector) : item.querySelectorAll(selector || null); var children = isObject && item.contains(selector)
for(; index < nativeDOM.length; index++){ ? selector
arr.push(nativeDOM[index]); : item.querySelectorAll(selector || null);
}
that.shift(); lay.each(children, function(index, child){
elem.push(child);
});
}); });
if(!isObject){ return lay(elem);
that.selector = (that.selector ? that.selector + ' ' : '') + selector
}
lay.each(arr, function(i, item){
that.push(item);
});
return that;
}; };
//DOM遍历 // 元素遍历
LAY.prototype.each = function(fn){ Class.fn.each = function(fn){
return lay.each.call(this, this, fn); return lay.each.call(this, this, fn);
}; };
//添加css类 // 添加 className
LAY.prototype.addClass = function(className, type){ Class.fn.addClass = function(className, type){
return this.each(function(index, item){ return this.each(function(index, item){
item.className = LAY[type ? 'removeStr' : 'addStr'](item.className, className) item.className = Class[type ? 'removeStr' : 'addStr'](item.className, className)
}); });
}; };
//移除 css 类 // 移除 className
LAY.prototype.removeClass = function(className){ Class.fn.removeClass = function(className){
return this.addClass(className, true); return this.addClass(className, true);
}; };
// 是否包含 css 类 // 是否包含 css 类
LAY.prototype.hasClass = function(className){ Class.fn.hasClass = function(className){
var has = false; var has = false;
this.each(function(index, item){ this.each(function(index, item){
if(new RegExp('\\b'+ className +'\\b').test(item.className)){ if(new RegExp('\\b'+ className +'\\b').test(item.className)){
@ -317,9 +308,9 @@
}; };
// 添加或获取 css style // 添加或获取 css style
LAY.prototype.css = function(key, value){ Class.fn.css = function(key, value){
var that = this var that = this;
,parseValue = function(v){ var parseValue = function(v){
return isNaN(v) ? v : (v +'px'); return isNaN(v) ? v : (v +'px');
}; };
return (typeof key === 'string' && value === undefined) ? function(){ return (typeof key === 'string' && value === undefined) ? function(){
@ -332,7 +323,7 @@
}; };
// 添加或获取宽度 // 添加或获取宽度
LAY.prototype.width = function(value){ Class.fn.width = function(value){
var that = this; var that = this;
return value === undefined ? function(){ return value === undefined ? function(){
if(that.length > 0) return that[0].offsetWidth; // 此处还需做兼容 if(that.length > 0) return that[0].offsetWidth; // 此处还需做兼容
@ -342,7 +333,7 @@
}; };
// 添加或获取高度 // 添加或获取高度
LAY.prototype.height = function(value){ Class.fn.height = function(value){
var that = this; var that = this;
return value === undefined ? function(){ return value === undefined ? function(){
if(that.length > 0) return that[0].offsetHeight; // 此处还需做兼容 if(that.length > 0) return that[0].offsetHeight; // 此处还需做兼容
@ -352,7 +343,7 @@
}; };
// 添加或获取属性 // 添加或获取属性
LAY.prototype.attr = function(key, value){ Class.fn.attr = function(key, value){
var that = this; var that = this;
return value === undefined ? function(){ return value === undefined ? function(){
if(that.length > 0) return that[0].getAttribute(key); if(that.length > 0) return that[0].getAttribute(key);
@ -362,14 +353,14 @@
}; };
// 移除属性 // 移除属性
LAY.prototype.removeAttr = function(key){ Class.fn.removeAttr = function(key){
return this.each(function(index, item){ return this.each(function(index, item){
item.removeAttribute(key); item.removeAttribute(key);
}); });
}; };
// 设置或获取 HTML 内容 // 设置或获取 HTML 内容
LAY.prototype.html = function(html){ Class.fn.html = function(html){
var that = this; var that = this;
return html === undefined ? function(){ return html === undefined ? function(){
if(that.length > 0) return that[0].innerHTML; if(that.length > 0) return that[0].innerHTML;
@ -379,7 +370,7 @@
}; };
// 设置或获取值 // 设置或获取值
LAY.prototype.val = function(value){ Class.fn.val = function(value){
var that = this; var that = this;
return value === undefined ? function(){ return value === undefined ? function(){
if(that.length > 0) return that[0].value; if(that.length > 0) return that[0].value;
@ -389,7 +380,7 @@
}; };
// 追加内容 // 追加内容
LAY.prototype.append = function(elem){ Class.fn.append = function(elem){
return this.each(function(index, item){ return this.each(function(index, item){
typeof elem === 'object' typeof elem === 'object'
? item.appendChild(elem) ? item.appendChild(elem)
@ -398,14 +389,14 @@
}; };
// 移除内容 // 移除内容
LAY.prototype.remove = function(elem){ Class.fn.remove = function(elem){
return this.each(function(index, item){ return this.each(function(index, item){
elem ? item.removeChild(elem) : item.parentNode.removeChild(item); elem ? item.removeChild(elem) : item.parentNode.removeChild(item);
}); });
}; };
// 事件绑定 // 事件绑定
LAY.prototype.on = function(eventName, fn){ Class.fn.on = function(eventName, fn){
return this.each(function(index, item){ return this.each(function(index, item){
item.attachEvent ? item.attachEvent('on' + eventName, function(e){ item.attachEvent ? item.attachEvent('on' + eventName, function(e){
e.target = e.srcElement; e.target = e.srcElement;
@ -415,7 +406,7 @@
}; };
// 解除事件 // 解除事件
LAY.prototype.off = function(eventName, fn){ Class.fn.off = function(eventName, fn){
return this.each(function(index, item){ return this.each(function(index, item){
item.detachEvent item.detachEvent
? item.detachEvent('on'+ eventName, fn) ? item.detachEvent('on'+ eventName, fn)
@ -423,12 +414,12 @@
}); });
}; };
//暴露 lay 到全局作用域 // export
window.lay = lay; window.lay = lay;
//如果在 layui 体系中 // 输出为 layui 模块
if(window.layui && layui.define){ if(window.layui && layui.define){
layui.define(function(exports){ //layui 加载 layui.define(function(exports){
exports(MOD_NAME, lay); exports(MOD_NAME, lay);
}); });
} }