如何让函数使用RequireJS AMD公开其对象和成员方法

Question

Can someone explain to me the process involved to have a function expose its objects and member methods to another defined object using RequireJS AMD? For example, I have the following defined in hello.js

define(['jquery','student'], function($,stu){
    var sayHello = function(){
        var post = $('#post').html();
        post.html('Hello, student!');
        post.html(post+stu.name.full());
    };
});

define('student',function(){
    var st = function(){};
    st.name = {
        first: 'Johnny',
        middle: 'Jay',
        last: 'Dabby',
        full: function(){
            return (st.name.first + ' '+ st.name.middle + ' '+st.name.last);
        }
    };
    st.course = {
        math: 'Algebra II',
        science: 'Chemistry',
        social_sci: 'World History',
        foreign_lang: 'French',
        getCourse: function(){
             return st.course.math;
        }
    };
    st.activity = {
        study: '1.5 hrs',
        homework: '0.55 hrs',
        break: '1.0 hr',
        extraCurricula: '0.50 hrs',
        getActivity: function(){
            return st.activity.homework;
        }
    };
    return st;
});

I'm trying to integrate this example or something similar to it into a large application, however, the debugger kept throwing "TypeError", saying stu.name.full is not a function. Can some explain what I need to do correct the coding style?

Answer 1

You have to decide, either make st a class and create an instance from it, or just make st a namespace Object and use it.

The easiest fix is to replace var st = function(){} with var st = {} .

define('student',function(){
    var st = {};
    st.name = {
        first: 'Johnny',
        middle: 'Jay',
        last: 'Dabby',
        full: function(){
            return (st.name.first + ' '+ st.name.middle + ' '+st.name.last);
        }
    };
    st.course = {
        math: 'Algebra II',
        science: 'Chemistry',
        social_sci: 'World History',
        foreign_lang: 'French',
        getCourse: function(){
             return st.course.math;
        }
    };
    st.activity = {
        study: '1.5 hrs',
        homework: '0.55 hrs',
        break: '1.0 hr',
        extraCurricula: '0.50 hrs',
        getActivity: function(){
            return st.activity.homework;
        }
    };
    return st;
});

Answer 2

1. In hello.js, you are not returning any thing from the module. The whole purpose of the module is to reuse the module in other part of the application. So, i would suggest to return the Object which defines the Module. Something like..

Hello.js

define(['jquery','student'], function($,stu){
        var sayHello = function(){
            var post = $('#post').html();
            post.html('Hello, student!');
            post.html(post+stu.name.full());
        };
      return { 
             publicHello : sayHello
         };
    });

2. In your Student Module, you are defining the properties on the student function and not on the student Object. So, you need to first define an empty object with statement like var st = {}; and then add properties which you want to expose from this module. At the end, you return the st Object literal which is what this module returns. Additionally, note that name is an internal property in the function and return the functions name.

Student.js

define('student',function(){
    var st = {};
    st.name = {
        first: 'Johnny',
        middle: 'Jay',
        last: 'Dabby',
        full: function(){
            return (st.name.first + ' '+ st.name.middle + ' '+st.name.last);
        }
    };
    st.course = {
        math: 'Algebra II',
        science: 'Chemistry',
        social_sci: 'World History',
        foreign_lang: 'French',
        getCourse: function(){
             return st.course.math;
        }
    };
    st.activity = {
        study: '1.5 hrs',
        homework: '0.55 hrs',
        break: '1.0 hr',
        extraCurricula: '0.50 hrs',
        getActivity: function(){
            return st.activity.homework;
        }
    };
    return st;
    });

Why are you getting the error "TypeError", saying stu.name.full is not a function ?

When you JS engine runs the code statement var st = function(){}; it creates a st function. Every functions gets certain predefined properties from function prototype like name , length , arguments .

When you try to create the name property like as shown below, it is trying to override the name property of the function with a new Object literal. However, the function name property is not writable, hence it can't be changed. So, basically, the below code is effectively not doing anything and still the st.name will have the value of st , even after executing the below statement.

Now, when you use the student module in the Hello.js, the exported module points to a function st and the st.name has a value st . Using the code like stu.name.full() is actually calling the function which doesn't exists and there is no property named full on the name . Hence you get the Type error .

st.name = {
        first: 'Johnny',
        middle: 'Jay',
        last: 'Dabby',
        full: function(){
            return (st.name.first + ' '+ st.name.middle + ' '+st.name.last);
        }
    };

It is suggested to use the strict mode using "use strict" to allow JS engine to throw an error when any invalid operation is specified.

 "use strict"; var st = function(){}; st.name = {};