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

我正在做一个使用

.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

标题

或

正文

标记中吗？我知道现在

.js

文件包含在

body

标签的底部，所有

.css

都在

标题中。包含json文件有什么区别吗？如果有人有任何建议，请让我知道。json文件大约有600多条记录，包含多个字段（超过30个）。这在将来可能会改变。因此，如果这些文件变大，我需要确保不会影响应用程序的整体效率。
在我看来，您认为文件不应该通过onclick事件加载是正确的。我同意你的意见，你应该事先加载文件

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

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

不过我会给你另一个选择：在我的一个系统中，我加载到内存中。一个完整的内存数据库中有25000条记录，这种情况在不到1秒的时间内发生，对该数据库的选择是imediate。您有完整的sql可用。这对你来说可能是个好机会。
我说的是编译成javascript的SQLite：

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

编辑

回复@expresso_coffee：

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

这是在一瞬间加载25000条记录的代码。
在我看来，您认为文件不应该通过onclick事件加载是正确的。我同意你的意见，你应该事先加载文件

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

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

不过我会给你另一个选择：在我的一个系统中，我加载到内存中。一个完整的内存数据库中有25000条记录，这种情况在不到1秒的时间内发生，对该数据库的选择是imediate。您有完整的sql可用。这对你来说可能是个好机会。
我说的是编译成javascript的SQLite：

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

编辑

回复@expresso_coffee：

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

这是一段在一瞬间加载25000条记录的代码。
一种方法是存储
$。getJSON
承诺，这样每个url只向服务器发出一个请求（当实际需要时），并在将来调用相同数据时重复使用相同的承诺


var getData=（函数（）{
var baseUrl=http://jsonplaceholder.typicode.com/';
var={}；
函数getData（url）{
log（承诺[url]？“现有承诺”：“新请求”，“url:：”，url）
承诺[url]=承诺[url]| |$.getJSON（baseUrl+url）；
返回承诺[url]；
}
返回getData；
})();
//执行多个请求
getData（'todos'）。然后（函数（res）{/*对结果做点什么*/}）
getData（'todos'）。然后（函数（res）{
log（'Second request array length='，res.length）
})
getData（'todos/1'）
getData（'todos/1'）
一种方法是存储
$。getJSON
承诺，这样您就可以在每个url（实际需要时）向服务器发出一个请求，并在将来调用相同数据时重复使用相同的承诺


var getData=（函数（）{
var baseUrl=http://jsonplaceholder.typicode.com/';
var={}；
函数getData（url）{
log（承诺[url]？“现有承诺”：“新请求”，“url:：”，url）
承诺[url]=承诺[url]| |$.getJSON（baseUrl+url）；
返回承诺[url]；
}
返回getData；
})();
//执行多个请求
getData（'todos'）。然后（函数（res）{/*对结果做点什么*/}）
getData（'todos'）。然后（函数（res）{
log（'Second request array length='，res.length）
})
getData（'todos/1'）
getData（'todos/1'）
您是否可以将数据存储在会话cookie中？只需确保在数据发生更改时，您将获得更新的数据。这可能由cache-b完成
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);
        });
    }

    (...)