在哪里放置加载 json 数据的函数？

Question

我正在处理使用 .json 文件作为主要数据源的项目。应用程序是在 Bootstrap、JavaScript/jQuery 和 HTML5 中开发的。这段代码是几个月前开发的，我正在努力提高效率并更新代码。

查看代码后我注意到的第一件事是数据包含在此应用程序中的方式。有几个 .json 文件用于不同的屏幕。这些文件遍布不同的位置。

此外，每次他们 onclick 时，他们都会重新加载 .json 文件。没有理由这样做，因为数据每月更新一次。我想知道为什么这不会只完成一次（第一次加载应用程序时）然后在 js 对象中设置数据？

这是一个好的做法还是有更好的做法？这是关于我如何考虑更新此代码的示例：

var jsonData = {};
$(document).ready(function() {
  $.getJSON('data.json', function(data){ 
    // Load JSON data in JS object.
    jsonData = data;
  });
});

上面的代码应该放在html header 还是body 标签中？我知道现在 .js 文件包含在 body 标签的底部，所有 .css 都在 header 中。包含 json 文件时有什么区别吗？如果有人有任何建议，请告诉我。 json 文件有大约 600 多条记录，其中包含多个字段（超过 30 个）。这在未来可能会改变。因此，如果这些文件变大，我需要确保这不会影响应用程序的整体效率。

Answer 1

在我看来，您认为不应通过 onclick 事件加载文件的想法是正确的。我同意你应该预先加载文件。

正确的加载位置是在任何使用它们的 js 代码之前。 JS 位于页面底部，因为 DOM 必须已经加载才能使 JS 代码工作。因此，您很自然地描述页面，然后加载在其上运行的代码。

此外，即使有 30 个字段，600 多条记录也是适合内存的最小数据量。我会预先加载所有 json 并直接从内存中的变量中使用它们。如果您认为这会增长很多（我指的是 100.000 多条记录），那么我会为此使用 localstorage。

我会给你另一种选择：在我的一个系统中，我加载到内存 aprox。一个完整的内存数据库中有 25000 条记录，这在不到 1 秒的时间内发生，并且立即对该数据库执行 select。您有完整的 sql 可用。这对你来说可能是一个很好的方法。我说的是编译为 javascript 的 SQLite：https://github.com/kripken/sql.js/

我测试了一些内存数据库，强烈推荐这个。

编辑

回复@expresso_coffee:

我使用以下代码将 json 导入 SQLite（我使用 requireJs）：

define(['jquery', 'sqlite', 'json!data/data.json'],
function($, sqlite, jsonData) {

    self = {};

    var db;

    function createDb() {
        return new Promise((res)=>{
            db = new sqlite.Database();
            db.run("CREATE VIRTUAL TABLE usuarios USING fts4(field1 int, field2 text, field3 text, field4 text, field5 text, field6 text, field7 text);");
            res(1);
        })
    }

    function populateDB( jsonData ) {
        return new Promise((res)=>{
            var stmt = db.prepare("INSERT INTO table values (?,?,?,?,?,?,?)");
            db.run("BEGIN TRANSACTION");
            jsonData.list.forEach((rec)=>{
                stmt.run([rec.field1, rec.field2, rec.field3, rec.field4, rec.field5, rec.field6, rec.field7);
            })
            stmt.finalize;
            db.run("END");
            updateDOM();
            res(1);
        });
    }

    (...)

这是瞬间加载 25000 条记录的代码。

Answer 2

一种方法是存储 $.getJSON 承诺，这样你每次 url 只向服务器发出一个请求（当实际需要时），并在以后的任何调用中重复使用相同的承诺数据

var getData = (function() {
  var baseUrl = 'http://jsonplaceholder.typicode.com/';
  var promises = {};

  function getData(url) {
    console.log(promises[url] ? 'Existing promise' : 'New request', ' URL ::', url)
    promises[url] = promises[url] || $.getJSON(baseUrl + url);
    return promises[url];
  }
  return getData;

})();


// do multiple requests    
getData('todos').then(function(res) { /* do something with results*/ })
getData('todos').then(function(res) {
  console.log(' Second request array length=',res.length)
})

getData('todos/1')
getData('todos/1')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在哪里放置加载 json 数据的函数？

Where to place function that loads json data?

javascript

jquery

json

geojson

single-page-application