用 Javascript 进行 OOP 编程 - 正确

2024-03-09

我对改进我的 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) {

                    },
                    //refresh the value of a field with the latest from the database
                    refresh: function (id) {

                    }
                };
            }())
        };
    }());
});

最后,我想它只是主要组织的函数......有什么好的资源可以让我学习以 OOP 方式对 javascript 进行编程,或者您对改进我当前的编程风格有什么建议?

看来我应该做一种模型原型并拥有我的form对象继承自该原型。

(由于与prototypeJS冲突,我使用jQuery而不是$)


您的问题非常广泛,因此我认为这里不可能给出完整的答案。但这里有几点。

关于您所显示的代码。你正在跳几个多余的圈。

  1. 除非您以某种方式访问​​ DOM,否则无需将代码包装在jQuery(document).ready()
  2. 除非您关闭某些私有函数或数据,否则不需要从自调用匿名函数返回对象

您创建的对象可以像这样更简单地创建(一件好事)

var Page = {
    form: {
        //generate a new PDF
        generatePDF: function () {

        },
        //Update the list of PDFs available for download
        updatePDFDownloads: function () {

        },
        /*
        * Field specific functionality
        */
        field: {
            //show the edit prompt
            edit: function (id, name) {

            },
            //refresh the value of a field with the latest from the database
            refresh: function (id) {

            }
        }
    }
};

它更容易阅读,也更容易混淆,只做那些能给你带来东西的事情。看货物崇拜编程 http://en.wikipedia.org/wiki/Cargo_cult_programming

这是一个使用自调用匿名函数来创建私有成员的示例

var Obj = (function() {
    privateFunction( param ) {
        // do something with param
    }

    var privateVar = 10;

    return {
        // publicMethod has access to privateFunction and privateVar
        publicMethod: function() {
            return privateFunction( privateVar );
        }
    }

})();

正如您所说,您使用的结构,对象文字非常适合对一组函数(方法)和属性进行分组。这是一种命名空间。这也是一种创建方式辛格尔顿 http://en.wikipedia.org/wiki/Singleton_pattern。您可能还想创建同一类的许多对象。
JavaScript 没有像传统的面向对象语言那样的类(我会谈到这一点),但在最简单的层面上,创建一个“模板”来创建特定类型的对象是非常容易的。这些“模板”是称为构造函数的普通函数。

// a constructor
// it creates a drink with a particular thirst quenchingness
function Drink( quenchingness ) {
    this.quenchingness = quenchingness;
}

// all drinks created with the Drink constructor get the chill method
// which works on their own particular quenchingness
Drink.prototype.chill = function() {
   this.quenchingness *= 2; //twice as thirst quenching
}

var orange = new Drink( 10 );
var beer   = new Drink( 125 );

var i_will_have = ( orange.quenchingness > beer.quenchingness ) 
    ? orange 
    : beer; //beer

var beer2  = new Drink( 125 );
beer2.chill();

var i_will_have = ( beer2.quenchingness > beer.quenchingness )
    ? beer2 
    : beer; //beer2 - it's been chilled!

关于构造函数有很多东西需要了解。你必须四处寻找。 SO 上有很多例子。
继承是面向对象的基础,但在 js 中并不那么直观,因为它是原型的。我不会在这里讨论这个,因为你很可能不会直接使用 js 的原生原型继承范例。
这是因为有些库可以非常有效地模仿经典继承,原型(继承) http://prototypejs.org/learn/class-inheritance or mootools(类) http://mootools.net/docs/core/Class/Class例如。There http://ejohn.org/blog/simple-javascript-inheritance/ are others http://dean.edwards.name/weblog/2006/03/base/.

许多人说继承在面向对象中被过度使用,你应该青睐成分 http://en.wikipedia.org/wiki/Design_Patterns这让我想到了当我开始这个漫无目的的答案时我最初打算推荐的内容。

JavaScript 中的设计模式与任何 OO 语言中的设计模式一样有用,您应该熟悉它们

我建议你阅读专业 JavaScript 设计模式 https://rads.stackoverflow.com/amzn/click/com/159059908X。 在那里,就是这样

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

