管理网络地址信息

我是一家网络公司的开发人员，实际上没有比我更能工作的同龄人，我可以将我的代码用作任何形式的共鸣板，所以只有我一个人。我想知道是否有人愿意看一些我的代码，只给我一些注释，要点等……关于错误的事情，我应该研究的事情等等。如果有人感兴趣，请随时发表评论。

我关心JavaScript / jQuery。看起来非常耦合，我想知道是否有更好的方法来完成我正在使用此代码执行的操作。

一切正常，但我始终相信仍有改进的余地。

//Global networkInfo Object.  
var networkInfo = {};

$(function () {

    // Bind custom events

    $(networkInfo).bind('updateNetworkInfo', updateNetworkAddress);
    $(networkInfo).bind('updateNetworkRanges', updateNetworkRangeDropDowns);
    $(networkInfo).bind('selectNetworkRanges', selectNetworkRanges);

    // Set form validation

    $('form').validate({
        messages: {
            tbSiteName: "This is an invalid site code"
        }
    });

为网站名称添加自定义规则。该规则很麻烦，因为这是一个Webforms应用程序，并且输入的名称无法控制。

    $('#tbSiteName').rules("add", {
        required: true,
        remote: function () {
            var r = {
                url: "/webservices/ipmws.asmx/SiteValid",
                type: "POST",
                data: "{'tbSiteName': '" + $('#tbSiteName').val() + "'}",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                dataFilter: function (data) { return (JSON.parse(data)).d; }
            }
            return r;
        }
    });

DrillDownProvisioning.aspx不允许用户更改子网掩码。仅应允许他们通过单击DrillDown Tree中的节点来更改此值。

    $('#ddSubnetMask').change(function (e) {
        $(this).val(networkInfo.SubnetMask);
        $('#lblMessageBox')
            .removeClass('hidden')
            .addClass('error')
            .text("Please do not change this value manually");
    });

    // Populate drop down with all the available vlans.

    $.ajax({
        type: 'POST',
        url: '/webservices/ipmws.asmx/GetVlans',
        data: '{}',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            $('#ddNumber').append($('<option />').val("").text(""));
            $.each(data.d, function (index) {
                $('#ddNumber').append($('<option />').val(this.VlanId).text(this.Number));
            });
        }
    });

    // When a vlan number is change auto populate the standard name and description input fields with the predefined values

    $('#ddNumber').change(function () {
        var number = $(this);
        var standardName = $('#tbStandName');
        var description = $('#tbDescription')
        if (number.val() === "") {
            standardName.val("");
            description.val("");
        } else {
            $.ajax({
                type: 'POST',
                url: '/webservices/ipmws.asmx/GetVlanInfo',
                data: "{'number': " + $('#ddNumber').val() + "}",
                success: function (data) {
                    standardName.val(data.d.StandardName);
                    description.val(data.d.StandardName);
                    standardName.valid();
                    description.valid();
                },
                dataType: 'json',
                contentType: 'application/json; charset=utf-8'
            });
        }
    });

    // Populate drop down
    populateSubnetMask();

    // When the network type drop down is changed update the network ranges drop downs.

    $('#ddNetworkTypes').change(function () {
        $(networkInfo).trigger('selectNetworkRanges');
    });

    /*
    * toggle the 6 drop down menus.  If the check box is not marked
    * reset all the values to empty so they don't post.
    */
    $('#enableRange').change(function () {
        if (this.checked) {
            $(networkInfo).trigger('selectNetworkRanges');
        } else {
            $('.mask').val(0);
        }
        $('#networkRangeSelectors').slideToggle();
    });

    /*
    * Open drill down tree for selection
    */
    $('.open').click(function () {
        $('#drilldowntreecontainer').toggle('1000');
        $(this).toggle();
    });

    // Close drill down tree
    $('.close').click(function () {
        $('#drilldowntreecontainer').toggle('1000');
        $('.open').toggle();
    });

因为页面不再发回自身，所以document.referrer应该始终是前一个他们访问的页面。如果出于某些原因需要回发，则它将不再起作用。

    $('#btnCancel').click(function (e) {
        e.preventDefault();
        window.location.replace(document.referrer);
    });
});

/*
* Populate the dropdown box with the default
* range of 1 through 31
*/
function populateSubnetMask() {
    var dropDown = $('#ddSubnetMask');
    dropDown.append($('<option />').val("").text(""));
    for (var i = 31; i > 0; i--) {
        dropDown.append($('<option />').val(i).text("/" + i));
    }
}

从Web服务获取预定义的子网启动和停止值。填充具有要选择的开始到停止范围的选择框。

function updateNetworkRangeDropDowns(e, network, bits) {
    $.ajax({
        type: 'POST',
        url: '/webservices/ipmws.asmx/GetNetworkRanges',
        data: "{'network': '" + network + "', 'bits': " + bits + "}",
        success: function (data) {
            networkInfo.networkRanges = data.d;
            var html = "<option value=''></option>";
            for (var i = data.d.Start; i < data.d.End; i++) {
                html += "<option value='" + i + "'>" + i + "</option>";
            }
            $(".mask").empty().append(html);
            $(networkInfo).trigger('selectNetworkRanges');
        },
        dataType: 'json',
        contentType: 'application/json; charset=utf-8'
    });
}

查看networkInfo.networkRanges对象，并根据对象中的值在下拉列表中选择正确的值。。
仅当网络类型为VLAN(type=9)时才应选择值。
如果网络类型不是VLAN则将所有值重置为空。

