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

집

웹 프론트엔드

JS 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:01 PM

네임스페이스

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

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

 
var createNamespace = function(fqn){ 
return new NamespaceDefinition( 
NamespaceObjectFactory.create(fqn || 'main') 
) 
} 
merge(createNamespace, { 
'Object ' : NamespaceObjectFactory , 
정의: NamespaceDefinition, 
Proc : createProcedure 
}) 

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

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

 
var NamespaceObject = function _Private_Class_Of_NamespaceObject(fqn){ 
merge(this, { 
stash: { CURRENT_NAMESPACE : fqn }, 
fqn : fqn, 
proc : createProcedure() 
}); 
}; 
merge(NamespaceObject.prototype, { 
enqueue: function(context) { 
this.proc.next(context) ; 
}, 
호출: function(state,callback) { 
this.proc.call(state, callback) 
}, 
valueOf: 함수() { 
return "#NamespaceObject" 
}, 
merge: function(obj) { 
merge(this.stash,obj); 🎜>93 return this; 
}, 
getStash: function() { 
return this.stash; 
}, 
getExport: function(importName) { 
if (importName === '*') return this.stash; 

var importNames = importName.split(/,/), 
retStash = 
for(var i = 0,l=importNames.length;i104 retStash[ importNames[i] ] = this.stash[ importNames[i] ] 
} 
return retStash ; 
} 
}); 
var NamespaceObjectFactory = (function() { 
var 캐시 = {}; 
return { 
create: function(fqn ){ 
_assertValidFQN(fqn); 
return (cache[fqn] || (cache[fqn] = new NamespaceObject(fqn))); ; 
})(); 

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

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

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

 
var NamespaceDefinition = function _Private_Class_Of_NamespaceDefinition(nsObj) { 
merge(this, { 
네임스페이스객체: nsObj, 
필요: [], 
useList: [] , 
stash : {}, 
DefineCallback : 정의되지 않음 
}); 
var _self = this; 
nsObj.enqueue(function($c){ _self.apply($c); }); 
}; 
merge(NamespaceDefinition.prototype, { 
사용: 함수(syntax){ 
this.useList.push(syntax); 
var 분할 = 구문.split(/s /) ; 
var fqn = 분할[0]; 
var importName = 분할[1] 
_assertValidFQN(fqn) 
this.requires.push($c) 
var context = this; 
var require = NamespaceObjectFactory.create(fqn); 
require.call(this,function(state){ 
context.loadImport(require,importName) ; 
$c(); 
}); 
반환 
_mergeStashWithNS: >148 var nsList = nsObj.fqn.split(/./); 
var current = this.getStash() 

for(var i = 0,l=nsList.length; i152 if( !current[nsList[i]] ) current[nsList[i]] = 
current = current[nsList[i]] 
} 

var lastLeaf = nsList[nsList.length-1]; 
current[lastLeaf] = merge(current[lastLeaf] || {}, nsObj.getStash()) ; 
}, 
loadImport: function(nsObj,importName){ 
if( importName ){ 
merge( this.stash, nsObj.getExport(importName) ); 
}else{ 
this._mergeStashWithNS( nsObj ); 
} 
}, 
정의: 함수(콜백){ 
var nsDef = this, nsObj = this.namespaceObject; 
this.defineCallback = function($c) { 
var ns = { 
제공: function(obj){ 
nsObj.merge(obj); 
$c(); 
} 
}; 
merge(ns, nsDef.getStash()); 
merge(ns, nsObj.getStash()); 
177개의 콜백(ns); 
}; 
}, 
getStash: function(){ 
return this.stash; 
}, 
valueOf: function(){ 
return "#NamespaceDefinition 다음을 사용합니다:" this.useList.join(','); 
}, 
적용: 함수(콜백){ 
var nsDef = this; 
createProcedure(nsDef.requires) 
.next(nsDef.defineCallback) 
.call(nsDef,function(){ 
콜백( nsDef.getStash() ); 
}); 
} 
}); 

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

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

复system代码代码아래:

 
var Namespace = (function(){ 
/* 유틸리티 */ 
var merge = function(target, source){ // 소스의 모든 속성을 타겟으로 복사하고 return 대상 객체 4 for(var p in source) 
if(source.hasOwnProperty( p )) target[p] = source[p] 
return target; 8 var _assertValidFQN = function(fqn){ // 네임스페이스 이름의 유효성을 확인합니다. 소문자 영숫자, 밑줄 및 점이어야 합니다. 
if(!(/^[a-z0-9_.] /) .test (fqn)) throw('잘못된 네임스페이스'); 

var Procedure = function _Private_Class_Of_Proc(){ 
merge(this, { 
state : { }, // 상태 
단계 : [], // 상태를 저장할 배열 
_status: 'init' 
}) 

merge( Procedure. 프로토타입, { 
next: function(state){ // state에 값이 있으면 이를 단계 대기열의 끝에 저장하고 이를 반환합니다. 
if(state) this.enqueue(state) ; 
return this; 
}, 
isRunning: function(){ // 실행 상태인지 확인
return (this._status === 'running'); 🎜>26 }, 
enqueue: function(state){ // 여기서 배열 단계는 실제로 큐를 시뮬레이션하는 데 사용되며, enqueue는 큐의 끝에서부터 큐에 넣습니다 
이. steps.push(state); 
} , 
dequeue: function(){ // dequeue는 반대쪽 끝에서 dequeue하는 것을 의미합니다. 
return this.steps.shift() 
} , 
call: function(initialState,callback) { // 
if( this.isRunning() ) throw("두 번 실행하지 마세요") 

this.state = initialState || {}; // 현재 상태 저장(NamespaceDefinition 객체) 
this.enqueue(function($c){ // 함수가 대기열에 있습니다. 
$c(); // 함수 실행 전달됨 
if(callback)callback(this) ; // 콜백 함수가 있는 경우 콜백 함수 실행 
}) 
this._status = 'running'; 실행 상태 
this._invoke(); // _invoke 호출 
}, 
_invoke: function(){ 
var _self = this 
var step = _self.dequeue(); // 객체 대기열 제거(FIFO) 
if( !step ){ 
_self._status = 'finished'; // 대기열이 비어 있으면 상태를 완료로 설정합니다. 
return; 
} // step이 배열인 경우 이 경로를 따르지 마세요
if( step.call ) { // 객체가 함수 객체인 경우 호출 메서드를 실행하고 지정합니다. 내부 this를 _self.state로 하고 콜백 함수에서 계속 호출_을 합니다. 
return step.call( _self.state,function _cont(state){ 
if( state ) _self.state = state; 
_self._invoke(); 
}) ; 
} 
var doneProcess = 0; 
if( step.length === 0 ) _self._invoke(); // 배열의 길이가 0이면 _invoke를 호출합니다. 
for(var i =0,l=step.length;i60 step[i].call(_self.state,function _joinWait(){ 
doneProcess ; 
62로 지정합니다. if( doneProcess == l ){ 
_invoke(); 
} 
}) 
} 
}); 69 
var createProcedure = function(state) { 
return new Procedure().next(state); 
}; 

var NamespaceObject = function _Private_Class_Of_NamespaceObject(fqn) { 
merge(this, { 
stash: { CURRENT_NAMESPACE : fqn }, 
fqn : fqn, 
proc : createProcedure() 
}) 
}; 
merge(NamespaceObject.prototype, { 
enqueue: function(context) { 
this.proc.next(context); 
}, 
호출: function (state,callback) { 
this.proc.call(state, callback) 
}, 
valueOf: function() { 
return "#NamespaceObject"; 
}, 
merge: function(obj) { 
merge(this.stash,obj) 
return this; >95 getStash: function() { 
return this .stash; 
}, 
getExport: function(importName) { 
if (importName === '*') return this .stash; 

var importNames = importName.split(/,/), 
retStash = {} 
for(var i = 0,l=importNames.length;i< ;l;i ){ 
retStash[ importNames[ i] ] = this.stash[ importNames[i] ] 
} 
return retStash; ); 
var NamespaceObjectFactory = (function() { 
var 캐시 = {}; 
return { 
create :function(fqn){ 
_assertValidFQN(fqn); 
return (cache[fqn] || (cache [fqn] = new NamespaceObject(fqn))) 
} 
} 
})(); 
var NamespaceDefinition = function _Private_Class_Of_NamespaceDefinition(nsObj) { 
merge(this, { 
namespaceObject: nsObj, 
require: [], 
useList: [], 
stash: {}, 
정의 콜백: 정의되지 않음 
}); 
var _self = this 
nsObj.enqueue(function($c){ _self.apply($c ) }); 
}; 
merge(NamespaceDefinition.prototype, { 
use: function(syntax){ // 네임스페이스 사용 
this.useList.push(syntax); // 네임스페이스 문자열이 배열에 저장됩니다. useList 
var 분할 = 구문.split(/s /); // 네임스페이스와 해당 객체는 공백으로 구분됩니다. 
var fqn = 분할[0]; // 네임스페이스 가져오기 
var importName = 분할 [1]; // 네임스페이스에서 객체 가져오기 
_assertValidFQN(fqn) 
this.requires.push(function($c){ // require 배열에 함수 넣기 
var context = this; 
var require = NamespaceObjectFactory.create(fqn); // 지정된 NamespaceObject 객체를 가져옵니다. 이전에 생성된 객체는 캐시에서 직접 가져올 수 있습니다. 
require.call(this,function(state) ){ // NamespaceObject 객체의 호출 메소드 호출 
context.loadImport(require,importName) 
$c() 
}) 
}); >145 return this 
}, 
_mergeStashWithNS: function(nsObj){ 
var nsList = nsObj.fqn.split(/./) 
var current = this.getStash () ; 

for(var i = 0,l=nsList.length;i152 if( !current[nsList[i]] ) current[ nsList[ i]] = {}; 
현재 = 현재[nsList[i]] 
} 

var lastLeaf = nsList[nsList.length-1]; >157 current[lastLeaf] = merge(current[lastLeaf] || {}, nsObj.getStash()) 
}, 
loadImport: function(nsObj,importName){ 
if( importName ) { 
merge( this.stash, nsObj.getExport(importName) ) 
}else{ 
this._mergeStashWithNS( 
} 
}, 
정의: function(callback){ 
var nsDef = this, nsObj = this.namespaceObject; 
this.defineCallback = function($c) { // DefineCallback에 값을 할당하고 정의 콜백 함수 컨텍스트, 두 개체, nsDef 및 nsObj. 
var ns = { 
제공: function(obj){ 
nsObj.merge(obj); 
$c() 
} 
}; 
merge(ns, nsDef.getStash()); 
merge(ns, nsObj.getStash()) 
콜백(ns) 
}; , 
getStash: function(){ 
return this.stash; 
}, 
valueOf: function(){ 
return "#NamespaceDefinition 사용:" this.useList.join(','); 
}, 
적용: function(callback){ 
var nsDef = this; 
createProcedure(nsDef. 필요) 
.next(nsDef.defineCallback) 
.call(nsDef,function(){ 
콜백( nsDef.getStash() ); 
}); } 
}) 

var createNamespace = function(fqn){ 
return new NamespaceDefinition( 
NamespaceObjectFactory.create(fqn || 'main') 
); 
}; 
merge(createNamespace, { 
'Object' : NamespaceObjectFactory, 
정의: NamespaceDefinition, 
Proc : createProcedure 
}); 
return createNamespace; 
})(); 

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

Namespace. GET
Namespace.fromExternal

코드 복사

코드는 다음과 같습니다.

 
Namespace.use = function(useSyntax){ return Namespace().use(useSyntax); } 
Namespace.fromInternal = Namespace.GET = (function(){ 
var get = (function(){ 
var createRequester = function() { 
var xhr; 
try { xhr = new XMLHttpRequest() } catch(e) { 
try { xhr = new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch(e) { 
try { xhr = new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch(e) { 
try { xhr = new ActiveXObject("Msxml2.XMLHTTP") } catch(e) { 
try { xhr = new ActiveXObject( "Microsoft.XMLHTTP") } catch(e) { 
throw new Error( "이 브라우저는 XMLHttpRequest를 지원하지 않습니다." ) 
} 
} 
} 
} 
} 
return xhr; 
}; 
var isSuccessStatus = function(status) { 
return (status >= 200 21 상태 == 304 || 
상태 == 1223 || 
(!status && (location.protocol == "file:" || location.protocol == "chrome:") ) ; 
}; 

return function(url,callback){ 
var xhr = createRequester() 
xhr.open('GET',url,true) ; 
xhr.onreadystatechange = function(){ 
if(xhr.readyState === 4){ 
if( isSuccessStatus( xhr.status || 0 )){ 
콜백(true,xhr.responseText); 
}else{ 
콜백(false); 
} 
} 
}; 
xhr.send('') 
}; 
})(); 

반환 함수(url,isManualProvide){ 
반환 함수(ns){ 
get(url,function(isSuccess,responseText){ 
if( isSuccess ){ 
if( isManualProvide ) 
return eval(responseText); 
else 
return ns.provide( eval( responseText ) ) 
}else{ 
var pub = {}; 
pub[url] = '로드 오류'; 
ns.provide(pub) 
} 
}); 
}; 
}; 
})(); 

Namespace.fromExternal = (function(){ 
var callbacks = {}; 
var createScriptElement = function(url,callback){ 
var scriptElement = document. createElement('script'); 

scriptElement.loaded = false 

scriptElement.onload = function(){ 
this.loaded = true; 69 콜백(); 
}; 
scriptElement.onreadystatechange = function(){ 
if( !/^(loaded|complete)$/.test( this.readyState )) return; 🎜>73 if( this.loaded ) return; 
scriptElement.loaded = true; 
callback() 
}; .body.appendChild( scriptElement ); 
return scriptElement.src; 
} 
var domSrc = function(url){ 
return function(ns){ 
var src = createScriptElement(url,function(){ 
var name = ns.CURRENT_NAMESPACE; 
var cb = callbacks[name]; 
delete callbacks[name]; 
cb( ns ); 
}); 
} 
}; 
domSrc.registerCallback = function(namespace,callback) { 
콜백[namespace] = 콜백; 
}; 
domSrc를 반환합니다. 
})(); 

try{ module.exports = 네임스페이스; }catch(e){} 

 
具体看一个例子： 

复主代码

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

4 ns.provide({

로그: 함수 () { console.log(3) } 
}) 
}); 

console.log(4); 

네임스페이스 
.use('logtest') 
.apply( function (ns) { 
console.log(5); 
ns.logtest .log() 
}); 

 

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()의 개체를 사용합니다. 사용을 호출할 때 요구 사항 배열을 초기화합니다.

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

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

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

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

187 var nsDef = this;

createProcedure(nsDef.requires) 
.next(nsDef.defineCallback) 
.call(nsDef,function() { 
콜백( nsDef.getStash() ); 
}); 
} 

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

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

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

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는