造輪子,模態視窗開發小結

2021-08-24 20:18:36 字數 1558 閱讀 7687

用了差不多一周多的業餘時間,終於造完了輪子,開發了乙個簡單的模態視窗。實現的功能有tips提示框,警告框,確認框,還有彈出視窗操作。將此元件命名為easyutil_poped,以下用poped簡稱。

先說句題外話,easyutil是我自己開發的一系列元件外掛程式css樣式包的字首名,意思是簡化開發流程,也希望這能成為自己的乙個小品牌。這個系列現在已經有一套全域性css,內含各種常見布局樣式,一套jquery外掛程式,20多個外掛程式,一套vue元件包含下拉框,**等元件生成,一組js常用工具模組。現在再田新增一套模態視窗。bulabula,有點亂,回頭得整理整理。

回到正題,這次開發模態視窗,實屬一言不合,就開發乙個。因為用過layerui,但是時常出現和頁面樣式衝突的事情,比如彈出到乙個根本看不見的地方。。。所以決定自己開發乙個看看。然而,道路是艱辛的,總結一下心得吧。

1.  一定要使用嚴格模式,加乙個"use strict"就行,這樣可以有助於規範**,防止未宣告變數以及其他一些不規範操作,這在開發元件是非常重要的,我們要保證元件**是健壯的,完整的。

2.  所有的常量全部提前宣告,poped彈出最多的常量使用就是css樣式了,按鈕的,各個層的,標題的.....如果你不用常量宣告,那天想修改乙個類名,好吧,你就慢慢去**堆裡找吧,雖然說可以ctrl+f替換了,但是,大量的字串嵌在**裡,你難保不會出亂子,所以把這些字串變成常量,放在最上面,以後的**只需引用常量名,如果要修改常量值,輕鬆搞定。

3. **邏輯的分離,分離,分離,說三遍。資料處理,dom生成,事件監聽,事件處理邏輯,業務邏輯,總之,能分離就分離,這樣你會發現,**多了好多塊,但是,好清晰啊,哪不對,只需要改哪塊**就行,無需擔心影響其他地方,盡可能讓每個function只完成一件事情,其他的呼叫就行,同時,分離完的邏輯,還可以復用,不用將重複的**貼上複製一遍又一遍,簡潔明瞭,程式設計師都是「懶惰的」,能復用,一定要復用。

4. 做好型別判斷,因為你開發的是元件,不是自己用的小方法,不能保證所有人都按你想的那樣操作,所以要判斷引數型別是否則正確,同時丟擲異常告訴使用者,**用錯了,這裡也要做好異常處理,不要因為乙個引數型別錯誤,讓js全死掉,這不是乙個外掛程式應該有的。

5. 元件彈出時要做判斷,不要重複彈出同乙個視窗,對於多餘的,要通過邏輯判斷,關掉。

6. 如果想要視窗彈出固定在螢幕上,可以用position:fixed定位遮罩層,內容層用絕對定位,但是不要用css設定top,left來達到居中的目的,否則新增移動功能時,你就會發現滑鼠拖不動,而且視窗隨意跑。要通過js計算當前遮罩層的寬高和內容層的寬高,然後相減,除2,在賦值給內容層的top,left這樣就能保證各種螢幕下,視窗都居中,且不影響拖動效果。

7. 謹慎使用0值,特別是需要判斷的時候,因為0值js會等同於false, 判斷時一定要寫清除 if(xx==0/!=0), 否則如果簡寫if(xx) ,你會發現,正確賦了0值的內容,永遠也出不來。再或者實在想簡寫,那就不要讓賦值操作有0這個值。

8. 通過arguments長度判斷,可以間接實現過載函式功能,同時配上型別檢查,可以實現少量引數不完全賦值功能,比如有乙個函式三個引數,內容,時間,偏移量,可以選擇(內容,時間)賦值,也可以選擇(內容,偏移量)賦值,也可以三個都選。

以上就是個開發小總結,回頭再整理一下使用文件,發布一下。

造輪子之我見

味,因為自己就是那一小撮喜歡造輪子的人!自己錯了,錯在哪呢?浪費時間?那麼很快的把事做完了,再做點啥呢!自己是個人英雄主義麼。想出頭麼,想要更多的公升職,加薪 麼,想要譁眾取寵麼!困惑,苦悶,壓力,壓抑,接踵而來。今天看了篇文章 似乎不光自己由此困惑,很多人或者說很多想要做輪子或者 正在造輪子的人 ...

談談自己造輪子

寫下這篇文章,主要是對我近段時間工作的反思。對於一些程式設計師來說,喜歡自己造輪子可算是乙個很平常的事情,我想可能有如下原因 我不覺得造輪子不好,曾今很長一段時間我都認為造輪子是體現自己能力很好的一種方式,但是現在越來越覺得,不要過分的去造輪子。昨天,我需要對接amazon s3的儲存,官方沒有go...

C語言造輪子

double 數轉 uint64 t 四捨五入法 vs 中線程安全函式 sprintf sprintf s strtok strtok s gcc 中線程安全函式 strtok strtok r uint64 t doubletoull double a char p null,pp null ui...