Javascript/jQuery UI插件最佳实践

我有一个HTML页面，它将jQuery UI用于Portlet/Resizeable

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

我在HTML中使用脚本引用

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

二,。我在哪里为Portlet/Resizeable编写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();  
      }
    });



});

$（函数（）{
$（“.column”）.sortable({
连接到：“.column”
});
$（“.portlet”）.addClass（“ui小部件ui小部件内容ui帮助程序clearfix ui角点全部”）
.find（“.portlet头”）
.addClass（“ui小部件标题ui角点全部”）
.prepend（“”）
(完)
.find（“.portlet内容”）；
$（“.portlet头.ui图标”）。单击（函数（）{
$（this）.toggleClass（“ui图标厚度”）.toggleClass（“ui图标厚度”）；
$（this.parents（“.portlet:first”）.find（“.portlet内容”）.toggle（）；
});
var maxBorderCellWidth=350；
var minBorderCellWidth=200；
var resizeCenter=函数（）{
var clientWidth=$（窗口）.innerWidth（）；
var leftWidth=$（“.left”）.outerWidth（true）；
var rightWidth=$（“.right”）.outerWidth（true）；
$（'.center'）.width（clientWidth leftWidth rightWidth）；
}
$（“.left”）。可调整大小({
maxWidth:maxBorderCellWidth，
minWidth:minBorderCellWidth，
句柄：'e'，
调整大小：函数（事件、ui）{
调整中心的大小（）；
}
});
$（“.right”）。可调整大小({
maxWidth:maxBorderCellWidth，
minWidth:minBorderCellWidth，
句柄：“w”，
调整大小：函数（事件、ui）{
调整中心的大小（）；
}
});
});

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

我认为它应该把你的js代码放到一个单独的文件中。因为大多数代码的选择器都是handle HTML类元素。一般来说，类元素是通用的，所以这段代码可能不仅仅执行HTML页面。因此，将其单独放置，然后您可以轻松地修改它们

$(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();  
      }
    });



});