用 Javascript 进行 OOP 编程 - 正确 的相关文章

  • 如何在提交表单之前删除自动数字格式?

    我正在使用 jQuery 插件自动数字 http www decorplanit com plugin 但是当我提交表单时 我无法删除之前字段上的格式POST 我尝试使用 input autonumeric destroy 和其他方法 但它
  • 光滑的旋转木马不工作

    我一直在尝试简单地实现 Slick Carousel 的工作 我已按照 Git 页面上的说明进行操作 https github com kenwheeler slick https github com kenwheeler slick 这
  • 在 IE10 中禁用捏合放大

    在 IE10 触摸模式下 我希望仅使页面的特定部分可缩放 其余的不应该 我找到了这个 http msdn microsoft com en US library ie hh772044 aspx http msdn microsoft co
  • Jquery UI 日期选择器 设置默认日期

    我使用 jQuery UI 作为日期选择器 我想在字段中显示当前日期作为默认值 以下是我的代码 请帮助 From Date
  • canvas.getContext('2D') 返回空值

    我创建了一个画布并将其命名为getContext 方法 但它返回null为上下文 这是我使用的代码 我在控制台中得到了这个
  • 离子旋转器未显示

    我用 http 请求填充 Ionic 集合重复列表 但我不想将所有内容直接加载到 DOM 中 因此 我只显示其中一些项目 并在您向下滚动时添加其余项目 为此我实现了无限滚动功能 当我到达页面底部时 它应该显示一个旋转器 但它没有 这些物品至
  • 将具体数据放在jqgrid摘要视图标题中

    我有一个工作 jqgrid 表 在标题上有摘要视图 就像我在这个 plunkr 中实现的示例一样http plnkr co edit wjIlaVMsa9vusmfhgfL1 p preview http plnkr co edit wjI
  • 如何将函数传递给 JavaScript Web Worker

    我想通过一个 或多个 函数传递postMessage 给网络工作者 因为我无法引用常规文件 为了启动 Web Worker 我将一个对象 URL 从 Blob 创建 传递给Worker构造函数 然后我传递一条消息 但到目前为止还没有在消息中
  • 从网站存储数据的最简单方法(在服务器端)

    我有一个非常简单的网站 实际上是单页 有一个输入字段和一个按钮 我需要将用户提交的数据存储在服务器端的某个位置 完美的方法可能是简单的文本文件 并在每次单击按钮后附加新行 日志文件也可以 据我了解 JavaScript 本身是不可能的 我在
  • 如何检查元素的内容是否为空,如果是,则在 jquery 中删除该元素

    我目前正在尝试选择某个 div 内没有内容的任何 h2 元素并将其删除 这是我的 html 代码 div class skipToContainer h2 class vidSkipTo Hello h2 h2 class vidSkipT
  • 更改时触发跨度文本/html

    jQuery 或 JavaScript 中是否有任何事件在以下情况下触发span标签 text html 已更改 Code span class user location span user location change functio
  • 删除 Laravel Mix 中的临时文件

    我想在 laravel mix 构建期间或之后删除临时构建文件 这是我目前拥有的一些代码 但是del不工作 const mix require laravel mix const del require del compile sass i
  • 通过 jQuery 从输入类型=“文件”多个中删除文件

    我在使用 PHP 和 jQuery 上传文件时遇到问题 表单可以一次上传多个图像 这些图像可以在滑块中预览 表单还包含两个字段标题和描述 滑块通过 jQuery 工作 当用户通过单击选择文件来选择多个图像时
  • (0, eval) () 的作用是什么? [复制]

    这个问题在这里已经有答案了 以下内容来自这个问题 https stackoverflow com questions 14119988 return this 0 evalthis 14120023 14120023 function q
  • toLocaleDateString() 在 Chrome 中如何工作?

    我理解了javascript方法toLocaleDateString 使用的计算机设置 让我们来W3Schools 示例 http www w3schools com jsref tryit asp filename tryjsref to
  • 显示班级图片 10 秒

    我有下面给出的代码显示9 boxes 其值如下digital time 还有一个班级box002显示digits相当于随机选择的九个盒子的值 box002 can be dragged to digital time starting wi
  • 如何修复 getImageData() 错误画布已被跨源数据污染?

    我的代码在本地主机上运行得很好 但在网站上却不起作用 我从控制台收到此错误 对于这一行 getImageData x y 1 1 data Uncaught SecurityError Failed to execute getImageD
  • 如何模板化 Select2 的预选值

    我预先选择的值Select2 https select2 org如下所示 function formatState state console log state text2 I found undefined here console l
  • 数字和小数的输入掩码

    在测试我的程序后 我发现了以下错误 我在 sqlserver 中的表包含 价格数字 6 2 我的程序的用户输入价格 555 00 就很好了 但是当他输入 555555 时 这是错误的 所以我需要指定掩码 其中尾数是可选的 0 到 999 小
  • Angular 2访问组件内的ng-内容

    我怎样才能访问 content 来自组件类本身的组件 我想做这样的事情

