String 변수가 null이나 undefined인지 확인하는 기능은 쓰임새가 많다. Java라면 그런 목적으로 Apache commons의 StringUtils를 많이 사용하고, String 관련 메서드를 사용할 때 null 체크를 생략시켜줘서 편리하다. JavaScript에서도 클래스 및 메서드 명칭이 동일하고 동작구조도 최대한 동일하면 협업 시 팀원들이 빠르게 기능을 이해하고 사용할 수 있을 거란 생각이 들었다.
샘플코드
Apache commons의 StringUtils의 메서드를 모두 구현하려면 시간이 많이 들어서 당장 자주 쓸 기능만 작성했다. 나머지는 필요해질 때마다 추가 작성하면 된다.
[2023-03-28] isEmpty, isNotEmpty, isNotBlank 추가.
<StringUtils.js>
/**
* Apache commons의 StringUtils 클래스의 편리한 기능을 자바스크립트에서 그대로 사용하기 위한 객체.
*/
const StringUtils = {};
/**
*
* @param str {String} 확인할 문자열
* @return 문자열 길이. 문자열이 없으면 0.
*/
StringUtils.length = function(str) {
if (str) {
return str.length;
}
return 0;
};
/**
* <p>Checks if a String is empty ("") or null or undefined.</p>
*
* <pre>
* StringUtils.isEmpty(undefined) = true
* StringUtils.isEmpty(null) = true
* StringUtils.isEmpty("") = true
* StringUtils.isEmpty(" ") = false
* StringUtils.isEmpty("bob") = false
* StringUtils.isEmpty(" bob ") = false
* </pre>
*
* @param cs {String} 확인할 문자열
* @return {boolean} <code>true</code> if the cs is empty or null or undefined.
*/
StringUtils.isEmpty = function(cs) {
if (cs == undefined || cs == null) {
return true;
}
if (!("string" === typeof(cs) || cs instanceof String)) {
throw new TypeError("Argument cs must be type of String.");
}
return cs.length == 0;
};
/**
* <p>Checks if a String is not empty ("") and not null and not undefined.</p>
*
* <pre>
* StringUtils.isNotEmpty(undefined) = false
* StringUtils.isNotEmpty(null) = false
* StringUtils.isNotEmpty("") = false
* StringUtils.isNotEmpty(" ") = true
* StringUtils.isNotEmpty("bob") = true
* StringUtils.isNotEmpty(" bob ") = true
* </pre>
*
* @param cs {String} 확인할 문자열
* @return {boolean} <code>true</code> if the cs is not empty and not null and not undefined.
*/
StringUtils.isNotEmpty = function(cs) {
return !StringUtils.isEmpty(cs);
};
/**
* <p>Checks if a CharSequence is empty (""), null or whitespace only.</p>
*
* <p>Whitespace is defined by {@link Character#isWhitespace(char)}.</p>
*
* <pre>
* StringUtils.isBlank(undefined) = true
* StringUtils.isBlank(null) = true
* StringUtils.isBlank("") = true
* StringUtils.isBlank(" ") = true
* StringUtils.isBlank("bob") = false
* StringUtils.isBlank(" bob ") = false
* </pre>
*
* @param cs {String} 확인할 문자열
* @return {boolean} <code>true</code> if the cs is undefined, null, empty or whitespace only.
*/
StringUtils.isBlank = function(cs) {
if (cs == undefined || cs == null) {
return true;
}
if (!("string" === typeof(cs) || cs instanceof String)) {
throw new TypeError("Argument cs must be type of String.");
}
let strLen;
if ((strLen = cs.length) == 0) {
return true;
}
// for (var i = 0; i < strLen; i++) {
// if (!StringUtils.isWhitespace(cs.charAt(i))) {
// return false;
// }
// }
if (!StringUtils.isWhitespace(cs)) {
return false;
}
return true;
};
/**
* <pre>
* StringUtils.isNotBlank(undefined) = false
* StringUtils.isNotBlank(null) = false
* StringUtils.isNotBlank("") = false
* StringUtils.isNotBlank(" ") = false
* StringUtils.isNotBlank("bob") = true
* StringUtils.isNotBlank(" bob ") = true
* </pre>
*
* @param cs the CharSequence to check, may be null
* @return <code>true</code> if the CharSequence is
* not empty and not null and not whitespace only
*/
StringUtils.isNotBlank = function(cs) {
return !StringUtils.isBlank(cs);
}
/**
* Apache commons의 StringUtils 클래스에는 없지만, 유용할 듯하여 별도 메서드를 추가함.
* @param cs {String} 확인할 문자열
* @return {boolean} <code>true</code> if the str is undefined, null, empty or whitespace only.
*/
StringUtils.isWhitespace = function(cs) {
if (!("string" === typeof(cs) || cs instanceof String)) {
throw new TypeError("Argument cs must be type of String.");
}
if (/^\s+$/g.test(cs)) {
return true;
}
return false;
};
/**
*
* <pre>
* StringUtils.trim(undefined) = undefined
* StringUtils.trim(null) = null
* StringUtils.trim("") = ""
* StringUtils.trim(" ") = ""
* StringUtils.trim("abc") = "abc"
* StringUtils.trim(" abc ") = "abc"
* </pre>
*
* @param str {String} the String to be trimmed, may be null
* @return {String} the trimmed string, <code>null</code> if null String input
*/
StringUtils.trim = function(str) {
return (str == null || str == undefined) ? str : str.trim();
};
/**
*
* <pre>
* StringUtils.trimToNull(undefined) = null
* StringUtils.trimToNull(null) = null
* StringUtils.trimToNull("") = null
* StringUtils.trimToNull(" ") = null
* StringUtils.trimToNull("abc") = "abc"
* StringUtils.trimToNull(" abc ") = "abc"
* </pre>
*
* @param str {String} the String to be trimmed, may be null
* @return {String} the trimmed String,
* <code>null</code> if only chars <= 32, empty or null String input
*/
StringUtils.trimToNull = function(str) {
const ts = StringUtils.trim(str);
return StringUtils.isEmpty(ts) ? null : ts;
};
/**
*
* <pre>
* StringUtils.trimToEmpty(undefined) = ""
* StringUtils.trimToEmpty(null) = ""
* StringUtils.trimToEmpty("") = ""
* StringUtils.trimToEmpty(" ") = ""
* StringUtils.trimToEmpty("abc") = "abc"
* StringUtils.trimToEmpty(" abc ") = "abc"
* </pre>
*
* @param str {String} the String to be trimmed, may be null
* @return {String} the trimmed String, or an empty String if <code>null</code> input
*/
StringUtils.trimToEmpty = function(str) {
return (str == null || str == undefined) ? "" : str.trim();
};
datagrid 내의 컬럼에 툴팁을 사용하고 싶을 경우 formatter를 이용해 정의하는 것을 생각해볼 수 있다. 그런데, formatter 내에서 tooltip 생성 코드를 바로 사용해도 생성이 되지 않는다. 아마도 datagrid 내의 formatter 내에서 구성한 엘리먼트가 formatter 코드가 모두 실행된 후에야 생성되기 때문일 것이다.( formatter 코드가 실행 완료되기 전에는 아직 존재하지 않는 엘리먼트여서 툴팁을 붙일 엘리먼트가 존재하지 않기 때문일 것으로 생각된다.)
때문에 formatter 내에서는 툴팁을 띄울 이벤트에 대신 툴팁을 생성하는 함수를 연결해 놓는다. 이벤트가 발생할 때는 이미 요소가 있으므로 툴팁 생성이 가능하다.
툴팁에 노출할 데이터는 글로벌 변수에 저장한다.(datagrid를 그리면서 툴팁 생성까지 되지 않기 때문에 분리해서 실행이 되도록 데이터를 별도영역에 저장해 놓는다.)
formatter를 이용해 툴팁이 필요한 컬럼의 엘리먼트에 고유한 아이디를 생성하고, 툴팁 생성 이벤트를 설정한다.
툴팁이 필요한 곳에 마우스이벤트가 발생하면, 툴팁을 생성한다.(현재로서는 엘리먼트에 EasyUI의 tooltip이 생성되었는지 따로 판단할 방법이 없다. 때문에 오류가 발생하면 생성되지 않은 것으로 판단하고 생성하도록 한다.)
