1. script tag는 </body> 바로 전에 놓는다.(야후 성능 연구팀의 자바스크립트 제1원칙)
http://developer.yahoo.com/performance/rules.html#js_bottom
http://doublegintonic.tistory.com/123

2. script 갯수를 최소로 줄인다(야후 콤보핸들러 등 사용)

3. link tag 다음에 inline script를 사용하지 않는다.

4. LazyLoad or labjs를 사용하여 script를 동적으로 loading한다
https://github.com/rgrove/lazyload
http://labjs.com/

5. 두번 이상 사용할 전역변수는 지역변수에 할당한다.

6. with 문은 절대 사용하지 않는다. - scope chain 문제

7. try-catch 문은 꼭 필요한 곳만 사용하고 catch문 내의 코드를 최소화 하며
가능하면 메서드를 생성해서 에러 처리를 위임하는게 좋다.

8. eval은 꼭 필요할때만 사용한다.

9. 두번 이상 사용할 중첩 객체 멤버는 지역변수에 할당한다.
(객체 메소드는 제외 - 메소드의 this가 오작동 할 수 있기 때문)

10. DOM은 가장 적게 사용하고, 가능하면 모든 작업을 ECMAScript로 한다.
 - DOM 강의하시는 분 얘기로는 DOM이 더 빠르다고 한다. 어느게 맞는지는 잘...

11. 이벤트 위임(부모 요소로)을 이용해서 이벤트 핸들러 수를 최소한으로 줄인다

12. AJAX 사용시 가능하면 jsonp를 사용하고 부득이한 경우 json을 사용한다.(xml 비추)

13. 개체생성은 리터럴 사용(var a = [1,2,3]; var b="aaa";var c={"a":"b"})
   - 배열값 할당은 []사용(a[0] = 1; push() 사용금지)

14. 정규표현식 최적화

Posted by incree

2014/02/21 10:32 2014/02/21 10:32
, ,
Response
0 Trackbacks , 0 Comments
RSS :
http://www.incree.com/tc/incree/rss/response/320

Trackback URL : 이 글에는 트랙백을 보낼 수 없습니다

[JavaScript] javascript WYSISYG editor

insert html
ie10까지는 pasteHtml을 사용하면 되고,다른 브라우저는 execcommand를 사용하면

되지만 ie11은 둘다 지원하지 않기 때문에 별도의 개발이 필요하다.

하지만 이미 있으니 가져다 쓰면 되겠다.

https://gist.github.com/sergi/126762

insertNodeAtSelection : function(win, insertNode, _container, _pos)
{
// get current selection
var sel = this._getSelection(); var doc = this._getDoc();
 
// get the first range of the selection (there's almost always only
// one range)
var range = sel.getRangeAt(0);
 
// deselect everything
sel.removeAllRanges();
 
// remove content of current selection from document
range.deleteContents();
 
// get location of current selection
var container = _container ? _container : range.startContainer; var
pos = _pos ? _pos : range.startOffset;
 
// make a new range for the new selection
range=doc.createRange();
 
if (container.nodeType==3 && insertNode.nodeType==3) {
// if we insert text in a textnode, do optimized insertion
container.insertData(pos, insertNode.nodeValue);
 
// put cursor after inserted text
range.setEnd(container, pos+insertNode.length);
range.setStart(container, pos+insertNode.length);
 
} else {
var afterNode;
if (container.nodeType==3) {
// when inserting into a textnode we create 2 new textnodes and
// put the insertNode in between
 
var textNode = container; container = textNode.parentNode; var
text = textNode.nodeValue;
 
// text before the split
var textBefore = text.substr(0,pos);
// text after the split
var textAfter = text.substr(pos);
 
var beforeNode = doc.createTextNode(textBefore); afterNode =
doc.createTextNode(textAfter);
 
// insert the 3 new nodes before the old one
container.insertBefore(afterNode, textNode);
container.insertBefore(insertNode, afterNode);
container.insertBefore(beforeNode, insertNode);
 
// remove the old node
container.removeChild(textNode);
} else {
// else simply insert the node
afterNode = container.childNodes[pos];
container.insertBefore(insertNode, afterNode);
}
range.setEnd(afterNode, 0); range.setStart(afterNode, 0);
}
sel.addRange(range); return {c:container, p:pos};
}














검색해도 잘 안나오는 것만
작성중......


1. WebNote(구 spac editor)
http://www.webeditor.kr/
http://www.phpwork.kr/downloads/viewdow ··· Fwebnote

2. jwysiwyg
https://github.com/jwysiwyg/jwysiwyg
jQuery 기반

3. cheditor(유료)
http://www.chcode.com/products/cheditor.shtml
http://www.chcode.com/cheditor/demo.shtml

