0

我有一个 HTML 页面，它使用 jQuery UI 进行 Portlets/Resizable

我的问题是编写 JS 代码的最佳实践是什么？

  1. 我在我的 HTML 中使用脚本参考
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js "></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

这是更好的方法还是应该在我自己的 JS 文件夹中包含 2 个 JS 并引用它们？

2. 我在哪里为 Portlets/Resizable 编写 jQuery UI 配置代码？在 HTML 文件本身中编写此代码是否更好，或者我应该将其编写在单独的 JS 文件中（比如 jquery-ui-config.js）我有以下代码

$(function() {
$( ".column" ).sortable({
connectWith: ".column"
});
$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
.find( ".portlet-header" )
.addClass( "ui-widget-header ui-corner-all" )
.prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
.end()
.find( ".portlet-content" );
$( ".portlet-header .ui-icon" ).click(function() {
$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
});


 var maxBorderCellWidth = 350;
    var minBorderCellWidth = 200;
    var resizeCenter = function () {
        var clientWidth  = $(window).innerWidth();
        var leftWidth = $( ".left" ).outerWidth(true);
        var rightWidth = $( ".right" ).outerWidth(true);
       $('.center').width(clientWidth-leftWidth-rightWidth);
    }

    $( ".left" ).resizable({
      maxWidth: maxBorderCellWidth,
      minWidth: minBorderCellWidth,
      handles: 'e',
      resize: function (event, ui){
          resizeCenter();
      }
    });
    $( ".right" ).resizable({
      maxWidth: maxBorderCellWidth,
      minWidth: minBorderCellWidth,
      handles: 'w',
      resize: function (event, ui){
          resizeCenter();  
      }
    });



});
4

1 回答 1

0

  1. 你的方式就是实践的标准。只需使用 Google 对您的 jQuery 文件进行 CDN，它就可以加速您的网站。你知道，谷歌在世界各地都有服务器。

  2. 我认为它应该将您的 js 代码放入一个单独的文件中。因为大多数代码的选择器都是处理 HTML 类元素。一般来说，类元素是普遍使用的，所以也许这段代码不仅会执行一个 HTML 页面。所以把它分开然后你可以很容易地修改它们。

于 2013-03-10T11:05:15.233 回答