Javascript 迷你型混淆变量名
我有一个角度路由器,它使用解析功能并调用服务Javascript 迷你型混淆变量名,javascript,angularjs,minify,Javascript,Angularjs,Minify,我有一个角度路由器,它使用解析功能并调用服务MyService var Router = function ($stateProvider, $urlRouterProvider) { $stateProvider .state(home, { resolve:{ myFactory: 'MyFactory', checkUser: function(myFactory){
MyService
var Router = function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state(home, {
resolve:{
myFactory: 'MyFactory',
checkUser: function(myFactory){
return myFactory.getUser().then(function(data){
// some logic with data
});
}
},
});
};
module.exports = ['$stateProvider', '$urlRouterProvider', Router];
当我运行它通过minifier时,我最终得到:
var e = function(t, e) {
t.state(home, {
url: "/home",
resolve: {
myFactory: "MyFactory",
checkUser: function(t){
return t.getUser().then(function(e){
});
}
},
})
}
;
t.exports = ["$stateProvider", "$urlRouterProvider", e]
这里的问题是变量t
和e
在最高一级:
t = $stateProvider
e = $urlRouterProvider
但是,在myresolve
中,再次使用了t
和e
,但是:
t = $stateProvider but should = myFactory
e = $urlRouterProvider but should = data
因此t.getUser
或t.getProducts
实际上并不存在,因此我的应用程序无法加载
更新:
注释版本:
var Router = function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state(home, {
resolve:{
myFactory: 'MyFactory',
checkUser: ['myFactory', function(myFactory){
return myFactory.getUser().then(function(data){
// some logic with data
});
}]
},
});
};
module.exports = ['$stateProvider', '$urlRouterProvider', Router];
这本质上是从对象的“方法”中访问对象及其属性的问题,因为它是正确写入的 我为您制作了一个演示如何访问对象属性以及如何区分访问对象属性和传递给函数的参数的示例 要纠正您的特定错误,您的解决方案可能需要如下所示,但我建议您检查fiddle示例并尝试自己解决它。我在angular方面的经验为0,据我所知,您可以在那里引用$scope,它可以替代
此
,但正如我所说,我不熟悉,希望这对您有所帮助:
resolve:{
self: this,
myFactory: 'MyFactory',
checkUser: function(){
return self.myFactory.getUser().then(function(data){
// some logic with data
});
}
},
这是标准的缩小方法,为了使代码更小,它还将变量名更改为更小 您可以通过三种方式解决此问题: a) 在minifier中,必须指定no才能更改变量名。(例如uglify插件中的
mangle:false
)
b) 使用角度数组表示法,例如:
angular.service(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { .... } ]);
c) 使用$inject属性,例如:
var Router = function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state(home, {
resolve:{
myFactory: 'MyFactory',
checkUser: function(myFactory){
return myFactory.getUser().then(function(data){
// some logic with data
});
}
},
});
};
Router.$inject = ['$stateProvider', '$urlRouterProvider'];
module.exports = ['$stateProvider', '$urlRouterProvider', Router];
在您的特定场景中,只有a)和c)有效。你需要注释。
例如,对于Gulp,我使用的
myFactory
是此解析器中的本地依赖项。与任何其他依赖项一样,它应该是为了在缩小的JS中正确注入
checkUser: ['myFactory', function(myFactory){
return myFactory.getUser().then(function(data){
// some logic with data
});
}]
可用于避免生产中出现此类错误。我看不出您的问题。在
resolve
中,t
是checkUser
函数的参数名,因此调用checkUser
的人有责任提供正确的参数。@ammoQ-感谢您提供的信息,应用程序中没有调用checkUser,路由器加载时会调用getUser()和getProducts。对不起,我的错误。应该先了解angular的注射机制。发现:和:-都提到了缩小和隐式依赖项注释引起的问题。可能是@ammq的重复。我仍然认为你在写答案时是绝对正确的。调用checkUser
的人提供参数。Oam Psy,something调用该函数,否则您将永远无法完成任何操作,无论调用它的是什么,都会给它赋值,如果您只想使用上面代码行中的值,请删除“myFactory”如果对象正在进行函数调用,则使用this.myFactory
访问该对象的属性。如果它是嵌套的,那么您需要提供另一个参数来存储此
。谢谢,我看到了:Error:[ng:areq]参数'fn'不是一个函数,没有定义如果您确定错误来自代码的这一部分,您能用警报(“我在这里输入”)替换//一些逻辑数据吗
并验证它是否未被执行(使其成为该函数的第一行)?我不确定angular在哪里将它的fn
参数绑定到what调用,但这里不应该是这个方法。您能否验证警报(“我在此处输入”)代码>未出现?已尝试控制台日志,未记录任何内容。但是,如果我使用我的未统一版本,日志就会出现。关于你的观点是调用checkUser,我刚刚将其更改为randon之类的东西Random和blahing。。。它仍然在apploadit上运行,这意味着它很可能通过某个键被调用。关键是,为了让其中的任何代码正常工作,必须调用它,不管名称如何,如果没有任何东西调用它,它将是一个死方法,永远不会启动,所以它可能会被框架本身调用。你能发布缩小版的样子吗?谢谢,我添加了一个注释更新,见上文。例如,当我将该代码复制到一个缩微器中时,根据我在myFactory.getUser()中的操作,会出现相同的问题。getUser@OamPsy这是正常的行为e
是局部变量,在不同的函数上下文中可以多次使用。如果函数注释正确,它不会干扰角度DI。