2. 程式人生 > >Ext JS從零開始之二

Ext JS從零開始之二

阿新 • • 發佈：2019-01-15

歡迎來到Ext從零開始部落格系列之二。在第一篇部落格中，已經從零開始建立了一個應用程式看起來像什麼且希望它做什麼的的可工作的應用程式，現在，從HTML和CSS角度來審視一下它是如何構建的。

要注意的是，在該應用程式中，index.html檔案使用了硬編碼來指定js和css檔案（第5到7行）。

    <!DOCTYPE HTML>
     <html>
       <head>
         <title>Ext JS From Scratch - Part 1, Demo 4</title>
         <link
 
 href='theme.css' rel='stylesheet'/>
         <script src='Ext-lite.js'></script>
         <script src='app.js'></script>
       </head>
       <body></body>
     </html>

在建立的應用程式中，這些檔案會隨著時間的推移不斷被新增而發生改變。這些檔案將會新增新的功能，例如，新增新的檢視。此外，這些檔案會隨著開發到釋出，釋出到測試等不同階段而發生改變，因而，需要一些必要手段來管理這些檔案。

在Ext JS,檔案管理是通過微載入和Sencha Cmd來實現的。使用Sencha Cmd建立的應用程式的index.html檔案是不包含這些檔案的，代之以的是使用微載入來下載他們。一個典型的，使用Sencha Cmd建立的Index.html檔案包含以下程式碼：

    <!DOCTYPE HTML>
    <html manifest="">
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="UTF-8"
 
>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
      <title>FromScratch</title>
      <!-- The line below must be kept intact for Sencha Cmd to build your application -->
      <script id="microloader" data-app="41afb480-65e8-43c8-9cda-6b7659d5a865" type="text/javascript" src="bootstrap.js"></script>
    </head>
    <body></body>
    </html>

微載入一直很神祕：它是做什麼的？它生成哪些檔案？何時需要重新生成檔案？重新生成了什麼檔案？好的，就從這個典型的Ext JS從零開始吧，來建立我們自己的微載入!

正如所提到的，使用Sencha Cmd建立的Ext JS應用程式在index.html中只包含1個檔案——微載入，以下是它的程式碼：

    <script id="microloader" data-app="41afb480-65e8-43c8-9cda-6b7659d5a865" type="text/javascript" src="bootstrap.js"></script>

這個單一檔案bootstrap.js，就是引導載入檔案，或者被稱為微載入檔案。要注意的是，該檔案與用來實現html佈局的Bootstrap庫沒有任何關係。在未來的文章，會講述如何修改該檔案的名稱以避免混淆，如microloader.js。在本博文，將使用bootsimple.js作為名稱。

同樣需要注意的是，微載入做了許多事情，在未來的文章中將會講述，而現在，暫時只討論它的檔案載入功能。

微載入會從一個清單檔案（manifest file）中讀取所需的檔案，預設是讀取bootstrap.json檔案。Sencha Cmd會向bootstrap.js檔案新增諸如專案所需檔案、修改過的主題等等內容。

在更高的層面，微載入會實現以下應用程式所需的功能：

  • 定義全域性的Ext變數
  • 讀取清單檔案(bootstrap.json)
  • 等待氫彈檔案讀取完成
  • 為js和css檔案生成DOM元素
  • 新增css檔案的DOM元素到head標記
  • 新增第一個js檔案DOM元素到head標記（Ext框架檔案）
  • 等級框架檔案載入完成
  • 將剩餘的js檔案的DOM元素新增到head標記
  • 當所有檔案載入完成，觸發app.js的launch事件

現在，來看看簡化版的微載入，正如上面所提到的，將該檔案命名為了bootsimple.js，幷包含在了index.html檔案中。以上處理的每一步都會通過console.log來顯示，這樣就可以很簡單的看到微載入的過程了：https://github.com/mgusmano/ExtJSFromScratch/tree/master/Part02/02

微載入過程

在Ext JS，是使用Sencha Cmd工具來管理瀏覽器的載入檔案，這個是一個免費工具，且正如你所看到的，它還可以用來構建一個初始應用程式，而且在整個應用程式的開發過程中都會使用到它。如果不使用Sencha Cmd，那就會在專案構建或其他許多方法失去最佳實踐的體驗。

下面，使用Sencha Cmd來建立一個應用程式。為了構建初始應用程式，需要在終端視窗執行以下命令。在命令中，需要根據自身情況修改Ext JS框架的檔案位置。

sencha -sdk <framework folder> generate app -modern -r -starter=false FromScratch ./03

