CrossMan
🤹♂️
- sj-js의 기반이 되는
Util & Framework로서 제작되고 있습니다. -
CrossBrowsing과쉬운 인터페이스구현을 목표로 합니다. ✨ Source: https://github.com/sj-js/crossman✨ Document: https://sj-js.github.io/sj-js/crossman
Functions to start
-
getEl(ID & ELEMENT): ID와 Element를 매개로 해당 Element를 편집합니다. -
searchEl(SELECTOR): querySelector를 사용하여 해당 Element를 편집합니다. -
newEl(TAGNAME): 새로운 Element 생성을 시작으로 해당 Element를 편집합니다. -
forEl(data, Callack): add 수행시 특정 자료구조의 양만큼 함수코드를 반복시켜 반환하는 Element를 추가합니다. -
ifEl(condition, Callack OR Node): add 수행시 Boolean값에 맞춰 함수코드에서 반환하는 Element를 추가 또는 무시합니다. -
cloneEl(ID & ELEMENT): 기존 Element를 'clone'하며 편집을 시작합니다. -
getData(OBJECT): 다양한 자료형(Number, Object, Array..) 데이터로 편집합니다. -
cloneData(OBJECT): 기존 데이터를 'clone'하며 편집을 시작합니다. -
getXHR(OBJECT): HTTP프로토콜로 Request를 보냅니다.- postXHR, putXHR, deleteXHR
-
ready(FUNCTION): Document 문서를 불러온 후 작동합니다. 기존 JQuery의 ready와 유사합니다. -
SjEvent: 자체 Event를 관리할 수 있는 솔루션을 제공합니다. 각종- addEventListener, removeEventListener, hasEventListener, execEventListener ...
Getting Started
-
Load
- Browser
<script src="https://cdn.jsdelivr.net/npm/@sj-js/crossman/dist/js/crossman.min.js"></script>
- ES6+
npm i @sj-js/crossman
const { ready, getEl, newEl, cloneEl, searchEl, forEl, ifEl, getClass, getData, cloneData, SjEvent, getXHR, postXHR, putXHR, deleteXHR } = require('@sj-js/crossman');
- Browser
-
Simple Example
-
getEl()
<body> Hello CrossMan!<br/> <span id="test-span-1" class="test-cls">Hey?</span> <span id="test-span-2" class="test-cls">Anybody</span> <span id="test-span-3" class="test-cls">There??</span> </body> <script> var testSpan = getEl('test-span-1').add('Hello??').style('color:white; background:black;').returnElement(); testSpan.style.fontSize = '35px'; </script>
-
searchEl()
<body> Hello CrossMan!<br/> <span id="test-span-1" class="test-cls">Hey</span> <span id="test-span-2" class="test-cls">Hey</span> <span id="test-span-3" class="dev-cls">Hey</span> <span id="test-span-4" class="test-cls">Hey</span> </body> <script> searchEl('.test-cls').add('Hello??').style('color:white; background:black; font-size:35px;'); </script>
-
newEl()
<style> div { border:1px solid black; margin:2px; } button { border-radius:30px; height:20px; cursor:pointer; } </style> <body> Hello CrossMan!<br/> </body> <script> newEl('div').addClass(['test-container', 'outer']).style('width:100%;').add([ newEl('div').attr('id', 'top').html('[TOP SOMETHING]'), newEl('div').addClass('test-title').html('Hello? How about CrossMan?<br/>'), newEl('div').addClass('test-content').style('border:3px dashed gray; color:white; background:black;').addln([ 'Love all and all and all.. OK?', newEl('span').html('Why are you seeing it? for what?').add([ newEl('button').html('SQUARE').addEventListener('click', function(){ getEl('top').add( newEl('span').style('display:inline-block; width:30px; height:30px;').setStyle('background', '#' +getData().randomColor()) ) }), newEl('button').html('CIRCLE').addEventListener('click', function(){ getEl('top').add( newEl('span').style('display:inline-block; width:30px; height:30px; border-radius:30px;').setStyle('background', '#' +getData().randomColor()) ) }), ]) ]) ]).appendTo(document.body); </script>
-
cloneEl()
<body> Hello CrossMan!<br/> <button id="test-button">CLONE</button> <span id="test-span" style="color:white; background:#BBBBBB; margin:1px; cursor:pointer;">Hi Hi Hi</span> </body> <script> var latestId = 0; getEl('test-button').addEventListener('click', function(e){ var elementId = 'test-' + (++latestId); var testSpan = cloneEl('test-span', true) .attr('id', elementId) .add(elementId) .addEventListener('mouseover', function(){ getEl(testSpan).setStyle('background', '#555555'); }) .addEventListener('mouseout', function(){ getEl(testSpan).setStyle('background', '#BBBBBB'); }) .addEventListener('click', function(){ alert(elementId); }) .appendToNextOf('test-span') .returnElement(); }); </script>
-