解決SUI Mobile中$.init()報錯的問題
阿新 • • 發佈：2018-12-25
本人是第一次使用SUI Mobile框架，在根據文件學習使用時，發現總是報錯：$.init is not a function。以為是需要引入JQuery的原因，但是引用JQuery之後發現還是報錯，按照JQuery語法修改後仍然不對，後來根據SUI Mobile官網上的例項查看了原始碼，認真對比之後發現，報錯是由程式碼中對js的引用位置不對而引起的。
修改錯誤之前的程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登入</title **注意：**在這段程式碼中，我在<head>元素中引用了jquery-3.2.1.min…js檔案，在<body>中引用了zepto.js和sm.js。其實jquery和zepto都是JavaScript庫，只不過zepto更加輕量。
此時，瀏覽器報的錯誤為：
後來在程式碼中加入了SUI Mobile擴充套件包的js引用（插入到引用zepto.js的語句之前）:
<script type='text/javascript'
src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js'
charset='utf-8'></script>
然後報出的錯誤多了一個：
此時，我意識到我對js檔案的引用順序出了錯，然後我又開啟SUI Mobile官網中的示例，認真比對其原始碼之後，將我對js的引用順序修改為如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登入</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- 引用SUI Mobile框架的css檔案 -->
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.css">
<link rel="stylesheet"
href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
<!-- 自己定義的css檔案 -->
<link rel="stylesheet" href="css/login.css">
<!-- zepto.js的引用 -->
<script src='//g.alicdn.com/sj/lib/zepto/zepto.js'></script>
</head>
<body>
<div class="page-group">
<div class="page">
...（省略頁面佈局程式碼）
</div>
</div>
<!-- 引用SUI Mobile框架的js檔案 -->
<script src='//g.alicdn.com/msui/sm/0.6.2/js/sm.js'></script>
<script
src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js'></script>
<!-- 自己定義的js檔案 -->
<script src="js/gtms.js"></script>
</body>
</html>
此時，再次開啟瀏覽器，專案可以正常執行且沒有報錯。
在這段程式碼中要注意的點為：
- 對JavaScript庫的引用要放在
<head>元素中； - 對SUI Mobile框架的js檔案的引用要放在
<body>元素中； - 對自己定義的js/css檔案的引用一定要放在對框架的引用之後，否則會出錯。
以上即是本次使用SUI Mobile框架的一點筆記，希望能幫到大家。