function selectNetworkRanges() {
    if ($('#ddNetworkStart option').size() > 0 && $('#ddNetworkTypes').val() == 9) {
        $('#ddNetworkStart').val(this.networkRanges.NetworkStartSelected);
        $('#ddNetworkEnd').val(this.networkRanges.NetworkEndSelected);
        $('#ddFixedStart').val(this.networkRanges.FixedStartSelected);
        $('#ddFixedEnd').val(this.networkRanges.FixedEndSelected);
        $('#ddDHCPStart').val(this.networkRanges.DhcpStartSelected);
        $('#ddDHCPEnd').val(this.networkRanges.DhcpEndSelected);
    } else {
        $('.mask').val(0);
    }
}

自定义事件，它使用SubnetAddress对象中的值更新SubnetMask / networkInfo的表单输入中的值。
因为此函数绑定为自定义事件，所以您可以使用networkInfo访问this对象

function updateNetworkAddress() {
    $('#tbSubnetAddress').val(this.SubnetAddress);
    $('#ddSubnetMask').val(this.SubnetMask);
    $('#lblMessageBox').addClass('hidden');
    $('#tbSubnetAddress, #ddSubnetMask').valid();
}

仅在drillDown页面上需要，这将获得subnet mask / address从左侧的Radtree插入值并将其插入适当的格式input / select
DrillDownProvisioning.aspx在Radtree中调用
OnClientNodeClicked="drillDownNodeClick"

function drillDownNodeClick(sender, eventArgs) {
    var node = eventArgs.get_node();
    var address = node.get_value().split("/");
    networkInfo.SubnetAddress = address[0];
    networkInfo.SubnetMask = address[1];
    $(networkInfo).trigger('updateNetworkInfo');
    $(networkInfo).trigger('updateNetworkRanges', [$('#tbSubnetAddress').val(), $('#ddSubnetMask').val()]);
}

您的代码看起来很干净，命名约定也很不错。我唯一想做的就是通过将函数用作对象来使代码面向对象。否则，在没有丰富网络知识的情况下查看代码，看起来就很好。

几个问题：1）为什么将populateSubnetMask放入JS函数？我看不到任何依赖关系，那么为什么不对值进行硬编码呢？ 2）相同的控件（ddSubnetMask），为什么不同时禁用/只读它呢？

@布拉德·克里斯蒂-1.）可能没有必要。 2.）我不知道可以将选择框设置为只读吗？如果将其设置为禁用，则提交表单时不会回传值。

@KyleRogers：Touché，没想到这是一个提交的值。而且您是对的，不能专门是“只读”的，而更不用说禁用元素了。从这里开始，一切看起来都很不错，而没有一个实时页面来测试其运行情况。 ;-)

@KyleRogers，您是否找到一种更干净的方式编写代码？请发布自己的答案。

#1 楼

通过多次阅读代码，您可以：

自定义事件滥用

虽然拥有自定义事件非常酷，但我只是删除了这一额外的逻辑层。如果您可以直接致电$(networkInfo).trigger('selectNetworkRanges');，则致电selectNetworkRanges()没有任何意义。我了解您会失去对this的访问权限，但无论如何您都可以直接在networkInfo中访问updateNetworkRangeDropDowns。

干（不要重复自己）

在selectNetworkRanges中，您可以执行var ranges = this.networkRanges;，然后每次访问ranges而不是this.networkRanges
即使功能非常接近，您也可以以不同的方式在populateSubnetMask和updateNetworkRangeDropDowns中构建下拉列表。经过深思熟虑，您可以创建一个可以为#ddSubnetMask和.mask建立下拉菜单的辅助函数

$('.open').click和$('.close').click确实可以做到这一点，您可以这样做：

$('.close,.open').click(function () {
    $('#drilldowntreecontainer').toggle('1000');
    $('.open').toggle();
});

名称中有什么？

请避免使用诸如r，d这样的短名称
给jQuery前缀是一种好习惯以$ so var $dropDown = $('#ddSubnetMask');为例的结果

样式

用单个var的逗号分隔变量被认为更好，所以

var node = eventArgs.get_node(),
    address = node.get_value().split("/");

而不是

var node = eventArgs.get_node();
var address = node.get_value().split("/");

您同时使用双引号和单引号作为字符串常量，因此应保留单引号字符串常量。除了您的data:语句可能的例外。

评论

一般而言，很棒的评论，也许有时候太冗长了
您应该在此代码依赖jQuery验证插件的顶部，实际上，如果您在问题中提到该代码，则可以节省时间；）

设计

ddSubnetMask可以设置为disabled，则需要一个隐藏输入，其中包含要按照https://stackoverflow.com/a/368834/7602
提交的实际值以populateSubnetMask开头的最后几个功能不在您的$(function () {内，我会将它们全部保留在一起

幻数

您正在评论VLAN（type = 9 ），我仍然主张创建一个var IS_VLAN = 9，然后使用该常量
本身不是一个魔术数，'application/json; charset=utf-8'应该是一个正确命名的常量（这也是一个DRY问题）。

在雨中跳舞

您的$.ajax调用应该处理error，它会在某些时候发生

总而言之，我可以使用此代码。您是正确的代码紧密耦合。我认为那是因为您必须使用数据，因此我不必担心太多。

编程黑洞网

管理网络地址信息

评论

#1 楼