Package.js 최신 JavaScript 프로젝트는 tool_javascript 기술을 만듭니다.

Package.js 프로젝트 주소: http://code.google.com/p/package-js/

패키지 .js는 매우 편리한 JavaScript 패키지 종속성 관리 및 Make 도구입니다. 디자인 목표는 브라우저 측 JavaScript 구성 요소/앱 개발을 보다 모듈화하는 것입니다. 소규모 웹사이트를 개발 중이고 사용자 경험을 향상시키기 위해 HTML에 JS 코드 몇 줄만 혼합한다면 Package.js가 적합하지 않을 수 있습니다. 중대형 WebApp을 개발하는 경우 JS 파일, CSS 파일 및 HTML 템플릿 파일이 수십, 수백 또는 수천 개 있습니다. 이러한 JS 모듈 간의 종속성을 관리하고 로드하는 데 문제가 있는 경우 프로덕션에 게시하세요. 환경에서 JS 파일을 병합하고 패키징하면 Makefile을 작성할 때 현기증이 납니다. 그렇다면 Package.js가 바로 이것입니다! 와서 Package.js에 대해 배우고 사용해 보세요!

Package.js는 크게 두 부분으로 구성됩니다.

브라우저에서 실행되고 모듈을 정의하고 가져오는 데 사용되는 JS 라이브러리 API는
node.js 환경에서 실행되어 모든 항목을 통합합니다. JS 패키지와 종속 CSS 및 HTML 파일을 병합하기 위한 make 도구

Package.js 브라우저 측 API는 CommonJS/AMD 사양을 참조하고 이 사양의 가장 간단한 형식과 호환되며 이를 기반으로 일부 구문을 확장하여 CSS 및 HTML 템플릿을 포함한 JavaScript UI 구성 요소의 개발을 용이하게 합니다.

Package.js를 사용하여 개발된 프로젝트의 디렉터리 구조를 직접 살펴보겠습니다. 간단하고 명확합니다.

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

Test
├── dom
│ └── Style.js #네임스페이스가 있는 모듈 파일 Test.dom.Style
├── init.js #Root 네임스페이스 초기화 파일
├── _nsconf_.js #Package.js는 구성 파일을 읽습니다.
├── ui
│ ├─ ─ 버튼
│ │ ├── img
│ │ │ └── bg.png
│ │ ├── init.js #Test.ui.Button 네임스페이스 모듈 파일
│ │ ├─ ─ style .css #UI 컴포넌트의 CSS 파일
│ │ └── tpl.html #UI 컴포넌트의 HTML 템플릿 파일
│ └── Form
│ ├── init.js
│ ├─ ─ style.css
│ └── tpl.html
├── util
│ └── Cookie.js #JS 패키지(네임스페이스 Test.util.Cookie
└── _xproxy_ .html -> ../Package/_xproxy_.html #이 파일은 도메인 전체에서 HTML 템플릿 파일을 로드하는 데 사용되는 Package.js 소스 코드의 Package/_xproxy_.html을 가리키는 소프트 링크입니다.

Package.js, 모듈 정의 구문 -
Root/ui/Button/init.js 코드:

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

Package.define("Root.ui.Button",["Root.ui.Pane","Root.util.Tpl","Root.util .Event"],
function (Pane,Tpl,Event) {
//Pane은 Root.ui.Pane입니다
//Tpl은 Root.util.Tpl에 해당합니다
//등등
//. ....
})

CommonJS의 AMD 사양과 달리 Package.js의 구문에서는 JS 모듈이 다른 모듈에만 의존할 수 없습니다. JS 패키지는 CSS 및 HTML 템플릿 파일과 기타 JSON 데이터 파일에 의존하며 런타임 시 다른 종속 파일의 콘텐츠를 가져옵니다. 정의 구문은 다음과 같습니다.

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

Package. 정의("NS.ui .Button",["MT.ui.Component"],
{
tpl:"tpl.html",
_style:"style.css"
}, 함수(구성 요소) {
//this.assets.tpl을 통해 tpl.html 콘텐츠에 액세스
var bgImgUrl=this.path "img/bg.png",tpl=this.assets.tpl; Button(opt) {
//현재 패키지 객체의 _pkgMeta_ 속성을 통해 자산에 액세스할 수도 있습니다.
this.tpl=String2Dom(opt.tpl || Button._pkgMeta_.assets.tpl); }
return 버튼
})


