对象更新不正确
我正在创建一个使用jQuery/JavaScript的网站,我得到的问题是:当我创建aMenu的几个实例时,我在单独的文件中创建了一个对象 - 它似乎更新每个选项每个对象的信息,尽管它们是自己的变量。对象更新不正确
的JavaScript,我创建AMENU对象:
// Drawer item, animates via CSS - no need to animate using jQuery
var drawerOptions = {
animate: false,
toggle_element: '#parent',
toggle_attribute: 'data-opened',
default_toggled: false,
toggle_after_animation: false
}
var Drawer = new aMenu(drawerOptions);
// LargeDrawer item
var largeDrawerOptions = {
animate: false,
toggle_element: '#parent',
toggle_attribute: 'data-opened',
default_toggled: false,
toggle_after_animation: false
}
var LargeDrawer = new aMenu(largeDrawerOptions);
// Search item
var searchbarOptions = {
animate: true,
toggle_element: '.search_nav_drop',
toggle_attribute: 'data-opened',
default_toggled: false,
toggle_after_animation: true,
animation: 'slide'
}
var NSearchBar = new aMenu(searchbarOptions);
AMENU对象:
function aMenu(options){
// Run our init if we have one.
this.options.onInit(this);
// Intertwine our current default options and whats being passed in.
// Same as $.extend
this.options = intertwine(this.options, options);
// Determine default toggling.
this.toggled = this.isToggled();
}
// Default options
aMenu.prototype.options = {
animate: true, // If we are animating this menu
animation: 'slide', // Animation types: none|fade|slide|custom
speed: 500, // Animation speed
easing: 'linear', // Easing into the animation types: linear|swing|_default
stop_event: false, // If the stop event is used in this case
toggle_element: '', // This element keeps track of being toggled in HTML. Leave blank or 'none' for keeping track in JavaScript
toggle_attribute: '', // Attribute that get toggled (true/false). Leave blank if toggle_element is blank or 'none'
default_toggled: true, // The default selection if we are toggled or not (only used if no toggle_element)
throw_errors: true, // If you want errors to be thrown for problem code.
toggle_after_animation: true, // If you want the menu to toggled after the animation is completed.
onToggle: function() {return false;}, // Function gets trigger when toggled
onInit: function() {return false;}, // Function gets trigger at initialization
onHide: function() {return false;}, // Function gets triggered when inactivated
onShow: function() {return false;}, // Function gets triggered when activated
onShowAnimationCompleted: function() {return false;}, // Function gets triggered after animation completes on show
onHideAnimationCompleted: function() {return false;} // Function get trigger after animation completes on hide
}
只是指定的对象抽屉将不得不通过作为NSearchBar通过了相同的选项抽屉将被完全打破。
不确定这是原型问题,还是只是我完全缺少的东西。欣赏任何帮助是可能的,谢谢!
的this.options
最初referes到aMenu.prototype.options
的intertwine
(如果它是一样$.extend
)延伸,并返回目标:
记住目标对象(第一自变量)将是修改后,也将从$ .extend()返回。
所以this.options
对aMenu
的所有实例都是一样的。
你需要写:
this.options = $.extend({}, this.options, options)
这个副本最初是指aMenu.prototype.options
到一个新的opject中的this.options
属性,然后拷贝options
属性并返回新的对象,它是分配给this.options
。
如果它的工作原理与intertwine
一样,取决于你是如何实现它的。
Ermahgerd。非常感谢! – escapesequence
@JamesJohnston你应该阅读关于原型是如何工作的。 –
你在什么范围下运行?默认情况下'this'将是窗口,因此'aMenu'函数的'this.element'将始终是'window',正如你在这里看到的:https://jsfiddle.net/p2ag6o8j/。从你的代码的外观来看,它似乎有点像你试图在走路之前跑步。你想在这里实现什么目标? –
元素部分是完全没有意义的 - 删除/更新的代码。它将用于菜单对象的可能的窗口引用,我试图简单地实现菜单的标准类/对象来覆盖函数,并且像其他语言中的抽象类一样使用。 – escapesequence