> 웹 프론트엔드 > JS 튜토리얼 > Seajs의 간단한 문서는 간단하고 궁극적인 모듈식 개발 경험을 제공합니다_Seajs

Seajs의 간단한 문서는 간단하고 궁극적인 모듈식 개발 경험을 제공합니다_Seajs

WBOY
풀어 주다: 2016-05-16 15:05:37
원래의
1373명이 탐색했습니다.

비공식 문서는 빠른 참조를 위해 당사의 공식 문서의 텍스트와 예를 편집한 것입니다.

Sea.js를 사용하는 이유는 무엇인가요?

Sea.js는 코드를 작성하고 구성하는 간단하고 자연스러운 방식을 추구하며 다음과 같은 핵심 기능을 가지고 있습니다.

간단하고 친숙한 모듈 정의 사양: Sea.js는 CMD 사양을 따르며 Node.js와 같은 모듈 코드를 작성할 수 있습니다.
자연스럽고 직관적인 코드 구성: 종속성 자동 로딩과 간결하고 명확한 구성을 통해 코딩을 더욱 즐길 수 있습니다.
Sea.js는 또한 개발, 디버깅 및 성능 최적화에 매우 유용하고 확장 가능한 풍부한 인터페이스를 갖춘 일반적으로 사용되는 플러그인을 제공합니다.

호환성

Sea.js는 완전한 테스트 사례를 보유하고 있으며 모든 주요 브라우저와 호환됩니다.

Chrome 3 이상 
Firefox 2 이상 
사파리 3.2+
오페라 10+ 
IE 5.5+ 

Sea.js는 하이브리드 모드 앱을 포함하여 모바일 측에서 실행될 수 있습니다. 이론적으로 Sea.js는 모든 브라우저 엔진에서 실행될 수 있습니다.

seajs.configObject

별칭 객체

별칭 구성, 구성 후 모듈에서 require를 사용하여 require('jquery')를 호출할 수 있습니다.

seajs.config({
  alias: { 'jquery': 'jquery/jquery/1.10.1/jquery' }
});
로그인 후 복사

define(function(require, exports, module) {
  //引用jQuery模块
  var $ = require('jquery');
});
로그인 후 복사

경로 객체

디렉터리 간 통화가 용이하도록 경로를 설정하세요. 경로를 유연하게 설정하면 베이스에 영향을 주지 않고 디렉터리를 지정할 수 있습니다.

seajs.config({
  //设置路径
  paths: {
    'gallery': 'https://a.alipayobjects.com/gallery'
  },

  // 设置别名,方便调用
  alias: {
    'underscore': 'gallery/underscore'
  }
});
로그인 후 복사
define(function(require, exports, module) {
  var _ = require('underscore');
   //=> 加载的是 https://a.alipayobjects.com/gallery/underscore.js
});
로그인 후 복사

변수 객체

변수 구성. 일부 시나리오에서는 모듈 경로가 런타임에만 결정될 수 있습니다. 이 경우 vars 변수를 사용하여 구성할 수 있습니다.

vars는 모듈 식별자에 변수 값을 구성하고, {key}는 모듈 식별자에 변수를 나타내는 데 사용됩니다.

seajs.config({
  // 变量配置
  vars: {
    'locale': 'zh-cn'
  }
});
로그인 후 복사
define(function(require, exports, module) {
 var lang = require('./i18n/{locale}.js');
   //=> 加载的是 path/to/i18n/zh-cn.js
});
로그인 후 복사

배열

이 구성은 모듈 경로를 매핑하고 수정할 수 있으며 경로 변환, 온라인 디버깅 등에 사용할 수 있습니다.

seajs.config({
  map: [
    [ '.js', '-debug.js' ]
  ]
});
로그인 후 복사
define(function(require, exports, module) {
  var a = require('./a');
  //=> 加载的是 path/to/a-debug.js
});
로그인 후 복사

사전 로드 어레이

프리로드 구성 항목을 이용하면 일반 모듈을 로딩하기 전 지정된 모듈을 미리 로딩 및 초기화할 수 있습니다.

미리 로드 시 빈 문자열은 무시됩니다.

// 在老浏览器中,提前加载好 ES5 和 json 模块
seajs.config({
  preload: [
    Function.prototype.bind ? '' : 'es5-safe',
    this.JSON ? '' : 'json'
  ]
});
로그인 후 복사

참고: 사전 로드 구성은 로드하기 전에 사용할 때까지 기다려야 합니다. 예:

seajs.config({
  preload: 'a'
});

// 在加载 b 之前,会确保模块 a 已经加载并执行好
seajs.use('./b');
로그인 후 복사

사전 로드 구성은 모듈 파일에 배치할 수 없습니다.

seajs.config({
  preload: 'a'
});

define(function(require, exports) {
  // 此处执行时,不能保证模块 a 已经加载并执行好
});
로그인 후 복사

디버그 부울

값이 true이면 로더는 동적으로 삽입된 스크립트 태그를 제거하지 않습니다. 플러그인은 디버그 구성을 기반으로 로그 및 기타 정보의 출력을 결정할 수도 있습니다.

기본문자열

Sea.js가 최상위 식별자를 구문 분석할 때 기본 경로를 기준으로 구문 분석됩니다.

참고: 일반적으로 기본 경로를 구성하지 마십시오. sea.js를 적절한 경로에 배치하는 것이 더 간단하고 일관성이 있는 경우가 많습니다.
charsetString 함수

모듈 파일을 가져올 때

인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