브라우저에서 다음 방법을 사용하여 JS 모듈을 가져올 수 있습니다.

가져오기 프로세스 중에 Package.js가 자동으로 수행합니다. 당신을 위한 물류 작업: 1, 이 모듈의 종속 모듈을 로드합니다. 2. 종속 HTML 및 CSS 파일을 로드합니다.

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

Package.imports(["Root.ui .Button" ],function (버튼) {

var btn=new Button();
btn.renderTo(document.body);
});


개발 중에는 모듈화를 위해 JS를 작은 모듈 파일로 나누어야 하지만, 프로덕션 환경에 게시할 때는 로딩 속도를 위해 이러한 JS 파일을 단일 JS 파일로 병합하고 마찬가지로 압축해야 합니다. , CSS 파일을 함께 병합해야 합니다.

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

//패키징 구성 파일
// build-config.json 파일 콘텐츠
{
"staticUrls": {"defaults":"http://statics.iwt.macrotarget.com/jslibs/"},
"nsconfs": [" http://www.cnblogs.com/statics/jslibs/XLib/_nsconf_.js"],
"includes":["XLib.apps.MainApp","XLib.ui.*"],
"compress":true //압축을 위해 UglifyJS 및 UglifyCSS 사용
}

Package.js의 도움으로 이 기능을 완료하려면 3~4줄만 작성하면 됩니다. JSON 구성 코드를 작성하고 명령을 실행하면 Everything is OK입니다.

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

#Execute command
build.js build-config .json js all.min.js
build.js build-config.json css all.min.css
#허리가 더 이상 아프지 않고 다리도 더 이상 아프지 않아요!

인용문

PS: build.js도 약간의 작업을 수행합니다. CSS 파일의 background:url()과 같은 상대 경로를 절대 URL로 변환합니다. 개발할 때 CSS의 url()은 항상 상대 경로만 작성하면 됩니다. 프로덕션 환경에 배포하면 build.js에 의해 병합된 CSS가 자동으로 이를 절대 URL로 변환합니다. IE6 Png AlphaImageLoader 필터와 wui4ie6 로더를 사용하더라도 개발 중에 src=에 상대 경로를 작성할 수 있습니다. 개발 모드에서 Package.js는 절대 URL을 사용하여 CSS 규칙도 자동으로 생성합니다. 패키징할 때 CSS에 절대 URL을 작성할 필요가 없습니다.

다른 모듈 로더 및 AMD 구현(RequireJS, SeaJS...)과 비교하여 Package.js의 장점이나 단점은 무엇입니까?

Package.js는 Web App Framework용으로 개발되었습니다. 정의 구문과 파일 디렉터리 구조는 엄격합니다(또는 약간 복잡함). 이는 AMD 사양
Package.js에서 가장 간단한 정의 구문만 사용합니다. CSS 및 HTML 파일에 대한 모듈의 의존성은 작성을 정의하는 방식에서 다른 JS 모듈에 대한 의존성과 구별되며, CSS, HTML, JSON 패키징 처리도 build.js에 포함됩니다
(TOT)에는 특별한 주의가 포함됩니다. IE6 CSS용(절대 우리 프로젝트에 필요합니다)
PackageMeta를 추가하면 JS 모듈은 런타임에 자체 URL을 알 수 있습니다
... 단점인 경우: CommonJS AMD 사양과 완전히 일치하지 않음 호환 가능
빌드는 세 가지 내보내기 모드(includes, deps, all)를 지원합니다.
개발 모드에서 더 편리합니다. 도메인 간 로딩을 위해 _xproxy_.html을 사용하고 프록시가 필요하지 않습니다. _nsconf_.js를 사용하면 경로를 구성할 필요가 없습니다.

간단한 소개를 듣고 나면 Package.js를 사용해 보고 싶은 마음이 생길 것입니다. 사용하기 전에
Package의 세부 사항을 참고하세요. .js 문서:http://package-js.googlecode.com/hg/docs/Package.html.

알았어! JavaScript 앱 개발에 역방향 방법 사용을 중단하고 Out Man이 되는 것을 중단하고 가능한 한 빨리 Package.js를 사용하십시오 ^O^