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条记录，而发生的时间少于1s，因此立即选择该数据库。您有完整的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数据的函数？

2 个答案: