네임스페이스.js 자바스크립트 네임스페이스 library_javascript 팁

github: https://github.com/hirokidaichi/namespace-js
Namespace 개체 정의:
var Namespace
이제 NamespaceDefinition 개체인 Namespace 개체의 정의를 자세히 살펴보겠습니다. . 이 개체는 함수 개체(NamespaceDefinition 개체의 생성자, 매개 변수가 지정되지 않으면 기본적으로 기본 네임스페이스가 생성됨)이며 Object, Definition 및 Proc의 세 가지 속성이 있습니다. 해당 값은 NamespaceObjectFactory, NamespaceDefinition 및 createProcedure 함수 개체 클래스입니다.

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

196 var createNamespace = function(fqn){
197 return new NamespaceDefinition(
198 NamespaceObjectFactory.create(fqn || 'main')
199 )
200 }
201 merge(createNamespace, {
202 'Object ' : NamespaceObjectFactory ,
203 정의: NamespaceDefinition,
204 Proc : createProcedure
205 })

NamespaceObjectFactory: fqn을 기반으로 NamespaceObject 객체를 생성합니다.
NamespaceObjectFactory 객체에는 생성 메소드가 하나만 있고 매개변수는 네임스페이스의 이름(정규화된 이름)입니다. 이 메소드에는 생성된 모든 NamespaceObject 객체를 캐시하는 데 사용되는 캐시 변수가 있는 클로저 환경이 있습니다.
NamespaceObject 객체에는 stash(현재 네임스페이스 기록), fqn(네임스페이스 이름), proc(createProcedure 객체)의 세 가지 속성이 포함되어 있습니다. 메소드에는 다음이 포함됩니다: enqueue, call, valueof, merge, getStash, getExport

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

