Tag: oop

OOP JavaScript – 创建自定义Div对象: 我刚刚开始使用JavaScript中的OOP。我想创建一个自定义的“面板”。这是我到目前为止： function ShinyPanel(css, attributes) { this.container = $(document.createElement(“div”)).addClass(“shinyPanel”); this.titleBar = $(document.createElement(“div”)).addClass(“shinyPanelTitleBar”).appendTo(this.container); this.topShine = $(document.createElement(“div”)).addClass(“shinyPanelTopShine”).appendTo(this.container); this.leftShine = $(document.createElement(“div”)).addClass(“shinyPanelLeftShine”).appendTo(this.container); this.content = $(document.createElement(“div”)).addClass(“shinyPanelContent”).appendTo(this.container); if (!css) css = {}; if (!attributes) attributes = {}; this.css = css; $(this.container).css(this.css); this.title = attributes[“title”]; $(this.titleBar).html(this.title); } 现在我可以实例化这个对象，并通过以下方式将其附加到正文： var panel = new ShinyPanel({position:”absolute”, top:”25%”, width:”300px”, height:”200px”}, {title:”Test”}); $(“body”).append(panel.container); 我的问题是，有没有办法让对象本身成为div，从而消除了对“容器”div的需求？然后我可以调用$(“body”).append(panel); 。 […]