随机推荐

  • 我可以使用 http2 将响应流式传输回浏览器吗?

    是否可以使用 http2 将响应从节点流式传输回浏览器 在我的网络应用程序中 用户按下一个按钮来启动服务器进程 此过程可能需要 10 分钟或更长时间才能完成 我想将状态更新流回客户端 浏览器 我相信我可以使用 websockets 做到这一
  • 在动态 DNS 后面使用 git

    我在一台具有动态 DNS 地址的计算机上有一个 git 存储库 它的 IP 地址每隔几天更改一次 每个涉及与机器通信的 git 操作都会产生以下警告 反向映射检查 getaddrinfo 对于 1 2 3 4 isp net 1 2 3 4
  • 以下是 xml 中的标准日期/时间

    是 2011 03 09T08 48 36 223Z 标准xsd 日期类型吗 T 和 Z 是什么意思 Z 是祖鲁时间 与 UTC 相同 我认为T只是代表 时间 and yes it s the xsd standard date accor
  • 函数参数之前的 class 关键字是什么?

    为什么这段代码有效 请参阅class前面的关键字f函数参数 如果我添加它会改变什么 struct A int i void f class A pA why class here cout lt lt pA i lt lt endl int
  • 为什么在 C 中将类型定义为指向未定义结构的指针是有效的?

    我正在深入研究第三方代码库 发现将类型声明为指向未定义结构的指针显然是有效的 作为一个最小的工作示例 考虑一个 C 文件test c不包含任何内容 但 typedef struct foo bar 令我惊讶的是 使用命令编译该文件没有任何问
  • 在 OS X 上编译 C 程序以在 Linux 上运行

    我有一个非常简单的 C 程序 它仅使用标准库函数进行一些加密计算 我将在 Ubuntu 10 04 32 位 上运行该程序 并使用带 m32 标志的 cc 在 OS X 10 6 上编译它 当我尝试在 Ubuntu 上运行它时 收到错误消息
  • GoogleJsonResponseException:401 未经授权的具有 OAuth2 保护的调用端点

    我正在尝试制作一个以 App Engine 作为移动后端的 Android 应用程序 当我尝试调用受身份验证保护的端点时 出现此错误 12 21 18 58 05 120 4452 4477 com test myapplication W
  • 压缩库的建议是在不考虑 cpu 开销的情况下使 byte[] 尽可能小?

    如果我的做法是错误的 请纠正我 但我有一个队列服务器和一群在集群中运行的 java 工作线程 我的队列中的工作单位很小 但数量很多 到目前为止 我的基准测试和对工作人员的审查表明我的速度约为 200mb 秒 所以我试图找出如何通过我的带宽获
  • Excel 中的分层自动编号(三级)

    如果我们有一个三级层次结构并且只需要枚举 B 根据模式 但某些 C 会干扰 B 该怎么办 Problem 获取列B给定列的结果A A B 1 B 2 B 3 A B 1 B 2 A B 1 B 2 B 3 P S 该任务是由于需要枚举 Ex
  • 在 laravel eloquent 中获取除当前登录用户之外的所有用户

    我在做 User all 从用户表中获取所有用户 我想选择除当前登录用户之外的所有用户 我该怎么做呢 就像是 User where id currentUser gt id gt get 提前致谢 Using except 会更流畅地完成同
  • 如何在 iOS 上使用平面表情符号

    我正在尝试向 UITableViewRowAction 标题添加表情符号 unicode 字符 这样我就不需要使用第三方库来添加图像 经过我的讨论HERE https stackoverflow com a 32735211 1030580
  • Android 版 facebook sdk 中的示例始终显示语言为“印尼语”的身份验证页面

    我使用 Android 设备运行 facebook sdk for android 中的简单示例项目 应用程序身份验证页面始终采用 印度尼西亚语 语言 我更改了 Android 设备的语言 英语和中文 但它仍然以 印度尼西亚语 显示 我使用
  • 有没有办法对可变参数宏参数使用 C++ 预处理器字符串化?

    我的猜测是这个问题的答案是否定的 但如果有办法的话那就太棒了 为了澄清一下 假设我有以下宏 define MY VARIADIC MACRO X Does some stuff here in the macro definition 我想
  • MapReduce:ChainMapper 和 ChainReducer

    我需要将 MapReduce jar 文件拆分为两个作业 以获得两个不同的输出文件 每个文件来自两个作业的每个减速器 我的意思是第一个作业必须生成一个输出文件 该文件将作为链中第二个作业的输入 我在 hadoop 版本 0 20 中读到了一
  • 无法从 HEAD 历史记录确定上游 SVN 信息

    为什么我会收到此错误消息 我收到这条消息是因为克隆了 svn repo no metadata选项 也许您的问题也是如此 当在没有该选项的情况下克隆它时 一切都很好 The no metadata该选项旨在在新版本出现时克隆 SVN 存储库
  • Spring Boot gradle 构建 - 无效源版本:11

    我正在尝试使用以下命令构建我的 Spring Boot 项目 gradlew build 但它不断抛出这个错误 Execution failed for task compileJava invalid source release 11
  • 为什么并发 TS 的部分内容没有采用 C++17?

    根据黄明德 https wongmichael com category c 显然 尽管已完成 但并发 TS 并未进入 虽然有实现经验 但刚刚批准 太新鲜 无法投票添加到 C 17 我最喜欢的提案最初是在N3327 http www ope
  • 将 stderr 和 stdout 复制到文件以及 ksh 中的屏幕

    我正在寻找一种解决方案 类似于下面的 bash 代码 除了 Solaris 上 ksh 中的屏幕之外 还将 stdout 和 stderr 复制到文件中 以下代码在 bash shell 中运行良好 usr bin bash Clear t
  • numpy 中的对角线堆叠?

    因此 numpy 有一些方便的函数可以将多个数组合并为一个 例如hstack 和 vstack 我想知道是否有类似的东西 但用于对角堆叠组件数组 假设我有 N 个形状为 n i m i 的数组 并且我想将它们组合成一个大小为 sum 1 N
  • 用 Javascript 进行 OOP 编程 - 正确

    我对改进我的 javascript 代码以使其成为适当的 OOP 很感兴趣 目前我倾向于做这样的事情 jQuery document ready function Page form function return generate a n