[無線前端]記錄
實(shí)習(xí)的過程中，主要接觸的是無線前端的開發(fā)怔球，現(xiàn)在就在這里簡單總結(jié)一下嚼酝。
1.H5方面
1.什么是H5?
- HTML最新的修訂版本， 2014年10月由W3C完成標(biāo)準(zhǔn)制定
- 在開頭直接使用 <!DOCTYPE HTML>
2.什么是!DOCTYPE HTML
- 位于標(biāo)簽之前竟坛，告知瀏覽器使用了哪種HTML版本
- HTML4.01 需要聲明引用DTD（文檔類型聲明）闽巩，因?yàn)?HTML 4.01 是基于 SGML Standard Generalized Markup Language , 確保了瀏覽器能夠正確的渲染內(nèi)容。
- HTML4.01三種模式 Strict担汤、Transitional 和 Frameset Strict: 包括HTML元素和屬性涎跨，不包括過時(shí)元素，框架集不行 Transitional : 框架集不行 Frameset /
- HTML5 不基于SGML, 不需要DTD
3.H5新特性
- canvas svg
- audio video
- localstorage sessionstorage
- websocket
- 客戶端數(shù)據(jù)庫
- history (用于路由)
- work thread
- 地理位置信息
- 可讀性 新增元素 artic漫试、footer六敬、header、nav驾荣、section
- 新的表單控件和輸入類型驗(yàn)證外构，eg：calendar普泡、date、time审编、email撼班、url、search
- 移除元素 frame垒酬、frameset砰嘁、big、center勘究、font矮湘、s、strike口糕、tt缅阳、u
4.canvas和svg
- canvas：
- html中：<canvas id=“myCanvas”></canvas>
- js中：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
-
svg:可伸縮矢量圖(直譯過來就是：放在哪都可以用，它自動(dòng)縮放大小)
- XML 格式定義圖形景描，放大改變尺寸同時(shí)圖片的質(zhì)量不會(huì)有所損壞
canvas pk svg
| canvas | svg |
|---|---|
| js繪制 | xml繪制 |
| 分辨率相關(guān) | 分辨率無關(guān) |
| 不支持事件處理 | 支持事件處理 |
| 改變需要擦除重繪 |
5.audio和video
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
//具體api可參考菜鳥教程中的介紹
6.地理位置
- android：gps定位十办，wifi定準(zhǔn)，基站定位超棺，AGPS定位
- 地理位置（Geolocation）是 HTML5 的重要特性之一向族，提供了確定用戶位置的功能，借助這個(gè)特性能夠開發(fā)基于位置信息的應(yīng)用棠绘。
- 調(diào)用相關(guān)的函數(shù)API或者注冊監(jiān)聽事件
- 可獲取精度件相、緯度、海拔等等
navigator.geolocation
getCurrentPosition()
watchPosition()
clearWatch
pos.coords.latitude
pos.coords.longitude
pos.coords.accuracy
pos.coords.altitude
pos.coords.speed
<script>
var x=document.getElementById("demo");
unction getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(success,error,ops);
}
}
function success(pos)
…
</script>
詳情可參考這篇blog
7.History
- location.hash 和 hashchange事件
- history.pushState(),popstate()
8.LocalStorage vs sesstionStorage vs cookie
| LocalStorage | seestionStorage | cookie |
|---|---|---|
| 不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器弄唧，僅在本地保存 | 同 ls | 標(biāo)示用戶身份而存儲(chǔ)本地中适肠，會(huì)在browser和server中來回傳遞 |
| 比cookie大得多，可以達(dá)到5M或更大 | 同ls | cookie數(shù)據(jù)大小不能超過4k候引。 |
| 存儲(chǔ)永久 | 瀏覽器關(guān)閉后刪除 | 過期時(shí)間前有效 |
9.work workers
- web workers是HTML5提供的一個(gè)JavaScript多線程解決方案侯养，具體可以參考我寫的這篇博客
10.websocket和socket.io
- 可以先參考我寫的這篇博客
- WebSocket 安全方案，允許客戶端代碼在客戶端和支持WebSocket協(xié)議的服務(wù)器端創(chuàng)建雙向的套接字類型
11.文件系統(tǒng)
- 簡單來說就是對(duì)文件進(jìn)行操作澄干，我在網(wǎng)上看到一篇blog逛揩，寫的還不錯(cuò)，點(diǎn)這里
12.離線緩存
- 在用戶沒有與因特網(wǎng)連接時(shí)麸俘，可以正常訪問站點(diǎn)或應(yīng)用辩稽，在用戶與因特網(wǎng)連接時(shí)，更新用 戶機(jī)器上的緩存文件
- 原理：HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制 通過這個(gè)文件上的解析清單離線存儲(chǔ)資源从媚，這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來逞泄。 之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會(huì)通過被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁面展示。
- 詳細(xì)可參考這篇blog
2.無線前端工具+框架
- npm：node package manager喷众，是一個(gè)nodejs包管理和分發(fā)的工具各谚。
- tnpm：阿里內(nèi)部 npm 及 源 npm 鏡像，完整 npmjs.org 鏡像到千，你可以用此代替官方版本(只讀)昌渤，同步頻率目前為 10分鐘 一次以保證盡量與官方服務(wù)同步。
- react：React 是一個(gè) Facebook 和 Instagram 用來創(chuàng)建用戶界面的 JavaScript 庫憔四。 React 是為了解決一個(gè)問題：構(gòu)建隨著時(shí)間數(shù)據(jù)不斷變化的大規(guī)模應(yīng)用程序.
- React Native :React Native 結(jié)合了 Web 應(yīng)用和 Native 應(yīng)用的優(yōu)勢膀息，可以使用 JavaScript 來開發(fā) iOS 和 Android 原生應(yīng)用。在 JavaScript 中用 React 抽象操作系統(tǒng)原生的 UI 組件了赵，代替 DOM 元素來渲染等
- flux :Flux是Facebook用來構(gòu)建用戶端的web應(yīng)用的應(yīng)用程序體系架構(gòu)潜支。它通過利用數(shù)據(jù)的單向流動(dòng)為React的可復(fù)用的視圖組件提供了補(bǔ)充。相比于形式化的框架它更像是一個(gè)架構(gòu)思想斟览，不需要太多新的代碼你就可以馬上使用Flux構(gòu)建你的應(yīng)用
-
ant desgin：螞蟻出的ui組件庫毁腿，可以大大提高我們的開發(fā)效率- ant desgin pro:用于搭建中后臺(tái)的cms
- ant desgin mobie：用于移動(dòng)端辑奈，無線前端
- ant desgin h5:antd出了針對(duì)h5的組件庫
- yocto：組里用的就是yocto
- yocto基于zepto苛茂，大多數(shù)api與zepto保持一致
- yocto的core精簡了不常用的API，去除了不必要的邏輯鸠窗，深度優(yōu)化了性能
- 可參考這篇readme 講的非常的好
- HPM：全稱hybrid-app package manager and developing
kit.- 好不好用妓羊，自己安裝嘗試一把就了解了。這是安裝地址
- atool-build：readme利器稍计，hh
- 基于webpack實(shí)現(xiàn)
- 支持通過webpack.config.js進(jìn)行擴(kuò)展相關(guān)配置項(xiàng)
- 支持typescript
- readme放在這里躁绸，可親測一次
