規範JS版面

時間 2019-12-23

原文原文鏈接

javascript代碼和其餘腳本語言同樣，都要合理的組織好，否則到最後js代碼也是比較亂的。
我把JS的組織分紅了三個階段，看看您如今屬於哪一個階段。
初級階段，JS代碼從頭順序寫到尾,過程化
<html>
<body>
<input type="text" name="username" id="username" value="" />
<input type="password" name="password" id="password" value="" />
</body>
</html>
<script type="text/javascript">
if(document.getElementById("username").value == ""){
alert("用戶名不能爲空");
}
if(document.getElementById("password").value == ""){
alert("密碼不能爲空");
}
</script>
缺點：像這樣的代碼都是寫一個頁面裏面的，代碼基本不能共用，最後的結果js代碼冗餘比較多。
優勢：單個頁面修改比較快，不用考慮影響其餘頁面。不用加載JS文件。 javascript

中級階段，經過JS的function來，組織js代碼
在開發的過程當中，不斷的發現，順序寫JS代碼，有太多的麻煩，到最後可能就沒法維護，要麼維護的時間的太長。在從新開發的時，有意識的對代碼進行分塊，注意代碼的共用性，這個時候function寫的比較多。
<script type="text/javascript">
function check_username() {
if(document.getElementById("username").value == ""){
alert("用戶名不能爲空");
}
}
function check_password() {
if(document.getElementById("password").value == ""){
alert("密碼不能爲空");
}
}
</script>
優勢：對JS代碼，進行分塊，共用性較好，修改一處全部調用均可以修改掉，而且代碼可讀性增強。
缺點：須要加載JS文件，若是function過多，致使找一個function要花不少時間。 html

高級階段: 經過方法類，域等對function進行分割
當一個JS文件裏面有100多個方法的時候，這個時候看代碼其實挺難過的，若是能把裏面的function進行分分類是否是就清楚不少，比如，這幾個方法是註冊時check用的，這個幾是對字符串的驗證用的等等。
<script type="text/javascript">
function register(){
this.check_username = function(){
if(document.getElementById("username").value == ""){
alert("用戶名不能爲空");
}
}
this.check_password = function(){
if(document.getElementById("password").value == ""){
alert("用戶名不能爲空");
}
}
}
new register().check_username(); //調用方法
</script>
上面的這種用的是方法類，大方法是register，裏面定義的二個小方法，一個是對用戶名的check,一個是對密碼的check.
<script type="text/javascript">
var register = {
check_username:function(){
if(document.getElementById("username").value == ""){
alert("用戶名不能爲空");
}
},
check_password:function(){
if(document.getElementById("password").value == ""){
alert("用戶名不能爲空");
}
}
}
register.check_username(); //調用方法
</script>java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。