Javascript-动态更改函数的内容

编程之家收集整理的这篇文章主要介绍了Javascript-动态更改函数的内容编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

我有此功能(在页面加载时)使用“css”jQuery方法更改边距…functionpage_change(){varh=window.location.hash;switch(h){case'home':$('.page-slide-box').css({marginLeft:0});break;case'history':$('.p

我有功能(在页面加载时)使用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”.替换字符串后,如何动态更改此函数?还是这只是一个坏主意?

解决方法:

在您的示例中,我会说这是一个糟糕的主意.为什么不简单地定义一个可以同时执行这两个功能函数,并相应地使用它:

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;

它会设置动画,而不是使用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

当然,这也可能对您有用.您甚至可以存储旧功能

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

试一试,找到最适合您需求的方法(这很可能是我在此答案中讨论的内容组合)

总结

以上是编程之家为你收集整理的Javascript-动态更改函数的内容全部内容,希望文章能够帮你解决Javascript-动态更改函数的内容所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

jQuery文章

由于是触摸屏,所以需要一款JS虚拟键盘。上网找了一个好用的VirtualKeyboard,作了修改。 修改该插件参考的博客文章:http://www.cnblogs.com/xinggong/arch
HashMap代码(这种实现方式是错误的,错误原因:代码中_map、_length变量是HashMap的所有实例共用的): /** * HashMap * 2021年09月09日 */ (functi
一、引用CSS和JS:View Code二、HTML:View Code三、JS:$(function () { var total = parseInt("@(ViewBag.total)
JS数字键盘,JS小键盘CSS代码:#numberkeyboard{ border: 1px solid #b3b3b3; background: #f2f3f7; height: 285px; ma
C.js代码: /** * 有BUG */ (function (global) { var _id; var _map; var _length; global.C = function () {
一、节点模糊搜索功能:搜索成功后,自动高亮显示并定位、展开搜索到的节点。二、节点异步加载:1、点击展开时加载数据;2、选中节点时加载数据。前台代码如下:View Code View Code后台代码(
需求:页面显示教师信息列表,列表中每一条数据显示图片滚动插件,每张图片的长宽及长宽比例各不相同。 前提条件:美工把静态页面写好 HTML代码: @using Models; @{ List<cm
示例代码: marker.addEventListener("click", function(){ if (!window.markerClicked) { window.mar
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注