实现多用jquery函数的简单方法

Question

这是一个相当复杂的问题，但我会尽力解释它。

我正在开发一个使用很多 jQuery 插件（plupload、jCrop 等）的 wordpress 网站。

在某些页面上有多个 plupload 实例，其中一些实例要求用户能够裁剪图像。

为了节省我多次编写相同的代码，我只使用相同的 jQuery，但变量附加了一个 php 变量。

我创建了一个类，将所需的 jQuery“写入”到 dom 中，然后它可以传入一个变量，用于附加 jQuery 变量以使其唯一。

然后，当我需要该功能时，我会在网页的不同部分实例化该类的多个对象。

例如（为清楚起见，简化示例）...

在网页上..

<div>
<?php
  $thisUploader = new reqJqueryClass("firstUploader");
  $thisUploader->implementMainUploadPicture;
?>
</div>

<div>
<?php
  $anotherUploader = new reqJqueryClass("secondUploader"); 
  $anotherUploader->implementSecondaryUploadPicture; // This also has crop functionality
?>
</div>

然后 Class 将传递给它的参数（在本例中为 firstUploader / secondUploader）并将其写入 $this->dynamicPartOfVar。

在我的课堂内......

public function implementMainUploadPicture() {
  $this->start_Javascript();
  $this->set_Up_Object_Specfic_Vars();
  $this->run_Plupload_jQuery();
  $this->end_Javascript();
}

public function implementSecondaryUploadPicture() {
  $this->start_Javascript();
  $this->set_Up_Object_Specfic_Vars();
  $this->run_Jcrop_jQuery();
  $this->run_Plupload_jQuery();
  $this->end_Javascript();
}

etc .. etc..（这实际上是包含更多功能，而不仅仅是上传和裁剪库）

然后我的方法看起来像这样......

protected function start_Javascript() {
?>
  <script type="text/javascript">
  jQuery(document).ready(function($) {
<?php
}

protected function end_Javascript() {
?>
  });
  </script>
<?php
}

protected function set_Up_Object_Specfic_Vars() {
?>
  var dynamicPartOfVar = "<?php echo $this->dynamicPartOfVar; ?>"; 
// $this->dynamicPartOfVar is firstUploader or secondUploader (or whatever was passed in)
  var imageManipulationObject = ();
<?php
}

public function run_Jcrop_jQuery() {
?>
  imageManipulationObject["myVariable"+dynamicPartOfVar];

  // rest of vars set up the same way
  // so that I can have multiple instances of this jquery
  // on the same page without conflict ....
<?
}

public function run_Plupload_jQuery() {
?>
  imageManipulationObject["anotherVar"+dynamicPartOfVar];

  // rest of vars set up the same way
  // so that I can have multiple instances of this jquery
  // on the same page without conflict ....
<?
}

尽管这有点代码味道，但它似乎是一种享受。我唯一关心的是这个系统是否具有可扩展性（我需要在一个页面上有很多上传/jcrop 等对象），或者这样做是否会让浏览器陷入困境？

我认为一旦站点经过测试并正常运行，我会从浏览器中复制所有 jQuery，将其粘贴到它自己的文件中，将其缩小，然后像往常一样通过页眉（或页脚）调用它？

但是，我想知道是否有一种“正确”的方式来实现我在这里尝试做的同样的事情？

我所做的一切都是自学的，因此很少实施“最佳实践”，而且我不知道还有其他方法可以实现我在这里尝试做的事情吗？

感谢您能给我的任何帮助。 :-)

Answer 1

代码真的很难维护。

首先，如果你使用多个 jQuery 版本，那么你应该使用jQuery.noConflict()： http://api.jquery.com/jquery.noconflict/

其次，我没看懂下面的代码：

protected function start_Javascript() {
?>
   <script type="text/javascript">
      jQuery(document).ready(function($) {
<?php
}

为什么不将代码加载到“header.php”或“index.php”或任何其他视图文件中？！ 这个函数不起作用，因为它没有return 任何东西或echo 任何东西。

第三，如果你真的想将 Javascript 和 PHP 混合在一起，那么你应该做到以下几点：

<script type="text/javascript">
    var js_arr = new Array();
    jQuery(document).ready(function(){
        <?php
        $arr = array('test1', 'test2');
        for($i=0; $i<sizeof($arr); $i++){
        ?>
        js_arr.push('<?php echo $arr[$i]; ?>');
        <?php } ?>
    });
</script>

它将填充JS数组中的PHP数组。