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

【问题标题】：How do I convert SmartyStreets' jQuery.LiveAddress plugin to its JavaScript SDK?如何将 SmartyStreets 的 jQuery.LiveAddress 插件转换为其 JavaScript SDK？
【发布时间】：2022-01-06 19:48:55
【问题描述】：

我有一个网站，其中实现了 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？我不需要在我的服务器上将节点作为服务运行才能使用此代码吗？

【问题讨论】：

标签： javascript jquery npm smartystreets

【解决方案1】：

客户端代码示例可以在浏览器中使用，而不仅仅是在 node.js 中。由于浏览器无权访问process.env，因此您需要以不同的方式存储您的网站密钥。您可以在此处以明文形式存储网站密钥，因为它将与您的主机名相关联。

您需要使用某种库或 JS 捆绑器来处理您在第 1 行看到的 require 语句。例如，如果这对您的设置更有效，您也可以导入 SDK，例如

import SmartyStreetsSDK from "smartystreets-javascript-sdk"

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

免责声明：我为 Smarty（以前的 SmartyStreets）工作

【讨论】：

【解决方案2】：

我遇到了同样的问题，不幸的是 smarty street 决定让用户更难实施他们的产品。

在我的搜索中，我发现了这个小提琴，它没有 jquery 插件的所有功能，但它是一个很好的起点，不需要构建自己的建议 UI。

&lt;script async src="//jsfiddle.net/smartystreets/uptgh7c8/embed/"&gt;&lt;/script&gt;

jsfiddle source

【讨论】：

【解决方案3】：

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

在项目的根目录中运行npm install smartystreets-javascript-sdk --save-dev
将目录更改为node_modules/smartystreets-javascript-sdk
在这个目录下运行npm install
运行rm -rf dist && node browserify.js（如果dist文件夹存在，脚本将失败）
将 dist/smartystreets-sdk-1...min.js 复制到您的主项目的依赖项文件夹中。

我尝试编写一个繁重的任务来获取 SmartyStreets SDK 并自动对其进行更新、浏览化，并将其与我们网站的其余部分一起部署，但由于时间限制，这太麻烦了.如果其他人为此编写了一个繁重的任务，请分享！

【讨论】：