재사용UI 컴포넌트설계
- 190. {
firstName:
John,
lastName:
Smith,
isAlive:
true,
age:
25,
address:
{
streetAddress:
21
2nd
Street,
city:
New
York,
state:
NY,
postalCode:
10021-‐3100
},
phoneNumbers:
[
{
type:
home,
1. 쉬운
- 204. 설정하기
{
firstName:
John,
lastName:
Smith,
isAlive:
true,
age:
25,
address:
{
streetAddress:
21
2nd
Street,
city:
New
York,
state:
NY,
postalCode:
10021-‐3100
},
phoneNumbers:
[
{
type:
home,
number:
212
555-‐1234
},
{
type:
office,
number:
646
555-‐4567
}
],
children:
[],
spouse:
null
}
1. 쉬운
- 218. 설정하기
oSS
=
new
SweetSearch(elFormComtainer,
{
'sAutoCompleteURL'
:
sAutoCompleteURLSyrupTable,
'requestType'
:
'jsonp',
'jsonp_callbackName'
:
'ac_done'
});
option을
- 221. oSS.registerUserMethod({
'FN_AFTER_INSERT_AUTO_WORD'
:
fnInsertAutoCompleteWordSyrupTable,
'FN_AFTER_SELECT_AUTO_WORD'
:
fnSelectAutoCompleteWord,
'FN_AFTER_SUBMIT'
:
fnSubmitForm
});
custom
- 237.
oSS.onPlugins([
{
'name'
:
'RecentWordPlugin',
'option'
:
{
'maxList'
:
7,
},
'userMethod':
{
'FN_AFTER_INSERT_RECENT_WORD'
:
fnInsertRecentSearchWord,
'FN_AFTER_SELECT_RECENT_WORD'
:
fnSelectRecentSearchWord
}
}
]);
컴포넌트에
- 256. oSS
=
new
SweetSearch(elFormComtainer,
{
'sAutoCompleteURL'
:
sAutoCompleteURLSyrupTable,
'requestType'
:
'jsonp',
'jsonp_callbackName'
:
'ac_done'
});
oSS.registerUserMethod({
'FN_AFTER_INSERT_AUTO_WORD'
:
fnInsertAutoCompleteWordSyrupTable,
'FN_AFTER_SELECT_AUTO_WORD'
:
fnSelectAutoCompleteWord,
'FN_AFTER_SUBMIT'
:
fnSubmitForm
});
oSS.onPlugins([
{
'name'
:
'RecentWordPlugin',
'option'
:
{
'maxList'
:
7,
},
'userMethod':
{
'FN_AFTER_INSERT_RECENT_WORD'
:
fnInsertRecentSearchWord,
'FN_AFTER_SELECT_RECENT_WORD'
:
fnSelectRecentSearchWord
}
}
]);
컴포넌트
- 434. 기본형태
class
Polygon
{
constructor(height,
width)
{
this.height
=
height;
this.width
=
width;
}
get
area()
{
return
this.calcArea();
}
calcArea()
{
return
this.height
*
this.width;
}
}
ES6
- 437. class
CommonComponent
{
constructor(elTarget,
htOption)
{
this.htOption
=
htOption;
this.htCacheData
=
{};
this.elTarget
=
elTarget;
this.init(htOption);
}
init(htOption)
{
this.setInitValue();
this.setOption(htOption,
this._htDefaultOption,
this.option);
this.initValue();
this.registerEvents();
}
setInitValue()
{
let
_d
=
this.COMPONENT_CONFIG();
this.bMainComponent
=
!!_d.PLUGINS;
//do
something…
}
registerUserMethod(htFn)
{
this.setOption(htFn,
this.htDefaultFn,
this.htUserFn);
}
registerPluginMethod(htFn)
{
this.appendPluginMethod(htFn,
this.htDefaultPluginFn,
this.htPluginFn);
}
….
- 479. oSS.onPlugins([
{
'name':
'RecentWordPlugin',
'option':
{
'maxList':
7,
},
'userMethod':
{
'FN_AFTER_INSERT_RECENT_WORD':
fnInsertRecentSearchWord,
'FN_AFTER_SELECT_RECENT_WORD':
fnSelectRecentSearchWord
}
},
{
'name':
'TTViewPlugin',
'option':
{},
'userMethod':
{}
}
]);
4. 플러그인
- 583.
init(htOption)
{
this.setInitValue();
super.setOption(htOption,
this.htDefaultOption,
this.option);
this.registerEvents();
this.oStorage
=
new
RecentWordPluginLocalStorageAddOn(searchQuery,
this.option.maxList);
}
플러그에서
- 611.
oSS
=
new
SweetSearch(elFormComtainer,
{
'sAutoCompleteURL'
:
sAutoCompleteURLSyrupTable,
'AjaxRequestType'
:
‘jsonp',
//ajax,
jsonp,
user
'jsonp_callbackName'
:
'ac_done'
});
XHR로
- 635.
//CommonComponent.js
setOption
(htValue,
htDefaultValue,
htStorage)
{
Object.keys(htDefaultValue).forEach((v)
=
{
if
(typeof
htValue[v]
===
undefined)
{
htStorage[v]
=
htDefaultValue[v];
}
else
{
if(Object.prototype.toString.call(htValue[v])
!==
[object
Object])
{
htStorage[v]
=
htValue[v];
return;
}
htStorage[v]
=
{};
this.setOption.call(this,
htValue[v],
htDefaultValue[v],htStorage[v]);
}
});
}
- 665. 한다..
var
fnInsertAutoCompleteWordSyrupTable
=
function(sData)
{
console.log(fnInsertAutoCompleteWord);
var
result
=
;
var
sHTML
=
;
var
sTemplate
=
lispan[%sKeyword%]/span/li;
var
sInputValue
=
elInputField.value;
var
sInputValueNoBlank
=
sInputValue.replace(/s+/g,
);
var
bHighlightMatchedWord
=
true;
if(!sData)
return;
sData['kwds'].forEach(
function(v)
{
result
=
sTemplate.replace(/[%sKeyword%]/,
v[0]);
if(bHighlightMatchedWord)
{
if(v.indexOf(sInputValue)
-‐1)
{
result
=
result.replace(sInputValue,
b+sInputValue+/b);
}
else
{
result
=
result.replace(sInputValueNoBlank,
b+sInputValueNoBlank+/b);
}
}
sHTML
+=
result;
});
elAutoCompleteLayer.querySelector(ul).innerHTML
=
sHTML;
}