iT邦幫忙

0

jquery的擺放位置以及 function 引入順序??

小弟有些疑問!
最近有個專案必須用jquery寫
我查了一下jquery sdk有些是head,有些是body
這跟dom也有關係 所以如果放head要加上 $(function(){}) 才不會炸
我現在遇到幾個問題
因為我有好幾十個html檔 我把jquery sdk 放body尾
如果每個都要重新引入<script..就太麻煩
於是我寫了個import.js讓我方便把需要的js都丟到body尾

function jsImport(u) {
    let script = document.createElement('script')
    script.setAttribute('src', `${u}?v=123`)
    document.getElementsByTagName('body')[0].appendChild(script)
}

這樣每頁html head表頭只要引入<script... src="import.js">就行了
然後在jquery sdk開始後我就使用一個集中檔案 假設叫做init.js

<head>
    <script src="import.js">
</head>
</body>
    <div id="app"></div>
    <script src="jquery.sdk.js">
    <script src="init.js">
</body>

然後在init.js中放入

jsImport('加入我需要的所有js')

這樣我只要改一次就可以全頁吃到

我都是透過 $('').append或html去把資料丟到 #app
所以每一頁都只會有一個 #app
此時就遇到一個順序的問題:

a.js

const lang = {
    hi: '你好'
}

b.js

$('#app').html(`${lang.hi}`)

在init.js是長這樣

jsImport('a.js')
...過程中大概有10個左右的js引入 都是不相干的東西
jsImport('b.js')

明明上面已經有引入了該js
但是卻「隨機性」的炸 "lang is not defind" 給我看 是時好時壞

我都會在引入js的後面加上v=xxx來清除cache
但是在 head 的那些 js 引入完全沒辦法使用(import.js本身)這個作法
jquery有什麼最佳的擺放方式可供參考?(vue真的好用太多 天差地遠)
我的想法是head就直接引入jquery sdk 然後再做事 只是等於都要加上$(function(){})
但如果可以解決我是沒差
引入順序問題實在是搞死我了。。。。
怎樣可以解決這種劣根性問題
感謝指教!!!!我會補充

淺水員 iT邦大師 6 級 ‧ 2020-12-30 19:33:44 檢舉
不考慮用webpack之類的工具打包js嗎?
淺水員 iT邦大師 6 級 ‧ 2020-12-30 19:47:02 檢舉
要自己弄的話這可以參考看看
https://stackoverflow.com/questions/3248384/document-createelementscript-synchronously

https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement
火爆浪子 iT邦研究生 1 級 ‧ 2021-01-06 16:06:23 檢舉
淺水員:webpack 不用依賴框架也可以運行嗎???
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
讓我靜靜...
iT邦新手 5 級 ‧ 2020-12-30 18:32:57

記得沒錯的話,jquery要加上$(function(){})主要是因為執行的程式有叫到html的物件
這段程式相當於js上的window.load功能,目的是為了等html上的東西都渲染上網頁才使用
如果是要網頁一開始不做任何動作(click之類的)就執行程式,那就一定要加上$(function(){})

1

jquery,你可以將其當成一種框架,直接掛到head上就好了。載入一次就行了。
就算之後沒在用到jquery也沒關係。反正它只是一個框架。單純載入不會有特別的動作。
只是讓你能用jquery使用的語法。

而一般js需要在dom生成後才會有動作。
但jquery的以下用法

$(function(){
......程式碼
});

可以有window.load的效果。也就是會等頁面中的dom都生成完了才會開始執行。
這樣就不會發生dom未載入而請求不到的問題。

最後,其實用implort js的方式並不是一件很好的做法。
很容易發生變數渲染錯誤的問題。

即然都用jquery了。就多多善用jquery的特性。並不一定需要用implort的方式。

不過...一般如果使用vue的話。我倒是會比較建議捨棄一下jquery的用法。
盡量用vue本身的原生用法。

如果有需要用到html的布置。我會建議你用個function。然後再透過你的import的方式去呼叫。
這樣就不用擔心變數傳送不到的問題存在。

1
I code so I am
iT邦高手 1 級 ‧ 2020-12-31 10:33:46

有幾個問題要考量:

  1. 網頁處理是非同步的,js啟動程式碼一定要如下或在 windod_load(){}:
$(function(){
......程式碼
});
  1. 要注意網頁與js檔案的相對位置,否則jsImport可能出問題,執行時可打開 console debug.
  2. 動態載入 js 檔,效能可能比較差,因為 網頁的載入 Cache 可能失效。

加減參考。

我要發表回答

立即登入回答