'BooksReview'에 해당되는 글 10건

 한번만 실행되는 함수 _.once()

1. _.once()

- 고차함수로 함수를 한 번만 실행 시킨다

1) 구현

_.once = function(func){ var flag, result; return function(){ if(flag){return result}; flag = true; return result = func.apply(this, argument); } } var hi = _.once(function(){console.log('hi')}); hi(); //hi hi();//실행안됨

_.identity(), _.values() 구현

1. _,identity()

- 쓸모없어 보이는 함수

- 받은 파라미터를 바로 반환 한다.

- 단독 사용에 의미가 없지만 여러 함수들과 합쳐져 의미를 만든다.

1) 구현

_.identity = function(v){ return v; }

2. _.values()

- 객체의 값만을 array 형태로 출력한다.

- _,map(), _.identity() 가 사용되었다

1) 구현

_.values = function(list){ return _.map(list, _.identity); } console.log(_values({id:5, name:'je'}); //[5,'je']  

3. _.keys()

- values의 반대로 객체의 키 값만을 배열로 출력한다

1) 구현

_args1 = function(a,b){ return b; } _.args0 = _,identity; _,keys = function(list){ return _.map(list, _.args1); }  

_,map(), getLength(), isArrayLike() 구현

1. getLength()

- data.length 값을 측정할 때 'length' of undefined 라는 오류를 피할 수 있다.

1) 일반적인 상황 에러

function fun(data){ for(var i = 0; i<data.length; i++){} } fun(undefined); //Cannot read property 'length' of undefined

- 주석과 같은 아래 발생

2) getLength() 함수 적용

function getLength(list){ return list == null ? undefined : list.length; } function getLength(list){ return list == null ? void 0 : list.length; } function fun(data){ for(var i = 0; i<getLength(data); i++){} } // 0<undefinded 이므로 false 반환  

- false를 반환 하므로 for문이 동작하지 않는다.

2. isArrayLike()

- 자바스크립트의 객체는 4가지가 있다. [], {}, arguments, ArrayLike 

1. [] var array = [1,2]; 2. {} var object = {name:'kyle', age : 25} 3. arguments var arguments = function(){ return arguments; }(1,2,3) 4. ArrayLike var $div = $('div'); var object = { length:3} object[0] = 1, object[1]=2 var string = "hi"  

- ArrayLike 를 판단한다

var MAX_ARRAY_INDEX = Math.pow(2,53) -1 var isArrayLike = function(list){ var length = getLength(list); return typeof length == 'numbe'r && length >= 0 && length <= MAX_ARRAY_INDEX; }; //TRUE OR FALSE  

3. _.map()

- underscore.js 의 map()를 구현한다.

_.map = function(data, iteratee){ var new_list = []; if(isArrayLike){ for(var i = 0; i<data.length; i++){ new_list.push(iteratee(data[i], i, data)); } }else{ for(var key in data){ if(data.hasOwnProperty(key)){ new_list.push(iteratee(data[key],key, data)); } } } return new_list; } _.map([1,2,3], function(v){ return v * 2 }); //[2,4,6] _.map({a:3, b:2, c:1}, function(v){ return v * 2 }); //[6,4,2]  

- array 계열인지 object 계열인지 판별하여 for 혹은 for in 을 구현한다.

가상요소, 가상클래스

1. 가상 요소, 가상 클래스란?

1) 가상 클래스(css 2.1 지원)

- :link //방문하지 않았던 링크 - :visited //방문했던 링크 - :hover // 마우스 올린요소 - :focus //포커스를 받은 요소 ..... h1:hover{ font-size :1px}

- 문서에 클래스를 추가한 것처럼 동작한다

- CSS3 에 많은 클래스가 추가되었다.

2) 가상 요소(css 2.1  지원)

- ::first-line - ::first-letter ..... h1::first-letter {font-size : 1px;}  

- 문서에 요소를 추가한 것처럼 동작한다.

- 2.1 이후 버전에서 앞의 문자 (:) 하나만 사용해도 된다.

2. 예제

//가상요소 사용 <h1>Hello World</h1> h1::first-letter {font-size : 25px;} //일반사용 h1 first-letter{font-size: 25px;} <h1><first-letter>H</first-letter>elloWorld</h1>  

- HelloWorld