前端組合：熊孩子馁害、村姑、化妝師
??上次在這提到村姑和化妝師的故事蹂匹，其實(shí)村姑背后有個(gè)大家族碘菜。上次教大家如何用代碼做自我介紹，其實(shí)用到了JavaScript（簡稱js）。
??html只是個(gè)靜態(tài)頁面語言忍啸。如果用html做自我介紹的話仰坦，它是展示全部文字，而用上了js后计雌，它可以讓它一個(gè)一個(gè)字顯示出來悄晃，像打字機(jī)一樣。
??好了，介紹下今天主角，村里的那個(gè)熊孩子就是Javascript涌哲，愛搗蛋, 調(diào)皮的服務(wù)員(前端編程語言)。熊孩子眷蚓、村姑和化妝師是一個(gè)組合，叫前端（js+html+css）反番。
有興趣就看沙热，下面是上次的js代碼，就是有個(gè)打字方法type()
<script language="javascript"> //<script>代表腳本
var index=0;
var word;
function type(){ //打字方法的邏輯罢缸，一次打一個(gè)字
var typePanel = document.getElementById("jack");
typePanel.innerText = word.substring(0,index++);
if(index % 3 == 0){
typePanel.className = "";
}else if(index % 3 == 1){
typePanel.className = "saying";
}
}
window.onload=function(){ //加載入口
word=document.getElementById("w").innerHTML;
setInterval(type, 200); //每隔0.2秒調(diào)用一下打字方法
}
</script>
俊俏走紅的Java
?? 村里另一個(gè)小伙子Java, 生的早也生的俏篙贸，是個(gè)好廚師，做得一手好菜(后端開發(fā)主流語言枫疆，還有php等)爵川。經(jīng)常有人誤會這兩個(gè)的關(guān)系，問這兩者的關(guān)系息楔∏薰保可以這樣說，Java和Javascript的關(guān)系就像雷鋒和雷鋒塔一樣钞螟。
介紹下熊孩子的發(fā)家史
移動(dòng)互聯(lián)網(wǎng)的到來
??自從可以點(diǎn)外賣之后（移動(dòng)互聯(lián)網(wǎng)時(shí)代），用戶體驗(yàn)要求變高了谎碍，都在家叫外賣鳞滨。（app性能好）App有兩種，iOS和Android蟆淀。
- iOS app（用Objective-c開發(fā)）：1號外送員拯啦，生的俏，新電動(dòng)車熔任。
- Android app（用Java開發(fā)）：2號外送員褒链，生的一般，舊電動(dòng)車疑苔。
iOS發(fā)布審核流程
??下圖是iOS開發(fā)到發(fā)布的流程甫匹，蘋果開發(fā)需要購買證書，發(fā)布也要各種審核，保證了App Store的應(yīng)用質(zhì)量兵迅。安卓流程也類似抢韭，不需要購買證書（自己用計(jì)算機(jī)可以生成），審核也比較少恍箭。
籃子和倉庫：內(nèi)存和運(yùn)存
??這里要介紹下緩存（一般存放在內(nèi)存）刻恭，雖然app和瀏覽器都有緩存，但是app有數(shù)據(jù)庫扯夭，類似小倉庫鳍贾，而且app自己可以生產(chǎn)頁面，所以app的能力比網(wǎng)頁好得多交洗。
??下圖是App的工作原理骑科，App首先和服務(wù)器請求數(shù)據(jù)，然后緩存著藕筋，接著處理數(shù)據(jù)并存入數(shù)據(jù)庫纵散，根據(jù)數(shù)據(jù)生產(chǎn)頁面并展示。
??可以拿到數(shù)據(jù)直接展示（1-2-4-3）隐圾，也可以存入數(shù)據(jù)再展示（1-2-3-4 ）伍掀。
h5和App的區(qū)別
?? h5（html5）, 城里的姑娘，是村姑升級版暇藏，常見于公眾號開發(fā)蜜笤。上次也在這里 輸入url后發(fā)生了什么 提到了網(wǎng)頁，在瀏覽器打開h5網(wǎng)頁版淘寶盐碱，其實(shí)就是下載網(wǎng)頁回來把兔，那么有時(shí)候網(wǎng)絡(luò)不好甚至不通的時(shí)候體驗(yàn)就很差了。
??通過瀏覽器打開淘寶和打開淘寶app有什么不同呢瓮顽？
??app還是需要聯(lián)絡(luò)服務(wù)器那邊县好，獲取數(shù)據(jù)（配方），這邊自己生產(chǎn)頁面暖混，所以缕贡，服務(wù)器那邊返回顯示的數(shù)據(jù)（多少條，每一條里面顯示什么）拣播，app這邊根據(jù)這些數(shù)據(jù)自己生產(chǎn)展示出來晾咪，就不用下載頁面，效果好很多贮配。不好的地方是占用手機(jī)的資源（內(nèi)存谍倦、cpu），也需要重新化妝泪勒。
??混合開發(fā)(hybrid)也很容易理解昼蛀，app+h5宴猾。app里面有一個(gè)組件webview網(wǎng)頁盒子，可以理解為一個(gè)瀏覽器環(huán)境盒子曹洽，用代碼啟用后鳍置，它也可以打開網(wǎng)頁。
- 簡單的混合開發(fā)其實(shí)就是在app里套盒子送淆，盒子里打開指定某個(gè)網(wǎng)頁税产；
-
復(fù)雜點(diǎn)的就是有數(shù)據(jù)的交互，在淘寶（app）打開天貓（h5）偷崩，然后你發(fā)現(xiàn)你也可以下單購物（自動(dòng)登錄了）辟拷，自動(dòng)用淘寶的賬戶登陸了天貓，這就是數(shù)據(jù)交互阐斜。
淘寶app衫冻，混合開發(fā)
小程序
??h5跨平臺但體驗(yàn)差，app開發(fā)成本高（需要開發(fā)ios和安卓兩個(gè)）谒出，那有沒有更好的方案呢隅俘？ 上面的混合開發(fā)算是一個(gè)，但是隨著技術(shù)的進(jìn)步笤喳，F(xiàn)acebook推出了React Native（js開發(fā)的移動(dòng)跨平臺程序）为居，騰訊也推出了微信小程序，這是 顛覆式的行業(yè)方案杀狡，從此很多iOS和安卓程序員就失業(yè)了蒙畴，中小型項(xiàng)目都可以用React Native或小程序開發(fā)，js變成了高富帥呜象，前端迎來巔峰期膳凝。
??個(gè)人認(rèn)為，小程序是為新零售而生的恭陡，小程序有個(gè)附近的功能蹬音，附近的零售店，對了休玩，就是這樣子的著淆。阿里和騰訊的新零售之爭，小程序服務(wù)商（有贊之類）哥捕、理發(fā)店牧抽、小賣部都可以用小程序嘉熊。
完善的積木盒子
??微信為小程序提供了很多能力遥赚，像是和微信、公眾號互通的賬號體系阐肤，支付能力凫佛，共享微信的消息提醒等等讲坎。可以說大大降低了開發(fā)成本愧薛，開發(fā)可以專注于盒子組裝使得項(xiàng)目快速上線晨炕。
王者歸來
??介紹完熊孩子的發(fā)家史了，（Node.js這個(gè)還沒介紹毫炉，下次吧瓮栗，不然太多看暈了）從誕生到小程序，前端越來越強(qiáng)盛了瞄勾，正所謂能力越大费奸，責(zé)任越大，有非常強(qiáng)大的開發(fā)生態(tài)进陡，自然養(yǎng)活了很多前端工程師愿阐。
小作業(yè)：用小程序做個(gè)自我介紹
