Question

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

我正在开发一个wordpress网站，它利用了不少jQuery插件（plupload，jCrop等）。

在某些页面上有多个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-＆gt; 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();
}

等等..（这实际上包括除上传和裁剪库以外的更多功能）

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

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数组。

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

1 个答案: