菜单

namespace.js Javascript的命名空间库_javascript技巧_脚本之家

2020年2月14日 - 澳门太阳娱乐手机登录

github: 定义Namespace对象:
var Namespace
今后来具体看一下Namespace对象的概念,它是一个NamespaceDefinition对象。该对象是三个函数对象(NamespaceDefinition对象的布局函数,倘诺不给参数的话就默许生成三个main的命名空间),还应该有三个属性,Object,Definition,Proc。其值依次为NamespaceObjectFactory,NamespaceDefinition,createProcedure函数对象类。
复制代码 代码如下: 196 var
createNamespace = function{ 197 return new NamespaceDefinition( 198
NamespaceObjectFactory.create; 200 }; 201 merge(createNamespace, { 202
‘Object’ : NamespaceObjectFactory, 203 Definition: NamespaceDefinition,
204 Proc : createProcedure 205 }卡塔尔(قطر‎;
NamespaceObjectFactory:依照fqn生成NamespaceObject对象。
NamespaceObjectFactory对象唯有四个create方法,参数正是命名空间的名字。该方法有二个闭包景况,该条件里有多个cache变量用于缓存全体变化的NamespaceObject对象。
三个NamespaceObject对象饱含有两脾个性,stash,fqn,proc。方法满含:enqueue,call,valueof,merge,getStash,getExport
复制代码 代码如下: 74 var NamespaceObject
= function _Private_Class_Of_NamespaceObject{ 75 merge(this, { 76
stash: { CURRENT_NAMESPACE : fqn }, 77 fqn : fqn, 78 proc :
createProcedure; 80 }; 81 merge(NamespaceObject.prototype, { 82 enqueue:
function { 83 this.proc.next; 84 }, 85 call: function { 86
this.proc.call; 87 }, 88 valueOf: function() { 89 return
“#NamespaceObject”; 90 }, 91 merge: function { 92 merge; 93 return
this; 94 }, 95 getStash: function(State of Qatar { 96 return this.stash; 97 }, 98
getExport: function { 99 if return this.stash; 100 101 var importNames =
importName.split, 102 retStash = {}; 103 for(var i =
0,l=importNames.length;i复制代码 代码如下: 119 var NamespaceDefinition =
function _Private_Class_Of_NamespaceDefinition { 120 merge(this, {
121 namespaceObject: nsObj, 122 requires : [], 123 useList : [], 124
stash : {}, 125 defineCallback : undefined 126 }); 127 var _self =
this; 128 nsObj.enqueue{ _self.apply; 129 }; 130
merge(NamespaceDefinition.prototype, { 131 use: function{ 132
this.useList.push; 133 var splitted = syntax.split; 134 var fqn =
splitted[0]; 135 var importName = splitted[1]; 136 _assertValidFQN;
137 this.requires.push{ 138 var context = this; 139 var require =
NamespaceObjectFactory.create; 140 require.call{ 141 context.loadImport;
142 $c; 145 return this; 146 }, 147 _mergeStashWithNS: function{ 148
var nsList = nsObj.fqn.split; 149 var current = this.getStash(State of Qatar; 150 151
for(var i = 0,l=nsList.length;i uses :” + this.useList.join; 185 }, 186
apply: function{ 187 var nsDef = this; 188 createProcedure 189 .next 190
.call{ 191 callback; 192 }卡塔尔; 193 } 194 }卡塔尔国;
createProcedure:该目的是一个函数对象,重返Procedure对象的next方法的结果。
Procedure:
Procedure对象有四个天性:state,steps,_status。提供一下二种形式:next,isRunnig,enqueue,dequeue,call,_invoke。
复制代码 代码如下: 1 var Namespace = { 2
/* utility */ 3 var merge = function{ //
把source的兼具本人性质copy到target中去,并重回target对象 4 for 5
if(source.hasOwnProperty target[p] = source[p]; 6 return target; 7
}; 8 var _assertValidFQN = function{ //
验证namespace名字的低价,必得是小写英数字,下划线和点 9 if.test throw;
10 }; 11 12 var Procedure = function _Private_Class_Of_Proc(){ 13
merge(this, { 14 state : {}, // 状态 15 steps : [], // 存款和储蓄状态的数组
16 _status: ‘init’ 17 }卡塔尔国; 18 }; 19 merge(Procedure.prototype, { 20
next: function{ // 若是state有值,存入到steps队列队尾,然后回到this 21
if this.enqueue; 22 return this; 23 }, 24 isRunning: function(卡塔尔国{ //
判断是或不是为running状态 25 return (this._status === ‘running’卡塔尔(قطر‎; 26 }, 27
enqueue: function{ //
这里其实是用数组steps来效仿队列,enqueue正是从队尾入队列 28
this.steps.push; 29 }, 30 dequeue: function(卡塔尔国{ //
dequeue便是从对头出队列 31 return this.steps.shift(卡塔尔国; 32 }, 33 call:
function(initialState,callbackState of Qatar{ // 34 if throw; 35 36 this.state =
initialState || {}; // 保存当前state(NamespaceDefinition对象) 37
this.enqueue{ // 函数入队列steps 38 $c(卡塔尔(قطر‎; // 实践传进来的函数 39
ifcallback; // 若是存在回调函数的,试行回调函数 40 }卡塔尔; 41 this._status
= ‘running’; // 设置景况为running 42 this._invoke(); // 调用_invoke 43
}, 44 _invoke: function(){ 45 var _self = this; 46 var step =
_self.dequeue 47 if{ 48 _self._status = ‘finished’; //
纵然队列为空,则设置情形为finished 49 return; 50 } //
step是数组的情况下不走那条路线 51 if { //
即使该对象是函数对象的时候,则履行该call方法,并点名内部this为_self.state,回调函数里面继续调用_invoke
52 return step.call( _self.state,function _cont{ 53 if _self.state =
state; 54 _self._invoke; 56 } 57 var finishedProcess = 0; 58 if
_self._invoke(卡塔尔(قطر‎; // 要是该数高管度为0,则调用_invoke 59 for(var i
=0,l=step.length;i”; 90 }, 91 merge: function { 92 merge; 93 return
this; 94 }, 95 getStash: function(State of Qatar { 96 return this.stash; 97 }, 98
getExport: function { 99 if return this.stash; 100 101 var importNames =
importName.split, 102 retStash = {}; 103 for(var i =
0,l=importNames.length;i uses :” + this.useList.join; 185 }, 186 apply:
function{ 187 var nsDef = this; 188 createProcedure 189 .next 190 .call{
191 callback; 192 }卡塔尔; 193 } 194 }卡塔尔; 195 196 var createNamespace =
function{ 197 return new NamespaceDefinition( 198
NamespaceObjectFactory.create; 200 }; 201 merge(createNamespace, { 202
‘Object’ : NamespaceObjectFactory, 203 Definition: NamespaceDefinition,
204 Proc : createProcedure 205 }卡塔尔; 206 return createNamespace; 207 }State of Qatar(卡塔尔国;
追加定义Namespace援助的措施: Namespace.use Namespace.fromInternal
Namespace.GET Namespace.fromExternal 复制代码 代码如下: 1 Namespace.use = function{
return Namespace; } 2 Namespace.fromInternal = Namespace.GET = { 3 var
get = { 4 var createRequester = function(卡塔尔 { 5 var xhr; 6 try { xhr =
new XMLHttpRequest { 7 try { xhr = new ActiveXObject } catch { 8 try {
xhr = new ActiveXObject } catch { 9 try { xhr = new ActiveXObject }
catch { 10 try { xhr = new ActiveXObject } catch { 11 throw new Error(
“This browser does not support XMLHttpRequest.” State of Qatar 12 } 13 } 14 } 15 } 16
} 17 return xhr; 18 }; 19 var isSuccessStatus = function { 20 return
(status >= 200 && status < 300卡塔尔(قطر‎ || 21 status == 304 || 22 status
== 1223 || 23 (!status && (location.protocol == “file:” ||
location.protocol == “chrome:”) ); 24 }; 25 26 return function{ 27 var
xhr = createRequester(); 28 xhr.open; 29 xhr.onreadystatechange =
function(){ 30 if{ 31 if( isSuccessStatus{ 32
callback(true,xhr.responseText); 33 }else{ 34 callback; 35 } 36 } 37 };
38 xhr.send; 41 42 return function{ 43 return function{ 44
get(url,function(isSuccess,responseText){ 45 if{ 46 if 47 return eval;
48 else 49 return ns.provide ); 50 }else{ 51 var pub = {}; 52 pub[url]
= ‘loading error’; 53 ns.provide; 56 }; 57 }; 58 })(); 59 60
Namespace.fromExternal = { 61 var callbacks = {}; 62 var
createScriptElement = function{ 63 var scriptElement =
document.createElement; 64 65 scriptElement.loaded = false; 66 67
scriptElement.onload = function(){ 68 this.loaded = true; 69 callback();
70 }; 71 scriptElement.onreadystatechange = function(){ 72 if$/.test
return; 73 if return; 74 scriptElement.loaded = true; 75 callback(); 76
}; 77 scriptElement.src = url; 78 document.body.appendChild; 79 return
scriptElement.src; 80 }; 81 var domSrc = function{ 82 return function{
83 var src = createScriptElement{ 84 var name = ns.CURRENT_NAMESPACE;
85 var cb = callbacks[name]; 86 delete callbacks[name]; 87 cb; 89 }
90 }; 91 domSrc.registerCallback = function { 92 callbacks[namespace]
= callback; 93 }; 94 return domSrc; 95 }State of Qatar(卡塔尔(قطر‎; 96 97 try{ module.exports =
Namespace; }catch{} 具体看叁个事例: 复制代码 代码如下: 1 Namespace 2 .define { 3
console.log; 4 ns.provide { console.log; 8 9 console.log; 10 11
Namespace 12 .use 13 .apply { 14 console.log; 15 ns.logtest.log;
1:Namespace => new NamespaceDefinition(NamespaceObjectFactory.create
即生成三个NamespaceDefinition对象,该对象是由NamespaceObject对象来开始化的,该目标同期还会有三个脾气,Object,Definition,Proc。其值依次为
NamespaceObjectFactory,NamespaceDefinition,createProcedure函数对象类。Namespace
再次回到的结果就是变化的NamespaceDefinition对象,然后调用其define方法,早先化defineCallback。那个时候只是是概念,不抓牢际的动作。
复制代码 代码如下: 166 define: function{
167 var nsDef = this, nsObj = this.namespaceObject; 168
this.defineCallback = function { //
给defineCallback赋值,同一时间定义一下该回调函数的上下文,nsDef和nsObj四个对象。
169 var ns = { 170 provide : function{ 171 nsObj.merge; 173 } 174 }; 175
merge; 176 merge; 177 callback; 178 }; 179 },
2:使用早先定义的namespace里面包车型客车目的,Namespace.use.use(卡塔尔国 =>
Namespace。调用use的时候早先化requires数组。 复制代码 代码如下: 131 use: function{ //
使用namespace 132 this.useList.push; // 该namespace字符串存入数组useList
133 var splitted = syntax.split; // namespace和它的目的使用空格分开 134
var fqn = splitted[0]; // 取得namespace 135 var importName =
splitted[1]; // 得到namespace中的对象 136 _assertValidFQN; 137
this.requires.push{ // 放二个函数到requires数组中 138 var context =
this; 139 var require = NamespaceObjectFactory.create; //
获取内定的NamespaceObject对象,以前生成过得对象能够向来从缓存中拿走 140
require.call{ // 调用NamespaceObject对象的call方法 141
context.loadImport; 142 $c; 145 return this; 146 },
3:调用main的apply方法。看一下绘影绘声的apply方法 复制代码 代码如下: 186 apply: function{ 187 var
nsDef = this; 188 createProcedure 189 .next 190 .call{ 191 callback; 192
}卡塔尔; 193 }
收取requires数组里面包车型大巴靶子生成Proc对象,并把该requires数组里的对象入队列steps中,还大概有nsDef.defineCallback也入队列,调用Proc的call方法。第七个参数是nsDef,第四个参数是回调函数。
具体行使方法:
在概念Namespace的时候,全数的概念放在define里面,而且以无名氏函数的方式定义。function
{ // 具体的落到实处 //
定义对曾祖父开的目的,外界在use该nsName之后,就可以经过ns.nsName.key(卡塔尔(قطر‎来调用它
ns.provide;}
使用namespace.js的利润,全数的定义都是在急需的时候才起来实施的,也便是在切实选拔的时候才开首解析定义。
ps:具体内部调用关系依然不曾弄驾驭,以后有时间再整合治理,那篇太乱了。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图