在檢視建立的應用程式資料夾內，會看到一些熟悉的檔案：bootstrap.js和bootstrap.json（或bootstrap.jsonp，用於某些跨域情況）。這個幾個檔案是由Sencha Cmd生成的，在未來的文章還將談論workspace.json、build.xml、bootstrap.css、app.json、ext資料夾和app資料夾。

在當前，只展示了微載入的一小部分功能，如從Sencha Cmd建立的清單檔案中動態載入檔案。在下一篇文章，將完成的展示如何在整個開發過程中使用Sencha Cmd。以下是使用微載入和Sencha Cmd來構建Ext JS應用程式的其他好處：

快取檔案
禁用或啟用快取
同步或非同步載入
Url的規範化（建立規範的url）
處理跨域問題
設定平臺標記
為Ext JS 6通用應用程式呼叫Ext.BeforeLoad
處理IE的各種問題

Sencha還可以用來建立自己的應用程式起始模版。在下一篇文章中將會談論這個——敬請關注！

作者：Marc Gusmano

Marc is a Sales Engineer with Sencha and has more than 30 years of experience in the software services industry. He has been extensively involved with custom HTML5 browser and mobile development projects, using his experience to build HTML5 Single Page Applications. Marc has worked for several large software services companies, including Andersen Consulting and Hitachi Consulting, and he was co-owner of a software services and training company for more than 10 years. Marc has a passion for building outstanding software, especially leading-edge, user-centric applications.

相關推薦

Ext JS從零開始之二

歡迎來到Ext從零開始部落格系列之二。在第一篇部落格中，已經從零開始建立了一個應用程式看起來像什麼且希望它做什麼的的可工作的應用程式，現在，從HTML和CSS角度來審視一下它是如何構建的。 要注意的是，在該應用程式中，index.html檔案使用了硬編

從零開始之驅動發開、linux驅動（三十二、簡單方式的lcd的背光碟機動）

前面lcd章節我們知道了LCD的背光可以由兩種方式決定調節： 1.一種是I/O口直接輸出高低電平來控制背光的量滅，這種方式簡單，但不能調背光亮度。 2.另一種是採用PWM調節脈衝寬度的方式來控制背光，這種方式需要採用PWM驅動來實現，優點是可以調節螢幕亮度，節省電量。  

從零開始之驅動發開、linux驅動（二十九、mmap原理）

一、概念 mmap是一種記憶體對映檔案的方法，即將一個檔案或者其它物件對映到程序的地址空間，實現檔案磁碟地址和程序虛擬地址空間中一段虛擬地址的一一對映關係。實現這樣的對映關係後，程序就可以採用指標的方式讀寫操作這一段記憶體，而系統會自動回寫髒頁面到對應的檔案磁碟上，即完成了對檔案的操作而不必

從零開始之驅動發開、linux驅動（二十八、framebuffer驅動框架）

框架 1.註冊一個framebuffer類。 2.註冊一個主裝置號，因為fb個數通常比較少，所以可以用老的介面統一註冊。 3.為2中的註冊實現通用的fops，注意這裡是通用的，特殊的架構在通用的裡面還是要呼叫專門fb註冊時實現的操作介面。（參考下面） 4.提供統一的註冊，解除安裝

從零開始之驅動發開、linux驅動（二十、linux裝置驅動中的併發控制）

本文參考自宋寶華老師的《linux驅動開發詳解》 併發（Concurrency） 指的是多個執行單元同時、 並行被執行， 而併發的執行單元對共享資源（硬體資源和軟體上的全域性變數、 靜態變數等） 的訪問則很容易導致競態（Race Conditions）   只要併發的

從零開始之驅動發開、linux驅動（二十九、linux中的程序）

一、程序 1、什麼是程序 程序的概念是作業系統中最基本、最重要的概念。它是多道程式系統出現後，為了刻畫系統內部出現的動態情況，描述系統內部各道程式的活動規律而引進的一個新概念，所有多道程式設計的作業系統都建立在程序的基礎上。作業系統專門引入程序的概念，從理論角度看，是對正

odoo12從零開始：二、個性化定製odoo12 之 建立資料庫頁面

劇情回顧 上一文章，我們已經成功運行了odoo12，並訪問localhost:8069看到如下介面：   我們還沒有建立資料庫，但是我們發現，資料庫管理頁面的logo是odoo，資料庫頁面全是英文的，對於我們國內使用者來說，這是不太友好的。我們想要自定義這個資料庫頁面，有沒有辦法？答案是肯

Hyperledger Fabric 1.0 從零開始（二）——公網環境構建

1.3 項目 htm move 自己 lvm2 fast 情況 tor 1：環境構建 在本文中用到的宿主機環境是Centos ,版本為Centos.x86_647.2，通過Docker 容器來運行Fabric的節點,版本為v1.0。因此，啟動Fabric網絡中的節點需要先安

