Javascript – 动态更改函数的内容

我有这个function（在页面加载时）使用“css”jQuery方法改变我的边距…

function page_change() { var h = window.location.hash; switch (h) { case 'home': $('.page-slide-box').css({marginLeft: 0}); break; case 'history': $('.page-slide-box').css({marginLeft: '-820px'}); break; // more cases here..... } } 

…但是在页面加载之后，我想要改变动画的动画 。 我在想我可以使用replace（）改变现有的函数（而不是编写另一个冗余函数），如下所示：

 window.onhashchange = function() { var get = page_change.toString(); var change = get.replace(/css/g, 'animate'); page_change(); } 

这在我的page_change（）函数中成功地将“css”的所有实例更改为“animate”。 更换字符串后如何动态更改此function？ 或者这只是一个坏主意？

Answer 1

在你的例子中，我会说这是一个可怕的想法。 为什么不简单地定义可以同时执行这两个操作的1个函数，并相应地使

 var page_change = function(e) { var method = e instanceof Event ? 'animate' : 'css'; switch (location.hash) { case 'home': $('.page-slide-box')[method]({marginLeft: 0}); break; //and so on... } }; 

直接调用此函数，它将设置css，使用它如下：

 window.onhaschange = page_change; 

并且它将animate而不是使用css方法。 简单

如果您想轻松测试，可以试试这个：

 var page_change = function(e) { var method = e instanceof Event ? 'animate' : 'css'; console.log(method); }; document.body.onclick = page_change; page_change();//logs css //click the body and... //animate will be logged 

基本上，这是如何工作的。
定义像这样的函数（匿名函数，分配给变量或由var 引用 ）的额外好处是，您可以轻松地将新函数分配给同一个变量：

 var myFunc = function(){ console.log('foo');}; myFunc();//logs foo myFunc = function(){console.log('bar')}; myFunc();//logs bar 

这也可能对你有用……当然。 你甚至可以存储旧function：

 var myFunc = function(){ console.log('foo');}; myFunc();//logs foo var oldMyFunc = myFunc; myFunc = function(){console.log('bar')}; myFunc();//logs bar oldMyFunc();//logs foo 

玩这个有一段时间，找到最符合你需求的方法（它可能是我在这个答案中谈到的事情的组合）

Answer 2

你仍然需要创建一个new Function() ，主体是被替换的css的主体，所以只需编写另一个函数，你可以在其中放置延迟和回调以及animate()所需的一切。

Answer 3

分配布尔值以反映页面加载状态（比如loadstatus ），并使用它来确定操作。 您可以使用括号表示法来触发正确的操作：

 function page_change() { var h = window.location.hash, action = loadstatus ? 'animate' : 'css'; // ^ set loadstatus to true after page load. switch (h) { case 'home': $('.page-slide-box')[action]({marginLeft: 0}); // ^ action used here break; case 'history': $('.page-slide-box')[action]({marginLeft: '-820px'}); break; // more cases here..... } }