整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          區塊管理JavaScript框架,用簡單的方式構建復雜的頁面

          開源精選》是我們分享Github、Gitee等開源社區中優質項目的欄目,包括技術、學習、實用與各種有趣的內容。本期推薦的是前端頁面區塊管理框架——Magix。

          隨著前端領域的不斷發展,現代的網站變得越來越龐大,頁面變得越來越復雜。在這個情況下,Magix以將站點分離為一個個頁面,將頁面分離成一個個區塊的思想,用區塊連接的方式使用一個個相互獨立的區塊來構建頁面,讓無論多復雜的頁面都能像拼拼圖一樣,實現化繁為簡。


          功能特性

          • 簡單易用:采用最原汁原味的語法,只要掌握html、css、javascript即可開箱即用
          • 高效率:區塊之間相互獨立,意味著在任何地方都可復用定義好的區塊,讓工作事半功倍
          • 面向未來:針對復雜龐大的項目時,Magix天然的微前端架構,經過簡單配置,讓獨立的項目也如區塊一般順滑接入

          magix適合什么項目

          • Magix適合做單頁應用(SPA)的項目,最初的設計目標也是做單頁應用的
          • Magix也可以做傳統的展示型頁面,當頁面越復雜時,用Magix越值得
          • 也可以只把頁面上某一塊應用Magix,不要求是整個頁面
          • Magix不支持多個實例,即同一個頁面只能有一個Magix存在。即使如此,Magix仍然可以與別的框架混用。甚至頁面上某幾塊想用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的組成

          和原生的前端開發一樣,view通常也是由三個文件構成的:

          • html文件:模版文件,結合數據渲染出頁面
          • css文件:樣式文件,當前頁面相關的樣式
          • javascript文件:必不可少的文件,承擔所有邏輯的執行

          在編譯器的支持下,其中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,分別為ab,我們想要在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的核心知識框架,同時借助豐富的示例讓初學者有一個愉悅、輕松的學習過程。

          想從事前端開發的,可將本書作為學習的起點。正從事前端開發的,可將本書作為速查的手冊。


          主站蜘蛛池模板: 亚洲日本一区二区一本一道| 天天综合色一区二区三区| 精品视频一区二区观看| 精品国产免费一区二区三区| 无码播放一区二区三区| 国产av天堂一区二区三区| 一区二区三区日本电影| 大香伊蕉日本一区二区| 亚洲一区二区三区久久| 人妻av无码一区二区三区| 日本免费电影一区二区| 久久久91精品国产一区二区三区| 久久久久国产一区二区三区| 国产精品 一区 在线| 国产亚洲日韩一区二区三区| 国产一区二区三区在线观看免费| 亚洲高清毛片一区二区| 亚洲色精品VR一区区三区 | 亚洲精品无码一区二区| 一区二区三区四区精品视频| 亚洲一区综合在线播放| 一区二区三区日韩| 久久伊人精品一区二区三区| 亚洲av无码片vr一区二区三区| 久久久久人妻精品一区| 久久久国产精品无码一区二区三区| 欧美激情一区二区三区成人| 国产一区风间由美在线观看| 国产日韩高清一区二区三区 | 国产未成女一区二区三区 | 国产精品成人一区二区| 日本道免费精品一区二区| 中文国产成人精品久久一区| 日韩精品人妻一区二区中文八零| 日本高清不卡一区| 97久久精品无码一区二区| 无码国产亚洲日韩国精品视频一区二区三区| 午夜福利国产一区二区| 中文字幕一区二区区免| 日韩好片一区二区在线看| 高清无码一区二区在线观看吞精|