如何创建一个新的User对象?

时间:2013-07-24 08:01:39

标签: javascript jquery oop object handlebars.js

我有这段代码:

//Start of User Constuctor
function User(firstName,lastName){
    this.first = firstName;
    this.last = lastName;
    this.quizScores = [];
    this.currentScore = 0;
}

User.prototype = {
    constructor:User,
    saveScore: function(theScoreToAdd){
        this.quizScores.push(theScoreToAdd)
    },
    showNameAndScores : function(){
        var scores = this.quizScores.length > 0 ? this.quizScores.join(",") : "No  Scores Yet";
        return this.first + " " + this.last + scores;
    }
}

//End of User constructor

//Start of Question Constuctor
function inheritPrototype(childObject, parentObject) {
    // As discussed above, we use the Crockford’s method to copy the properties and methods from the parentObject onto the childObject
    // So the copyOfParent object now has everything the parentObject has
    var copyOfParent = Object.create(parentObject.prototype);

    //Then we set the constructor of this new object to point to the childObject.
    //This step is necessary because the preceding step overwrote the childObject constructor when it overwrote the childObject prototype (during the Object.create() process)
    copyOfParent.constructor = childObject;

    // Then we set the childObject prototype to copyOfParent, so that the childObject can in turn inherit everything from copyOfParent (from parentObject)
    childObject.prototype = copyOfParent;
}

function Question ( question , choices , correctAnswer ){
    //those will be uniqe for every question made
    this.question = question;
    this.choices = choices;
    this.correctAnswer = correctAnswer;
    this.userAnswer = "";

    console.log("created");
}

Question.prototype.getCorrectAnswer = function(){
    return this.correctAnswer;
};

Question.prototype.getUserAnswer = function(){
    return this.userAnswer;
};

Question.prototype.displayQuestion = function(){
    this.question;
    choiceCounter = 0;

    this.choices.forEach(function(eachQuestion){
        choiceCounter;
        eachQuestion;
        choiceCounter ++;
    });

    console.log(this.question);
};

function QuestionCreate( question , choices , correctAnswer ){
    Question.call(this,question,choices,correctAnswer);
};

function UserCreate ( first,last){
    User.call(this,first,last)
}

inheritPrototype(QuestionCreate,Question);

var allQuestions = [
    new QuestionCreate("fist",["1","2","3","4"],1),
    new QuestionCreate("seconed",["1","2","3","4"],2),
    new QuestionCreate("third",["1","2","3","4"],3),
    new QuestionCreate("fourh",["1","2","3","4"],4)
];

allQuestions.forEach(function(eachQuestion){
    eachQuestion.displayQuestion();
});

// End of Question Constuctor

    var allUsers;

if(localStorage["fn"] && localStorage["ln"]){
    $("form").remove();
}

$("#login").bind("click",function(){
    var firstname = $("#fn").val();
    var lastname = $("#ln").val();

    var validfn = /[a-zA-Z]/.test(firstname);// check to match the if the input is a-z char
    var validln = /[a-zA-Z]/.test(lastname);// check to match the if the input is a-z char


    if (validfn && validln) {
        var first = firstname;
        var last = lastname;
        alert(first + " " + last);

        localStorage["fn"] = first;
        localStorage["ln"] = last;

        allUsers = [
            new UserCreate(first, last)
        ]
    }
});

如你所见,我有一个用户构造器。

HTML code:

<!DOCTYPE html>
<html lang="en">  <!--manifest="site.manifest" -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <title>Quiz Version 3</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>
<body>

<!-- contaning all display -->
<div class="container">

    <!-- contaning header -- navgiation -->
    <header class="row">
        <div class="span12">
            <nav class="navbar">
                <div class="navbar-inner">
                    <a href="#" class="brand">Boaz Hoch</a>

                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>

                    <div class="nav-collapse collapse">
                  <ul class="nav">
                      <li><a href="index.html">Home</a></li>
                      <li><a href="about.html">About</a></li>
                      <li><a href="proggres.html">My Proggres</a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Follow Me
                          <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                              <li><a href="https://www.facebook.com/boazmier">FaceBook</a></li>
                              <li><a href="https://plus.google.com/113694258444420573992/posts">Google +</a></li>
                              <li><a href="http://www.linkedin.com/profile/view?id=255626257&trk=nav_responsive_tab_profile">Linked-In</a></li>
                          </ul>
                      </li>
                      <li><a href="#" class="text-right"></a></li>
                  </ul>
                    </div>
                </div>
            </nav>
        </div>

    </header>

    <!-- End of Header -->

    <!-- contaning main part -->
    <section class="row" id="main-container">
        <div class="well span6 offset3">
            <form>
                <fieldset>
                    <legend>Login</legend>
                    <input id="fn" type="text" class="input-block-level" placeholder="First Name">
                    <input id="ln" type="text" class="input-block-level" placeholder="Last Name">
                    <input id="login" type="submit" class="btn btn-primary" value="login">
                </fieldset>
            </form>
            <!-- crappy script tag at the middle of the html file   -->
            <script id="try" type="text/x-handlebars-template">

                <div> My Name is {{this}}</div>

            </script>

        </div>
    </section>

    <!-- contaning all display -->
    <footer class="row">
        <!-- svg
        sqaure
        <svg width="200" height="200">
            <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" x="0" y="0" width="10" height="10" fill="none" stroke-width="3"  stroke="red"/>
            <ellipse cx="10" cy="10" rx="10" ry="5"/>
            <line  x1="0" y1="0" x2="5" y2="5" />
        </svg>
        -->

    </footer>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/handlebars.js"></script>
<script type="text/javascript" src="js/webapp.js"></script>
<script type="text/javascript" src="js/template.js"></script>
</body>
</html>

你可以看到我有一张表格, 现在我试图创建一个新用户(使用consturctur),使用他的名字和姓氏的参数, 但我似乎无法按照我的意愿创建它,我只想每次用户提交表单来创建新的用户对象。

检查我的jsfiddle: http://jsfiddle.net/qMuwe/

0 个答案:

没有答案