Javascript static / singelton – 这与vs _this vs对象名称: 这是关于性能和最佳实践的问题。假设我有一个封装了大量辅助方法的js对象。该对象被视为静态类，这意味着它永远不会被实例化，并且它的所有方法基本上都是辅助方法。当使用事件和jQuery时，对象的this范围不断变化，因为它有相当多的方法，我想知道什么是最佳实践 – 在每个方法的开头将其保存到_this中，或者只使用对象名称MyObject 。多年来，我一直在做两件事，当涉及到singelton /静态物体时，但我认为必须有一个最佳实践，而且是采用最佳方法的时候了。我目前的研究表明，使用_this而不是直接调用MyObject所带来的好处主要是这两个：如果对象的名称发生变化， _this将始终有效可能更快（虽然没有看到性能测试结果），因为浏览器保持在相同的范围内，并且不需要每次都找出MyObject的范围。使用MyObject优点：少写代码。垃圾收集管理？（分配的变量较少）对于一些开发人员来说可能更具可读性（其中多个适用）因为MyObject将始终有效，所以更容易重构代码我想知道是否有一种全局保存_this （仅在对象的范围内）并避免在每个方法的开头分配它。如果不是 – 我是否还有其他优缺点，或者直接调用对象名称被认为是不好的做法。这是一个简化的参考对象（真实对象有更多的方法）。 var MyObject = { init: function() { this.registerEvents(); //other stuff }, registerEvents: function() { this.registerOnSomeEvent(); //registering more events.. //… }, registerOnSomeEvent: function() { var _this = this; jQuery(‘#someid’).click(function() { _this.doSomething();//option […]

当方法传递给另一个函数时，如何在实例方法中访问实例属性？: 我知道在下面的代码中，如果我单击按钮，它将打印出undefined ，因为this.field变为按钮的上下文而不是Container 。我的问题是当this.func传递给另一个函数时，我如何访问Container this.func ，这是一个与Container不同的上下文范围。 function Container(){ this.field = ‘field’; $(‘button’).click(this.func); } Container.prototype.func = function(){ console.log(this.field); } 我知道我可以做到这一点，但有更好的方法吗？因为我宁愿在构造函数之外定义方法，所以我不会混淆它。 function Container(){ var thisObj = this; this.field = ‘field’; $(‘button’).click(function(){ console.log(thisObj.field) }); }

用jQuery编写OO Javascript: 我来自Prototype JS背景，其中通过使用Class.create()鼓励使用OO Javascript。现在我正在做一些JQuery工作，我正在尝试编写一些结构合理的JQuery代码，例如，我可以从两个不同的单击事件处理程序调用相同的对象函数。这是Prototype中的代码： document.observe(“dom:loaded”, function() { // create document APP.pageHelper = new APP.PageHelper(); }); // namespace our code window.APP = {}; // my class APP.PageHelper = Class.create({ // automatically called initialize: function(name, sound) { this.myValue = “Foo”; // attach event handlers, binding to ‘this’ object $(“myButton”).observe(“click”, this.displayMessage.bind(this)) }, displayMessage: function() { console.log(“My value: […]

jQuery创建对象: 我如何在jQuery中创建一个对象，然后继续创建这个对象的几个不同的实例创建一个名为box的对象，它包含一个名为color的变量。然后用不同的存储颜色制作这个对象的几个实例。

JavaScript中的Java-esque OOP和jQuery失败: 我正在研究一个项目，我真的想编写面向对象的JavaScript代码。我刚开始阅读Douglas Crockford的JavaScript：The Good Parts ，我很快就意识到在JavaScript中编写Java-esque OOP将是一项艰巨的任务。到目前为止，我写了类似下面的内容…… // index.html $(document).ready(function() { $().SetUpElements(); }); // this is in a different js file $.fn.SetUpElements = function() { // do stuff here $().UpdateElement(); }; // this is in yet another different js file $.fn.UpdateElement = function() { // do stuff here var element = new Element(id, name); […]

用Javascript编程OOP – 正确: 我很有兴趣改进我的javascript代码以正确OOP ….目前我倾向于做这样的事情： jQuery(document).ready(function () { Page.form = (function () { return { //generate a new PDF generatePDF: function () { }, //Update the list of PDFs available for download updatePDFDownloads: function () { }, /* * Field specific functionality */ field: (function () { return { //show the edit prompt edit: function (id, name) { […]

在jQuery中扩展原型时，如何保持对this关键字的控制？: 我在jQuery中实现了一个类似于类的结构，但是当我尝试调用我的一些函数时遇到了一些麻烦。这是结构的设置方式： MyClass = function(name) { this.init(name); } $.extend(MyClass.prototype, { init: function(theName) { this.myFunction(); // works $(‘.myclass’).each(function(){ this.myFunction(); // doesn’t work }); }, myFunction = function(){} }); 我遇到的问题是，当我尝试从jQuery块（如上面的each()构造）中调用我的一个函数（例如， myFunction() ）时，我得到错误“ myFunction() is not a function 。“ 我认为这与this关键字在jQuery块中更改其含义有关，但我不确定。任何帮助，将不胜感激！

如何初始化对象并分配不同的变量javascript: 我创建了一个对象，我需要分配一些变量（参数），当调用对象时，变量（参数）会发生变化。这是我的代码： var Modal = { init: function () { contact1: “”; contact2: “”; aboutus1: “”; aboutus2: “”; privacy1: “”; privacy2: “”; terms1: “”; terms2: “”; $(“.modaltrigger”).removeAttr(“target”); $(“.modaltrigger”).click(function () { if ($(this).is(“#contact”)) { $(‘#primary_url’).attr(‘href’, contact1); $(‘#secondary_url’).attr(‘href’, contact2); } else if ($(this).is(“#aboutus”)) { $(‘#primary_url’).attr(‘href’, aboutus1); $(‘#secondary_url’).attr(‘href’, aboutus2); } else if ($(this).is(“#termsconditions”)) { $(‘#primary_url’).attr(‘href’, terms1); $(‘#secondary_url’).attr(‘href’, terms2); […]

在Javascript中访问事件处理程序中的类成员变量: 我有一个关于从类使用的事件处理程序内部访问Javascript类成员变量的正确方法的快速问题。例如： function Map() { this.x = 0; this.y = 0; $(“body”).mousemove( function(event) { this.x = event.pageX; // Is not able to access Map’s member variable “x” this.y = event.pageY; // Is not able to access Map’s member variable “y” }); } 事件处理程序中的“this.x”尝试影响触发事件的元素的“x”成员变量，而不是更改“Map”类的成员变量。从事件处理程序中访问“Map”类的成员变量的正确方法是什么？任何帮助将不胜感激 – 我一直在这个问题上摸不着头脑。干杯，查理