超越在 document.ready() 中编写简单函数

Question

在构建站点时，作为个人喜好，我喜欢创建一个主 javascript 文件，文件顶部有 window.load 和 window.ready。

作为易读性的一种方式，我倾向于将这些函数中我想要的任何逻辑重构到它们自己的函数中，通常我只运行如果元素存在于 DOM 中的函数。

在大多数情况下，我觉得这比将所有内容直接转储到 load/ready 函数中更干净，但是随着我的 javascript 技能的提高，我开始编写更多的匿名函数，并且我的代码随着文档就绪部分开始变长，看起来有点乱。

为了这个问题的目的，我想知道：

有没有更好的方法来像我一样只运行一个 function/code 来检查长度？
是否有更好的方法将上述检查合并到我编写插件的方式中？
主要问题：我如何超越编写单一 jQuery 中心脚本，作为提高我的 javascript 技能的一种方式。

我已经提供了一个示例来说明我的文件的外观。

$(window).load(function() {
  if ( $('#el-1').length !== 0 ) { $('#el-1').addClass('add'); }
});

$(document).ready(function() {
  if ( $('#el-2').length !== 0 ) { new my_plugin('#el-2');  }
  if ( $('#el-3').length !== 0 ) { simple_function();  }
  /* This starts to get messy when there's multiple checks, 
  // longer function names, and different libraries etc.
  */
});

var simple_function = function() {
  //do the short thing
};

;(function( window, $ ) {
  'use strict';
  function my_plugin( el, options ) {
    this.el = $(el);
    this.options = $.extend( this.defaults, options );
    this._init();
  }
  my_plugin.prototype = {
    defaults : {
      something: 'something'
    },
    _init : function() {
      // do the things
    }
    _internalFunction: function() {
      // do the things
    },
    externalFunction: function() {
      // do the things
    }
  }
  window.my_plugin = my_plugin;
})( window , jQuery );

Answer 1

您的方法在技术上已经是正确的。其他一切都取决于您使用的框架、技术和加载方法等。否则，一切都与意见和惯例有关。如果您在一家制定了非常严格的代码编写规则的公司工作，那么无论如何您都必须遵守这些规则。

在将代码拆分为多个文件时，您可以使用模块定义 format/pattern，例如 requirejs 或 commonjs，以更好地管理依赖项和模块。

如果您正在谈论 javascript 和 jquery 的最佳实践和设计模式，那么以下资源可能会有所帮助：

JQuery Boilerplate: 该网站举例说明了许多示例，并解释了它们如何以及为何被视为最佳做法。（对我帮助很大）

Learning JavaScript Design Patterns: 这是一本免费的在线书籍，由 Addy Osmani 编写，他是 Google 工程师，也是 jqueryboilerplate.com

的开发人员之一

编辑：如果您想更好地构建代码，设计模式这本书尤其有用。

超越在 document.ready() 中编写简单函数

Moving beyond writing simple functions within document.ready()

javascript

jquery

refactoring

document-ready