javascript code_javascript 기술을 작성할 때 주의해야 할 7가지 작은 세부 사항 요약

1. 코드 단순화
JavaScript에서 객체와 배열을 정의하는 것은 매우 간단합니다. 일반적으로 다음과 같이 작성되는 객체를 생성하려고 합니다.

복사 code 코드는 다음과 같습니다.

var car = new Object()
car.colour = '빨간색' ;
car.wheels = 4;
car.hubcaps = '회전'
car.age = 4;

다음과 같이 쓰면 같은 효과를 얻을 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var car = {

색상:'red',
바퀴:4,
　허브캡:'회전 ',
　age:4
}



다음은 훨씬 짧기 때문에 객체 이름을 반복해서 쓸 필요가 없습니다.

그 외에도 배열을 간결하게 작성하는 방법도 있습니다.

코드 복사 코드는 다음과 같습니다.

var movieThatNeedBetterWriters = new Array(

'Transformers','Transformers2', '아바타','인디아나 존스 4'
)



더 간결하게 작성하는 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다:

var movieThatNeedBetterWriters = [

'Transformers','Transformers2','Avatar','Indiana Jones 4'
]



배열에는 특별한 것이 있습니다. 연관 배열과 같습니다. 많은 코드가 다음과 같이 객체를 정의하는 것을 볼 수 있습니다:

코드 복사 코드는 다음과 같습니다:

< ;SPAN style="FONT-FAMILY: verdana, geneva">var car = new Array()

car['colour'] = 'red'
car['wheels) '] = 4;
자동차['hubcaps'] = '회전';
자동차['age'] = 4


미친, 혼동하지 마세요. "연관 배열"은 객체의 별칭일 뿐입니다.
코드를 단순화하는 또 다른 방법은 삼항 연산자를 사용하는 것입니다. 예:

코드 복사 코드는 다음과 같습니다. 다음: var 방향

if(x < 200){

방향 = 1; >} else {
direction = -1;
}



이 글을 대체하려면 다음 코드를 사용하세요.

코드 복사

코드는 다음과 같습니다.

JSON을 데이터 형식으로 사용
JSON 데이터 형식을 발명했습니다. 데이터를 저장하려면 기본 자바스크립트 방법을 사용하여 추가 변환 없이 복잡한 데이터를 저장할 수 있습니다. 예:

코드 복사

코드 var band = { "name":"The Red Hot Chili Peppers", "멤버":[

{

"이름":"Anthony Kiedis",
"역할":"리드 보컬"
},
{
"이름":" Michael 'Flea' Balzary",
"역할":"베이스 기타, 트럼펫, 백 보컬"
},
{
"name":"Chad Smith",
"역할" :"드럼, 타악기"
},
{
"이름":"John Frusciante",
"역할":"리드 기타"
}
],
"연도": "2009"
}



JSON을 JavaScript에서 직접 사용할 수도 있고 API에서 반환하는 형식으로도 사용할 수 있습니다. 많은 API, 예:

코드 복사

코드는 다음과 같습니다.

<script> <br>기능 맛있음(o){ <br>var out = '<ul>'; <br>for(var i=0;i<o.length;i ){ <BR>out = '<li><a href="' o [i].u '">' <br>o[i].d '</a></li>'; <br>} <br>out = '</ul>'; <br>document.getElementById('delicious').innerHTML = out; <br>} <br></script>

여기에서 Delicious의 웹 서비스를 호출하여 최신 북마크를 가져오고 JSON으로 반환합니다. 형식을 지정한 다음 순서가 지정되지 않은 목록으로 표시합니다.
기본적으로 JSON은 복잡한 데이터를 설명하는 가장 간단한 방법이며 브라우저에서 직접 실행됩니다. PHP에서 json_decode() 함수를 호출하여 사용할 수도 있습니다.
3. JavaScript 기본 함수를 사용해 보세요.
숫자 집합에서 최대 숫자를 찾으려면 다음과 같은 루프를 작성할 수 있습니다.

복사 코드 코드는 다음과 같습니다.

var 숫자 = [3,342,23,22,124 ];
var max = 0;
for(var i=0;iif(numbers[i] > max){
max = 숫자[ i];
}
}
alert(max);

실제로 동일한 기능을 반복 없이 수행할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var 숫자 = [3,342 ,23,22,124];
numbers.sort(function(a,b){return b - a});
alert(numbers[0]);

가장 간결하게 작성하는 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

Math.max(12,123,3,2,433,4) // return 433