74 var NamespaceObject = function _Private_Class_Of_NamespaceObject(fqn){
75 merge(this, {
76 stash: { CURRENT_NAMESPACE : fqn },
77 fqn : fqn,
78 proc : createProcedure()
79 });
80 };
81 merge(NamespaceObject.prototype, {
82 enqueue: function(context) {
83 this.proc.next(context) ;
84 },
85 호출: function(state,callback) {
86 this.proc.call(state, callback)
87 },
88 valueOf: 함수() {
89 return "#NamespaceObject<" this.fqn ">"
90 },
91 merge: function(obj) {
92 merge(this.stash,obj); 🎜>93 return this;
94 },
95 getStash: function() {
96 return this.stash;
97 },
98 getExport: function(importName) {
99 if (importName === '*') return this.stash;
100
101 var importNames = importName.split(/,/),
102 retStash =
103 for(var i = 0,l=importNames.length;i104 retStash[ importNames[i] ] = this.stash[ importNames[i] ]
105 }
106 return retStash ;
107 }
108 });
109 var NamespaceObjectFactory = (function() {
110 var 캐시 = {};
111 return {
112 create: function(fqn ){
113 _assertValidFQN(fqn);
114 return (cache[fqn] || (cache[fqn] = new NamespaceObject(fqn))); ;
117 })();


NamespaceDefinition:
이 객체에는 5개의 속성(spaceObject, require, useList, stash, DefineCallback)이 포함되어 있습니다. 그리고 관련 메소드를 제공합니다: use, _mergeStashWithNS, loadImport, 정의, getStash, valueOf, apply

이 객체는 필요한 모든 메소드를 제공하는 네임스페이스 라이브러리의 핵심입니다.
초기화 중에 NamespaceObject 프로세스의 단계 대기열에 함수 개체를 추가하면 함수가 적용 메서드를 호출합니다.

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

119 var NamespaceDefinition = function _Private_Class_Of_NamespaceDefinition(nsObj) {
120 merge(this, {
121 네임스페이스객체: nsObj,
122 필요: [],
123 useList: [] ,
124 stash : {},
125 DefineCallback : 정의되지 않음
126 });
127 var _self = this;
128 nsObj.enqueue(function($c){ _self.apply($c); });
129 };
130 merge(NamespaceDefinition.prototype, {
131 사용: 함수(syntax){
132 this.useList.push(syntax);
133 var 분할 = 구문.split(/s /) ;
134 var fqn = 분할[0];
135 var importName = 분할[1]
136 _assertValidFQN(fqn)
137 this.requires.push($c)
138 var context = this;
139 var require = NamespaceObjectFactory.create(fqn);
140 require.call(this,function(state){
141 context.loadImport(require,importName) ;
142 $c();
143 });
145 반환
147 _mergeStashWithNS: >148 var nsList = nsObj.fqn.split(/./);
149 var current = this.getStash()
150
151 for(var i = 0,l=nsList.length; i152 if( !current[nsList[i]] ) current[nsList[i]] =
153 current = current[nsList[i]]
154 }
155
156 var lastLeaf = nsList[nsList.length-1];
157 current[lastLeaf] = merge(current[lastLeaf] || {}, nsObj.getStash()) ;
158 },
159 loadImport: function(nsObj,importName){
160 if( importName ){
161 merge( this.stash, nsObj.getExport(importName) );
162 }else{
163 this._mergeStashWithNS( nsObj );
164 }
165 },
166 정의: 함수(콜백){
167 var nsDef = this, nsObj = this.namespaceObject;
168 this.defineCallback = function($c) {
169 var ns = {
170 제공: function(obj){
171 nsObj.merge(obj);
172 $c();
173 }
174 };
175 merge(ns, nsDef.getStash());
176 merge(ns, nsObj.getStash());
177개의 콜백(ns);
178 };
179 },
180 getStash: function(){
181 return this.stash;
182 },
183 valueOf: function(){
184 return "#NamespaceDefinition<" this.namespaceObject "> 다음을 사용합니다:" this.useList.join(',');
185 },
186 적용: 함수(콜백){
187 var nsDef = this;
188 createProcedure(nsDef.requires)
189 .next(nsDef.defineCallback)
190 .call(nsDef,function(){
191 콜백( nsDef.getStash() );
192 });
193 }
194 });


createProcedure: 该对象是一个函数对象，返回Procedure对象 의 다음 방법으로 结果.
Procedure:

Procedure对象有 3个属性: state, steps,_status （默认为초기화 )。提供一下几种方법：next，isRunnig，enqueue，dequeue，call，_invoke。

复system代码 代码아래:

1 var Namespace = (function(){
2 /* 유틸리티 */
3 var merge = function(target, source){ // 소스의 모든 속성을 타겟으로 복사하고 return 대상 객체 4 for(var p in source)
5 if(source.hasOwnProperty( p )) target[p] = source[p]
6 return target; 8 var _assertValidFQN = function(fqn){ // 네임스페이스 이름의 유효성을 확인합니다. 소문자 영숫자, 밑줄 및 점이어야 합니다.
9 if(!(/^[a-z0-9_.] /) .test (fqn)) throw('잘못된 네임스페이스');
11
12 var Procedure = function _Private_Class_Of_Proc(){
13 merge(this, {
14 state : { }, // 상태
15 단계 : [], // 상태를 저장할 배열
16 _status: 'init'
17 })
18
19 merge( Procedure. 프로토타입, {
20 next: function(state){ // state에 값이 있으면 이를 단계 대기열의 끝에 저장하고 이를 반환합니다.
21 if(state) this.enqueue(state) ;
22 return this;
23 },
24 isRunning: function(){ // 실행 상태인지 확인
25 return (this._status === 'running'); 🎜>26 },
27 enqueue: function(state){ // 여기서 배열 단계는 실제로 큐를 시뮬레이션하는 데 사용되며, enqueue는 큐의 끝에서부터 큐에 넣습니다
28 이. steps.push(state);
29 } ,
30 dequeue: function(){ // dequeue는 반대쪽 끝에서 dequeue하는 것을 의미합니다.
31 return this.steps.shift()
32 } ,
33 call: function(initialState,callback) { //
34 if( this.isRunning() ) throw("두 번 실행하지 마세요")
35
36 this.state = initialState || {}; // 현재 상태 저장(NamespaceDefinition 객체)
37 this.enqueue(function($c){ // 함수가 대기열에 있습니다.
38 $c(); // 함수 실행 전달됨
39 if(callback)callback(this) ; // 콜백 함수가 있는 경우 콜백 함수 실행
40 })
41 this._status = 'running'; 실행 상태
42 this._invoke(); // _invoke 호출
43 },
44 _invoke: function(){
45 var _self = this
46 var step = _self.dequeue(); // 객체 대기열 제거(FIFO)
47 if( !step ){
48 _self._status = 'finished'; // 대기열이 비어 있으면 상태를 완료로 설정합니다.
49 return;
50 } // step이 배열인 경우 이 경로를 따르지 마세요
51 if( step.call ) { // 객체가 함수 객체인 경우 호출 메서드를 실행하고 지정합니다. 내부 this를 _self.state로 하고 콜백 함수에서 계속 호출_을 합니다.
52 return step.call( _self.state,function _cont(state){
53 if( state ) _self.state = state;
54 _self._invoke();
55 }) ;
56 }
57 var doneProcess = 0;
58 if( step.length === 0 ) _self._invoke(); // 배열의 길이가 0이면 _invoke를 호출합니다.
59 for(var i =0,l=step.length;i60 step[i].call(_self.state,function _joinWait(){
61 doneProcess ;
62로 지정합니다. if( doneProcess == l ){
63 _invoke();
64 }
65 })
66 }
68 }); 69
70 var createProcedure = function(state) {
71 return new Procedure().next(state);
72 };
73
74 var NamespaceObject = function _Private_Class_Of_NamespaceObject(fqn) {
75 merge(this, {
76 stash: { CURRENT_NAMESPACE : fqn },
77 fqn : fqn,
78 proc : createProcedure()
79 })
80 };
81 merge(NamespaceObject.prototype, {
82 enqueue: function(context) {
83 this.proc.next(context);
84 },
85 호출: function (state,callback) {
86 this.proc.call(state, callback)
87 },
88 valueOf: function() {
89 return "#NamespaceObject<" ">";
90 },
91 merge: function(obj) {
92 merge(this.stash,obj)
93 return this; >95 getStash: function() {
96 return this .stash;
97 },
98 getExport: function(importName) {
99 if (importName === '*') return this .stash;
100
101 var importNames = importName.split(/,/),
102 retStash = {}
103 for(var i = 0,l=importNames.length;i< ;l;i ){
104 retStash[ importNames[ i] ] = this.stash[ importNames[i] ]
105 }
106 return retStash; );
109 var NamespaceObjectFactory = (function() {
110 var 캐시 = {};
111 return {
112 create :function(fqn){
113 _assertValidFQN(fqn);
114 return (cache[fqn] || (cache [fqn] = new NamespaceObject(fqn)))
115 }
116 }
117 })();
119 var NamespaceDefinition = function _Private_Class_Of_NamespaceDefinition(nsObj) {
120 merge(this, {
121 namespaceObject: nsObj,
122 require: [],
123 useList: [],
124 stash: {},
125 정의 콜백: 정의되지 않음
126 });
127 var _self = this
128 nsObj.enqueue(function($c){ _self.apply($c ) });
129 };
130 merge(NamespaceDefinition.prototype, {
131 use: function(syntax){ // 네임스페이스 사용
132 this.useList.push(syntax); // 네임스페이스 문자열이 배열에 저장됩니다. useList
133 var 분할 = 구문.split(/s /); // 네임스페이스와 해당 객체는 공백으로 구분됩니다.
134 var fqn = 분할[0]; // 네임스페이스 가져오기
135 var importName = 분할 [1]; // 네임스페이스에서 객체 가져오기
136 _assertValidFQN(fqn)
137 this.requires.push(function($c){ // require 배열에 함수 넣기
138 var context = this;
139 var require = NamespaceObjectFactory.create(fqn); // 지정된 NamespaceObject 객체를 가져옵니다. 이전에 생성된 객체는 캐시에서 직접 가져올 수 있습니다.
140 require.call(this,function(state) ){ // NamespaceObject 객체의 호출 메소드 호출
141 context.loadImport(require,importName)
142 $c()
143 })
144 }); >145 return this
146 },
147 _mergeStashWithNS: function(nsObj){
148 var nsList = nsObj.fqn.split(/./)
149 var current = this.getStash () ;
150
151 for(var i = 0,l=nsList.length;i152 if( !current[nsList[i]] ) current[ nsList[ i]] = {};
153 현재 = 현재[nsList[i]]
154 }
155
156 var lastLeaf = nsList[nsList.length-1]; >157 current[lastLeaf] = merge(current[lastLeaf] || {}, nsObj.getStash())
158 },
159 loadImport: function(nsObj,importName){
160 if( importName ) {
161 merge( this.stash, nsObj.getExport(importName) )
162 }else{
163 this._mergeStashWithNS(
164 }
165 },
166 정의: function(callback){
167 var nsDef = this, nsObj = this.namespaceObject;
168 this.defineCallback = function($c) { // DefineCallback에 값을 할당하고 정의 콜백 함수 컨텍스트, 두 개체, nsDef 및 nsObj.
169 var ns = {
170 제공: function(obj){
171 nsObj.merge(obj);
172 $c()
173 }
174 };
175 merge(ns, nsDef.getStash());
176 merge(ns, nsObj.getStash())
177 콜백(ns)
179 }; ,
180 getStash: function(){
181 return this.stash;
182 },
183 valueOf: function(){
184 return "#NamespaceDefinition<" > 사용:" this.useList.join(',');
185 },
186 적용: function(callback){
187 var nsDef = this;
188 createProcedure(nsDef. 필요)
189 .next(nsDef.defineCallback)
190 .call(nsDef,function(){
191 콜백( nsDef.getStash() );
192 }); }
194 })
195
196 var createNamespace = function(fqn){
197 return new NamespaceDefinition(
198 NamespaceObjectFactory.create(fqn || 'main')
199 );
200 };
201 merge(createNamespace, {
202 'Object' : NamespaceObjectFactory,
203 정의: NamespaceDefinition,
204 Proc : createProcedure
205 });
206 return createNamespace;
207 })();


Namespace에서 지원하는 메서드를 추가로 정의합니다:
Namespace.use
Namespace.fromInternal

Namespace. GET
Namespace.fromExternal




코드 복사

코드는 다음과 같습니다.

1 Namespace.use = function(useSyntax){ return Namespace().use(useSyntax); }
2 Namespace.fromInternal = Namespace.GET = (function(){
3 var get = (function(){
4 var createRequester = function() {
5 var xhr;
6 try { xhr = new XMLHttpRequest() } catch(e) {
7 try { xhr = new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch(e) {
8 try { xhr = new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch(e) {
9 try { xhr = new ActiveXObject("Msxml2.XMLHTTP") } catch(e) {
10 try { xhr = new ActiveXObject( "Microsoft.XMLHTTP") } catch(e) {
11 throw new Error( "이 브라우저는 XMLHttpRequest를 지원하지 않습니다." )
12 }
13 }
14 }
15 }
16 }
17 return xhr;
18 };
19 var isSuccessStatus = function(status) {
20 return (status >= 200 < 300) || 🎜>21 상태 == 304 ||
22 상태 == 1223 ||
23 (!status && (location.protocol == "file:" || location.protocol == "chrome:") ) ;
24 };
25
26 return function(url,callback){
27 var xhr = createRequester()
28 xhr.open('GET',url,true) ;
29 xhr.onreadystatechange = function(){
30 if(xhr.readyState === 4){
31 if( isSuccessStatus( xhr.status || 0 )){
32 콜백(true,xhr.responseText);
33 }else{
34 콜백(false);
35 }
36 }
37 };
38 xhr.send('')
39 };
40 })();
41
42 반환 함수(url,isManualProvide){
43 반환 함수(ns){
44 get(url,function(isSuccess,responseText){
45 if( isSuccess ){
46 if( isManualProvide )
47 return eval(responseText);
48 else
49 return ns.provide( eval( responseText ) )
50 }else{
51 var pub = {};
52 pub[url] = '로드 오류';
53 ns.provide(pub)
54 }
55 });
56 };
57 };
58 })();
59
60 Namespace.fromExternal = (function(){
61 var callbacks = {};
62 var createScriptElement = function(url,callback){
63 var scriptElement = document. createElement('script');
64
65 scriptElement.loaded = false
66
67 scriptElement.onload = function(){
68 this.loaded = true; 69 콜백();
70 };
71 scriptElement.onreadystatechange = function(){
72 if( !/^(loaded|complete)$/.test( this.readyState )) return; 🎜>73 if( this.loaded ) return;
74 scriptElement.loaded = true;
75 callback()
76 }; .body.appendChild( scriptElement );
79 return scriptElement.src;
80 }
81 var domSrc = function(url){
82 return function(ns){
83 var src = createScriptElement(url,function(){
84 var name = ns.CURRENT_NAMESPACE;
85 var cb = callbacks[name];
86 delete callbacks[name];
87 cb( ns );
88 });
89 }
90 };
91 domSrc.registerCallback = function(namespace,callback) {
92 콜백[namespace] = 콜백;
93 };
94 domSrc를 반환합니다.
95 })();
96
97 try{ module.exports = 네임스페이스; }catch(e){}


具体看一个例子：

复主代码

代码如下: 1 네임스페이스('logtest') 2 .define(function (ns) { 3 console.log(2);

4 ns.provide({

5 로그: 함수 () { console.log(3) }
6 })
7 });
8
9 console.log(4);
10
11 네임스페이스
12 .use('logtest')
13 .apply( function (ns) {
14 console.log(5);
15 ns.logtest .log()
16 });



1：네임스페이스('logtest') => new NamespaceDefinition(NamespaceObjectFactory.create('logtest'))
NamespaceObjectFactory를 사용합니다. ，NamespaceDefinition，createProcedure函数对象类。Namespace('logtest') 返回的结果就是生成的NamespaceDefinition对象，初始化defineCallback。此时仅是定义，做具体的动작품。

复제대码

代码如下: 166 정의: 함수(콜백){ 167 var nsDef = this, nsObj = this.namespaceObject; 168 this.defineCallback = function($c) { // 给defineCallback赋值, 同时定义一下该回调函数的上下文,nsDef andnsObj两个对象。

169 var ns = {

170 제공: 함수(obj){
171 nsObj.merge(obj);
172 $c();
173 }
174 };
175 merge(ns, nsDef.getStash());
176 merge(ns, nsObj.getStash());
177개의 콜백(ns);
178 };
179 },


2: 앞서 정의한 네임스페이스인 Namespace.use() => Namespace().use() => Namespace('main').use()의 개체를 사용합니다. 사용을 호출할 때 요구 사항 배열을 초기화합니다.

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

131 사용: function(syntax ){ / / 네임스페이스 사용
132 this.useList.push(syntax); // 네임스페이스 문자열은 배열 useList에 저장됩니다.
133 var Splitted = Syntax.split(/s /) // 네임스페이스 및 해당 객체는 공백으로 구분됩니다.
134 var fqn = Splitted[0]; // 네임스페이스 가져오기
135 var importName = Splitted[1]; // 네임스페이스의 객체 가져오기
136 _assertValidFQN(fqn);
137 this.requires.push(function($c){ // require 배열에 함수 넣기
138 var context = this;
139 var require = NamespaceObjectFactory.create(fqn); // 지정된 NamespaceObject 개체를 가져옵니다. 이전에 생성된 개체는 캐시에서 직접 가져올 수 있습니다
140 require.call(this,function(state){ // NamespaceObject 개체의 호출 메서드 호출
141 context.loadImport(require ,importName);
143 })
145 반환


3 : 메인의 적용 메소드를 호출합니다. 구체적인 적용방법을 살펴보세요

코드복사 코드는 다음과 같습니다 186 적용: function(callback ){

187 var nsDef = this;

188 createProcedure(nsDef.requires)
189 .next(nsDef.defineCallback)
190 .call(nsDef,function() {
191 콜백( nsDef.getStash() );
192 });
193 }


Proc 객체를 생성하려면 require 배열에서 객체를 꺼내세요. nsDef.defineCallback도 대기열에 추가되고(이 예에서는 정의되지 않음) Proc의 호출 메서드가 호출됩니다. 첫 번째 매개변수는 nsDef이고, 두 번째 매개변수는 콜백 함수입니다.
구체적 사용법:

Namespace를 정의할 때 모든 정의는 정의에 배치되고 익명 함수 형태로 정의됩니다. function (ns) { // 특정 구현 // 외부에 노출되는 객체를 정의합니다. nsName을 사용한 후 외부에서는 ns.nsName.key()를 통해 호출할 수 있습니다. ns.provide({ key : value} );}
namespace.js를 사용하면 모든 정의가 필요할 때만 실행된다는 장점이 있습니다. 즉, 정의가 실제로 사용될 때만 구문 분석됩니다.

ps: 구체적인 내부 통화 관계는 아직 명확하지 않습니다. 나중에 시간이 나면 정리하겠습니다. 이 글은 너무 지저분합니다.