线程很晚,但我使用过的一种技术,pre-Angular,是利用 JSON 和 JS 的灵活性来动态引用集合键,并使用环境中不可剥夺的事实(主机服务器名称、当前浏览器语言等)作为输入以选择性地区分/首选 JSON 数据结构中的后缀键名。
这不仅提供了部署环境上下文(每个 OP),还提供了任何任意上下文(例如语言)来提供 i18n 或同时需要的任何其他变化,并且(理想情况下)在单个配置清单中,没有重复,并且可读性明显。
大约 10 行香草 JS
过于简单但经典的示例:JSON 格式的属性文件中的 API 端点基本 URL 会因环境而异,其中(natch)主机服务器也会有所不同:
...
'svcs': {
'VER': '2.3',
'API@localhost': 'http://localhost:9090/',
'API@www.uat.productionwebsite.com': 'https://www.uat.productionwebsite.com:9090/res/',
'API@www.productionwebsite.com': 'https://www.productionwebsite.com:9090/api/res/'
},
...
辨别功能的关键就是请求中的服务器主机名。
当然,这可以与基于用户语言设置的附加键结合使用:
...
'app': {
'NAME': 'Ferry Reservations',
'NAME@fr': 'Réservations de ferry',
'NAME@de': 'Fähren Reservierungen'
},
...
区分/偏好的范围可以限于单个键(如上),其中“基本”键仅在函数输入有匹配键+后缀时才会被覆盖——或整个结构,以及该结构本身递归解析以匹配歧视/偏好后缀:
'help': {
'BLURB': 'This pre-production environment is not supported. Contact Development Team with questions.',
'PHONE': '808-867-5309',
'EMAIL': 'coder.jen@lostnumber.com'
},
'help@www.productionwebsite.com': {
'BLURB': 'Please contact Customer Service Center',
'BLURB@fr': 'S\'il vous plaît communiquer avec notre Centre de service à la clientèle',
'BLURB@de': 'Bitte kontaktieren Sie unseren Kundendienst!!1!',
'PHONE': '1-800-CUS-TOMR',
'EMAIL': 'customer.service@productionwebsite.com'
},
所以,如果生产网站的访问用户有德语(de)语言偏好设置,上述配置将崩溃为:
'help': {
'BLURB': 'Bitte kontaktieren Sie unseren Kundendienst!!1!',
'PHONE': '1-800-CUS-TOMR',
'EMAIL': 'customer.service@productionwebsite.com'
},
如此神奇的偏好/歧视 JSON 重写函数是什么样的?不多:
// prefer(object,suffix|[suffixes]) by/par/durch storsoc
// prefer({ a: 'apple', a@env: 'banana', b: 'carrot' },'env') -> { a: 'banana', b: 'carrot' }
function prefer(o,sufs) {
for (var key in o) {
if (!o.hasOwnProperty(key)) continue; // skip non-instance props
if(key.split('@')[1]) { // suffixed!
// replace root prop with the suffixed prop if among prefs
if(o[key] && sufs.indexOf(key.split('@')[1]) > -1) o[key.split('@')[0]] = JSON.parse(JSON.stringify(o[key]));
// and nuke the suffixed prop to tidy up
delete o[key];
// continue with root key ...
key = key.split('@')[0];
}
// ... in case it's a collection itself, recurse it!
if(o[key] && typeof o[key] === 'object') prefer(o[key],sufs);
};
};
在我们的实现中,包括 Angular 和 Angular 之前的网站,我们通过将 JSON 放在一个自执行的 JS 闭包中(包括 prefer() 函数,并提供主机名和语言代码(并接受您可能需要的任何其他任意后缀):
(function(prefs){ var props = {
'svcs': {
'VER': '2.3',
'API@localhost': 'http://localhost:9090/',
'API@www.uat.productionwebsite.com': 'https://www.uat.productionwebsite.com:9090/res/',
'API@www.productionwebsite.com': 'https://www.productionwebsite.com:9090/api/res/'
},
...
/* yadda yadda moar JSON und bisque */
function prefer(o,sufs) {
// body of prefer function, broken for e.g.
};
// convert string and comma-separated-string to array .. and process it
prefs = [].concat( ( prefs.split ? prefs.split(',') : prefs ) || []);
prefer(props,prefs);
window.app_props = JSON.parse(JSON.stringify(props));
})([location.hostname, ((window.navigator.userLanguage || window.navigator.language).split('-')[0]) ] );
Angular 之前的站点现在将有一个折叠的(没有 @ 后缀键)window.app_props来引用。
Angular 站点,作为 bootstrap/init 步骤,简单地将死掉的 props 对象复制到 $rootScope,并(可选)从全局/窗口范围中销毁它
app.constant('props',angular.copy(window.app_props || {})).run( function ($rootScope,props) { $rootScope.props = props; delete window.app_props;} );
随后注入控制器:
app.controller('CtrlApp',function($log,props){ ... } );
或从视图中的绑定中引用:
<span>{{ props.help.blurb }} {{ props.help.email }}</span>
注意事项?@ 字符不是有效的 JS/JSON 变量/键命名,但目前已被接受。如果这会破坏交易,请替换您喜欢的任何约定,例如“__”(双下划线),只要您坚持它。
该技术可以应用于服务器端,移植到 Java 或 C#,但您的效率/紧凑性可能会有所不同。
或者,函数/约定可以是前端编译脚本的一部分,这样完整的全环境/全语言 JSON 永远不会通过网络传输。
更新
我们已经改进了这种技术的使用,允许一个键有多个后缀,以避免被迫使用集合(你仍然可以,只要你想要的深度),以及尊重首选后缀的顺序。
示例(另见工作jsFiddle):
var o = { 'a':'apple', 'a@dev':'apple-dev', 'a@fr':'pomme',
'b':'banana', 'b@fr':'banane', 'b@dev&fr':'banane-dev',
'c':{ 'o':'c-dot-oh', 'o@fr':'c-point-oh' }, 'c@dev': { 'o':'c-dot-oh-dev', 'o@fr':'c-point-oh-dev' } };
/*1*/ prefer(o,'dev'); // { a:'apple-dev', b:'banana', c:{o:'c-dot-oh-dev'} }
/*2*/ prefer(o,'fr'); // { a:'pomme', b:'banane', c:{o:'c-point-oh'} }
/*3*/ prefer(o,'dev,fr'); // { a:'apple-dev', b:'banane-dev', c:{o:'c-point-oh-dev'} }
/*4*/ prefer(o,['fr','dev']); // { a:'pomme', b:'banane-dev', c:{o:'c-point-oh-dev'} }
/*5*/ prefer(o); // { a:'apple', b:'banana', c:{o:'c-dot-oh'} }
1/2(基本用法)喜欢'@dev'键,丢弃所有其他后缀键
3更喜欢 '@dev' 而不是 '@fr',更喜欢 '@dev&fr' 而不是所有其他人
4(与 3 相同,但更喜欢 '@fr' 而不是 '@dev')
5无首选后缀,删除所有后缀属性
它通过对每个后缀属性进行评分并在迭代属性并找到更高得分的后缀时将后缀属性的值提升到非后缀属性来实现这一点。
此版本中的一些效率,包括消除对 JSON 的依赖以进行深度复制,并且仅递归到在其深度处得分轮次中幸存的对象:
function prefer(obj,suf) {
function pr(o,s) {
for (var p in o) {
if (!o.hasOwnProperty(p) || !p.split('@')[1] || p.split('@@')[1] ) continue; // ignore: proto-prop OR not-suffixed OR temp prop score
var b = p.split('@')[0]; // base prop name
if(!!!o['@@'+b]) o['@@'+b] = 0; // +score placeholder
var ps = p.split('@')[1].split('&'); // array of property suffixes
var sc = 0; var v = 0; // reset (running)score and value
while(ps.length) {
// suffix value: index(of found suffix in prefs)^10
v = Math.floor(Math.pow(10,s.indexOf(ps.pop())));
if(!v) { sc = 0; break; } // found suf NOT in prefs, zero score (delete later)
sc += v;
}
if(sc > o['@@'+b]) { o['@@'+b] = sc; o[b] = o[p]; } // hi-score! promote to base prop
delete o[p];
}
for (var p in o) if(p.split('@@')[1]) delete o[p]; // remove scores
for (var p in o) if(typeof o[p] === 'object') pr(o[p],s); // recurse surviving objs
}
if( typeof obj !== 'object' ) return; // validate
suf = ( (suf || suf === 0 ) && ( suf.length || suf === parseFloat(suf) ) ? suf.toString().split(',') : []); // array|string|number|comma-separated-string -> array-of-strings
pr(obj,suf.reverse());
}