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

js jquery jquery3.1.1 js忍之道

火爆浪子 2020-12-30 18:19:37 ‧ 4928 瀏覽

分享至

小弟有些疑問!
最近有個專案必須用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 }} |

直播中

3 個回答

讓我靜靜...

iT邦新手 5 級 ‧ 2020-12-30 18:32:57

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