docker從零開始（二）容器初體驗

osi build 技術分享 框架 log 註冊表 代碼 content doc 使用定義容器 Dockerfile Dockerfile定義容器內所需要的環境。對網絡接口和磁盤驅動器等資源的訪問在此環境中進行虛擬化，該環境與系統的其他部分隔離，因此您需要將端口映射到外部

微信公共號(企業號)開發框架-gochat的從零開始教程(二): 5分鐘快速搭建自己的公共號

    上一章裡我們把前期準備和環境配置已經完成啦，本章講一下怎麼通過5分鐘快速搭建自己的公共號～     首先，前往github頁面下載gochat框架的原始碼 ，原始碼中已經包含了一個最基礎的公共號開發模版。（這裡非常非常希望大家在下載的

從零開始之驅動發開、linux驅動（三十一、framebuffer中對mmap使用）

前面framebuffer章節我們瞭解了通過write函式來對fremebbuffer中的視訊記憶體寫資料的方式。   在開始分析mmap之前我們再次回顧一下fb_write函式 static ssize_t fb_write(struct file *file, con

從零開始之驅動發開、linux驅動（三十、mmap使用舉例）

上節學習了mmap的對映原理，我們知道mmap對映分為四步： 1.在程序的虛擬地址空間的，建立虛擬對映區域（vm_area_struct） 2.檔案實體地址和程序虛擬地址的一一對映關係（remap_pfn_range 將核心記憶體重新對映到使用者空間） 3.程序發起對這片對映空間的訪

從零開始之資料庫管理-MySQL篇

MySQL有安裝版，還有解壓版。安裝版本根據安裝提示完成安裝即可。注意的是要記住安裝時候填寫的root賬戶密碼。下面介紹解壓版的安裝。 Windows系統安裝，首先去官網下載安裝包準備。https://dev.mysql.com/downloads/mysql/ .msi字尾的為安裝版；根據

從零開始之uboot、移植uboot2017.01（一、移植前的準備）

手邊的是一個S5PV210的開發板，想嘗試移植一個比較新的uboot 下載最新版本uboot2018. 編譯器下載 交叉編譯工具鏈的安裝 1.在/usr/local/下面建立一個arm的資料夾，把交叉編譯工具解壓到下面去。 2.為了方便今後使用，

從零開始之驅動發開、linux驅動（三十六、linux中common clock framework[1]_consoumer）

部分內容來自下面幾位博主的文章，如有侵權，聯絡我刪除。 時鐘管理模組是linux系統為統一管理各硬體的時鐘而實現管理框架，負責所有模組的時鐘調節和電源管理。時鐘管理模組主要負責處理各硬體模組的工作頻率調節及電源切換管理。一個硬體模組要正常工作，必須先配置好硬體的

從零開始之驅動發開、linux驅動（四十一、Linux中舊的時鐘管理體系）

老的時鐘管理和新的時鐘管理並無本質的差別。 這裡先列出新的新的common clock framework和老的區別，後面再分析老的實現。 1.老的時鐘框架沒有區分各種時鐘型別，新的框架把時鐘分成了五個不同的時鐘型別，固定頻率的，分頻的，開關型別的，多選一型別。 2.老的時鐘框架需要

從零開始之驅動發開、linux驅動（四十、Linux common clock framework(5)_使用舉例）

前面三節分析的3.16.57核心中，三星的驅動中，恰好S5PV210的CPU沒有使用Linux common clock framework來處理clk。所以，本文采用4.9.92的核心來分析S5PV210對前面第三節中時鐘註冊部分的使用。對於老的時鐘框架，後面章節可能會用1到2部分說明一下。

從零開始之驅動發開、linux驅動（三十九、Linux common clock framework(4)_總結）

前面三節參考蝸窩大神的文章分析了Linux common clock framework的主要實現細節，本篇則是對前三篇從全域性的一個整合說明。   common clock framework主要維護著四條連結串列 static HLIST_HEAD(clk_root_l

從零開始之驅動發開、linux驅動（三十八、Linux common clock framework(3)_實現邏輯分析）

1. 前言 前面兩篇clock framework的分析文章，分別從clock consumer和clock provider的角度，介紹了Linux kernel怎麼管理系統的clock資源，以及device driver怎麼使用clock資源。本文將深入到clock framework的

從零開始之驅動發開、linux驅動（三十七、linux中common clock framework[2]_provider）

因為裝置樹這裡還沒學習，所以這一節屬於provider章節的完全由蝸窩大神的文章來看。我在暫時只分析一些我知道的，同時對裝置樹這部分的原理和知識也也會盡快學習，補充這篇文章。 http://www.wowotech.net/pm_subsystem/clock_provider.html