4. jqte
http://jqueryte.com/
http://jqueryte.com/demos



execCommand 테스트
http://www.quirksmode.org/dom/execCommand/
브라우저 호환성
http://www.quirksmode.org/dom/execCommand.html


http://www-archive.mozilla.org/editor/midas-spec.html


http://msdn.microsoft.com/en-us/library/aa741314%28VS.85%29.aspx
http://msdn.microsoft.com/en-us/library/aa969729%28v=vs.85%29.aspx#basic
http://msdn.microsoft.com/en-us/library/ms536419%28v=vs.85%29.aspx


HTML Clipboard Format
http://msdn.microsoft.com/en-us/library/aa767917%28v=vs.85%29.aspx



ie inserthtml
http://stackoverflow.com/questions/3398378/execcommand-inserthtml-in-internet-explorer
http://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div/6691294#6691294
http://jsfiddle.net/timdown/jwvha/527/


Rich-Text Editing in Mozilla
https://developer.mozilla.org/en/docs/Rich-Text_Editing_in_Mozilla

Posted by incree

2014/01/11 08:41 2014/01/11 08:41
, ,
Response
0 Trackbacks , 0 Comments
RSS :
http://www.incree.com/tc/incree/rss/response/251

Trackback URL : 이 글에는 트랙백을 보낼 수 없습니다

http://increedev.hol.es/jsPacker/


Posted by incree

2013/08/24 18:48 2013/08/24 18:48
, , ,
Response
0 Trackbacks , 0 Comments
RSS :
http://www.incree.com/tc/incree/rss/response/261

Trackback URL : 이 글에는 트랙백을 보낼 수 없습니다

jquery fileupload와 jquery textarea autoresize를 사용하는데,

대상이 모두 동적으로 추가되는 것들이라, 기본 사용법으로는 사용할 수 없어서

찾아보니 livequery라는 훌륭한 jquery plugin이 있었다.(제작자 홈페이지, GitHub)

희안한건 jquery plugin 공식 배포 사이트에서는

이 plugin을 찾을수 없었다.

jquery와 포함이 돼 버린건지 알수는 없지만, 일단 기본 jquery에서는 원하는 기능을

찾을 수 없어서 이 plugin을 사용하기로 했다.

사용법은 다른 plugin들과 비슷하다.

동적으로 추가된 요소에 이벤트를 bind할때
$('selector').livequery('click', function() {
});

이건 jquery의 liveon, delegate 등으로 가능하므로 꼭 livequery를 사용할 필요는 없다


동적으로 추가된 요소에 jquery plugin을 적용할때
$('input:file').livequery(function () {
                var $obj = $(this);
                $obj.fileupload({...........});
});




Posted by incree

2013/08/22 07:51 2013/08/22 07:51
, , ,
Response
0 Trackbacks , 0 Comments
RSS :
http://www.incree.com/tc/incree/rss/response/260

Trackback URL : 이 글에는 트랙백을 보낼 수 없습니다

[JavaScript] autolink library

https://gist.github.com/koshigoe/1335742


