Обзор новых возможностей HTML5 (часть 2)

внешний интерфейс сервер JavaScript WebSocket

Новые возможности html5 в этой статье - следующая часть. Я поделюсь новыми возможностями, которые не были представлены в предыдущей части html5. Хорошо, текст следующий:

1. Перетащите

Перетаскивание — это новая функция, предоставляемая html5.Эта функция добавляет API для перетаскивания событий и определяет свойства, которые можно перетаскивать. Например, чтобы реализовать функцию перетаскивания перед h5, на самом деле используется метод симуляции, мышьonmousedown, получить текущую информацию, а затемonmousemoveПостоянно обновлять перетаскиваемый объектleftа такжеtopзначение, наконец, вonmouseupКогда значение полностью присвоено перетаскиваемому объекту, после отпускания выполняется ряд программных операций. Теперь, когда вышел h5, нет необходимости симулировать, потому что у него уже есть стандартный API событий, давайте посмотрим на пример: `

<style type="text/css">
.draggable{width: 120px; height: 120px;text-align: center; line-height: 120px; background-color: #8FBC8F; color: white; border: 5px solid yellowgreen; position: absolute; top: 0;left: 0;}
</style>

<div id="draggable" class="draggable" draggable="true">
		draggable
</div>

        var dragEl = document.getElementById('draggable');
        var l = null, t = null;
		
		dragEl.ondragstart = function (e) { // 准备推拽时
			l = e.clientX - this.offsetLeft, t = e.clientY - this.offsetTop;			
		}

		dragEl.ondrag = function (e) {  // 拖拽进行时
			var x = e.clientX, y = e.clientY;				
			this.style.left = x - l + 'px';
			this.style.top = y - t + 'px';
			console.log(x, y, l , t)
		}
		
		dragEl.ondragend = function (e) {   // 拖拽结束时
			var x = e.clientX, y = e.clientY;			
			this.style.left = x - l + 'px';
			this.style.top = y - t + 'px';
		}

`

Примечание. Перетаскиваемый объект должен бытьdraggableсвойство установлено наtrue, другое мышление разработки на самом деле такое же, как и раньше, нет большой разницы, просто больше событий мониторинга, учащиеся, которые хотят узнать больше о перетаскивании, могут перейти наПеретащите APIПроверить.

2. Геолокация

Особенность геолокации, как следует из названия, заключается в получении информации о местоположении пользователя. пройти черезgetCurrentPosition()Получите серию информации о местоположении,getCurrentPosition()Есть два параметра функции обратного вызова: обратный вызов для успешного определения местоположения и обратный вызов в случае неудачи.

`

navigator.geolocation.getCurrentPosition(successPos)
function successPos (pos){
	console.log('用户定位数据获取成功')
	//console.log(arguments);
	console.log('定位时间：',pos.timestamp)
	console.log('经度：',pos.coords.longitude)
	console.log('纬度：',pos.coords.latitude)
	console.log('海拔：',pos.coords.altitude)
	console.log('速度：',pos.coords.speed)

}` Для получения дополнительной информации о географических объектах см.Геолокация HTML5Иди проверь.

3. Автономное хранилище

HTML5, создав файл манифеста кэша, может создать автономную версию веб-приложения. Если вы хотите включить кэширование приложений, вы должны<html>этикетка содержитmanifestАтрибуты: каждая страница, на которой указан манифест, будет кэшироваться при посещении ее пользователем. Если атрибут манифеста не указан, страница не будет кэшироваться (если только страница не указана непосредственно в файле манифеста). Предлагаемое расширение файла для файлов манифеста: «.appcache».Обратите внимание, что файл манифеста должен быть настроен с правильным MIME-типом, то есть «text/cache-manifest». Должен быть настроен на веб-сервере

Файл манифеста можно разделить на три части:

  • CACHE MANIFEST — файлы, перечисленные под этим заголовком, будут закешированы после первой загрузки
  • СЕТЬ — файлы, перечисленные под этим заголовком, требуют подключения к серверу и не будут кэшироваться.
  • FALLBACK — файлы, перечисленные под этим заголовком, указывают резервные страницы, когда страница недоступна (например, страница 404).

Вот полный файл манифеста: `

CACHE MANIFEST
2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

` Функция автономного хранилища, говоря простым языком, заключается в том, чтобы хранить файлы ресурсов сети. Лично я думаю, что эффект приложения мобильного терминала будет лучше. Ведь трафик стоит дорого. Хранение некоторых файлов может значительно сэкономить расходы на трафик и сервер.Давление, конечно, для получения дополнительных очков знаний, пожалуйста, перейдите на официальный сайт.Кэш приложения HTML 5.

4. Веб-хранилище

Если автономное хранилище предназначено для хранения файлов ресурсов Интернета, то веб-хранилище предназначено для хранения данных в приложении. Web Storage предоставляет два метода хранения:

  • localStorage, хранение данных без ограничения времени
  • sessionStorage, то есть хранилище при условии, что веб-страница не была закрыта, а окно веб-страницы закрыто, данные будут уничтожены.

Раньше это делали файлы cookie. Но файлы cookie не подходят для хранения больших объемов данных, поскольку они передаются при каждом запросе на сервер, что делает файлы cookie медленными и неэффективными.

