如何将SmartyStreets的jQuery.LiveAddress插件转换为JavaScript SDK？

Question

我有一个jQuery.LiveAddress插件被实现的网站，但是它被废弃了，然后在2014年被SmartyStreets完全删除了。

https://www.smartystreets.com/archive/jquery-plugin/website/configure

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//d79i1fxsrar4t.cloudfront.net/jquery.liveaddress/5.2/jquery.liveaddress.min.js"></script>
<script>var liveaddress = $.LiveAddress({
    key: "YOUR_WEBSITE_KEY_HERE",
    debug: true,
    target: "US|INTERNATIONAL",
    addresses: [{
        address1: '#street-address',
        locality: '#city',
        administrative_area: '#state',
        postal_code: '#zip',
        country: '#country'
    }]
});
</script>

现在有一个JavaScript SDK：https://www.smartystreets.com/docs/sdk/javascript

const SmartyStreetsSDK = require("smartystreets-javascript-sdk");
const SmartyStreetsCore = SmartyStreetsSDK.core;
const Lookup = SmartyStreetsSDK.usStreet.Lookup;

// for Server-to-server requests, use this code:
// let authId = process.env.SMARTY_AUTH_ID;
// let authToken = process.env.SMARTY_AUTH_TOKEN;
// const credentials = new SmartyStreetsCore.StaticCredentials(authId, authToken);

// for client-side requests (browser/mobile), use this code:
let key = process.env.SMARTY_WEBSITE_KEY;
const credentials = new SmartyStreetsCore.SharedCredentials(key);

它说：“对于客户端请求(浏览器/移动)，使用此代码”，但我是否正确地假设这段代码不可能作为浏览器JavaScript工作？如果要使用此代码，我不需要在服务器上作为服务运行节点吗？

Answer 1

我丢失的关键文件是SmartyStreets JavaScript SDK中的JavaScript文件。

1. 在项目的根目录中运行npm install smartystreets-javascript-sdk --save-dev
2. 将目录更改为node_modules/smartystreets-javascript-sdk
3. 在此目录中运行npm install
4. 运行rm -rf dist && node browserify.js (如果dist文件夹存在，脚本将失败)
5. 将dist/智能街道-SDK-1.min.js复制到主项目的依赖文件夹中。

我试着编写一项繁重的任务来获取SmartyStreets SDK并自动更新它、浏览它，并将其与我们网站的其他部分一起部署，但事实证明，由于时间的限制，这太麻烦了。如果有人为此写了一个咕哝的任务，请分享！

Answer 2

客户端代码示例可以在浏览器中使用，而不仅仅在节点中使用。您需要以不同的方式存储您的网站密钥，因为浏览器没有访问process.env的权限。您可以将网站密钥存储在这里，因为它将绑定到您的主机名。

您需要使用某种库或JS来处理您在第1行看到的require语句。

import SmartyStreetsSDK from "smartystreets-javascript-sdk"

在使用SDK和jQuery插件时要记住的一点是，SDK没有在页面上提供和UI元素。与jQuery插件相比，它的解决方案更少。您需要设计和创建自己的UI元素，以便与用户进行交互。

免责声明:我为Smarty工作(以前为SmartyStreets)

Answer 3

我遇到了同样的问题，不幸的是，聪明的街道决定让用户更难实现他们的产品。

在我的搜索中，我看到了这个小提琴，它没有jquery插件所做的所有特性，但是它是一个很好的起点，它不需要构建您自己的建议UI。

​

<script async src="//jsfiddle.net/smartystreets/uptgh7c8/embed/"></script>

​

jsfiddle源