Math.max를 사용하여 브라우저에서 지원되는 속성을 확인할 수도 있습니다.

code 코드는 다음과 같습니다.

var scrollTop= Math.max(
doc.documentElement.scrollTop,
doc.body.scrollTop
)

요소에 클래스 스타일을 추가하려면 원문은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

< SPAN style="FONT-FAMILY: verdana, geneva">function addclass(elm,newclass){
var c = elm.className;
elm.className = (c === '') ? c ' ' newclass;

while 더 우아한 작성 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

function addclass(elm,newclass) {
var 클래스 = elm.className.split(' ');
classes.push(newclass)
elm.className =classes.join(' ')}
< ;/SPAN>


4. 이벤트 위임

이벤트는 JavaScript에서 매우 중요한 부분입니다. 클릭 이벤트를 목록의 링크에 바인딩하려고 합니다. 일반적인 접근 방식은 루프를 작성하고 각 링크 개체에 이벤트를 바인딩하는 것입니다.

코드 복사 코드는 다음과 같습니다.

훌륭한 웹 리소스

• Opera 웹 표준 커리큘럼


• 사이트포인트


• A List Apart


• YUI 블로그


• 목소리 탓입니다


• 이상하게 구체적입니다

脚本如下：

复主代码 代码如下:

// 클래식 이벤트 처리 예
(function(){
var resources = document.getElementById('resources');
varlinks = resources.getElementsByTagName('a');
var all = link.length;
for(var i=0;i// 각 링크에 리스너 연결
links[i].addEventListener('click',handler,false);
function handler(e){
var x = e.target; 🎜>경고(x);
e.preventDefault()
})();



합리적 거래법是只给列表적父对象绑결정사유：

复代代码 代码如下: (function(){

var resources = document.getElementById('resources') ;

resources.addEventListener('click',handler,false);
function handler(e){
var x = e.target; // 링크 가져오기
if(x.nodeName .toLowerCase() === 'a'){
alert('이벤트 위임:' x);
e.preventDefault();
}
})() ;



5. 匿name函数
关于JavaScript의 最头疼的事情之一是,它的变weight没有特围范围.性，这意味着가 같은 것입니다其他脚本可以访问并覆盖它们 .局函数：

复aze代码

代码如下: var name = 'Chris'; var age = '34';

var 상태 = '단일';

function createMember(){
// [...]
}
function getMemberDetails(){
// [...]
}



封装后如下：

复主代码

代码如下: var myApplication = function(){ var name = 'Chris';

var age = '34';

var 상태 = '단일';
return{
createMember:function(){
// [...]
},
getMemberDetails:function(){
// [...]
}
}
}();
// myApplication.createMember() 및
// myApplication.getMemberDetails()가 이제 작동합니다.



这被称为单体模式，是JavaScript设计模式的一种，这种模式在YUI中用得不常多，改进的写法是：

复主代码

代码如下: var myApplication = function( ){ var name = '크리스';

var age = '34';

var 상태 = '단일';
function createMember(){
// [...]
}
function getMemberDetails(){
// [...]
}
return{
create:createMember,
get:getMemberDetails
}
}();
//myApplication.get() 및 myApplication.create()가 이제 작동합니다.



6. 코드 구성 가능성
당신이 작성한 코드를 다른 사람이 더 쉽게 사용하거나 수정할 수 있도록 하려면, 당신이 작성한 스크립트에 구성 개체를 추가하는 것이 해결책입니다. 핵심 사항은 다음과 같습니다.
1. 스크립트에 구성이라는 개체를 추가합니다.
2. CSS ID, 클래스 이름, 언어 등 다른 사람이 변경하고 싶어할 수 있는 모든 항목을 구성 개체에 저장합니다.
3. 다른 사람이 재정의할 수 있도록 이 객체를 공용 속성으로 반환합니다.
7. 코드 호환성
호환성은 초보자가 간과하기 쉬운 부분입니다. 보통 Javascript를 배울 때 고정된 브라우저에서 테스트하는데, 이 브라우저는 IE 중에서 매우 치명적입니다. 현재의 주요 브라우저 중 IE는 표준에 대한 지원이 최악입니다. 최종 사용자가 보는 결과는 작성한 코드가 특정 브라우저에서 올바르게 실행되지 않을 수 있다는 것입니다. 모든 주요 브라우저에서 코드를 테스트해야 합니다. 이 작업은 시간이 많이 걸릴 수 있지만 완료되어야 합니다.