Day 5 第乙個最小化系統

2021-10-19 23:27:21 字數 1225 閱讀 7252

返回目錄

[git:    version=a831922b7d8fff67d11db87da55911f988f63011]

第乙個最小化系統看起來比較簡陋,啟動系統後(啟動方法參考:[day 2 win10系統配置開發環境](瀏覽器只顯示下面這個簡單的**。

裁剪過程,耗費了我兩周時間,通過裁剪,對luckysheet的系統架構也有了比較清晰的認識,具體裁剪方法,未來可能專題講一講,還是有不少小技巧值得分享。目前最小化系統的js**量1500行左右(樣式css檔案和外掛程式plugins目錄沒有進行裁剪)

最小系統的核心邏輯包括提取合併**資料、構建dom元素、繪製頁面等三個部分

0.基礎知識:

js的 import / export

h5 canvas 繪製線段:.beginpath() / .moveto() / lineto() / stroke() / closepath() 

1.提取合併**元素

1)./index.html:通過向luckysheet.create()傳遞 json格式的引數方式,優先順序最高,覆蓋以下的配置檔案;

2)./config.js: 預設的**配置引數,當luckysheet.create()沒有相應配置項,則從這個檔案提取配置資料;

3)store/index.js:這個檔案除了初始化引數外,還包含了執行時的全域性變數,未來大量的介面繪製和互動會用到這個檔案;

core.js通過 util.common_extend()把 1)和2)的配置資料合併,這個公共函式可以學習使用

2.構建dom元素

1)./controllers/constant.js: 這個檔案包含了html dom的定義;

2)./global/createdom.js: 提取和組裝dom元素並設定高和寬;

3.介面繪製

draw.js使用h5的canvas繪製介面,呼叫順序如下:sheetmanage.js->resize.js->refresh.js->draw.js

draw.js是這個最小化系統最複雜的乙個檔案,**量500+,包含了三個部分:繪製列標題、繪製行標題、繪製**區,

其中繪製**區,包含了空白**和包含內容**的繪製方法。

Pyqt5 第乙個程式

先看效果,接著貼 最後講解 平台 windows 工具 pycharm 2017.1.5 所有 都親自執行過可行。coding utf 8 提供必要的庫 import sys if name main 建立窗體物件 w qwidget 設定面積 w.resize 300,100 設定位置 w.mov...

第乙個PyQt5視窗

右鍵 external tools qtdesigner 選擇main window建立乙個窗體,從右邊拖動元件到窗體上,儲存路徑到自己的工程目錄下。右鍵.ui檔案 external tools pyuic,自動生成。py檔案 執行這個.py檔案是不會顯示出視窗的 第一步 注釋掉三行 第二步 在這個...

day01 第乙個python程式

安裝外掛程式 pip install 外掛程式名稱 conda install 外掛程式名稱 anaconda可用這個 python資料型別 數字 num int 有符號整數 float 浮點型 complex 複數 布林值 true false 字串 str 字典 dict 元祖 tuple 列表...