使Google API与JSLint兼容

Question

试着在我的页面上放一个谷歌登录按钮。他们的示例代码没有通过JSLint测试。

我已经经历了一次迭代编辑(感谢@ruffin!)，但现在问题正在扩大，所以我编辑了这篇文章以包含更多。

/*global Kobo,$,ko,Modernizr,GeneralConfiguration, gapi, eventHandlers */

Kobo.Utilities.AuthorizedAction = function (actionURL) {
    "use strict";

    var renderButton;

    renderButton = function () {
        gapi.signin2.render('my-signin2', {
            'scope': 'https://www.googleapis.com/auth/plus.login',
            'width': 236,
            'height': 44,
            'longtitle': true,
            'theme': 'dark',
            'onsuccess': window.eventHandlers.onSuccess,
            'onfailure': window.eventHandlers.onFailure
        });
    };

    if (Kobo.$.cookie('store.kobobooks.com') || Kobo.$.cookie('store.dev.koboboooks.com') || Kobo.$.cookie('storeperf.kobobooks.com')) {
        window.location.href = actionURL;
    } else {
        var content = Kobo.$('#reg-content');
        renderButton();
        Kobo._modal.open(content);
    }
};

// Google sign in


function onSignIn(googleUser) {
    "use strict";

    //var profile = googleUser.getBasicProfile();
      //console.log(googleUser);
      //console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
      //console.log('Name: ' + profile.getName());
      //console.log('Image URL: ' + profile.getImageUrl());
      //console.log('Email: ' + profile.getEmail());
      //console.log('https://securehd15.kobobooks.com/auth/Google/connect?rst=False&ReturnUrl=' + encodeURIComponent(window.location.href));
    window.location.href = 'https://accounts.google.com/o/oauth2/auth?scope=https%3a%2f%2fwww.googleapis.com%2fauth%2fplus.login+email+profile&client_id=642155554319-85mk1095rdhahgsssi9hm217eh461mld.apps.googleusercontent.com&response_type=code&access_type=offline&redirect_uri=https%3a%2f%2fsecureqa.kobobooks.com%2fauth%2fGoogle%2fgoogleoauth2callback&state=https://storehd.kobobooks.com/?utm_source=Reviewer&utm_source=reviewer';
}


window.eventHandlers = window.eventHandlers || {};

window.eventHandlers.onSuccess = function () {
    "use strict";
    window.alert('some code');
};
window.eventHandlers.onFailure = function () {
    "use strict";
    window.alert('some more code');
};

它构建正常，但在渲染时我得到

<exception>: ReferenceError: gapi is not defined at renderButton 

Answer 1

嗯，gapi是应用程序接口的“命名空间”，它位于全局上下文中，因此很容易修复。第二个参数看起来也只是对象表示法，所以var名称的单引号是无关的。

因此，让我们将gapi放在global指令中。

/*jslint white:true */
/*global gapi */
function renderButton() {
  "use strict";

  gapi.signin2.render('my-signin2', {
    scope: 'https://www.googleapis.com/auth/plus.login',
    width: 236,
    height: 44,
    longtitle: true,
    theme: 'dark',
    onsuccess: onSuccess,
    onfailure: onFailure
  });
}

你仍然会得到那些关于onSuccess和onFailure的错误，但是，和你应该，如果它们没有在文件中定义的话。您需要在与此调用相同的文件中定义这两个函数，或者更好的做法是，将它们放入您自己的命名空间中，然后在全局变量中导入它们。

也就是说，在一个文件中，您可以定义这些事件处理程序是什么，并将它们放入全局名称空间eventHandlers (查看我在那里所做的window技巧)：

/*jslint white:true */
/*global window */
window.eventHandlers = window.eventHandlers || {};

window.eventHandlers.onSuccess = function () {
    "use strict";
    window.alert('some code');
};
window.eventHandlers.onFailure = function () {
    "use strict";
    window.alert('some more code');
};

然后告诉JSLint这个文件中存在eventHandlers名称空间。

/*jslint white:true */
/*global gapi, eventHandlers */
function renderButton() {
  "use strict";

  gapi.signin2.render('my-signin2', {
    scope: 'https://www.googleapis.com/auth/plus.login',
    width: 236,
    height: 44,
    longtitle: true,
    theme: 'dark',
    onsuccess: eventHandlers.onSuccess,
    onfailure: eventHandlers.onFailure
  });
}

那个林肯。