With the simplest login as an example, a simple example of JS object-oriented is interpreted.

JavaScript, is a front-end developers must be a technology, from JS evolved a lot of frameworks, first talk about a few popular frameworks:

JQuery: This technology must be, if not, it is necessary to check the API, know how to write, to read English documents, this framework is very popular, whether it is just into the pit developers or old fritters, in fact, it is necessary to

BackBone: This technique is good, used many times in the project, very convenient, is a practical framework of MVC, used to render the view is very simple

AngularJS: It's an MVVM framework, and jquery is completely different, jquery is based on DOM elements, and angerlar is not, and a lot of the newbies coming from jquery at first angular would be very unaccustomed.

Reactjs:react is a Facebook internal project, wrote a set to apply to their own company's business, in fact, many companies will do so, because the market framework generally do not use their own, in fact, the general large companies, and then their own this set of react very useful, open source , react very useful, performance is also good, code logic is relatively simple, so a lot of people began to use, and some people say this is the future of the web trend

JQuery Easyui: This is a good framework, very light, for the development of back-end management system is no better, provide a variety of components

ExtJS: This is not much to say, just out of time is very cow, but then seemingly charged, this I do not know, I have not used, now with this framework seems to have, may not be many, at least I contact the project are not used this, to use also mostly based on jquery Easyui

...... There are a lot of various frameworks, now front-end fire, and even a lot of front-end game engine JS, very powerful, here is not much to say

Well, seemingly a bit of nonsense, then into the subject bar, write JS, in fact, also to object-oriented, in 08, I just entered the pit work, JS is not respected by everyone, and even CSS are let the artists do, and now has a big difference, to see a simple login is how to do with the object-oriented way:

First look at the login page code, very simple, is a user name and password

<formID= "LoginForm" >        <inputtype= "hidden"ID= "Hdncontextpath"name= "Hdncontextpath"value= "<%=request.getcontextpath ()%>"/>        <P>            <inputclass= "IPT"type= "text"name= "username"placeholder= "Please enter user name or mailbox"value="" />        </P>        <P>            <inputclass= "IPT"ID= "Password"type= "Password"name= "Password"placeholder= "Please enter password"value="" />        </P>        <Buttontype= "Submit">Login</Button>    </form>

Play in the JS section, I wrote a separate copy of the Login.js

varLogin =function () {    //Login Form    varFormloginvalidation =function() {            varLoginForm = $ (' #loginForm '); //Form Validationloginform.validate ({rules: {username: {require D:true}, Password: {required:true}}, messages: {username: { Required:"Login user name cannot be empty"}, Password: {required:"Login password cannot be empty"}}, Submithandler:function(form) {varHdncontextpath = $ ("#hdnContextPath"). Val (); Loginform.ajaxsubmit ({dataType:"JSON", type:"Post",//How to submit Get/postUrl:hdncontextpath + '/login.action ',//URLs that need to be submittedData:loginForm.serialize (), Success:function(data) {//logon Success or failure message                            if(Data.status = = && Data.msg = = "OK") {window.location.href= Hdncontextpath + "/index.action"; } Else{alert (data.msg); }                        }                    });//return false;                }                            }); }        return {        //Initialize individual functions and objectsInit:function() {formloginvalidation (); }    };} (); JQuery (document). Ready (function() {login.init ();});

This is a login object, object login,formloginvalidation is the attribute in this object, and this property is a function, the main two functions, verify the form and the jump after the successful login Finally, the Login object returns an init function that initializes all the methods in the object.

Then this object has been created, but it is useless, because there is no initialization, the initialization must be after the DOM fully loaded

Then Login.init () is all right.

So as long as you add this code, call the Init () method of the Login object to initialize all the object functions, and of course, there are different properties to write in Init, such as this:

return {        //  Initialize each function and object function          () {            formdatadictvalidation ();            Initdatadicttypes ();            Initdatadicttable ();                    }    };

Finally, take a look at the action bar, this is used Shiro to achieve, here is not much to say, will be taken out alone later said, it is possible to directly on the video

@RequestMapping (value = "/login", method =requestmethod.post) @ResponseBody Publicleejsonresult Loginpost (string Username, string password) {if(Stringutils.isblank (username)) {returnLeejsonresult.errormsg ("User name cannot be empty"); }        if(Stringutils.isblank (password)) {returnLeejsonresult.errormsg ("Password cannot be empty"); } Subject User=Securityutils.getsubject (); Usernamepasswordtoken token=NewUsernamepasswordtoken (username, Digestutils.md5digestashex (password.getbytes ()). ToCharArray ()); //The default is to remember the password, you can add a parameter to the form to control//Token.setrememberme (true);        Try{user.login (token); } Catch(unknownaccountexception e) {returnLeejsonresult.errormsg ("Account does not exist"); } Catch(disabledaccountexception e) {returnLeejsonresult.errormsg ("Account not enabled"); } Catch(incorrectcredentialsexception e) {returnLeejsonresult.errormsg ("Bad password"); } Catch(RuntimeException e) {returnLeejsonresult.errormsg ("Unknown error, please contact Administrator"); }        returnLeejsonresult.ok (); }

Finally I come to nag a few, the front end for the back-end developers may be a pit, because many back-end people do not like contact, in fact, now the full stack of engineers is a trend, especially in foreign countries, to become a full stack is very difficult, after all, the front end of all-in-one developers less, the best of And this kind of cattle people small made me know one, and then he has gone to the United States well-known companies to do development for many years!

As a back-end staff, JS in fact must be, those pages of the logical script will be written, second, jquery to be able to understand, to be flexible to use, to the end, to use a certain JS plug-in when you can be flexible use, such as Jqgrid, Ztree, in fact, are the same.

With the simplest login as an example, a simple example of JS object-oriented is interpreted.