【InnerKen】迅速上手教程1——IK開發框架的掌握
眾所周知,如今網頁的製作中多采用盒子模型,盒子模型結合flex佈局可以完成幾乎所有外觀設計上的需求。然而盒子模型除了可以滿足外觀設計上的需求外,其最重要的一點優勢在於,可以被便捷的動態生成。
盒子模型絕對不是一種設計起來效率最高的模型,為了完成特定的佈局,大量的中間容器被浪費,並甚至可以導致各種各樣奇奇怪怪的bug,然而人們依舊喜愛盒子模型,不單單是因為其便於理解,更是因為它能夠更好地融入到如今大前端的環境中。
所謂大前端 ,是指伺服器僅僅提供資料和讀寫介面,對於資料的處理,表現,都需要放在前端執行。對於接觸程式設計不多的獨立開發者來說,大前端的思想極大地降低了網頁製作的門檻。以前必須要通過伺服器來完成的事情,如今在不那麼嚴謹的JavaScript上就可以很方便的實現,更別提這種技術省卻的在伺服器和前端互動中產生的麻煩。而所謂大前端技術的核心,不外乎一個,那便是根據資料生成內容,這也是我們網頁程式設計中的主要工作。閱讀本文後你應該能夠獨立完成根據
資料
生成的網頁。
一、什麼是ajax?
ajax是一種非同步載入的技術,所謂非同步載入便是網頁在向伺服器傳送請求後不等待伺服器的反饋而直接進行其他渲染,在伺服器返回資料後再對資料進行處理的一種技術。其顯著特徵是不需要重新整理頁面而重新載入頁面的內容,因此增加了使用者操作的流暢感,從而提高了使用者體驗。最為重要的是,它可以減少對伺服器的壓力,將原本需要伺服器端進行渲染的html放回至瀏覽器,因此大大提高了伺服器的負載量和效率,也是所謂大前端的核心。
我們使用jquery來實現ajax.
$.ajax({ url:"https://www.jhdsoftware.com/php/hallo",//請求的地址 method:"POST",//請求的方法 @GET,POST data:{//傳遞的資料,冒號前為名稱,冒號後為資料。 q:1, message:hello, }, success:function(res){//請求成功後的回撥函式 console.log(res);//在控制檯中顯示伺服器的迴應,應為|hello| } });
通過這樣的函式我們可以從伺服器獲取資料,為我所用。在進幾年來,比較通用的資料格式是JSON,JSON是一種對於物件和陣列非常友好的資料格式,同時也具備著儲存和處理大批量資料的能力。因此我所配置的伺服器介面所返回的資料多為JSON格式。
二、如何處理資料
當我們從伺服器中獲取到資料後,我們需要使用這些資料。正常來說我們處理所獲取資料的第一步便是將他在控制檯中打印出來,進行這個操作的目的第一是在於確定資料的結構,第二是在於確認我們確實獲取到了我們所需要的資料,可以說,我們在實際開發中所遇到的問題有百分之80以上都是由於操作了錯誤,不完整的資料所導致的,所以當我們面對一個看似無法解決的bug時,第一步便是確定我們所處理的東西,到底是不是我們認為我們在處理的東西,由於js的特性,也許我們在網頁程式設計中對於空物件的操作不會導致什麼後果,但是如果我們在伺服器或其他更為底層的平臺上操作時,這些小小的失誤很有可能造成慘痛的後果。
在將資料打印出來之後,我們應該對於資料的結構有著一定的認識,剩下的便是將資料轉化為視覺化的頁面,而在這裡我不得不介紹一種可能大家接觸較少的技術“HTML DOM ”。
所謂的html文件,實際上是由大大小小的盒子所組成的樹,而HTMLDOM便是對這種關係的抽象化,他把html的標籤視為節點,在有限次的對父節點訪問中一定會到達樹的根部,也就是html標籤。而我們所需要實際利用的,也不過是製作節點和插入節點而已。
在製作節點之前,我們首先應該直接使用html標籤製作出自己想要的效果,然後再將這些標籤轉製為對於節點的操作。
//製作和插入節點的過程 var newItem=document.creatElement(@elementTagName);//建立節點 newItem.setAttribute(@someIndex,@someValue);//設定節點屬性 document.getElementById(@id).appendChird(newItem);//將節點插入到指定節點中。