jQuery(function($) {
    var re = /(?:(?=(?:http|https):)([a-zA-Z][-+.a-zA-Z\d]*):(?:((?:[-_.!~*'()a-zA-Z\d;?:@&=+$,]|%[a-fA-F\d]{2})(?:[-_.!~*'()a-zA-Z\d;\/?:@&=+$,\[\]]|%[a-fA-F\d]{2})*)|(?:(?:\/\/(?:(?:(?:((?:[-_.!~*'()a-zA-Z\d;:&=+$,]|%[a-fA-F\d]{2})*)@)?(?:((?:(?:(?:[a-zA-Z\d](?:[-a-zA-Z\d]*[a-zA-Z\d])?)\.)*(?:[a-zA-Z](?:[-a-zA-Z\d]*[a-zA-Z\d])?)\.?|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|\[(?:(?:[a-fA-F\d]{1,4}:)*(?:[a-fA-F\d]{1,4}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})|(?:(?:[a-fA-F\d]{1,4}:)*[a-fA-F\d]{1,4})?::(?:(?:[a-fA-F\d]{1,4}:)*(?:[a-fA-F\d]{1,4}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}))?)\]))(?::(\d*))?))?|((?:[-_.!~*'()a-zA-Z\d$,;:@&=+]|%[a-fA-F\d]{2})+))|(?!\/\/))(\/(?:[-_.!~*'()a-zA-Z\d:@&=+$,]|%[a-fA-F\d]{2})*(?:;(?:[-_.!~*'()a-zA-Z\d:@&=+$,]|%[a-fA-F\d]{2})*)*(?:\/(?:[-_.!~*'()a-zA-Z\d:@&=+$,]|%[a-fA-F\d]{2})*(?:;(?:[-_.!~*'()a-zA-Z\d:@&=+$,]|%[a-fA-F\d]{2})*)*)*)?)(?:\?((?:[-_.!~*'()a-zA-Z\d;\/?:@&=+$,\[\]]|%[a-fA-F\d]{2})*))?)(?:\#((?:[-_.!~*'()a-zA-Z\d;\/?:@&=+$,\[\]]|%[a-fA-F\d]{2})*))?)/img;

    function makeHTML(textNode) {
        var source = textNode.data;
        return source.replace(re, function() {
            var url = arguments[0];
            var a = $('<a></a>').attr({'href': url, 'target': '_blank'}).text(url);
            return url.match(/^https?:\/\/$/) ? url : $('<div></div>').append(a).html();
        });
    };

    function eachText(node, callback) {
        $.each(node.childNodes, function() {
            if (this.nodeType != 8 && this.nodeName != 'A') {
                this.nodeType != 1 ? callback(this) : eachText(this, callback);
            }
        });
    };

    $.fn.autolink = function() {
        return this.each(function() {
            var queue = [];
            eachText(this, function(e) {
                var html = makeHTML(e);
                if (html != e.data) {
                    queue.push([e, makeHTML(e)]);
                }
            });
            $.each(queue, function(i, x) {
                $(x[0]).replaceWith(x[1]);
            });
        });
    };
});




Posted by incree

2013/08/19 19:09 2013/08/19 19:09
,
Response
0 Trackbacks , 0 Comments
RSS :
http://www.incree.com/tc/incree/rss/response/258

Trackback URL : 이 글에는 트랙백을 보낼 수 없습니다

 localStorage에 데이타를 저장할때 기본적으로 문자열로만 저장이 된다.

따라서 가져올때도 문자열만 된다.

간단하게 확장함수 추가해서 사용하면 편하다.


Storage.prototype.setObject = function(key, value) {
        this.setItem(key, JSON.stringify(value));
    }
   
    Storage.prototype.getObject = function(key) {
        return JSON.parse(this.getItem(key));
    }

Posted by incree

2013/08/18 05:32 2013/08/18 05:32
, ,
Response
0 Trackbacks , 0 Comments
RSS :
http://www.incree.com/tc/incree/rss/response/257

Trackback URL : 이 글에는 트랙백을 보낼 수 없습니다

[JavaScript] jquery UI draggable 사용시

jQery UI draggable 사용시 특정 영역을 클릭했을때만 draggable하고 싶었는데,

이런 옵션이 없는것 같아서 굉장히 아쉬워하면 어쩔수 없이 그냥 쓰고 있었는데

handle라는 옵션이 있었다.

handle에 특정 영역을 지정하면 해당영역을 클릭했을때만 draggable이 가능하다


$("#popup_container").draggable({ handle: $("#popup_title") });

jQuery Alert Dialogs 보다가 확인한 기능

왜 메뉴얼 보고는 못 찾고... 역시 영어가 약해서 그래...ㅠ.ㅠ


Posted by incree

2013/08/16 10:18 2013/08/16 10:18
, , , ,
Response
0 Trackbacks , 0 Comments
RSS :
http://www.incree.com/tc/incree/rss/response/256

Trackback URL : 이 글에는 트랙백을 보낼 수 없습니다

[JavaScript] jquery Lightbox

jquery lightbox 들이 너무 기능이 많고 복잡한 것들만 있어서

간단하게 쓸려고 하나 만들었는데.......먼가 구려

jquery plugin이 아니라 좀 아쉽긴 하지만, 그냥 tinybox 쓰기로 함

http://sandbox.scriptiny.com/tinybox2/
http://www.scriptiny.com/2011/03/javascript-modal-windows/


tinybox에서 scroll 이벤트에서 재 설정기능이 없어서 추가함

window.onscroll=TINY.box.resize






2018.08.16 추가
var top = (($(window).height() / 2) - ($("#popup_container").outerHeight() / 2)) + $.alerts.verticalOffset;
var left = (($(window).width() / 2) - ($("#popup_container").outerWidth() / 2)) + $.alerts.horizontalOffset;

jQuery Alert Dialogs 에 보면 이런 코드가 있는데, 나중에 한번 적용해 봐야지


2018.08.17 추가
더 정리된(& 기능 추가된) 파일 업로드
이거 그냥 쓰기로...


Posted by incree

2013/08/11 21:12 2013/08/11 21:12
, , ,
Response
0 Trackbacks , 0 Comments
RSS :
http://www.incree.com/tc/incree/rss/response/255

Trackback URL : 이 글에는 트랙백을 보낼 수 없습니다

/**
 * input 태그에 clear 버튼 기능 추가하기
 * 일반적으로 값이 입력이 돼도 포커스가 있을때만 나타나지만
 * 포커스와 상관없이 값이 있으면 무조건 표시되게 함
 * jquery.iwtInputClearButtonController-0.9.0.js
 * requires jQuery v1.4.2 or later
 *
 * @author incree <incree@incree.com>
 * @copyright incree 2013.08.06 GPL Version 2 license
 * @version 0.9.0
 *
 */
(function($) {
    window.isMsClearDisplayNoneStyleAdded = false;
    
    var ua = navigator.userAgent,
          ie = /msie|Trident/i.test(ua);

    $.iwtInputClearButtonController = {
        defaultOptions: {
            image:'btn_textClear.gif',   // 삭제 이미지
            position:'relative',         // 이미지의 position
            className: '',               // 이미지에 적용할 class
            appendTarget:'',             // 없으면 input 의 parent로, 설정할 경우는 jquery object로(ex : $('body'))
            top:'',                      // position이 relative or absolute 일때 top 좌표
            left:'',                     // position이 relative or absolute 일때 left 좌표
            bottom:'',                   // position이 relative or absolute 일때 bottom 좌표
            right:''                     // position이 relative or absolute 일때 right 좌표
        }
    }

    $.fn.iwtInputClearButtonController = function(options) {
        if(ie && !window.isMsClearDisplayNoneStyleAdded) {
            // ie10에 자체적으로 표시되는 clear 버튼을 감춘다(.someinput::-ms-clear {display: none;})
            // 메타 태그에 X-UA-Compatible 이 있을때 오류 날수 있어서 try로 감싼다(ex : <meta http-equiv="X-UA-Compatible" content="IE=7" />)
            try {
                $('<style type="text/css"></style>').text('input::-ms-clear{display: none;}').appendTo('head');
            }
            catch(e) {}
            window.isMsClearDisplayNoneStyleAdded = true;
        }
        
        var $result = $([]);

        this.each(function(idx, elem) {
            if (elem.tagName.toUpperCase() == "INPUT") {
                var data = $.data(elem, 'iwtInputClearButtonController');
                if (!data) data = new iwtInputClearButtonController(elem, options);
                $result = $result.add(data);
            }
        });
        
        return $result
    }
    
    iwtInputClearButtonController = function(input, options) {
        var controller = this;
        var $input = $(input)

        options = $.extend({}, $.iwtInputClearButtonController.defaultOptions, options);
        
        var cssMap = {position:options.position, cursor:'pointer', zIndex:999};
        if(options.top != '') cssMap['top'] = options.top;
        if(options.left != '') cssMap['left'] = options.left;
        if(options.bottom != '') cssMap['bottom'] = options.bottom;
        if(options.right != '') cssMap['right'] = options.right;

        var $img = $('<img>')
            .attr({src: options.image, alt: '입력값 삭제'})
            .addClass(options.className)
            .css(cssMap)
            .appendTo(typeof options.appendTarget == 'object' ? options.appendTarget : $input.parent())
            .click(function() {
                $input.val('').focus();
                return false;
            })
            .hide();

        $input.bind('propertychange keyup input paste focus blur', function() {
            if($(this).val() == '') $img.hide();
            else $img.show();
        });
        
        $(function() {
            if($input.val() != '') $img.show();
        });
    }
})(jQuery);



<script type="text/javascript" src="jquery.iwtInputClearButtonController-0.9.0.js"></script>
<script type="text/javascript">
        $(function() {
            $('input[name="keyword"]').iwtInputClearButtonController({right:7});
            $('input.search_box').iwtInputClearButtonController({position:'absolute', appendTarget:$('body'), top:10, left:70});
        });
</script>





Posted by incree

2013/08/09 10:26 2013/08/09 10:26
, , ,
Response
0 Trackbacks , 0 Comments
RSS :
http://www.incree.com/tc/incree/rss/response/254

Trackback URL : 이 글에는 트랙백을 보낼 수 없습니다

window.open('printSearchList.html?param=' + encodeURIComponent('한글 '),'popup','scrollbars=yes,width=645,height=600,resizable=yes')


//팝업창.html (utf-8이 아닐 경우만)

$param = iconv('utf-8', 'cp949//IGNORE', $param);

Posted by incree

2013/07/03 21:39 2013/07/03 21:39
, , ,
Response
0 Trackbacks , 0 Comments
RSS :
http://www.incree.com/tc/incree/rss/response/243

Trackback URL : 이 글에는 트랙백을 보낼 수 없습니다


Notices

Archives

Authors

  1. incree

Recent Trackbacks

Calendar

«   2017/08   »
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    

Site Stats

Total hits:
418390
Today:
2
Yesterday:
119