В HTML5 данные не передаются при каждом запросе сервера, а используются только во время запроса. Это позволяет хранить большие объемы данных, не влияя на производительность сайта. Для разных веб-сайтов данные хранятся в разных областях, и веб-сайт может получить доступ только к своим собственным данным.

`

localStorage.setItem('key', 'val') // сохраняем данные

localStorage.getItem('key') // Получить данные

localStorage.removeItem('key') // удалить данные

localStorage.clear() // удалить все данные

localStorage.key(index) // Получить определенные данные индекса

sessionStorage.setItem('key', 'val') // сохраняем данные

sessionStorage.getItem('key') // Получить данные

sessionStorage.removeItem('key') // удалить данные `

Уведомление:localStorageа такжеsessionStorageВсе сохраненные данные представляют собой данные строкового типа, а извлеченные данные также являются строковыми, поэтому, если сохраненный объект не является строкой, его необходимо преобразовать в строковый тип данных.

5. WebSocket

WebSocket — это протокол, предоставляемый HTML5 для полнодуплексной связи по одному TCP-соединению.

WebSocket упрощает обмен данными между клиентом и сервером, позволяя серверу активно передавать данные клиенту. В API WebSocket браузеру и серверу нужно выполнить только одно рукопожатие, и между ними может быть создано постоянное соединение, и может выполняться двусторонняя передача данных.

В WebSocket API браузеру и серверу достаточно сделать рукопожатие, после чего между браузером и сервером формируется быстрый канал. Данные могут передаваться напрямую между ними.

Свойства веб-сокета

  • Socket.readyStateДоступное только для чтения свойство, указывающее состояние соединения: 0 — указывает, что соединение не установлено, 1 — указывает, что соединение установлено и может обмениваться данными, 2 — указывает, что соединение закрывается, и 3 — указывает, что соединение был закрыт или соединение не может быть открыто.
  • Socket.bufferedAmountСвойство только для чтения, количество байтов текста UTF-8, которые были поставлены в очередь для передачи функцией send(), но еще не были отправлены.

События веб-сокета

  • Socket.onopenЗапускается при установлении соединения
  • Socket.onmessageСрабатывает, когда клиент получает данные от сервера
  • Socket.onerrorСрабатывает при возникновении ошибки связи
  • Socket.oncloseЗапускается, когда соединение закрыто

Пример: `

 function WebSocketTest()
     {
        if ("WebSocket" in window)
        {
           alert("您的浏览器支持 WebSocket!");
           
           // 打开一个 web socket
           var ws = new WebSocket("ws://localhost:9998/echo");
            
           ws.onopen = function()
           {
              // Web Socket 已连接上，使用 send() 方法发送数据
              ws.send("发送数据");
              alert("数据发送中...");
           };
            
           ws.onmessage = function (evt) 
           { 
              var received_msg = evt.data;
              alert("数据已接收...");
           };
            
           ws.onclose = function()
           { 
              // 关闭 websocket
              alert("连接已关闭..."); 
           };
        }
        
        else
        {
           // 浏览器不支持 WebSocket
           alert("您的浏览器不支持 WebSocket!");
        }
     }
     
     WebSocketTest()

` Для получения дополнительной информации о WebSocket просто перейдитеHTML5 WebSocketВозьми.

6. Web Workers

Веб-воркер — это JavaScript, который работает в фоновом режиме, независимо от других скриптов и не влияет на производительность страницы. Вы можете продолжать делать все, что хотите: кликать, выбирать контент и т. д., пока веб-воркер работает в фоновом режиме. Приложение веб-воркеров можно условно разделить на три части:

  • 1. Создаем файл веб-воркера, файл-воркер — это отдельный js-файл, после написания логики отправляем данные через метод postMessage().
  • 2. Вызовите страницу, чтобы создать рабочий объект, var w = new Worker("путь к рабочему файлу"). Затем вызовите через экземпляр объектаonmessageМониторинг событий и получение данных, возвращаемых в рабочем файле
  • В-третьих, Termination Web Worker, когда наш веб-воркер создан, используйте метод для экземпляра, когда он остановлен.w.terminate().

Ниже приведен простой файл веб-воркера `

// 这是一个单独的js文件
var i=0;
function timedCount()
{
i=i+1;
postMessage(i); //把数据发送出去
setTimeout("timedCount()",500);
}
timedCount();

` Вызовите рабочий файл на html-странице и создайте рабочий объект

`

<div>计数器: <output id="result"></output></div>
<button onclick="startWorker()">开始Worker</button>
<button onclick="stopWorker()">停止Worker</button>

var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("worker.js");    // 创建worker实例对象
    }
  w.onmessage = function (event) {  // 通过onmessage事件接收数据
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
 does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();  // 停止worker任务
}

` Примечание. Поскольку Worker принадлежит внешнему файлу, он не может получить следующие объекты в JavaScript: объект окна, объект документа, родительский объект..

Суммировать

Обзор новых возможностей HTML5 На этот раз я использовал первую и вторую статьи, чтобы подвести итоги и кратко подытожить, цель состоит в том, чтобы дать вам общее представление о HTML5. На этом все. Если вам понравилось, поставьте палец вверх, спасибо.

Категории