Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    Module structure in application

    Hi, all.
    Is there way to load js files in asynchronous manner? I want implement module structure in my application.
    I know that there is FileLoader.loadJSFiles method. But I don't know how use it properly.
    For example I have init.js
    Code:
    isc.FileLoader.loadJSFiles([ 'js/AAA.js' ], function() {
	console.info('create AAA')
	AAA.create();
});
    and two component classes: AAA and BBB. Coponent AAA depends on component BBB.
    AAA.js
    Code:
    isc.FileLoader.loadJSFiles([ 'js/BBB.js' ]);

console.info('define AAA');
isc.defineClass('AAA', 'HLayout').addProperties({
	initWidget : function() {

		console.info('create BBB');
		this.addMembers([ BBB.create() ])
	}
});
    BBB.js
    Code:
    console.info('define BBB');
isc.defineClass('BBB', 'HLayout').addProperties({

});
    Now, when I run this mini application I see following console output and error:
    Code:
    define AAA
create AAA
create BBB
ReferenceError: BBB is not defined
define BBB
    I know why the error occur and I understand how it works.
    But I don't know how avoid this error and implement asynchronous loading properly.
    Tags: None
    #2
    loadJSFiles() and other FileLoader APIs provide callback functions that tell you when your modules have been loaded.

    However, overall, asynchronously loading modules only makes sense for a tiny minority of very very large applications. See the SmartClient Architecture topic for a deep explanation.

    Comment

      #3
      Well, change AAA.js by moving the definition AAA class in the callback:
      Code:
      isc.FileLoader.loadJSFiles([ 'js/BBB.js' ], function() {

	console.info('define AAA');
	isc.defineClass('AAA', 'HLayout').addProperties({
		initWidget : function() {

			console.info('create BBB');
			this.addMembers([ BBB.create() ])
		}
	});

});
      I get the following output:
      Code:
      create AAA
ReferenceError: AAA is not defined
define BBB
define AAA
      I guess it's because the callback occurs when the file is loaded rather than executed.
      But even it would be executed, I think it doesn't help, because, in turn, BBB.js may not be executed at this time.

      So I don't know what to do.
      Is it possible at all to implement what I want?

      Comment

        #4
        The callback occurs after the code has been executed.

        We're not following what changes you've made to the code here, it doesn't seem to make sense that a Reference Error would occur with the modifications we think you indicated.

        Try putting the complete code, ready to run, into a new post. In the process of doing so we think you will probably discover issues in your code, as this FileLoader API is used for exactly the purpose you have in mind, all over the place (including several places on SmartClient.com).

        Comment

          #5
          All file listings are below:

          index.jsp
          Code:
          <!DOCTYPE html>
<html>
<head>
<script>
	var isomorphicDir = "/isomorphic/";
</script>
<script src="/isomorphic/system/modules/ISC_Core.js"></script>
<script src="/isomorphic/system/modules/ISC_Foundation.js"></script>
<script src="/isomorphic/system/modules/ISC_Containers.js"></script>
<script src="/isomorphic/system/development/ISC_FileLoader.js"></script>
</head>
<body>
	<script src="js/init.js"></script>
</body>
</html>
          init.js
          Code:
          console.info("execute init.js");
isc.FileLoader.loadJSFiles([ 'js/AAA.js' ], function() {
	console.info('create AAA')
	AAA.create();
});
          AAA.js
          Code:
          console.info("execute AAA.js");
isc.FileLoader.loadJSFiles([ 'js/BBB.js' ], function() {

	console.info('define AAA');
	isc.defineClass('AAA', 'HLayout').addProperties({
		initWidget : function() {

			console.info('create BBB');
			this.addMembers([ BBB.create() ])
		}
	});

});
          BBB.js
          Code:
          console.info("execute BBB.js");
console.info('define BBB');
isc.defineClass('BBB', 'HLayout').addProperties({

});
          Chrome console output
          Code:
          execute init.js                                                          init.js:1
XHR finished loading: GET "http://localhost:8080/undi/js/AAA.js".        ISC_FileLoader.js:83
execute AAA.js                                                           VM1543:1
create AAA                                                               init.js:3
Uncaught ReferenceError: AAA is not defined                              init.js:4
XHR finished loading: GET "http://localhost:8080/undi/js/BBB.js".        ISC_FileLoader.js:83
execute BBB.js                                                           VM1545:1
define BBB                                                               VM1545:2
define AAA                                                               VM1543:4

          Comment

            #6
            Are you still looking for help with this? Your logs show what is happening, and it's an error in your code.

            init.js loads AAA.js then tries to create an instance of the class AAA as soon as AAA.js loads. But AAA.js does not define the class AAA until it finishes loading BBB.js.

            Comment

            Previous template Next
            Working...
            X