현재 최고의 HTML/CSS/JavaScript 구성은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/1481022

문제

나는 jQuery에 더 많이 들어가서 HTML/JavaScript/CSS 기본 사이트 모든 테스트에 사용합니다.

이 테스트는 결국 변할 것입니다 PHP 및 ASP.NET MVC 웹 사이트, 나는이 기회를 사용하여 스크립팅 언어를 구축하기 전에 최신 브라우저 및 웹 표준의 기본 사항을 다시 내려 놓고 싶습니다.

사용하도록 선택했습니다.

  • XHTML 1.0 엄격한
  • UTF-8 부호화
  • 가능한 한 적은 CSS 참조 (모든 것을 넣으십시오. 1 CSS 파일 로딩 속도)
  • 가능한 한 적은 자바 스크립트 참조 (1 JavaScript 파일 또한 JQuery Code Base Reference- 사용한다고 가정합니다. Google jQuery 코드베이스는 속도를위한 모범 사례입니다)
  • 나는 그것을 만들 때 내 코드를 확인합니다. http://validator.w3.org

내가 고려해야 할 다른 것이 있습니까?

다음은 테스트 웹 사이트 중 하나의 예입니다.

index.htm :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <title>Text XHTML Page</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript" src="javascript/main.js"></script>       

    </head>

<body>
    <h1 class="highlightTitle">Text</h1>
    <p class="main">First</p>
    <p>Second</p>
    <p id="selected" class="regular">Third</p>
    <p>Fourth</p>

<form action="">
    <div>
        <input type="button" value="highlight it" onclick="highlightIt();countThem()" /> 
        <input type="button" value="highlight title" onclick="highlightTitle()" />
        <p>here is another paragraph</p>
    </div>
</form>

</body>
</html>

main.cs :

p.highlighted {
    background-color:orange;
}
h1.highlightTitle {
    background-color:yellow;
}
h1.deselected {
    background-color:#eee;
}
p.regular {
    font-weight: bold;
}

main.js :

google.load("jquery", "1.3.2");

function highlightIt() {
    $('#selected')
        .toggleClass('highlighted');
}

function countThem() {
    alert("there are " + $("p.main").size() + " paragraphs");
}

function highlightTitle() {
    $("h1").toggleClass("deselected");
}
도움이 되었습니까?

해결책

개인적으로 나는 jQuery를 통해 클릭 이벤트에 바인딩하여 다음과 같이 멋진 분리를 보장합니다.

$("#yourId").bind("click", highlightIt);

이렇게하면 여러 이벤트 핸들러에 바인딩 할 수 있습니다. Onclick Afaik 만 사용하는 경우 하나의 핸들러 만 사용할 수 있습니다.

BTW 사용자 정의 이벤트 및 이벤트 네임 스페이스를 사용할 수도 있습니다.

$("#yourId").bind("beforeHighlighting", doSomething);

트리거됩니다

$("#yourId").trigger("beforeHighlighting");

그리고 

$(".hasAHelptext").bind("helptext.click", showHelptextFct);
$(".hasAHelptext").bind("click", otherFct);

// will only remove the showHelptextFct event handler
$(".hasAHelptext").unbind("helptext.click");

HTH Alex

다른 팁

움직입니다 <script> 블록 페이지 하단.

일반적으로 CSS 및 JS 파일과 관련하여 개발 중에 모든 JS 파일을 단일 파일로 결합하지는 않습니다. 하나의 큰 JS 파일에서 개발하기가 매우 어려워집니다. 오히려 비행 중 또는 배포 중에 결합하는 모듈을 사용하십시오.

나는 보통 (CSS와 JS 모두)와 함께 간다 :

하나의 일반 파일 :

  • project.css

그리고 페이지 당 하나 :

  • project_welcome.css

그리고 모든 특수 구성 요소 (로그인 컨트롤, 광고 영역보기 등)에는 별도의 구성 요소가 있습니다.

그렇게하면 일부 구성 기술을 적용 할 수 있으며 그 단일 큰 파일을 관리하는 데 미치지 않을 것입니다.

HTH Alex

JS 통화를 바디 태그 아래에 놓는 것이 좋습니다. 스크립트가 매달려 있으면 페이지가로드되어 사실 후에 동작 (JS)을로드 할 수 있습니다. 이 방법으로 속도가 크게 향상된다는 것을 알았습니다.

이것 좀 봐: http://stevesouders.com/hpws/rule-js-bottom.php

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top