[英]Javascript - Dynamically change the contents of a function
I have this function that (on page load) changes my margin using the "css" jQuery method... 我有这个函数(在页面加载时)使用“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.....
}
}
...but after the page is loaded, I'd like to animate the change instead. ...但是在加载页面之后,我想改为对更改进行动画处理。 I was thinking I could alter the existing function using replace() (rather than writing another redundant function), like so:
我以为我可以使用replace()改变现有的函数(而不是编写另一个冗余函数),如下所示:
window.onhashchange = function() {
var get = page_change.toString();
var change = get.replace(/css/g, 'animate');
page_change();
}
This successfully changes all instances of "css" to "animate" in my page_change() function. 这在我的page_change()函数中成功地将“css”的所有实例更改为“animate”。 How do I get this function to change dynamically once I've replaced the strings?
更换字符串后如何动态更改此功能? Or is this just a bad idea?
或者这只是一个坏主意?
In your example, I'd say this is a terrible idea. 在你的例子中,我会说这是一个糟糕的主意。 Why not simply define 1 function that can do both, and use it accordingly:
为什么不简单地定义可以同时执行这两个操作的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...
}
};
call this function directly, and it'll set the css, use it like so: 直接调用此函数,它将设置css,使用它如下:
window.onhaschange = page_change;
and it'll animate
instead of use the css
method. 并且它将
animate
而不是使用css
方法。 Easy 简单
If you want to test this easily, you could try this: 如果您想轻松测试,可以试试这个:
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
That's, basically, how this works. 基本上,这是如何工作的。
The added benefit of defining a function like this (anonymous function, assigned to a variable or referenced by a var) is that you can easily assign a new function to that same variable: 定义像这样的函数(匿名函数,分配给变量或由var 引用 )的额外好处是您可以轻松地将新函数分配给同一个变量:
var myFunc = function(){ console.log('foo');};
myFunc();//logs foo
myFunc = function(){console.log('bar')};
myFunc();//logs bar
This might work for you, too... of course. 这也可能对你有用......当然。 You can even store the old function:
你甚至可以存储旧功能:
var myFunc = function(){ console.log('foo');};
myFunc();//logs foo
var oldMyFunc = myFunc;
myFunc = function(){console.log('bar')};
myFunc();//logs bar
oldMyFunc();//logs foo
Play around with this for a while, to find the approach that fits your needs best (it could well be a combination of the things I talked about in this answer) 玩这个有一段时间,找到最符合你需求的方法(它可能是我在这个答案中谈到的事情的组合)
你仍然需要创建一个new Function()
,主体是被替换的css
的主体,所以只需编写另一个函数,你可以在其中放置延迟和回调以及animate()
所需的一切。
Assign a boolean to reflect the page load state (say loadstatus
), and use it to determine the action. 分配一个布尔值以反映页面加载状态(比如
loadstatus
),并使用它来确定操作。 You can use bracket notation to trigger the right action: 您可以使用括号表示法来触发正确的操作:
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.....
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.