想請教一個JS 的實作概念,不知道有沒有人有過類似的念頭或經驗?

1 year ago 26 Replies
DW
Derek Wang
8 years ago

想請教一個JS 的實作概念,不知道有沒有人有過類似的念頭或經驗?
我把這個想法先稱之為[bypasser.js],
用途:

內先載入必要的JS 如jQuery等lab 性質的JS,然後在前載入這個[bypasser.js]。實作的任務是檢查網頁上有沒有特定的class 屬性或id 屬性元素存在,接著動態的透過appendChild() 函數載入這些特定的JS 開發物件的核心檔並啟動。
.
打個比方:
一個網站上或多或少都有些JS 的開發物件,例如萬年曆、投票、照片秀、登入等功能,
如果遇到資深的工程師,會針對網頁作最佳化,有上述功能的網頁才會載入對應的JS 核心檔,反之則是每個網頁上都會載入。此時不管是避免不必要的喚起還是多載入檔案佔掉的連線時間都是個問題。
所以我透過[bypasser.js]這個JS 去針對我所開發的JS 檔案的對應載入,這個想法在實際作業上有意義嗎?
.
目前想到的:
1.當然;目前已知這個作法對於"第一時間的啟動"會有無法補救的缺點就是了。
2.另外我的確不曉得如果動態的用appendChild() 持續的加入超過一個以上的
3 Likes

Replies

檀熤斮 8 years ago

這個想法滿好的耶~利用元素決定要加載那些JS~阿不過JS彼此之間的相依有打算如何解決嗎?例如 c.js 依賴 a.js 與 b.js

1 Like
Derek Wang (8 years ago)

我目前的習慣是被動性被呼叫的JS 先丟

,所以如果幾個JS 間有共用或依循性的就去找在內的拿 也由於大部分的案子多少都是些一次性開發,因此幾個JS間互通有無也還好解決

Simon Pai 8 years ago

模組化非同步載入這件事可以參考 AMD/RequireJS,和你的考量很接近。 從前 AMD 和 CJS 還在競爭的時候,兩者最大的分歧就是 AMD 可以做非同步載入,而 CJS 是整個打成一包,但非同步載入的問題是:

  1. 如你所說,和 server side rendering 搭配問題
  2. 需要更多 round trip
  3. 更複雜的進入點,開發起來沒有比較開心
  4. 失去在 build time 玩一些花樣的機會

總之因為諸多因素,後來是 CJS 的生態系起飛了,如果你想研究這一塊的來龍去脈可以找一下 AMD vs CJS 的歷史

8 Likes
Derek Wang (8 years ago)

我是很希望這個架構只要下放或說應付一些"尋常"的案子就好了

Yi-Ling Huang (8 years ago)

Simon說的RequireJS已經可以做到這點,建議版大可以花點時間研究…

Chang Chen-Heng 8 years ago

http://engineering.khanacademy.org/posts/js-packaging-http2.htm

0 Likes
Simon Pai 8 years ago

又,建議把模組非同步載入和元件化拆成兩件事來設計,泛用性應該會高很多。

0 Likes
Jin Huang 8 years ago

扯到後端的話考量的問題就很多了..例如.net在很多時候事件都跟它自己的web control綁定, 你弄得這些到時候可能會在後端工程師的手上整個被拔掉~~~

0 Likes
Derek Wang (8 years ago)

偉哥,我考慮的都是純server side insted 資料進元素就結束的部分,會跟後端綁的我一開始就不會往這方面考量

Derek Wang 8 years ago

多謝樓上各位指教...

0 Likes
Ott Ben 8 years ago

我之前做過, 目的單純是想讓不熟前端的用前端元件時方便一點, 不然單純壓一包固定的用 CDN 應該比較優

對那兩個問題 1 當然是會慢一些, 不預設隱藏載完才秀的話會不太好看 2 是純 client 端的話我想有兩個做法, 其一是先載相依的並檢查載入完再繼續載之後的 (我之是這樣做), 但現在想想可以把檢查寫在各 js 中, 每個 js 載完標記一個 flag (ex window.loaded['aaa'] = true; // for aaa.js 然後 bbb.js (相依於 aaa.js) 跑個 interval 檢查該 flag 成立時才執行, 這樣可能比較快也比較單純 (但是就綁比較死)

0 Likes
Derek Wang (8 years ago)

我是單純的想在[bypasser.js]內寫很多 if($('.calc').length > 0) appendChild('');

王宥傑 8 years ago

同時的話...建議不要

0 Likes
Derek Wang (8 years ago)

請問原因是?

王宥傑 (8 years ago)

會影響loading的速度...尤其是如果架設在比較差的機房中

Derek Wang (8 years ago)

是說會拉長整個http port 80 的連線占用時間囉?!

王宥傑 (8 years ago)

不只,你的參訪者也會...

Derek Wang (8 years ago)

了解,謝謝

Derek Wang 8 years ago

再度多謝樓上各位指教...

0 Likes
Asa Tsai 8 years ago

我自己弄一個簡易的 lazyLoading 需要某些功能才叫 但是有一些基礎要用的一定先 load

0 Likes
Derek Wang (8 years ago)

我的想法跟您提的有些相同,我是想一些lib 性質的就先丟

內了,需要bypass 的才另外處理

Asa Tsai (8 years ago)

不過的確.... 開頁面的速度會受一點點影響就是了 太大的我還是建議先 load 吧~~~~ 這個就是您個人的取捨了

Derek Wang (8 years ago)

謝謝