기본 콘텐츠로 건너뛰기

1월, 2012의 게시물 표시

Array function - Iteration

이것만은 꼭 알고 이해하고 손에 익숙해두자. forEach : 배열의 갯수만큼 반복 map : return 값을 인자로 배열을 반환 reduce : return 값과 배열을 인자로 연산 some : return 이 하나라도 참이면 참을 반환 every : return 이 모두 참이면 참을 반환 sort : return 이 참인 기준의 순방향 정렬 filter : return 이 참인 것들의 배열을 반환 배열을 만들고 직접 돌려보고 느껴보자. reduce 로 sum, min, max를 한다던가 every 로 transaction처리를 한다던가 하는 걸 예로 들면 사고의 폭이 좁아질 수도 있으니 돌려보면서 현상을 관찰하는게 좋다. 기타 함수 concat : 배열들을 연결 indexOf : 인자의 위치를 반환 join : 인자로 배열들을 연결 slice : from<to 범위의 배열을 반환 splice : from에서 n개만큼 배열을 잘라내고 그 부분을 반환 push, pop : 배열의 뒷쪽에 넣고 빼기 unshift, shift : 배열의 앞쪽에서 넣고 빼기

requery 를 피하는 법

객체를 생성 후 생성한 객체를 다시 참조하는 패턴으로 $('div#mainContext').append('<div class="header"/>'); $('div.header').click(function() {   // do something }); 이런 식으로 흔히들 쓰는데 $('div.header') 를 도는 비용이 많이 드니 $('<div class="header"/>').appendTo('div#mainContext').click(function() {   // do something }); 으로 순서를 바꿔서 객체를 chaining으로 활용하자.

object-literal을 이용한 패턴

Object-literal은 아래처럼 new Object() 대신 var car = new Object(); car.goes = "far"; 심플하게 JSON인 var car = {goes: "far"}; 를 사용하는 패턴인데 $().ready(function() {   $('#submit').click(function() {     $('.container').slideUp(function() {       // do something     });   });   $('#navBar').bind('swipeleft', function() {      // do something   }); }); 무기명 함수를 사용할 경우 흔히 발생하는 콜백 패크맨 형태를 정리하는데 사용할 수 있다. 사용 방법은 간단하다. var app = {   onReady: function() {     $('#submit').click(app.onSubmit);     $('#navBar').bind('swipeleft', app.onSwipeLeft);   },   onSubmit: function() {     $('.container').slideUp(app.afterSlideUp);   },   afterSlideUp: function() {     // do something   },   onSwipeLeft: function() {     // do something   } }; $().ready(app.onReady); 콘솔 테스트나 유닛 테스트를 하기에도 편하고 가독성도 낫다.

Dijkstra's algorithm을 이용한 최단 경로 찾기를 javascript 로 구현해보았다.

http://en.wikipedia.org/wiki/Dijkstra's_algorithm 여기가 위키. 언제나처럼 소스는  http://jsbin.com/acatav/3/edit#javascript "최단경로 그까이꺼 대충 트리로 펼친 담에 올 합산한 비용이 젤 적은 놈 뽑아내면 되는거 아니야?" 라고 생각했다가 역시 검색이 최고. 나보다 멍청한 놈은 좀처럼 없다는 것이 진리. 알고리즘은 심플하다. '자신과 인접한 노드와 이제까지 탐색한 노드 중 가까운 놈만 남기고 다 지운다.'의 반복. node 에서 해보려면 맨 마지막 $('p')부분을 지워주시면 되겠다. 사용예는 다음과 같다. computePath(vertices, vertices[0]); vertices 중 0번째부터 출발하는 최단 경로를 계산해서 각 vertex별 previous 와 minDistance를 넣어준다. node.js 에서 바로 돌려볼 수 있는 소스는 다음과 같다. var vertex = function(param){   var name = '';   var edge = [];   var minDistance = 99999;   var previous = null;   name = name || param.name;   edge = edge || param.edge;   minDistance = minDistance || param.minDistance;   previous = previous || param.previous;   return {     "name" : name,     "edge" : edge,     "minDistance" : minDistance,     "previous" : previous   }; }; var ver

jQuery vs Native

http://sharedfil.es/js-48hIfQE4XK.html 내용. 맘에 들어서 퍼옴. 포인트는 querySelector 같은게 IE 에서 되면 뭐다러 jQuery selector를 쓰냐 forEach가 먹으면 뭐하러 귀찮게 $.each를 쓰냐. 이게 다 IE 때문이다. 그래서 jQuery 를 쓴다. jQuery JavaScript $(document).ready(function() { // code…}); document.addEventListener("DOMContentLoaded", function() { // code…}); var divs = $("div"); var divs = document.querySelectorAll("div"); var newDiv = $("<div/>"); var newDiv = document.createElement("div"); newDiv.addClass("foo"); newDiv.classList.add("foo"); newDiv.toggleClass("foo"); newDiv.classList.toggle("foo"); $("a").click(function() { // code…}) [].forEach.call(document.querySelectorAll("a"), function(el) { el.addEventListener("click", function() { // code… });}); $("body").append($("<p/>")); document.body.appendChild(document.createElement("p")); $(&quo