2008년 9월 24일, 베이징 - 오늘 Adobe(Nasdaq: ADBE)는 업계의 획기적인 제품인 Adobe® Creative Suite® 4 제품군의 출시를 발표했습니다. 이 제품은 모든 창의적인 작업 흐름에 사용할 수 있으며 업계 최고의 디자인 및 개발 소프트웨어입니다. 워크플로의 근본적인 혁신을 통해 디자이너와 개발자 사이의 장벽이 제거되었습니다. 새로운 Creative Suite 4 제품 라인에는 인쇄, 웹, 모바일, 대화형, 오디오 및 비디오 제작의 창의적 프로세스를 포괄적으로 발전시키는 수백 가지의 혁신적인 기능이 포함되어 있습니다. 이 제품은 전체 제품군의 Flash 기술을 새로운 수준의 통합 및 표현으로 끌어올렸습니다. Adobe Creative Suite 4 Design 에디션, Creative Suite 4 Web 에디션 및 Creative Suite 4 Production Premium을 포함하는 현재까지 Adobe의 가장 큰 소프트웨어 버전입니다. 마스터컬렉션 외 13개 기본상품, 14개 통합기술, 7개 서비스.
그래서 테스트를 위해 공식 PreRelease 버전을 다운받았는데, 압축해제 및 설치에 관해서는 별로 할 말이 없지만, 설치가 완료된 후에는 설치 속도가 이전 버전보다 훨씬 빠르다는 느낌만 받았습니다. 인터페이스가 이전보다 좋아졌습니다.
인터페이스 변경 외에도 이 버전은 중요한 이정표 버전으로 사용되며 다음과 같은 많은 업데이트가 포함되어 있습니다.
Ajax 및 JavaScript 프레임워크에 대한 코드 팁
Adobe InContext 편집
HTML 데이터 세트
Subversion® 통합
CSS 모범 사례 등 자세한 내용은 공식 기능 페이지를 확인하세요.
여기서는 주로 JavaScript의 몇 가지 새로운 기능을 소개하겠습니다.
1. JavaScript 코드 외부 링크.
우리는 다양한 목적으로 일반적으로 JavaScript 코드를 페이지에 직접 작성하지 않고 외부 js 파일에 배치한다는 것을 알고 있습니다. 이렇게 하면 전체 사이트에서 JavaScript 관리를 용이하게 할 수 있을 뿐만 아니라 클라이언트의 js 파일 캐싱 덕분에 거의 변경되지 않는 js 파일의 네트워크 전송 트래픽 낭비가 줄어듭니다.
또한, 여러 사람의 협업과 손쉬운 관리, 민첩한 변경 및 코드 레이어링 등의 이유로 구조-성능-동작을 최대한 분리하려고 노력해야 합니다. 일반적인 코드 작성에서는 다음과 같은 단어를 많이 사용할 수 있습니다.
< a onclick="alert_me('this is a link')" href="#">알림을 받으려면 클릭하세요</a>
그러나 이러한 코드는 동작을 기본 코드 구조에 결합하여 이를 수행합니다. 이벤트를 추가하여 JavaScript 코드로 완전히 분리하는 것이 좋습니다. 이 작업은 DreamWeaver CS4에서도 완료할 수 있습니다.
DreamWeaver CS4에서는 이 기능을 [명령]->[JavaScript 외부화]에서 찾을 수 있습니다.
이 두 가지 기능을 테스트하기 위해 다음 코드를 작성했습니다.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD /xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<스크립트 유형="텍스트/자바스크립트">
함수 Alert_me(msg)
{
경고(msg);
}
</script>
</head>
<본문>
<a href="#" onclick="alert_me('this is a link')">알림을 받으려면 클릭하세요</a>
</body>
</html>
이 코드에서는 JavaScript 함수가 페이지에 나타날 뿐만 아니라 동작도 HTML 태그에 직접 바인딩되어 있음을 알 수 있습니다. 이때 [Commands]->[JavaScript 외부화]를 사용하여 DreamWeaver CS4를 다음과 같이 엽니다. 우리가 제공하는 도구에서 볼 수 있듯이 페이지의 JavaScript 코드 블록만 외부 파일로 분리하는 동시에 HTML 코드에서 JavaScript를 분리하는 두 가지 옵션이 있습니다.
우리는 "JavaScript 외부화 및 눈에 띄지 않게 첨부" 즉, 코드 블록과 태그 내 코드의 분리가 동시에 완료됩니다. 명령 실행이 완료된 후 페이지의 코드는 다음과 같습니다.
< !DOCTYPE html PUBLIC "-//W3C/ /DTD XHTML 1.0 전환//EN" " http://www .w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Untitled-15.js" type="text/javascript"></script>
</head>
<본문>
<a href="#" id="a1">알림을 받으려면 클릭하세요</a>
</body>
</html>
이러한 방식으로 해당 작업이 자동으로 완료됩니다.
2. JavaScript 코드 팁.
JavaScript 개발에 특별히 편리한 IDE는 없었습니다. Aptana는 코드 강조 표시 및 코드 프롬프트 기능을 제공하는 Ecplise 기반의 JavaScript 개발 도구입니다. 이제 DreamWeaver CS4에서는 JavaScript 내장 개체를 빌드할 때 이 기능도 제공합니다. 코드 힌트에 이미 사용할 수 있습니다.
또한 DreamWeaver CS4에서는 코드 오류에 대한 프롬프트도 제공합니다. 코드에 오류가 발생하면 창 상단에 노란색 프롬프트 표시줄이 나타나고 코드 왼쪽에 줄 번호가 표시됩니다.
3. 타사 JavaScript 라이브러리를 지원합니다.
위에서 언급한 Aptana는 Prototype, jQuery, YUI, ExtJS 등과 같은 다양한 JavaScript 타사 라이브러리에 대한 지원도 제공합니다. DreamWeaver CS4도 먼저 Prototype 라이브러리를 도입한 다음 새로운 Ajax를 입력합니다. Ajax 응용 프로그램을 구축하기 위해 DreamWeave CS4는 Ajax 클래스 멤버 메서드에 대한 코드 힌트를 제공합니다.
기사 출처: http://www.hanguofeng.cn/archives/web-client/dreamweaver-cs4-new-feture-javascript