JavaScript 모듈 개발을 위한 SeaJS_javascript 기술
- WBOY원래의
- 2016-05-16 15:25:591459검색
머리말
SeaJS는 CommonJS 사양을 따르며 JavaScript의 모듈식 개발 및 로딩 메커니즘을 구현할 수 있는 JavaScript 모듈 로딩 프레임워크입니다. SeaJS를 사용하면 JavaScript 코드의 가독성과 명확성이 향상되고, 현재 JavaScript 프로그래밍의 종속성 혼란 및 코드 얽힘과 같은 일반적인 문제를 해결하며, 코드 작성 및 유지 관리가 용이해집니다.
SeaJS 자체는 KISS(Keep it Simple, Stupid) 개념에 따라 개발되었으며, 후속 버전 업데이트도 이러한 방향으로 나아가기 위해 노력하고 있습니다.
SeaJS 사용법
여기에서는 다운로드 및 설치에 대해 자세히 설명하지 않겠습니다. 이해가 되지 않는 경우 공식 웹사이트를 확인하세요.
기본 개발 원칙
•모든 것이 모듈입니다. SeaJS의 모듈 개념은 객체 지향의 클래스와 다소 유사합니다. 모듈은 데이터와 메소드를 가질 수 있고, 데이터와 메소드는 공개 또는 비공개로 정의될 수 있으며, 공개 데이터와 메소드는 다른 사용자에 의해 호출될 수 있습니다. 모듈.
•각 모듈은 별도의 js 파일에 정의되어야 합니다. 즉, 하나는 하나의 모듈에 해당합니다.
모듈 정의 및 작성
모듈 정의 기능 정의
SeaJS의 정의 함수를 사용하여 모듈을 정의하세요. 정의는 세 가지 매개변수를 받을 수 있습니다:
/**
* Defines a module.
* @param {string=} id The module id.
* @param {Array.|string=} deps The module dependencies.
* @param {function()|Object} factory The module factory function.
*/
fn.define = function(id, deps, factory) {
//code of function…
}
수신 가능을 정의하는 파라미터는 모듈 ID, 종속 모듈 배열, 팩토리 기능입니다.
•파라미터가 1개뿐이라면 공장에 할당하세요
•두 개의 매개변수가 있는 경우 두 번째는 Factory에 할당되고, 배열인 경우 첫 번째는 deps에 할당되고, 그렇지 않으면 id에 할당됩니다
•파라미터가 3개일 경우 값을 별도로 지정
그러나 SeaJS 공식 웹사이트 예시를 포함하여 정의가 사용되는 거의 모든 곳에서는 다음 코드와 유사하게 팩토리 함수만 전달합니다.
define(function(require,exports,module){
//code of the module
})
개인적으로는 SeaJS 공식 예제의 표준을 따르고 매개변수 정의로 모듈을 정의하는 것이 좋습니다. 그렇다면 id와 deps는 어떻게 될까요?
id는 모듈의 식별 문자열입니다. 정의에 매개변수가 하나만 있는 경우 id에는 기본적으로 이 js 파일의 절대 경로가 할당됩니다. example.com 아래의 a.js 파일에서 모듈을 정의하기 위해 정의가 사용되는 경우 이 모듈의 ID에는 http://example.com/a.js 값이 할당되는 것이 좋습니다. 특별한 필요가 없으면 전달하지 마세요. 일반적으로 deps는 전달할 필요가 없습니다. 사용해야 하는 모듈은 require를 사용하여 로드할 수 있습니다.
공장 기능 공장 분석
팩토리 기능은 모듈의 본체이자 초점입니다. 세 가지 매개변수는 다음과 같습니다.
•require: 모듈 로딩 기능, 종속 모듈을 기록하는 데 사용
•내보내기: 정의된 인터페이스 포인트, 데이터 또는 메서드가 외부 호출에 노출됩니다.
•모듈: 모듈 메타데이터
필요에 따라 이 세 가지 매개변수를 표시하고 지정할 수 있습니다.
모듈은 다음과 같이 모듈의 메타정보를 저장하는 객체입니다.
•module.id: 모듈 ID
•module.dependent: 이 모듈이 의존하는 모든 모듈의 ID 목록을 저장하는 배열입니다.
•module.exports: 내보내기와 동일한 객체를 가리킵니다
3가지 쓰기 모듈 모드
첫 번째는 수출 기반 모드입니다.
define(function(require,exports,module){
var a=require('a');
var b=require('b'); //引入模块
var data1=1; //私有数据
var fun1=function(){//私有方法
return a.run(data1);
}
exports.data2=2; //公有数据
exports.fun2=function(){
return 'hello';
}
})
위는 비교적 "진정한" 모듈 정의 패턴입니다. 공개 데이터 및 메소드를 내보내기에 첨부하는 것 외에도 객체 표현 모듈을 직접 반환할 수도 있습니다. 예를 들어 다음 코드는 위 코드와 동일한 기능을 갖습니다.
define(function(require){
var a=require('a');
var b=require('b'); //引入模块
var data1=1;
var fun1=function(){
return a.run(data1);
}
return{
data2:2,
fun2:function(){
return 'hello';
}
}
})
모듈 정의에 다른 코드가 없고 객체만 반환하는 경우 다음과 같이 단순화할 수도 있습니다.
define({
data2:2,
fun2:function(){
return 'hello';
}
})
세 번째 작성 방법은 순수 JSON 데이터를 정의하는 모듈에 매우 적합합니다.
다양한 애플리케이션 시나리오에 따라 SeaJS는 모듈 로드를 위한 세 가지 API, 즉 seajs.use, require 및 require.async를 제공합니다.
seajs.use
seajs.use는 주로 항목 모듈을 로드하는 데 사용됩니다. 엔트리 모듈은 C 언어의 주요 기능과 동일하며 전체 모듈 종속성 트리의 루트이기도 합니다. seajs.사용
사용법은 다음과 같습니다.
//第一模式
seajs.use('./a');
//回调模式
seajs.use('./a',function(a){
a.run();
})
//多模块模式
seajs.use(['./a','./b'],function(a,b){
a.run();
b.run();
})
멀티 모듈의 사용법은 KISSY의 모듈 로딩 방식과 유사합니다. 한 사람이 작성한 것이 당연합니다!
일반적으로 seajs.use는 페이지에 항목 모듈을 로드하는 데에만 사용됩니다. SeaJS는 항목 모듈을 따라 모든 종속 모듈을 구문 분석하고 로드합니다. 입력 모듈이 하나만 있는 경우 seajs를 소개하는 스크립트 태그에 "data-main" 속성을 추가하여 seajs.use를 생략할 수도 있습니다. 예를 들어 다음과 같이 작성합니다.
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>TinyApp</title> </head> <body> <p class="content"></p> <script src="./sea.js" data-main="./init"></script> </body> </html> require
require는 seajs의 주요 모듈 로딩 방법입니다. 모듈에 다른 모듈이 필요할 때 일반적으로 require를 사용하여 로딩합니다.
var m=require('./a');
require.async
上文说过seajs会在html页面打开时通过静态分析一次性记载所有需要的js文件，如果想要某个js文件在用时才加载，可以使用require.async。
这样只有在用到这个模块时，对应的js文件才会被下载，也就实现了JavaScript代码的按需加载。
SeaJS的全局配置
seajs提供了一个seaj.configd的方法可以设置全局配置，接收一个表示全局配置的配置对象，具体方法如下：
seajs.config({
base:'path',
alias:{
'app':'path/app/'
},
charset:'utf-8',
timeout:20000,
debug:false
})
其中，
•base表示基址路径
•alias可以对较长的常用路径设置缩写
•charset表示下载js时script标签的charset属性。
•timeout表示下载文件的最大时长，以毫秒为单位。
Seajs如何与现有的JS库配合使用
要将现有的JS库与seajs一起使用，只需根据seajs的模块定义规则对现有库进行一个封装。例如，下面是对jQuery的封装方法：
define(function(){
/*
此处为jquery源码
*/
})
一个完整的例子：
上文说了那么多，知识点比较分散，所以最后我打算用一个完整的SeaJS例子把这些知识点串起来，方便朋友们归纳回顾。这个例子包含如下文件：
•index.html 主页面
•sea.js
•jquery.js
•init.js init模块，入口模块，依赖data、jquery、style三个模块，又主页面载入
•data.js data模块，纯json数据模块
•style.css css样式表
html：
<!DOCTYPE HTML>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="content">
<p class="author"></p>
<p class="blog"><a href="#">Blog</a></p>
</div>
<script src="sea.js"></script>
<script>
seajs.use('init');
</script>
</body>
</html>
javascript:
//init.js
define(function(require, exports, module) {
var $ = require('./jquery');
var data = require('./data');
var css = require('./style.css');
$('.author').html(data.author);
$('.blog').attr('href', data.blog);
});
//data.js
define({
author: 'ZhangYang',
blog: 'http://blog.codinglabs.org'
});
css:
.author{color:red;font-size:10pt;}
.blog{font-size:10pt;}
请注意：
1.请讲jquery.js源码文件包含在seajs模块加载代码中；
2.在Sea.js < 2.3.0版本之前是可以加载css文件的，新版本中此功能移除，为了兼容考虑，加载css功能将作为一个插件存在。
使用方法
•可以在sea.js标签后引入这个插件使用
•也可以将插件代码混入sea.js当中
•和seajs-style的区别 •seajs-css是使 Sea.js 能够加载一个css文件，和link标签一样
•seajs-style是指提供一个seajs.importStyle方法用于加载一段 css 字符串
以上内容是小编给大家分享的JavaScript模块化开发之SeaJS，希望对大家学习javascript模块化开发有所帮助，谢谢大家一直以来对脚本之家网站的支持。！