ShowModalDialog -> 부모창 제어 X

ShowModalessDialog -> 부모창 제어 O

[모달창 -> 부모창 접근]

-> 모달창에서 parent.window.dialogArguments.document

[부모창 -> 모달창 접근]

-> 모달창 띄울 때 전역 변수 생성

var winObj = null;

function popupWinmodal(){

var winObj = '모달 및 모달리스 오픈.';

}

-> 부모창에서 winObj.document

다만 부모창에서 접근 할 경우 id를 부여해서 속성에 접근하고 style, display 등의 기본적인 몇가지 함수를 사용할 수 없음.

'부모창 -> 모달창[iframe] -> ifrmae 안의 문서

[ 모달 및 모달리스 폼값 post 방식으로 자신으로 전속 ]

<head> 와 </head> 사이에 <base target='_self' /> 선언 or ...

window.name = '이름' 선언하고 폼 타겟을 self로 하던가...

 

 

ex) opener

A.html

var params = [1, 2];

var returnVal = window.showModalDialog('popup.html', dialogLeft : 0px; edge : sunken; center=Yes; help : No; resizable : No; status : No;');

var params = window.dialogArguments;

 

 

B.html

var param1 = params.param1;

var param2 = params.param2;

window.returnValue = [param1 , param2];

 

--- 확인 해봐야함.

설정

트랙백

댓글

자식 -> 부모

A.html

function modal_pop(){

retVal = window.showModalDialog("B.html", window, "옵션");

alert(retVal);

}

B.html

function set_retValue(){

var result = "잘 생겼다 잘생겼다";

window.returnValue = result;

}

<body onUnLoad="set_retValue()">

 

 

부모 -> 자식

A.html

var test1 = '123'; var test2 = '234';

window.open('B.html?name=' + test1 + '&hobby=' + test2, "페이지 별칭", "옵션");

 

B.html

function getParameter(p){

if(p) r = location.search.match(new RegExp('[&!]' + p + '=(.*?)(&|$)'));

return r && r[1] ? r[1] : null;

}

 

alert(getParameter('name')); alert(getParameter('hobby'));

'J > Javascript' 카테고리의 다른 글

Script async와 defer  (0) 2014.03.19
ShowModal, ShowModaless Dialog  (0) 2014.03.18
Form안 Json 만들기  (0) 2014.03.18
클로져 활용법  (0) 2014.03.18
javascript arguments를 array로 변환하기  (0) 2014.03.16

설정

트랙백

댓글

var obj = null;

try {

if(this[0].tagName && this[0].tagName.toUpperCase() == 'FORM'){

var arr = this.serializeArray();

if(arr) {

obj = {};

jQuery.each(arr, function(){ obj[this.name] = this.value; });

}

}

} catch(e) {

alert(e.message);

} finally {}

return obj;

 

참고

json 형태는 이렇다.

{ "pe" : [{"f"" : "value" }] }

설정

트랙백

댓글

클로져 활용법

J/Javascript 2014. 3. 18. 15:14

function makerSize(size){

return function(){

document.body.style.fontSize = size + 'px';

};

}

var size12 = makerSize(12); var size14 = makerSize(14); var size16 = makerSize(16);

 

document.getElementById('size-12').onclick = size12;

document.getElementById('size-14').onclick = size14;

document.getElementById('size-16').onclick = size16;

 

<a href="#" id="size-12"> 12 </a>

<a href="#" id="size-14"> 14 </a>

<a href="#" id="size-16"> 16 </a>

 

클로져 : 두개의 이루어진 특별한 오브젝트이다.

첫 번째는 함수이고 두 번째는 그 함수가 만들어진 환경이다.

그 함수가 만들어진 환경을 함수가 만들어질 때 사용할 수 있었던 변수들로 이루어진다.

 

function makefunc(){

var name = "Mozilla";

function displayName(){

alert(name);

}

return displayName;

}

이 경우에는 displayName 함수와 "Mozilla" 문자열을 포함하는 클로져이다.

 

var counter = (function(){

var privateCounter = 0;

function changeBy(val){

privateCounter += val;

}

return { increment : function(){ changeBy(1); },

decrement : function(){ changeBy(-1); },

value : function(){ return privateCounter; } };

});

 

자주 하는 실수 : 클로져

<p id="help"> Help </p>

<p> E - mail : <input type='text' id='email' name='email'> </p>

<p> Name : <input type='text' id='name' name='name'> </p>

<p> Age : <input type='text' id='age' name='age'> </p>

 

function showHelp(help){

document.getElementById('help').innerHTML = help;

}

function setupHelp(){

var helpText = [{'id' : 'email', 'help' : 'e-mail'}, {'id' : 'name', 'help' : 'name'}, {'id' : 'age', 'help' : 'age'}];

for(var i=0; i<helpText.length; i++){

var item = helpText[i];

document.getElementById(item.id).onfocus = function(){ showHelp(item.Help); }

}

}

setupHelp();

 

이 코드는 제대로 실행되지 않는다.

이유는 onfocus 이벤트에 지정한 함수가 클로져라는 것이다.

이 클로져는 함수 본체와 setupHelp 함수의 스코프로 이루어져 있다.

세개의 클로져가 만들어졌지만 각 클로져는 하나의 환경을 공유한다.

반복문이 끝나고 onfocus 콜백이 실행될때, 콜백의 환경에서 item 변수는 (세개의 클로져가 공유한다.)

helpText  리스트의 마지막 요소를 가리키고 있을 것이다.

여러개의 클로져를 이용해서 문제를 해결 할 수 있다.

 

function showHelp(help){

document.getElementById('help').innerHTML = help;

}

function makeHelpCallback(help){

return function(){ showHelp(help); };

}

function setupHelp(){

for(var i=0; i<helpText.length; i++){

var item = helpText[i];

document.getElementById(item.id).onfocus = makeHelpCallback(item.help);

}

}

setupHelp();

 

성능 관련해서

클로져가 필요하지 않은 작업인데도 함수 안에 함수를 만드는 것은 스크립트 처리 속도와 메모리 사용량 모두에서 현명한 선택이 아니다.

예를 들면 새로운 오브젝트나 클래스를 만들 때 오브젝트 생성자에 메소드를 정의하는 것 보다 오브젝트의 프로토타입에 정의하는 것이 좋다.

오브젝트 생성자에 정의하게 되면 생성자가 불릴 때 마다 메소드가 새로 할당되기 때문이다.

 

function MyObject(name, message){

this.name = name;

this.message = message;

this.getName = function(){ return this.name; };

this.getMessage = function(){ return this.message; };

}

  ||

  V

function MyObject(name, message){

this.name = name;

this.message = message;

}

 

MyObject.prototype = {

getName : function(){

return this.name;

},

getMessage : function(){

return this.message;

}

};

 

or

 

function MyObject(name, message){

this.name = name;

this.message = message;

}

MyObject.prototype.getName = function(){ return this.name; };

MyObject.prototype.getMessage = function(){ return this.message; };

위의 두 예제는 상속된 속성은 모든 오브젝트에서 사용될 수 있고 메소드 정의가 오브젝트 생성될 때마다 일어나지 않는다.

* 글로벌 변수는 delete로 지울 수 없다.

ex) // global variable;

var a = 1; // Don't Delete is set

delete a; // false

a; // 1

// normal function;

function f(){} // Don't Delete is Set

delete f; // false

type of f; // "function"

// ressigning doesn't help;

f  = 1;

delete f; // false

f; // 1

명기된 속성은 지울 수 있다.

var obj = {x : 1};

obj.y = 2;

delete obj.x; //true

delete obj.y; // true

obj.x; // undefined

obj.y; // undefined

 

설정

트랙백

댓글

function -> arguments는 array형태의 객체이기는 하지만 array 아님.

이러한 arguments를 array로 변환해주는 방법이 있다.

Array.Prototype.slice를 이용하면 arguments를 Array로 변환해준다.

 

var args = Array.prototype.slice.call(arguments);

array로 변환해줌으로서 얻을 수 있는 장점은 apply()의 두 번째 넘겨지는 인자(Array)를 전달 해줄 수 있는 장점이 생김. ( .apply(this, arguments) -> arguments는 배열을 받아야한다. )

설정

트랙백

댓글

Function.Prototype.delay = function(seconds){

// Remove the seconds from the parameters to pass the this function.

var args = [].slice.call(arguments, 1);

// call this function with the specified parameters in the specified amount of seconds.

var fnThis = this;

return setTimeout(function(){

fnThis.apply(undefined, args);

}, seconds * 1000);

}

 

ex) function showMsg(msg){ alert(msg); }

// In five seconds, show the appropriate message.

var timeoutID = showMsg.delay(5, &quot;Five seconds have passed. &quot;);

설정

트랙백

댓글

FileSystemObject 사용하면 됩니다.

관련 url : http://www.webreference.com/js/column71/


<html>
  <head>
    <script>
      function saveText() {
        var txtsrc = document.all["ta"].value;
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        fso.CreateTextFile("c:\\test.html",true);
        var newFileObject = fso.GetFile("c:\\test.html");
        var text = newFileObject.OpenAsTextStream(2,0);
        text.Write(txtsrc);
        text.Close();
      }
    </script>
  </head>
  <body>
    <textarea name=ta cols=50 rows=10></textarea>
    <br><input type=button value=save onclick="saveText();">
  </body>
</html>

 

javascript 변수를 jsp에서 받으려면 submit이 일어나야 합니다.

 

설정

트랙백

댓글


jsCalendar - Stack Overflow (v8)

Postby paul.basher » Sat Feb 12, 2011 9:03 pm

Hi
I have just installed version 8 and I am working with a project crated in version 7
When using the jsCalendar extension to input a date field this works fine except when tring this to add a new record in the new Grid Add Master detail option
In this mode the calendar does not exit the screenm when a date is selected.
In Google Chrom nothin happens
In Internet Explorer 8 I get a stack overflow error at line 1879 error message
Please can you advise
Thanks, Paul
paul.basher

Re: jsCalendar - Stack Overflow (v8)

Postby Webmaster » Tue Feb 15, 2011 10:27 am

The jsCalendar modify the JavaScript Date object , but the calendar.js cannot be included more than once or it will repeatedly set up the Date object.

You can fix the calendar.js as follows:

if (!Date.prototype.__msh_oldSetFullYear) { // add this line
Date.prototype.__msh_oldSetFullYear = Date.prototype.setFullYear;
Date.prototype.setFullYear = function(y) {
var d = new Date(this);
d.__msh_oldSetFullYear(y);
if (d.getMonth() != this.getMonth())
this.setDate(28);
this.__msh_oldSetFullYear(y);
};
} // add this line

또는

if (!Date.prototype.__msh_oldSetFullYear) { // add this line 내가 전에 했을 땐 이 부분이 잘 됬다.
Date.prototype.__msh_oldSetFullYear = Date.prototype.setFullYear;
} // add this line
Date.prototype.setFullYear = function(y) {
var d = new Date(this);
d.__msh_oldSetFullYear(y);
if (d.getMonth() != this.getMonth())
this.setDate(28);
this.__msh_oldSetFullYear(y);
};



Webmaster
Posts: 18139
Joined: Fri Aug 06, 2004 5:59 pm
Location: http://www.hkvstore.com/

Re: jsCalendar - Stack Overflow (v8)

Postby paul.basher » Wed Feb 16, 2011 6:16 am

Thanks, I have amended as you described and everything works fine

'J > Javascript' 카테고리의 다른 글

클로져 활용법  (0) 2014.03.18
javascript arguments를 array로 변환하기  (0) 2014.03.16
JavaScript - Prototype's delay() Function  (0) 2014.03.16
javascript 파일 저장하기  (0) 2012.12.25
섹시한 자바스크립트 코딩 컨벤션  (0) 2012.03.02

설정

트랙백

댓글


자바스크립트를 코딩함에 있어서 그동안 습득했던 문법 규칙, 팁, 노하우, 등을 이곳에 정리합니다. 여기에서 다루는 내용은 읽는 사람에 따라서는 저수준 리팩토링일 수 있고, 성능 최적화일 수도 있고, 가독성을 높이는 동시에 청결함을 유지하는 것일 수도, 그리고 무슨 소리를 하는건지 모를수도 있습니다. 지금부터 최근 인기몰이 중인 몇몇 오픈소스 프로젝트의 소스코드들을 예로 들어 가면서 코딩 트랜드를 파악하고 학습하는 시간을 가져봅시다.


알아볼 수 있게

이것은 개발자로써 근본이 되어야 하는 관습입니다. 가독성이 높으면 협업에 있어서 야기되는 혼란을 미연에 방지하는 효과가 있기 때문에 일부 회사나 단체에서는 개발자들이 지켜야 할 가이드에 포함하기도 합니다. 참고로 구글의 자바스크립트 스타일 가이드에서는 세미콜론을 찍는 것 조차도 왈가왈부하고 있습니다. 하지만 우리 실정은 그렇지 않죠? 이러한 규칙이 있을리 만무합니다. 그래서 여러 경험을 통해 얻어낸 자신만의 규칙을 따르거나 개발도구 또는 어떠한 소스로부터 얻어진 규칙을 따라야 합니다. 암묵적으로 지켜지는 규칙들을 대략 읇어보면, 클래스의 첫 문자는 대문자로 구분하고, 전역에서 참조되는 변수는 전부 대문자로 작성하거나 다른 문자를 사용하여 구분하고, 내부에서만 사용되는 메서드나 변수는 언더스코어(_)를 첫 문자로, 괄호와 브레이스 사이는 띄어쓰거나 줄을 변경하거나, 80 또는 160 캐릭터, 2 또는 4 또는 8 탭사이즈 등 수없이 많습니다. 이것들에 대한 자세한 내용을 여기에서 다루지는 않겠습니다.

의미있는 정의

많은 사람들이 자바스크립트(정확게는 DOM스크립트)를 좋아하는 이유 중 하나는 짜놓은 코드를 그냥 읽는 것만으로도 쉽사리 이해할 수 있다는 것입니다. 의미있는 이름을 사용하는 것으로 설명될 수 있는 것은 의외로 많거든요. 해당 함수가 어떠한 일을 처리하는지, 해당 변수가 단수인지 복수인지 등을 주석문 없이도 표현할 수 있습니다. 여기에 바보같은 예를 하나 들어보겠습니다.

var foo = document.getElementById('foo'); // get element by id form DOM
var bars = document.getElementsByClassName('bar'); // get elements by class name form DOM

누군가가 작성한 코드에서 위와 같은 주석을 발견했다면 분노의 삭제질을 작렬하면서 마음속으로는 죽여버리고 싶다는 생각이 들지도 모릅니다. 이제 모범 사례들을 차근차근 살펴보면서 안구를 정화해 봅시다. 다음은 Node.JS 모듈인 Socket.IO의 클라이언트-사이드에 사용된 스크립트의 일부분입니다.

  /**
   * Create a new `Socket.IO client` which can establish a persistent
   * connection with a Socket.IO enabled server.
   *
   * @api public
   */

  function Socket (options) {
    this.options = {
        port: 80
      , secure: false
      , document: 'document' in global ? document : false
      , resource: 'socket.io'
      , transports: io.transports
      , 'connect timeout': 10000
      , 'try multiple transports': true
      , 'reconnect': true
      , 'reconnection delay': 500
      , 'reconnection limit': Infinity
      , 'reopen delay': 3000
      , 'max reconnection attempts': 10
      , 'sync disconnect on unload': true
      , 'auto connect': true
      , 'flash policy port': 10843
    };

    io.util.merge(this.options, options);

Socket이라는 클래스를 정의하는 부분에서 초기화 옵션을 받는 부분으로 this.options에 정의된 코드들을 살펴보면 주석으로나 사용될 문장들이 식별자(키)로 작성된 것을 확인할 수 있습니다. 이것은 잘 만들어진 래시피와도 같습니다. 다음 예제는 Socket.IO의 서버-사이드 테스트 소스의 일부분입니다.

module.exports = {

  'test that protocol version is present': function (done) {
    sio.protocol.should.be.a('number');
    done();
  },

  'test that default transports are present': function (done) {
    sio.Manager.defaultTransports.should.be.an.instanceof(Array);
    done();
  },

  'test that version is present': function (done) {
    sio.version.should.match(/([0-9]+)\.([0-9]+)\.([0-9]+)/);
    done();
  },

  'test listening with a port': function (done) {

헐~ 테스트 항목에 대한 설명이 그냥 메서드 이름으로 작성되었고 테스트를 수행하는 코드는 하나의 온전한 문장이 체인으로 연결된 정적인 네임스페이스들입니다. 멋지지 않나요?

단수/복수 과거/현재

변수를 정의할 때 이름을 단수와 복수 그리고 과거와 현재를 구분하여 정의하면 가독성도 좋아지고 여러모로 편리합니다. 배열과 같은 하나 이상의 아이템을 가진 데이터 형식을 정의할 때에는 복수로 명명합니다. 다음 코드는 Cloud9의 클라이언트-사이드 코드 중 컨텐츠 마임타입(MIME type)들을 정의한 일부분과 한 아이템을 동적으로 픽업하는 예제입니다.('...'은 중략을 의미 함)

  var contentTypes = {
    "js": "application/javascript",
    "json": "application/json",
    "css": "text/css",
    "less": "text/css",
    "scss": "text/x-scss",
    "sass": "text/x-sass",

    ...

    "md": "text/x-markdown",
    "markdown": "text/x-markdown"
  };

  ...

  var fileExt = file.getAttribute("name").split(".").pop();
  var customType = contentTypes[fileExt];

그리고 과거와 현재의 뜻을 가진 변수는 어떠한 지표(플래그)를 의미하는 용도로 사용되는 경우가 많습니다. 다음 코드는 jQuery 내부에서 사용되는 함수인 _Deferred에서 과거와 현재를 구분한 변수명을 사용하는 예제입니다.

jQuery.extend({
  // Create a simple deferred (one callbacks list)
  _Deferred: function() {
    var // callbacks list
      callbacks = [],
      // stored [ context , args ]
      fired,
      // to avoid firing when already doing so
      firing,
      // flag to know if the deferred has been cancelled
      cancelled,
      // the deferred itself
      deferred  = {

        // done( f1, f2, ...)
        done: function() {
          if ( !cancelled ) {
            var args = arguments,
              i,
              length,
              elem,
              type,
              _fired;
            if ( fired ) {
              _fired = fired;
              fired = 0;
            }

작은 따옴표가 기본

자바스크립트에서 문자열(String)을 처리할 때 큰 따옴표(")와 작은 따옴표(') 중 어느것을 사용할지 고민되는 경우가 있습니다. 작은 따옴표(Single quotes)로 작성하는 것을 기본으로 하세요. HTML을 작성할 때에는 큰 따옴표가 기본으로 사용되기 때문에 백슬래시(\)를 이용하여 일일이 이스케이프(Escape)하는 상황이 발생하면 가독성을 크게 떨어트립니다. 다음은 HTML에 사용할 앵커를 자바스크립트로 작성하는 예입니다.

var anchor = '<a href="/' + foo + '.html">' + foo + '</a>'; // correct

var anchor = "<a href=\"/" + foo + ".html\">" + foo + "</a>"; // incorrect

var anchor = "<a href='/" + foo + ".html'>" + foo + "</a>"; // nonsense

띄어쓰기

일반적으로 다음과 같은 띄어쓰기 규칙을 따르면 가독성이 높아집니다.
  • 쉼표(,): 전: 0, 후: 1
  • 괄호('(', ')'): 전: 0, 후: 0
  • 세미콜론(;): 전: 0, 후: 1
  • 산술 연산자(+, -, *, /, % ...): 전: 1, 후: 1
  • 관계 연산자(==, ===, !=, !==, <, >, <=, >= ...): 전: 1, 후: 1
  • 1진 연산자(++, --): 전: 0, 후: 0
  • 할당(a=b): 전: 1, 후: 1
  • 논리 연산자(&&, ||): 전: 1, 후: 1
  • 키-밸류 연산자({'a':'b'}): 전: 1, 후: 1
  • 인라인 주석(//): 후: 1

파일 해더 작성하기

자바스크립트 파일의 최상단에 해더를 작성하여 대략적인 정보를 제공해야합니다. 뭐하는 녀석인지, 어떤 종속성(Dependency)이 있는지, 어떻게 사용하는지, 버전, 라이센스, 작성자, 사이트 링크, 등을 기입합니다. 최근에는 JSDoc 포맷으로 작성하는 경향이 있습니다. 다음은 Cloud9의 플랫폼 코어(apf)에 해당하는 class.js 파일의 해더입니다.

/**
 * All elements that implemented this {@link term.baseclass baseclass} have
 * {@link term.propertybinding property binding},
 * event handling and constructor & destructor hooks. The event system is 
 * implemented following the W3C specification, similar to the 
 * {@link http://en.wikipedia.org/wiki/DOM_Events event system of the HTML DOM}.
 *
 * @constructor
 * @baseclass
 *
 * @author      Ruben Daniels (ruben AT ajax DOT org)
 * @version     3.0, beta
 * @since       0.8
 *
 * @event propertychange Fires when a property changes.
 *   object:
 *     {String} name          the name of the changed property
 *     {Mixed}  originalvalue the value it had before the change
 *     {Mixed}  value         the value it has after the change
 *
 */

들여쓰기와 줄 변경하기

사실 자바스크립트는 들여쓰기와 줄변경을 무시해도 작동하는 데에는 별 문제가 없습니다. 이것들은 단순히 코드의 가독성을 위한 행위들로 여겨도 무방합니다. 일반적으로 블럭 안쪽에 위치한 문장에 들여쓰기를 하지만 jQuery와 같은 라이브러리의 도움을 받는 경우 체이닝(Chaining) 스타일 코딩에서는 체인 단위로 줄을 변경하고 셀렉션 포인트가 변경되는 시점에 들여씀으로서 훨씬 수월하게 코드를 읽을 수 있습니다.

  $(form)
    .prevAll('div.black:first')
    .html(json.timeLabel)
      .prevAll('div.timeline:first')
        .children('div')
        .css('width', json.gauge + '%')
        .end()
      .end()
    .end()
    .replaceWith('<div class="extend-time"><p>' + json.optionLabel + '</p></div>');

자바스크립트에서 여러 요소로 구성된 HTML을 파셜(Partial)하는 경우 다음과 같이 배열을 이용하여 들여쓰기하면 가독성이 높아집니다. 물론, 꼭 배열을 사용해야 하는 것은 아니지만 산술 연산자를 이용하는 것 보다는 성능이 좋기 때문입니다. 아래는 jQuery를 이용하여 인플레이스 에디터(in-place editor)를 구현하는 코드의 일부분입니다.

  $(el)
    .parent()
    .before([
      '<form method="post" action="' + el.attr('href') + '">',
        '<input type="hidden" value="' + el.attr('id') + '" name="id">',
        '<input type="text" value="" name="key">',
        '<textarea name="value"></textarea>',
        '<p>' + beautify(new Date) + '</p>',
      '</form>'
    ].join('\n'))
      .prev()
        .find('input[type=text]')
        .focus();

변수를 연속적으로 선언할 때 var를 생략하고 쉼표(,)로 구분하여 선언하는 것이 효율적입니다.(이것에 대해서는 잠시 후에 다루도록 하겠습니다.) 이 때 보통 줄바꿈을 하는데, 요즘은 쉼표를 앞쪽에 작성하는 것이 유행하고 있습니다. 다음은 Node.JS용 MVC 프레임웍인 Express의 서버-사이드 소스에서 모듈을 가져오는 부분입니다.

/**
 * Module dependencies.
 */

var connect = require('connect')
  , HTTPSServer = require('./https')
  , HTTPServer = require('./http')
  , Route = require('./router/route')

위 처럼 쉼표를 앞에 작성하면, 아이템을 추가하거나 주석처리하거나 삭제할 때 용이합니다. 단적으로 앞서 소개한 예제 코드들을 비교해 보면 '의미있는 정의'의 Socket 클래스 소스에 사용된 this.options와 '단수/복수 과거/현재'의 contentTypes 소스에서 맨 마지막에 위치한 아이템을 삭제하거나 주석 처리한다고 가정할 때 문법 오류가 발생하지 않는 코드는 쉼표가 전방에 배치된 쪽입니다.


코드를 줄이자

대부분의 개발자들은 적은 량의 코드로 많은 일을 시키려는 경향이 있습니다. 이것은 과하면 독이되고 안하면 병신소리 듣습니다. 그래서 적절하게 코드를 경량화하는 것이 좋습니다. 적절하다는 의미는 가독성을 해치지 않는 범위 정도로 해석하면 되겠네요. 제 경우 다른 곳에서 가져온 프로그램을 자신의 것으로 소화할 필요가 있을 때 가장 처음으로 수행하는 작업이 바로 경량화입니다. 중복성이거나 불필요한 부분을 제거 및 교정하고 동시에 가능한 한 최대로 경량화하면서 소스의 전반을 이해합니다. 이 작업을 거치고 나면 원본 소스가 가진 라인 수 보다 절반 이하로 줄어드는 경우가 다반사입니다.(그렇다고 서드파티 라이브러리를 함부로 뜯어 고치자는 의미는 아닙니다.)

변수 할당

앞서 잠시 언급한 바와 같이 변수를 연속해서 선언해야하는 경우 중복으로 작성되는 var를 생략할 수 있습니다. 다음은 Smails의 서버-사이드 소스 중 Socket.IO를 초기화하는 부분입니다.

/**
 * Socket server.
 */
var io = require('socket.io').listen(smails.port)
  , sockets = io.sockets.sockets
  , clog = require('clog')
  , dgram = require('dgram');

io.configure(function () {
  io.enable('browser client minification');
  io.enable('browser client etag');
  io.set('log level', 2);

순차적이고 동기식으로 발동하기 때문에 첫 라인에서 선언한 io를 두번째 라인에서 바로 접근해도 문제되지 않습니다.

스위치가 싫어요

여러 자바스크립트 문법들 중에서도 가장 가독성을 해치는 것이 바로 스위치 문입니다. 한 문장임에도 두 단계의 들여쓰기 깊이를 가지기에 꼭 필요한 상황에서만 사용하는 것이 좋습니다. 보통 if ... else ... 문이 여러차례 반복되는 문장을 스위치로 리팩토링하는 경우가 많은데, 아래와 같은 단순히 변수를 할당하려는 목적이라면 스위치 보다는 객체 사전을 이용하는 방법이 더 효율적이고 가독성도 높일 수 있습니다.

function getLabel(module) {
  var label;
  witch(module) {
    case 'todo' :
      label = '할일';
      break;
    case 'calendar' :
      label = '달력';
      break;
    case 'note' :
      label = '공책';
      break;
  }
  return label;
}

getLabel('todo'); //=> '할일'

function getLabel(module) {
  return {
      todo: '할일'
    , calendar: '달력'
    , note: '공책'
  }[module];
}

getLabel('todo'); //=> '할일'

3항 연산과 조건부 할당

다음은 3가지 코드에 작성된 value는 같은 결과값를 가집니다.
  var value;
  if (n) {
    value = n;
  } else {
    value = 1;
  }

  // equal next

  var value = n ? n : 1;

  // equal next

  var value = n || 1;

조건부 함수 호출

callback이 있는 경우 실행하라는 조건부 호출은 다음과 같이 사용될 수 있습니다.
  if (callback) {
    callback();
  }

  // equal either

  callback && callback();

정의와 동시에 사용

아래 코드는 정의와 동시에 push메서드를 호출하고 있습니다.
  (dep.using || (dep.using = [])).push(extension);

무의미한 변수 선언

단순 참조용으로 선언된 변수는 생략할 수 있습니다.
  var self = this;
  $.ajax({
    type: self.method,
    url: self.action,
    success: function(text){
      $('#article').html(text)
    }
  });

  // to be

  $.ajax({
    type: this.method,
    url: this.action,
    success: function(text)
      $('#article').html(text);
    }
  });


더 빠르게

보다 더 빠르게 작동하는 코드를 원하시죠? 지금부터 소개할 내용은 기존의 코드를 재작성하여 속도를 향상시키는 방법들입니다. 성능 최적화에서 가장 중요하게 여겨야 하는 것은 '측정'입니다. 측정없는 최적화는 단지 시간 낭비일 뿐이라는 사실을 기억하세요. 속도 향상을 위한 몇가지 기본적인 팁은 가급적 네이티브 코드를 사용할 것(특히 반복문), try/catch는 속도 저하 요인이 될 수 있으니 지양할 것, 캐시를 잘 활용할 것 등이 있습니다.

네이티브 코드 사용

코드의 사용성을 크게 향상시키는 자바스크립트 라이브러리들이 성행하면서 개발 생산성이 좋아졌고 초심자들의 진입장벽도 많이 허물어졌습니다. 분명히 좋은 현상이긴 합니다만, 네이티브 코드를 이해하지 못하면 결코 최적화된 애플리케이션을 만들어낼 수 없습니다.(참고로 구글은 서드파티 라이브러리에 의존하여 개발하는 것을 그리 달갑게 여기지 않습니다.)

간략한 예를 들어 보겠습니다. jQuery에서 $.each를 이용한 반복문 처리 보다는 for(…) 문을 사용하는 것이 빠릅니다. Prototype.js의 bind 메서드를 사용하는 것 보다. Function.call 또는 Function.apply를 사용하는 것이 빠릅니다.

문자열 결합

문자열을 결합할 때 산술연산을 이용하는 것 보다는 배열로 작성하고 join으로 결합하는 것이 더 빠릅니다.
// Instead of this...
var result = 'a' + 'b' + 'c' + 'd';

// This is much faster:
var result = ['a', 'b', 'c', 'd'].join('');

캐시 효과

반복문 안에서 배열 길이를 추가 정의하는 것만으로 더 빠르게 작동합니다.
// Instead of this...
function nodeJam(){
  nodes = document.getElementsByTagName('P');

  for (var i = 0; i < nodes.length; i++) {
    nodes[i].innerHTML += 'test';
  }
}

// This is much faster
function nodeJam(){
  nodes = document.getElementsByTagName('P');

  for (var i = 0, len = nodes.length; i < len; i++) {
    nodes[i].innerHTML += 'test';
  }
}

계층 구조를 가진 함수를 반복해서 호출할 때 변수로 지정하면 더 빠르게 작동합니다.
// Instead of this...
function iterateOverMe(){
  for (var i = 0; i < 1000; i++){
    lorem.ipsum.dolor.sit(i);
  }
}

// This is much faster
function iterateOverMe(){
  var sit = lorem.ipsum.dolor.sit;

  for (var i = 0; i < 1000; i++){
    sit(i);
  }
}


DOM에 삽입하기 전에 먼저 계산하는 것으로 훨씬 더 빠르게 작동합니다.
// Instead of this...
function subTrees(){
  var ul = document.getElementById("myUL");

  for (var i = 0; i < 200; i++) {
    ul.appendChild(document.createElement("LI"));
  }
}

// This is much faster
function subTrees(){
  var ul = document.getElementById("myUL");
  var li = document.createElement("LI");
  var parentNode = ul.parentNode;

  parentNode.removeChild(ul);

  for (var i = 0; i < 200; i++) {
    ul.appendChild(li.cloneNode(true));
  }

  parentNode.appendChild(ul);
}

함수 속에서 또 다른 함수를 중첩(Nesting Functions)해서 사용하지 마세요. 함수안에 정의된 함수는 상위 함수가 호출될 때마다 내부 함수를 새롭게 생성하는 처리과정이 포함되기 때문에 성능이 떨어집니다.
// Instead of this...
function foo(a, b){
  function bar() {
    return a + b;
  }

  return bar();
}

var baz = foo(1, 2) // 3

// This is much faster
function foo(a, b){
  return bar (a, b);
}

function bar(a, b) {
  return a + b;
}

var baz = foo(1, 2) // 3

코딩 패턴

jQuery를 통해 자바스크립트에서 효율을 높이기 위한 코딩 패러다임을 제시한 존 레식씨가 선호하는 코딩 관습를 살펴보면 모듈 패턴(Module Pattern)이라는 것이 있습니다. 익명함수를 작성하고 즉시 실행하는 것으로 클로저(Closure)에 의해 "private static scope"가 제공되어 정적인 컨텍스트(Context)를 가질수 있게하는 검증된 자바스크립트 코딩 패턴입니다.

  (function($) {

    // do something...

  })(jQuery);

이것은 메모리에 등록된 식별자를 탐색하는 시간을 줄이고 전역 네임스페이스를 오염시키지 않으면서 서로다른 프로그램간의 간섭을 없앨수 있는 매우 좋은 방법입니다. 식별자를 검색하는데 비용이 줄어든다는 것은 곧 성능이 향상되는 것을 의미하며 마치 'with'를 사용하는 것과 같은 효과가 발생합니다. 다음 예제는 얼마전 작성한 Minimap 소스코드를 지면 관계상 재구성한 것입니다.(prototype.js에 기반하며 작동하는 코드 아님)

var Minimaps = (function(win, doc, undefined) {

  /*
   * Options.
   */
  var $options = {
        width: 100
      , height: 400
      , duration: 0.2
      , focusWidth: 0.5
      , focusHeight: 0.5
    }
    , $canvas
    , $context;

  /*
   * Initialize.
   */
  return function(options) {
    $options = $.extend($options, options);
    $canvas = new Element('canvas', {
        id: 'outline'
      , width: $options.width
      , height: $options.height
    });

    if (!($canvas instanceof HTMLElement)
       || $canvas.nodeName.toLowerCase() !== 'canvas')
      return console.error('Your browser does not support Canvas');

    doc.body.insert($canvas);

    this.version = '0.1.1';
    this.draw = draw;
    this.scroll = scroll;

    $context = $canvas.getContext('2d');

    Event.observe(win, 'load', draw);
    Event.observe(win, 'resize', draw);
    Event.observe(win, 'scroll', draw);

    draw();
  };

  /*
   * Core.
   */
  function scroll(event) {
    var x = event.clientX - $canvas.left
      , y = event.clientY - $canvas.top;

    scroll.ani && scroll.ani.state == 'running' && scroll.ani.cancel();
    scroll.ani = new Effect.Scroll(
      y / draw.scale - size.win.height * $options.focusHeight
    , x / draw.scale - size.win.width * $options.focusWidth
    , {
        fps: 100
      , duration: event.type == 'mousemove' ? 0 : $options.duration
    });
  }

  function draw() {
    var scaleX = $options.width / size.doc.width
      , scaleY = $options.height / size.doc.height;

    draw.scale = scaleX < scaleY ? scaleX : scaleY;

    $context.clearRect(0, 0, $canvas.width, $canvas.height);
    $context.scale(1 / draw.scale, 1 / draw.scale);
  }

  ...

})(window, document);

위 코드를 구글 Closure 컴파일러로 압축하면 다음과 같습니다.
var Minimaps=function(h,d){function g(e){var f=e.clientX-b.left,d=e.clientY-b.top;g.ani&&g.ani.state=="running"&&g.ani.cancel();g.ani=new Effect.Scroll(d/a.scale-size.win.height*c.focusHeight,f/a.scale-size.win.width*c.focusWidth,{fps:100,duration:e.type=="mousemove"?0:c.duration})}function a(){var e=c.width/size.doc.width,d=c.height/size.doc.height;a.scale=e<d?e:d;f.clearRect(0,0,b.width,b.height);f.scale(1/a.scale,1/a.scale)}var c={width:100,height:400,duration:0.2,focusWidth:0.5,
focusHeight:0.5},b,f;return function(e){c=$.extend(c,e);b=new Element("canvas",{id:"outline",width:c.width,height:c.height});if(!(b instanceof HTMLElement)||b.nodeName.toLowerCase()!=="canvas")return console.error("Your browser does not support Canvas");h.body.insert(b);this.version="0.1.1";this.draw=a;this.scroll=g;f=b.getContext("2d");Event.observe(d,"load",a);Event.observe(d,"resize",a);Event.observe(d,"scroll",a);a()}}(window,document);

제가 무엇을 말하고 싶은지 눈치 까셨나요? 네 그렇습니다. 저는 제가 만든 프로그램이 OO(object-oriented) 스럽게 작성된 클래스이면서 한 인스턴스로 작동되길 바랍니다. 그러나 코딩 스타일은 단순 행동 함수들로 구성된 전형적인 모듈 패턴이지만 초기화 함수를 반환하는 것으로 게으른 함수 정의 패턴(Lazy Function Definition Pattern)을 혼용하는 복합적인 모습입니다. 이러한 코딩은 여러가지 이점이 있습니다. 원하던 대로 인스턴스를 만들어 사용하는 동시에, 컴파일(압축)하기 좋은 구조를 가지며, 변수들을 자유롭게 포메이션할 수 있고, 행동에 따른 디자인 패턴으로 작성되기 때문에 이해하기 쉽습니다. 그리고 무엇보다도 졸라 빠릅니다.

설정

트랙백

댓글