第一次创建 JavaScript API

Question

我首次为响应式网页/网络应用程序（移动设备）创建商业 API。

我是新手，可悲的是，我独自工作以及 Javascript 新手（长篇复杂的故事）。

我只是想知道业内人士是否可以就以下“获取”电话格式提供专业意见：

var getSample = function(params) {
    //Returns Object
    return $.ajax({ 
        url: URL + 'downloadQuadrat.php',
        type: 'GET',
        data: { 'projectID': params.pid, 'quadratID': params.qid },
        dataType: dataType
    });
}

函数调用：

var printList = function(lid,options,get) {
    var list = $("ul#"+lid);
    var promise = get(options);

    promise.promise().then(
        function(response) {
            var items = response;
            list.empty();

            $.each(items, function(item,details) {
                var ul = $('<ul/>');
                ul.attr('id', lid+'_'+details.ID);
                var li = $('<li/>')
                .text(details.ID)
                .appendTo(list);
                ul.appendTo(list);

                $.each(details,function(key,value) {
                    var li = $('<li/>')
                    .text(key+': '+value)
                    .appendTo(ul);
                });
            });
        }
    );
}

我们将不胜感激任何意见或指导。

Answer 1

我不是该行业的专业人士，本身，但我认为有几件事可以改进您的代码：

• 根据通用约定对其进行格式化。如果没有适当的缩进，很难看到您的代码在做什么。
• 只需使用$("#"+lid) 而不是$("ul#"+lid)。开头的ul 没有添加任何歧义，因为id 属性必须是唯一的，它只会增加解析时间。
• 在这种情况下放弃本地存储。并非所有浏览器都支持它，据我所知，您在这里不需要它。直接使用响应返回的数据即可。

我将如何更改您的代码：

var printList = function(lid, options, get) {
    var promise = get(options);
    var list = $("#" + lid);

    promise.success(function(response) {
        var data = response;
        list.empty();
        $.each(data, function(item, details) {
            var ul = $('<ul/>').attr('id', lid + '_' + details.ID);
            var li = $('<li/>').text(details.ID).appendTo(list);
            ul.appendTo(list);
            $.each(details, function(key, value) {
                var li = $('<li/>').text(key + ': ' + value).appendTo(ul);
            });
        });
    });
}

编辑：您的代码的编辑版本对我来说看起来不错，除了次要的 ul# 东西。

Answer 2

还有一些建议可以让您的 API 看起来更专业：

1 - 命名空间

使用命名空间将代码整齐地打包在自己的空间中，不会与页面上的其他函数定义发生冲突。像这样开始：

window.MyNamespace =  {};
MyNamespace.get = function(qid, pid) {
   //things
};
MyNamespace.anotherFunction = function() {
   //other stuff
}

如果您的代码开始变大，您可以将整个代码封装在一个闭包中。您也可以将其全部定义为类，然后将其实例化一次，以使您的代码更整洁，并允许您存储实例变量并调用 this.anotherFunction()。如果您愿意，我也可以提供这些示例。

2 - API 方法签名

我更喜欢看到的另一件事是函数的显式参数，而不是函数 get(params) 样式代码。使参数显式使您的代码更易于阅读和理解，并阻止临时黑客攻击，这在编写 API 时尤其重要。这是一个例子，因为你可以并不意味着你应该。

3 - 配置

尝试将诸如 ID 和 URL 之类的内容移到变量中，以使您的代码更易于重用和使用。

通常，Javascript 开发人员以在查看您的 API 文档之前先查看您的代码而闻名，因此您可以采取任何措施来使 API 函数名称和参数名称更具表现力和自文档化对他们有所帮助。