Tôi gặp tình huống thực tế trong lúc code javascript như bên dưới. Ghi lại ở đây để có dịp nhình lại hoặc giúp chút gì đó nếu ai gặp phải giống tôi(Dưới đây là tôi lượt bỏ để code ví dụ trở nên đơn giản dễ hiểu hơn).
Mô tả C1(Component 1), C2(Component 2)
Tôi có hai component C1, C2. Trong C1 sẽ có một thể hiện C2.
Code như bên dưới.
c1.js
(function ($) {
function c1(options) {
var _options = {//Default setting component
module: ""
}
this.options = jQuery.extend(_options, options);//Merge setting from instance and default seting
this.specialPage = false;//properties of class
};
c1.prototype.init = function () {//init function, this is registered some cases variable
CONST: {
MAX_INT: 2147483647
}
_event = $({});//trigger event object
this.c2 = new c2(this.options);
this.c2.init();//call the init method of component second
this.$icon = jQuery(".htmlclass");//this is object registered jQuery object
console.log(this.options, "done", this.$icon);//test logic console log to browser
};
})(jQuery)
c2.js
(function ($) {
function c2(options) {
var _options = {
module: ""
};
this.options = jQuery.extend(_options, options);
specialPage: false;
};
c2.prototype = {
_event: $({}),
CONST: {
MAX_INT: 2147483647
},
init: function () {
console.log('c2 done');
}
}
})(jQuery)
---
Ở html page tôi sẽ triệu gọi như sau
<script>
var options = {"module": "ABC" };
var c1Instance = new c1(options);
c1Instance .init();
console.log(c1Instance .options.module, c1Instance .c2.specialPage)
});
</script>
---> khi chạy sẽ xuất hiện lỗi như sau:
Uncaught ReferenceError: c1 is not defined
Sau khi khắc phục
c1.js
function c1(options) {
var _options = {
module: ""
}
this.options = jQuery.extend(_options, options);
this.specialPage = false;
};
c1.prototype.init = function () {
CONST: {
MAX_INT: 2147483647
}
_event = $({});
this.c2 = new c2(this.options);
this.c2.init();
this.$icon = jQuery(".htmlclass");
console.log(this.options, "done", this.$icon);
}
c2.js
function c2(options) {
var _options = {
module: ""
};
this.options = jQuery.extend(_options, options);
specialPage: false;
};
c2.prototype = {
_event: $({}),
CONST: {
MAX_INT: 2147483647
},
init: function () {
console.log('c2 done');
}
}
---
Ở html page tôi sẽ triệu gọi như sau
<script>
var options = {"module": "ABC" };
var c1Instance = new c1(options);
c1Instance .init();
console.log(c1Instance .options.module, c1Instance .c2.specialPage)
});
</script>
Nguyên nhân - cách khắc phục:
Closure javascript, có nghĩa là ta định nghĩa c1 với clouse nên ra khỏi nó c1 trở nên undefined
Tips: Google search closure javascript
- 01:34
- 0 Comments
