Адаптивный веб-дизайн — это полезная парадигма, когда вы создаете веб-приложение и оно работает на любом устройстве, приспосабливаясь к макету. Существует несколько платформ JQuery, которые позволяют это.
В последние несколько дней я работал с несколькими хорошими средами JQuery / Javascript и понимал, как они работают. В этом блоге я покажу, как JQuery работает в типичной среде на основе AJAX. Каковы несколько аспектов, которые улучшают JQuery при написании лучшего кода. Я также покажу вам, как некоторые из последних Javascript-фреймворков решают эти проблемы и как выглядит будущее веб-разработки.
Что такое AJAX, как фреймворки Javascript помогают улучшить ваше приложение?
Проще говоря, AJAX помогает в частичном отображении страницы, не загружая всю веб-страницу, когда происходит событие щелчка.
В типичном веб-приложении для извлечения данных с сервера вы, как правило, выполняете отправку на сервер, перезагружаете страницу, перестраиваете страницу на стороне сервера и возвращаетесь клиенту. Недостатком этого подхода является то, что вы будете иметь бизнес-логику в представлении.
С JQuery вы можете разделить проблемы, как показано ниже,
<div>
<ul id="productCatalog">
</ul>
</div>
<div>
<!--Right side filter-->
<legend>Smart Wall</legend>
<form>
<textarea id="searchkey" rows="2" cols="20" ></textarea>
<br/>
<br/>
<button type="submit" id="submitButton">
<i></i>Search
</button>
</form>
</script>
$("#submitButton").click(function(){
key = $("#searchkey").val();
alert('key=' + key);
var url = "https://www.googleapis.com/shopping/search/v1/public/products?key=AIzaSyDTkzeQAoJDJb5Yvy3-bzIBXywZBK4kjkA&country=US&q="+key+"&alt=json"
alert('url=' + url);
$.getJSON(url, function (data){
// Format the data using the catTemplate template
alert('data=' + data);
$("#flickrTemplate").tmpl(data.items).appendTo("#productCatalog");
});
});
</script>
<include src="./datatemplates/productcatalog.html" />
productcatalog.html выглядит так, как показано ниже,
<script id="flickrTemplate" type="text/x-jquery-tmpl">
<li>
<div>
<a href="${product.link}" target="_blank" >
<img src="${product.images[0].link}" alt="" width="150px;" border="0">
</a>
<h5>${product.title}</h5>
<p>Price: $ ${product.inventories[0].price} <a href="${product.link}" target="_blank" >Buy</a></p>
</div>
</li>
<script>
Как вы достигаете разделения проблем в рамках Javascript?
Если вы заметили в приведенном выше примере, в представлении HTML нет бизнес-логики. Волшебство достигается путем включения jquery.tmpl.min.js в HTML-страницу, как показано ниже,
<script src="assets/js/jquery.js"></script> <script type="text/javascript" src="Scripts/jquery-ui-1.8.20.js"></script> <script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
Привязка данных в шаблоне происходит при использовании синтаксиса $ {product.link}. Это синтаксис Underscore . В JQuery Handlebars + Mustache есть еще несколько хороших шаблонов .
Как продвинутые фреймворки продвигают это дальше?
Есть много отличных Javascript-фреймворков, и есть хорошая статья, сравнивающая их .
Мой личный фаворит — Angular.js . Как вы заметили, у них гораздо более высокий уровень абстракции, такой как привязка объектов, внедрение зависимостей на стороне клиента и многие другие. Angular.js имеет хорошую документацию и учебные пособия для изучения.