開源精選》是我們分享Github、Gitee等開源社區中優質項目的欄目,包括技術、學習、實用與各種有趣的內容。本期推薦的是前端頁面區塊管理框架——Magix。
隨著前端領域的不斷發展,現代的網站變得越來越龐大,頁面變得越來越復雜。在這個情況下,Magix以將站點分離為一個個頁面,將頁面分離成一個個區塊的思想,用區塊連接的方式使用一個個相互獨立的區塊來構建頁面,讓無論多復雜的頁面都能像拼拼圖一樣,實現化繁為簡。
magix的使用目前依賴腳手架工具thx-cli,因此magix項目的開發、環境運行、打包編譯等功能都需要在thx-cli的基礎之上。
首先我們需要在全局先安裝thx-cli
// npm
npm install -g thx-cli
// yarn
yarn global add thx-cli
thx-cli在安裝完成后會注冊thx作為全局命令,我們可以直接使用thx <command>[options]來進行使用
因此我們可以使用thx -v命令來驗證是否安裝成功,如果顯示了版本號則表示安裝成功
應用初始化
在安裝完成thx-cli之后,我們就可以開始應用的初始化了。
我們可以使用thx init這個命令來進行應用的初始化。如果我們是第一次進行應用的初始化,thx-cli會提示安裝magix相關的套件(thx-kit-magix),如下:
在安裝好套件之后,選擇我們初始化的模板
最后輸入應用名稱
本地運行開發
thx-cli提供了dev命令用于應用的本地運行開發,在成功啟動應用后會自動打開瀏覽器
打包構建
thx-cli同樣也提供了build命令用來對應用進行打包構建,構建后的文件輸出在build目錄下
View的組成
和原生的前端開發一樣,view通常也是由三個文件構成的:
在編譯器的支持下,其中css文件可由less文件替代,同時也支持了typescript。并且針對不同的區塊功能差異,html文件與css文件也并非是必須的,例如:在當前的view只是提供功能上的拓展時,與模版、樣式上的需要時,便允許只有一個js文件
那么這三個文件是通過什么來進行連接的呢?答案是:@:占位符
接下來請看具體示例:
當一個view相關文件的結構為:
- index.ts
- index.html
- index.less
在index.ts文件中的代碼如下:
import Magix from 'magix'
// 關聯樣式文件
magix.applyStyle('@:./index.less')
export default Magix.View.extend({
tmpl:'@:./index.html' // 關聯html文件
assign(extra) {
this.set(extra)
},
async render() {
await this.digest()
}
})
可見,@:占位符的重要性,但它并非只有連接文件的功能,還有比如:引入css變量等功能。
View中數據渲染
我們在前面提到,html文件中會結合js文件中的數據來渲染頁面,這又是怎么實現的呢?首先我們需要了解的是每個view都有一個數據對象。相信你在前面的代碼中已經看到了這兩個函數:this.set()、this.digest()。這兩個函數便是對數據對象進行操作。
其中set函數的作用是設置view中的數據,當調用該函數時傳入一個對象,該對象就會被混入到當前view的數據對象中。
而digest函數的功能為渲染視圖,將模版轉化為真正的dom。它也同時支持接收一個對象作為參數,表示設置數據并同時渲染視圖。
this.set({username:123}).digest()
// 等同于
this.digest({username:123})
當html文件中的模版獲取到動態的數據后,接下來只需要使用簡單的模版語法就能將其渲染出來:<div>{{= username}}</div>。最終該節點的渲染結果為<div>123</div>
View之間的連接
我們已經了解了一個view的組成與渲染了。那不同的view之間又是怎么建立起聯系的呢?magix是怎么做到區塊之間的靈活使用的呢?
現在我們舉個例子:有兩個view,分別為a和b,我們想要在a中展示b,也就是我們想要在a中引入b,該怎么做呢?
假設目錄結構如下:
- a.ts
- a.html
- a.less
- b.ts
- b.html
- b.less
在這里我們就要介紹一個屬性了mx-view,magix就是通過該屬性來將不同的區塊進行連接。具體比如在a中引入b,只需在a.html中這樣寫即可:<div mx-view="@:./b"></div>
或者你也可以使用magix自帶的標簽來實現:<mx-vframe src="@./b" />,經過編譯器的編譯后,也會被編譯的與前者相同。同樣的,組件庫中的組件,在經過編譯后,也會變為<div mx-view=" "></div>這種形式的節點。
父子組件通信
動態掛載view
—END—
開源協議:MIT
開源地址:https://github.com/thx/magix
javaScript是一種解釋型語言,它的執行是自上而下,但是各個瀏覽器對于至上而下的理解是有細微差別的,而代碼的上下游也就是程序流又對于程序正確至關重要。
首先得了解有幾種方法能把javaScript加入到頁面中? 常見下述的前2種,其實還有更多。
1.頁面中直接引入外部js文件:<script src="my.js"></script>
2.頁面中直接寫入 js片段: <script>alert(1)</script>
3.在js中引入js文件(比較少用): document.write("<scr"+"ipt src='my.js'></scr"+"ipt>");
注意:這時候"..</script>"必須拆成"</scr"+"ipt>",否則瀏覽器可能會把父js片段關閉掉,出錯;
4.同樣在js中引用其他js片段,document.write("<scr"+"ipt>alert(1)</scr"+"ipt>");
你可能覺得這個并沒有必要,既然已經在script中了還套一層干嘛?呵呵,怎么說也是一種寫法,而且它具有其特殊的行為,稍后我們討論到。
5.使用Ajax中的xmlHttpRequest結合eval()來引入js,我最早在Dojo的代碼見到,寫的詳細些:
var ajaxRequest = getXmlHttpRequest()//省去各個瀏覽器得到xmlHttpRequest的部門
ajaxRequest.open("GET","my.js",false);//使用xmlHttpRequest對象Get方法的同步調用
ajaxRequest.send(null);
sJsFragment = ajax.responseText;//得到字符串為js片段
eval(sJsFragment);//執行js片段
注意:這里要求my.js即后來的sJsFragment內容得是非常規范的js,且沒有//開頭的注釋,怎樣檢查js是否規范呢?去http://jslint.com/
6.無所不能的Dom方法,非常好用:
var oScript = document.createElement("script");//創建一個Script元素
oScript.src = "my.js";//制定src屬性
document.getElementsByTagName("head")[0].appendChild(oScript);
說明:my.js的內容會在oScript加入到文檔中之后獲得并執行。仔細看下這段容易發現這個調用是異步的,可以在文檔載入之后通過事件觸發,我用它變通了一下,作為了xmlHttpRequest的Get方法在跨域取數時的替代,獲得了很完美的效果,以后有機會專門寫篇文。
六種不少吧,可能還會有吧,而且這幾種之間還可能相互嵌套,變化無常。
其中1、2、4、6種方式引入的javaScript的執行順序是非常自然的,隨著頁面的載入以及后續的事件觸發,它們遵守先來后到、而其內部自上而下。
eb開發是一個很依賴經驗的領域,然而這對初學者很不友好。
知識一旦脫離了應用場景就會變得晦澀、空洞,且知識本身也滿足“二八定律”,“抓大放小”是提高學習效率的關鍵。
下文向大家介紹了HTML和CSS之間的關系。內容選自《HTML 5與CSS 3核心技法(全彩)》一書。本書主線清晰,講解簡潔,并提供在線效果演示效果,非常適合小白上手!
1 HTML是骨架
很難想象一個人在桌前對著一塊砧板坐一夜,隔一會兒就噼里啪啦敲幾下,一會兒哭一會兒笑,是一種什么景象。事實上,在貓眼中我們就是這樣的。只不過我們面對的是一塊會發光的“砧板”而已。但為什么這塊“板子”如此吸引人?“上網”到底是在做什么?
獲取信息。
重點在“信息”,一種看不見摸不著卻真實存在的東西。無論“1 + 1 = 2”這段字符顯示得多么粗糙,都不會影響它傳遞了完整的信息,以及這條信息的內在邏輯是正確的,不是嗎?HTML就是用來盛放最核心的內容——信息。
所以,在CSS和JavaScript出現之前,HTML就出現了。這是必然的,因為如果連最核心的信息都無法有效傳遞,那圍繞著它的一切裝飾物和附屬品都是毫無意義的。
除滿足承載核心信息的需求外,HTML還解決了一個重要的問題——將信息結構化。
試想有這樣一篇文章:
背影
我說道:“爸爸,你走吧?!彼囃饪戳丝?,說:“我買幾個橘子去。你就在此地,不要走動?!蔽铱茨沁呍屡_的柵欄外有幾個賣東西的等著顧客。走到那邊月臺,須穿過鐵道,須跳下去又爬上去。父親是一個胖子,走過去自然要費事些。我本來要去的,他不肯,只好讓他去。我看見他戴著黑布小帽,穿著黑布大馬褂,深青布棉袍,蹣跚地走到鐵道邊,慢慢探身下去,尚不大難??墒撬┻^鐵道,要爬上那邊月臺,就不容易了。他用兩手攀著上面,兩腳再向上縮;他肥胖的身子向左微傾,顯出努力的樣子。
評論
王花花 大概,天底下的父親,老去的樣子都有些共同的特質吧
李拴蛋 我們都不愿意承認他老了
劉備備 想吃橘子...
此時上面的信息基本沒有結構,只能通過斷行或縮進盡可能讓內容更易讀,編輯時的狀態就是其最終的顯示效果。
HTML就派上了用場,見下方的代碼:
代碼
<artcle>
<h1>背影</h1>
<p>
我說道:“爸爸,你走吧。”他望車外看了看,說:“我買幾個橘子去。你就在此地,不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺,須穿過鐵道,須跳下去又爬上去。父親是一個胖子,走過去自然要費事些。我本來要去的,他不肯,只好讓他去。我看見他戴著黑布小帽,穿著黑布大馬褂,深青布棉袍,蹣跚地走到鐵道邊,慢慢探身下去,尚不大難??墒撬┻^鐵道,要爬上那邊月臺,就不容易了。他用兩手攀著上面,兩腳再向上縮;他肥胖的身子向左微傾,顯出努力的樣子。
</p>
</artcle>
<section id="comment-list">
<div class="title">評論</div>
<div class="comment">
<strong class="username">王花花</strong>
<span class="content">大概,天底下的父親,老去的樣子都有些共同的特質吧</span>
</div>
<divclass="comment">
<strong class="username">李拴蛋</strong>
<span class="content">我們都不愿意承認他老了</span>
</div>
<div class="comment">
<strong class="username">劉備備</strong>
<span class="content">想吃橘子...</span>
</div>
</section>
一頭霧水沒關系,后面我們會細說每一個部分??傊@段內容給人感覺反而更繁瑣。但繁瑣是代價,重要的是現在這段信息有結構了。這就意味著計算機可以通過結構的規律將其顯示得更便于閱讀(甚至是交互)。
以下是不加任何裝飾性內容直接讓瀏覽器呈現的結果:
效果
這是純HTML在沒有引入任何裝飾時的顯示效果。很明顯,即便是這樣也比純文字狀態易讀了許多。但注意,HTML本身沒有樣式,字體大小和粗細有變化的原因是瀏覽器的默認樣式起了作用,與HTML沒有關系。而重點就在這里,這意味著我們可以基于這個結構設計自己的頁面效果,見下方的示例。
代碼
<style>
body { font-family: 'Microsoft YaHei', sans-serif; }
#comment-list { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 25px; }
#comment-list .comment { margin-top: 10px; margin-bottom: 10px; }
#comment-list .title {
color: #777; font-size: 1.1rem; padding-bottom: 5px;
border-bottom: 1px solid #ccc;
}
</style>
<artcle>
<h1>背影</h1>
<p>
我說道:“爸爸,你走吧?!彼囃饪戳丝?,說:“我買幾個橘子去。你就在此地,不要走動?!蔽铱茨沁呍屡_的柵欄外有幾個賣東西的等著顧客。走到那邊月臺,須穿過鐵道,須跳下去又爬上去。父親是一個胖子,走過去自然要費事些。我本來要去的,他不肯,只好讓他去。我看見他戴著黑布小帽,穿著黑布大馬褂,深青布棉袍,蹣跚地走到鐵道邊,慢慢探身下去,尚不大難。可是他穿過鐵道,要爬上那邊月臺,就不容易了。他用兩手攀著上面,兩腳再向上縮;他肥胖的身子向左微傾,顯出努力的樣子。
</p>
</artcle>
<section id="comment-list">
<div class="title">評論</div>
<div class="comment">
<strong class="username">王花花</strong>
<span class="content">大概,天底下的父親,老去的樣子都有些共同的特質吧</span>
</div>
<div class="comment">
<strong class="username">李拴蛋</strong>
<span class="content">我們都不愿意承認他老了</span>
</div>
<div class="comment">
<strong class="username">劉備備</strong>
<span class="content">想吃橘子...</span>
</div>
</section>
效果
這里只是舉了一個小示例。你可以輕而易舉地讓頁面的風格千變萬化,進而讓用戶體驗有所差異(或差距)?!扒ё內f化”因CSS靈活、強大,“輕而易舉”因HTML簡潔、有序。結構的力量!
CSS是皮膚
一個充滿活力的生態是不滿足于現狀的。人們在適應了便利地瀏覽核心信息之后,就會想方設法改進瀏覽的體驗。比如,讓自己的博客以多欄顯示,以便在視覺上區分不同板塊;修改字體顏色,以便強調一些重要信息等。
起初的做法是——準備幾種特殊的標簽,專門用于樣式的指定。涉及布局的地方,如果沒有特殊標簽就直接用表格布局。以下沒有任何樣式的狀態(以下代碼均不需要看懂):
代碼
<h1>標題</h1>
<p>
從前有座山,山里有個廟,廟里...
</p>
效果
此時的頁面結構下。
如果想讓標題居中,則需要給其添加元素<center>,見下方的示例。
代碼
<center>
<h1>標題</h1>
</center>
<p>
從前有座山,山里有個廟,廟里...
</p>
效果
此時的頁面結構如下。
居中標題的目的確實達到了,但是有一個很大的問題:如果我改變主意了,不想讓其居中了,那么我還得再去將<center>元素去掉。這對于簡單的頁面確實可行,但如果是復雜的頁面,這種做法的工作量就是噩夢,因為每個地方都得修改,無論是對齊方式、顏色、背景色,還是大的布局都必須通過修改結構才能完成。這種做法的最大問題是可維護性太差,很多時候為了一種樣式要修改很多不必要的結構,枯燥、重復、削足適履的工作太多,基本上寫一次就再也不想改了。
這個問題亟待解決,而且解決方案還要兼容現有規則?,F有規則是什么?HTML的語法及結構。不過既然HTML已經有結構了,為什么不好好利用呢?
以前面示例中的文章頁面為例,如果我們想更改標題,是否可以先統一選中所有標題,然后說明想要什么樣式規則呢?就像下面這樣:
所有h1 元素聽著
對齊方式 居中。
字體顏色 黑色。
如果想將所有段落字體放大,則像下面這樣:
所有p 元素聽著
字體大小 150%。
這種方式的確很高效!同時這個規則與HTML語法無關,相當于另一種語言。這樣結構和樣式就不會互相影響,結構是結構,樣式是樣式,兩者隔離開了。如果想修改樣式,則完全不需要勞HTML大駕,只需要修改樣式文件即可,更便于管理和維護。這就是CSS,只不過其語法更簡潔。
下面以修改標題對齊方式為例:
h1 { /* 所有h1 元素聽著 */
text-align: center; /* 對齊方式 居中 */
}
通過批量選擇和處理,極大地提高了開發效率,降低了維護成本,四兩撥千斤。
(完)
圖書推薦
《HTML 5與CSS 3核心技法(全彩)》
表嚴肅 著
本書能夠為自學Web開發初學者建立一套HTML與CSS的核心知識框架,同時借助豐富的示例讓初學者有一個愉悅、輕松的學習過程。
想從事前端開發的,可將本書作為學習的起點。正從事前端開發的,可將本書作為速查的手冊。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。