実行していないjavascriptコード実行を停止するhtmlページの別のJavaスクリプトコード

Question

私はJavascriptとWeb開発を全く新しくしています。私は、Webページをプログラミングされたとき、私はデバッガで確認、2つのJavaScriptコード

私は、Webページを開いた

 <script src="./js/jquery.js"></script> 
    <script src="./js/ABuilder.js"></script> 
    <script src="./js/BBuilder.js"></script> 
    <script> 
    $(document).ready() 
    { 

    initA();//a function from A 

    } 
    </script> 

を作成し、機能initAは実行されませんでした。私が削除したとき。

<script src="./js/BBuilder.js"></script> 

予想通りinitAが実行されました。しかし、どのように、私はBbuilder

var day; 
var month; 
function initB() { 
var dataFile = "./js/b.json"; 
loadData(dataFile, loadB); 
} 

function loadData(jsonFile, callback) { 

$.getJSON(jsonFile, function(json) { 
    callback(json); 
}); 
} 
function loadB(data) { 
day = data.day; 
month = data.month; 
} 

Abuildコード

var age; 
var gender; 
function initA() { 
var dataFile = "./js/a.json"; 
loadData(dataFile); 
} 


function loadData(jsonFile) { 
$.getJSON(jsonFile, function (json) { 

    loadA(); 
    }); 
} 
function loadA(data) { 
    age = data.age; 
    gender = data.gender; 
}` 

Answer 1

がABuilderとBBuilderをラップし、変数の競合を防ぐためにBbuilderについての詳細コードを初期化していないのでAbuilderあなたに影響をBbuilderことができそれらを2つのクラスに入れることができます。このようにして、これら2つのjsファイル間の多型関係を定義することができます。

次のコードスニペットを確認してください。この例では、クラスABuilderとクラスBBuilderが定義されています。次に、BBuilderは、ABuilderから拡張するように定義されていますが、loadData()メソッドをオーバーライドします。

// ./js/jquery.js 
 

 
// ./js/ABuilder.js 
 
function ABuilder() { 
 
    this.age = null; 
 
    this.gender = null; 
 
} 
 
ABuilder.prototype = { 
 
    initA: function() { 
 
    var dataFile = "./js/a.json"; 
 
    this.loadData(dataFile); 
 
    }, 
 
    loadData: function(jsonFile) { 
 
    $.getJSON(jsonFile, function(json){ 
 
     this.loadA(); 
 
    }.bind(this)); 
 
    }, 
 
    loadA: function(data) { 
 
    this.age = data.age; 
 
    this.gender = data.gender; 
 
    } 
 
}; 
 

 
// ./js/BBuilder.js 
 
function BBuilder() { 
 
    this.day = null; 
 
    this.month = null; 
 
} 
 
let aBuilderObj = new ABuilder(); 
 
aBuilderObj.initB = function() { 
 
    var dataFile = "./js/b.json"; 
 
    this.loadData(dataFile, this.loadB); 
 
}; 
 
aBuilderObj.loadData = function(jsonFile, callback) { 
 
    $.getJSON(jsonFile, function(json) { 
 
    callback(json); 
 
    }); 
 
}; 
 
aBuilderObj.loadB = function(data) { 
 
    this.day = data.day; 
 
    this.month = data.month; 
 
}; 
 
BBuilder.prototype = aBuilderObj; 
 

 
// init script 
 
$(document).ready(function() { 
 
    let initedABuilder = new ABuilder(); 
 
    initedABuilder.initA(); 
 
});