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

Javascript 超越在document.ready()中编写简单函数,javascript,jquery,refactoring,document-ready,Javascript,Jquery,Refactoring,Document Ready,在构建网站时,作为个人偏好,我喜欢创建一个主javascript文件,该文件的顶部有window.load和window.ready 作为一种易读性的方法,我倾向于将这些函数中我想要的任何逻辑重构为它们自己的函数,通常我只在DOM中存在元素的情况下运行这些函数 在大多数情况下,我觉得这比将所有内容直接转储到load/ready函数中更干净,但是随着我javascript技能的提高,我开始编写更多匿名函数,随着document ready部分开始变长,我的代码开始看起来有点纠结 就这个问题而言,我

在构建网站时,作为个人偏好,我喜欢创建一个主javascript文件,该文件的顶部有window.load和window.ready

作为一种易读性的方法,我倾向于将这些函数中我想要的任何逻辑重构为它们自己的函数,通常我只在DOM中存在元素的情况下运行这些函数

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

就这个问题而言,我想知道:

  • 有没有更好的方法只运行一个函数/代码,而不是像我这样检查长度
  • 有没有更好的方法将上述检查合并到我编写插件的方式中
  • 主要问题:如何超越编写以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 );
    

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

    当涉及到将代码拆分为多个文件时,您可以使用模块定义格式/模式(如requirejs或commonjs)来更好地管理依赖项和模块

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

    本网站列举了许多例子,并解释了它们被视为最佳实践的方式和原因。(帮了我很多忙)

    这是一本免费的在线书,作者是谷歌工程师艾迪·奥斯马尼,也是jqueryboilerplate.com的开发者之一


    编辑:如果您希望更好地构造代码,那么这本关于设计模式的书尤其有用。

    好吧,这可能是一个基于观点的问题。我不知道什么是最好的。我有我的偏好,但可能不适合你。例如,我喜欢使用
    require.js
    分割文件,并创建了自己的视图框架,该框架使用
    data view
    属性自动初始化视图。有些人可能更喜欢使用路由器,比如主干网中的路由器……我目前在一家代理公司工作,该公司正在建设一个快速周转的一次性营销网站。。。我把我的问题改成了更合适的问题,我想我的主要问题是:“如何超越编写以jQuery为中心的脚本,以此来提高我的javascript技能。”记住,我需要它是一个相当快速和轻量级的过程。我同意我的问题是主观的。。。。我将研究require.jsI通宵阅读require js,现在我觉得这绝对是我应该阅读的内容。特别是阅读requirejs网站上的以下内容,非常感谢设计模式书,这看起来也是一个很好的资源。