新手提问：如何消除JQuery预览插件中的重复CSS设置代码？

你提到的重复设置.c img的max-height和max-width的问题，最简单的解决方式就是把这段逻辑封装成一个可复用的函数，这样需要用到的地方直接调用就好。我还顺便优化了原代码里的一些小问题（比如重复创建预览容器、多次DOM查询），让代码更高效易维护。

优化后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.c{
  display:none;
  justify-content:center;
  align-items:center;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.8)
}
</style>
<img src="https://wallpaperbrowse.com/media/images/Wallpaper-4K.jpg" width="200"/>

<script>
$.fn.preview = function() {
  // 提前创建预览容器，避免每次点击都重复创建
  let $previewContainer = $("<div class='c'><img></div>");
  let $previewImg = $previewContainer.find("img");
  $("body").append($previewContainer);

  // 封装设置图片尺寸的复用函数
  function setPreviewImageSize() {
    const maxHeight = $(window).height() - 20;
    const maxWidth = $(window).width() - 20;
    $previewImg.css({
      "max-height": maxHeight,
      "max-width": maxWidth
    });
  }

  $(this).on("click", function() {
    // 设置预览图片的src
    $previewImg.attr("src", $(this).attr("src"));
    // 初始化图片尺寸
    setPreviewImageSize();
    // 显示预览容器
    $previewContainer.css("display", "flex");
  });

  // 给window事件加命名空间，避免冲突
  $(window).on("click.resize.preview", function(e) {
    if ($(e.target).is(".c")) {
      $previewContainer.css("display", "none"); // 用隐藏代替移除，下次可以直接复用
    }
    // 窗口大小变化时重新设置图片尺寸
    setPreviewImageSize();
  });
};

$("img").preview();
</script>

关键改动说明 #

1. 封装复用函数：把计算并设置图片最大尺寸的逻辑放到setPreviewImageSize函数里，不管是初始化预览窗口，还是窗口 resize 时，都只需要调用这个函数即可，彻底消除代码重复。
2. 缓存DOM元素：提前获取预览容器和图片的jQuery对象，避免每次操作都重新查询DOM，提升性能。
3. 修复重复创建容器的bug：原代码每次点击图片都会向body追加新的.c容器，会导致页面里堆积多个预览元素；现在只创建一次，用隐藏/显示来控制，更合理。
4. 事件命名空间：给window的事件绑定加上.preview命名空间，这样后续如果需要移除这个插件的事件，不会影响其他相同类型的事件。

如果你更喜欢用变量存储样式对象，也可以这样写：

// 定义样式变量
const previewImgStyles = function() {
  return {
    "max-height": $(window).height() - 20,
    "max-width": $(window).width() - 20
  };
};

// 使用的时候直接调用这个函数获取最新样式
$previewImg.css(previewImgStyles());

这种方式和封装函数的效果类似，你可以根据自己的习惯选择。

内容的提问来源于stack exchange，提问作者user8690818