Зачем объявлять переменную с json в файле js вместо чтения json? - PullRequest
Новая
       21

Зачем объявлять переменную с json в файле js вместо чтения json?

0 голосов
/ 29 сентября 2018

Недавно я работал с leaflets и сейчас смотрю на несколько плагинов.

Несколько плагинов, которые я видел (в том числе Leaflet.markercluster )используйте json для построения точек, но вместо использования фактического потока или файла json программист включает файл javascript .js, в котором переменная задается с потоком json.Поэтому файл js с данными json выглядит следующим образом: 

var data = [
    {"loc":[41.575330,13.102411], "title":"aquamarine"},
    {"loc":[41.575730,13.002411], "title":"black"},
    {"loc":[41.807149,13.162994], "title":"blue"},
    {"loc":[41.507149,13.172994], "title":"chocolate"}
]

Я работал с диаграммами javascript другого типа, и большинство из них читает и обрабатывает поток json.

Кажется, что эти плагины не будут работать, если я создаю сервис, который возвращает json.

Почему бы не использовать json вместо включения файла js, который устанавливает переменную с потоком json?

Iя не эксперт по javascript, но мне легче генерировать json, чем файл javascript с json.

Ответы [ 2 ]

0 голосов
/ 29 сентября 2018

Мне нравится @ ответ FernandoCarvajal , но я бы добавил к нему больше контекста:

  1. JSON более поздний, чем JS (вы можете увидеть JSON как "«спин-офф» JS, хотя теперь он используется в сочетании с гораздо большим количеством языков, чем просто JS).

  2. До того, как JSON получил широкое распространение, основной и самый простой способ загрузки внешних данныхв браузерах была техника, которую вы видели в демонстрации плагинов: присваивать данные глобальной переменной, которую вы можете использовать в следующем скрипте.Браузеры успешно выполняют JS даже из междоменного домена (если вы явно не укажете Политику безопасности контента).Единственным недостатком является то, что вы должны заранее согласовать имя глобальной переменной.Но для статических сайтов (например, страниц GitHub в случае демонстрации плагинов, о которой вы упоминаете), разработчик (и) может легко договориться о таком соглашении.

На этом этапеВы должны понимать, что использование этой простой техники уже подходит для статической демонстрации плагинов.Это также позволяет избежать проблем совместимости браузеров, что соответствует совместимости с широкими браузерами Leaflet.

С появлением более богатых клиентов / Front-End, обычно с AJAX, мы можем избавиться от проблемы соглашения о глобальном имени переменной, но теперь мы можем столкнуться с междоменной трудностью, на что указывает @Комментарий Бармара .Мы также начинаем поражать ад совместимости браузеров.

Теперь, когда мы можем загружать произвольные данные без необходимости предварительно согласовывать статическое имя, мы можем использовать динамический контент, обслуживаемый Back-End, в большем масштабе.

Чтобы обойти проблему между доменами, и до того, как CORS получил широкое распространение, мы начали использовать JSONP: Front-End указывает согласованное (обратный вызов) имя в своем запросе.Но на самом деле мы просто отступили к методике, аналогичной описанной в пункте 2, добавив в основном асинхронность.

Теперь, когда у нас есть CORS, мы можем более просто использовать методы AJAX / fetch и избежать безопасностипроблемы, присущие JSONP.Мы также заменяем старый школьный XML на более JS-подобный JSON.

Ничто не мешает вам заменить старую школьную технику в пункте 2 на более современное потребление JSON.Если вы хотите обеспечить совместимость с широкими браузерами, обязательно используйте библиотеки, которые позаботятся об этом (например, jQuery и т. Д.).А если вам нужен междоменный домен, обязательно включите CORS.

0 голосов
/ 29 сентября 2018

Вы ошибаетесь в понятиях.

1-й.JavaScript как язык имеет свой собственный синтаксис, поэтому, если у вас есть функция, которая получает объект JSON в качестве параметра и передает его Number или String, он будет выдавать ошибку при попытке доступа к какому-либо свойству.Например, 

function myjson (obj) {
    console.log(obj.prop)
}

myjson(34); //wrong
myjson("{prop: 123}") //wrong
myjson({prop: 123}) //Good, will print 123

Теперь представьте, что у вас есть несколько сценариев, много файлов .js, которые вы проиндексировали в своем HTML-файле, например 

<script src="/mycode.js"> </script>
<script src="/myapp.js"> </script>

И вы хотите добавить несколькоданные, подобные тем, которые вы показываете для точек графика;затем вы должны включить его двумя способами: поместить его в файл .js или получить из службы с помощью вызова AJAX.

Если вы добавите это в файл .js, у вас будет доступ ких прямо из вашего кода, как это 

var data = [
    {"loc":[41.575330,13.102411], "title":"aquamarine"},
    {"loc":[41.575730,13.002411], "title":"black"},
    {"loc":[41.807149,13.162994], "title":"blue"},
    {"loc":[41.507149,13.172994], "title":"chocolate"}
]

console.log(data)

и если вы поместите это в файл .json, то это

/ mydata.json 

[
    {"loc":[41.575330,13.102411], "title":"aquamarine"},
    {"loc":[41.575730,13.002411], "title":"black"},
    {"loc":[41.807149,13.162994], "title":"blue"},
    {"loc":[41.507149,13.172994], "title":"chocolate"}
]

вам придется самостоятельно извлекать и анализировать данные 

fetch("/mydata.json").then(async data => {
    var myjson = await data.text();
    myjson = JSON.parse(myjson);
    console.log(myjson) //A Javascript object
    console.log(myjson[1]) //The first element
})
...