EasyOPOA framework Development Manual


EasyOPOA is a framework OPOA program development progresses, program development for the OPOA define the concept of a complete set of standards and norms. Just a few simple configuration that is capable of fast, flexible, high-quality OPOA development program. Can help you quickly and easily build a complex like Gmail single page program.

OPOA(One Page，One Application)，Also known as Single Page Application，which is a popular use of Ajax in a single page to complete the processing of all requests for the design and development methods. Has loads fast, save traffic, efficient, facilitate the design and many other advantages.

Core OPOA development is Ajax, Ajax itself due to the characteristics of the address is not updated. Development OPOA procedures also take into account the positioning and movement forward and back two problems. Location.hash completed by positioning the main action, forward and back need help History API’s.
In addition to the customer experience, search engine friendly and also very important, because the existing search engine technology and will not load content from Ajax, the contents of the different hash anchor will be ignored, so take a Web design program OPOA , because there is only one page, the search engine can not crawl into Ajax loaded content, can not be included, is not conducive to SEO, affecting OPOA practicality.

These different traditions customer experience issues affecting both the user program on OPOA better use experience, but also affect the OPOA practicality.

The main features of the development framework EasyOPOA：

  1. Support action to locate and solve the problem OPOA action orientation program, to achieve save bookmarks stored, allowing users to share links collection. In the same URL can be loaded with different requests through different hash action.

  2. Supported browser forward and back, to solve OPOA program forward and back using a browser problem (need HTML5 support, low version of the browser is compatible strategies adopted hash, the user is completely transparent).

  3. Support search engines to crawl the content of the program and included OPOA solve OPOA program in the search engines can not crawl difficulties. Combined RSP (Rich Server Page, rich server-side page design / fat server design, and thin server-side design of the corresponding conventional OPOA) is designed to provide a more friendly SEO optimization.

  4. Support in a number of different areas to achieve OPOA One Page page, you can use multiple independent OPOA programs in different areas of a page.

  5. Supports the use of data parameters (routing configuration), so that the action matching more flexible RESTful style to achieve the client advanced custom action in the action.

  6. Support action memory function, can record the action last visited achieve OPOA motor recovery.

  7. Support AMD（Asynchronous Module Definition） specification

  8. Compatible with various browsers (Trident, Gecko, Webkit, Presto), support for multi-platform systems and applications (PC, TabletPC, Mobile).

Programming using the framework helps to unify public issues resolved in large projects can build a more orderly, unified, standard project; development framework on the basis of certain, can develop more focused on specific energy business. Also for the future expansion and maintenance procedures are very helpful.

EasyOPOA framework allows OPOA program specific internal structure is completely transparent to developers and users, and both meet the customer need for traditional Web applications using the experience, but also the developers from the tedious confusion is no standard procedure for OPOA detached, bring good experience, taking into account the search engine friendly.

EasyOPOA adhering to the author always adhere to “More Easy, More Powerful.“ Pursuit of philosophy: lightweight, simple, flexible and comprehensive. Under the premise of providing a powerful comprehensive feature does not limit the user flexibility in development.

Fork me on github

1, EasyOPOA core presentation framework

EasyOPOA framework from the global level, the depth of analysis and a new understanding of the OPOA procedures, program development for the OPOA define the concept of a complete set of standards and norms. Face of traditional OPOA development, EasyOPOA framework of disorderly orderly, of decentralized to centralized, uniform of confusion as to provide a comprehensive and flexible framework layer support for program development OPOA level.

EasyOPOA framework of traditional disorderly OPOA program development were highly abstract, the EasyOPOA each request as a “Hash action instances (Hash Action Instance) “, and the configuration associated with the request to “OPOA instance (OPOA Instance) “in the form of packages.

EasyOPOA frameWork structure

Hash operation examples (Hash Action Instance) is the core object EasyOPOA frame, each request is to be executed EasyOPOA a “Hash operation examples (Hash Action Instance) “, each instance of a Hash operation (Hash Action Instance) by hash, url, OPOAInstance composed of three related parts:

{
    hash : [ url, OPOAInstance ]
};

hash：Hash action name (also called action hash), strings. Hash is a unique identifier EasyOPOA trigger action instance in EasyOPOA, all requests are to be triggered by the hash.

url：URL defines the action to load the request string.

OPOAInstance：OPOA instance, defines the action to perform when the load request, rendering and detail the parameters of the page.

EasyOPOA Hash Action Instance work

Hash operation to complete a three-step example：

1, Use hash trigger action instance Hash (hash value is displayed in the browser URL #hash)

http://domain/home.jsp#hash

2, Examples of backstage action automatically use Ajax request url

http://domain/hash

3, According to opoaInstance (OPOA instance) loading and rendering

Examples OPOA (OPOA Instance) is one example of a part of the Hash operation. When describing the actions performed on the url in the process of loading and rendering methods and specific details of the request.

An instance of an object that contains 12 OPOA with Ajax requests and page rendering related properties：actions,show,hash,url,find,notfound,method,pushHash, prevent,actionMaps,urlErrors,loading。

opoa instance of the default definitions：

var opoa = {
    // JQuery 's DOM selector, let DOM action trigger with the ability to automatically create instances of Hash action
    // Click (click) that will trigger a Hash action when the DOM element instance
    //  ( Can get 'Hash action instance' desired hash, url selected from the DOM )
    // ( When combined with the current opoa instance , click triggered automatically created DOM 'Hash action instance' )
    // For example, select menu options via the parameter , so OPOA program menu options can trigger the action instance Hash
    "actions": null,
    // JQuery 's DOM selector display is loaded from the request url to content
    // The results returned by url / / display the action request to the selector designated area
    "show": null,
    // Get the DOM attribute name 'Hash action instance' of the hash value from the DOM node
    // Default value : hash
    "hash" : "hash",
    // Get the DOM attribute name 'Hash action instance' the url value from a DOM node
    // Default value : hash (url default value is also equivalent to the hash value )
    "url":"hash",
    // Get the data from the server , using the specified jQuery DOM find selector filter out the data of the specified region
    // For example , the data returned from the server gets only the contents of a DIV
    "find" : null,
    // When the find parameter selector, did not find the content of the data returned from the server to display the contents of the
    // Optional value "empty", "all", " custom content ", function
    //  "Empty" Show Empty contents
    // "All" to display all of the data is loaded into the
    // "Custom Content" will display the contents of custom content ( messages or pictures can be used to prompt the user )
    //  Function execution of the function
    //  Default: empty
    "notfound" : "empty",
    // Specific methods on the url Ajax request : post / get        
    // Post mode parameters will be automatically converted to the request url parameter to send post
    // Default value : post
    "method": "post",
    // Whether to change the browser address bar of hash, used to locate the action
    // In support HTML5 browsers can be achieved based hash of forward and back
    // If set to false, the action will not record clicks when loading content, the browser address bar will not change
    // default: true
    "pushHash" : true,
    // Prevent the default event action . If the label does not trigger when clicked href A
    "prevent": true,
    // Use actionMaps modify the default url specified hash corresponding to other values
    // Hash action mapping `opoaInstance` default is the current object this opoa
    "actionMaps": {
        // "hash":"url",
        // "demo":"demo.jsp"
    },
    // When the request url error code returned from the server when handling
    // Set the value of the HTTP code and function objects , when in response to the call of the corresponding code.
    "urlErrors": {
        // If the action performed 404 error occurs, how to deal with
        // Default: 404 load if an error occurs , the page does not have any response
        404: function () {
        },
        // If the action performed 500 error occurs, how to deal with
        // Default: 500 load if an error occurs , the page does not have any response
        500: function () {
        }
        // Also define other states
    },
    // Function ajax request in different states are called, can be used for loading tips
    "loading": {
        // Ajax request begins
        "start": function (hash, url, opoa, postData) {
        },
        // Ajax request is successful
        "success": function (hash, url, opoa, postData) {
        },
        // Ajax request error
        "error": function (hash, url, opoa, postData) {
        },
        // Ajax request ends ( regardless of success or failure will be called )
        "end": function (hash, url, opoa, postData) {
        }
    }
};

EasyOPOA.Configs global configuration object

EasyOPOA.Configs save the default values ​​OPOA instance properties globally.

Therefore, the above OPOA instance configuration parameter global defaults , both by EasyOPOA.Configs re set the example :

// If you do not find the find the specified content data returned from the server , then displays all
EasyOPOA.Configs.notFound = "all";
// Get the url DOM attribute values
EasyOPOA.Configs.url = "href";
...

2, EasyOPOA framework for rapid development

OPOA Home home.jsp:

<body>
    <!-- Header DIV -->
    <div id="headDIV">
        <h1> EasyOPOA Development Framework </h1>
        <h3> realize the browser forward and back, only supported in HTML5 </h3>
    </div>
    <!--Menu DIV -->
    <div id="menuDIV">
        <!-- Increased href, point to grab the corresponding real address -->
        <a class="menu" hash="demo.jsp"> examples </a>
        <a class = "menu" hash = "readme.jsp" documentation </a>
        <a class="menu" hash="about.jsp"> About </a>
    </div>
    <!-- Content DIV -->
    <div id="contentDIV">
        <h1> Welcome ! </h1>
    </div>
    <!-- Bottom DIV -->
    <div id="footDIV">
        © 2013 - 2014 Ray <br /> Email: <a href="mailto:inthinkcolor@gmail.com"> in.think @ gmail.com </a>
    </div>
</body>

Main page home.jsp structure OPOA very clear and simple, click on the menu , load content , the content is displayed in the DIV . Examples, documentation, on three menu corresponding load demo.jsp, content readme.jsp, about.jsp a (url and hash values ​​default values. ) .

This is due to OPOA program content is loaded using Ajax , so A tab menu does not use href attribute to jump , but added a hash attribute specifies the different actions to be loaded , hash DOM object properties Hash values ​​are used as examples of action hash and url. Similarly, as does the use of and dependency href attribute A label , the label can be used to trigger any action, such as DIV can also serve as menus.

class = “menu” can be identified which is a clickable menu , easy to use jQuery on the back of the menu items were screened using EasyOPOA framework for automatic Hahs action triggers binding.

OPOA Home home.jsp instance to CSS: 

<style type="text/css">
    *{Margin: 0; padding: 0;}

    #headDIV { margin-top: 0; height: 100px; background-color: #008400; color:#fff; text-align: center; line-height: 50px; }

    #menuDIV { margin: 20px auto; height: 50px; border-bottom: 1px solid #ddd; text-align: center; }
    #menuDIV A { margin: 10 30px; color: #0084C6; text-decoration: underline; font-weight: bold; font-size: 24px; cursor: pointer;}
    #menuDIV A:hover { color: #840000; text-decoration: none; font-weight: bold; font-size: 24px; cursor: pointer;}

    #footDIV { padding-top: 10px; border-top: 1px solid #ddd; text-align: center; line-height: 28px;}
    #footDIV A { color: #007BC3;}
</style>

html content pages menu is loaded :

demo.jsp:

<h1 style="color:red"> This is DEMO. </h1>

readme.jsp:

<h1 style="color:green"> This is documentation. </h1>

about.jsp:

<h1 style="color:blue"> This is about us . </h1>

Introducing the necessary JS files (EasyOPOA be dependent on jQuery DOM processing ) , use EasyOPOA.start (opoaList) initialize Hash action instance and started directly OPOA program .

opoaList: a collection OPOA instance ( array collection , a collection of objects ) .

EasyOPOA framework startup code: 

    <!-- Introducing jQuery and EasyOPOA (EasyOPOA be dependent on jQuery DOM processing ) -->
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"> </script>
    <script type="text/javascript" src="js/easy.opoa.min.js"> </script>

    <script type="text/javascript">
        /  Define opoa instance
        var opoa={

            // Trigger action Hash instance DOM element
            "actions":"#menuDIV .menu",

            // Display URL is loaded into the DOM element content
            "show":"#contentDIV"

        }

        // Start OPOA, the parameters for the collection
        EasyOPOA.start ([ opoa ]);
    </script>

OPOA instance parameters:

actions and show are the two core parameters OPOA instance.

actions: jQuery ‘s DOM selector, specify the instance has the ability to trigger action Hash DOM elements EasyOPOA automatically created Hash action instance. Let selector specified DOM element in the click -click when the action can be triggered Hash instance .

<a class = "menu" hash = "readme.jsp">documentation </a>

Examples of default triggered action url hash value and the values ​​are values ​​in the current DOM element hash attribute ( depending on the value EasyOPOA.Configs.hash and EasyOPOA.Configs.href a ) of . As the code , because EasyOPOA the EasyOPOA.Configs.hash and EasyOPOA.Configs.href default is hash, then the DOM element is clicked, the action triggered hash of readme.jsp, url also to readme.jsp.

show: hash triggered action request url returned results will appear in the show rendering the specified DOM element.

Initialization code EasyOPOA and start start function , not mandatory to be executed after the page has finished loading , and without the registration page load event handler to complete the call. You can write in any position .

Requires only a few simple lines of code above , it has been realized based on EasyOPOA framework OPOA program development.

EasyOPOA design is not only very simple to use , but also to simultaneously solve two major problems OPOA program design :

  1. Address bar bookmark storage , movement positioning

    When clicking on the appropriate menu in the browser address bar will add a different hash value in the current link home.jsp Home page, representing different requests :

     http://127.0.0.1:8080/opoa/home.jsp#demo.jsp
 http://127.0.0.1:8080/opoa/home.jsp#readme.jsp
 http://127.0.0.1:8080/opoa/home.jsp#about.jsp

    And the users to store bookmarks, direct access to the hash with a link .

    The different hash value after the request to add HOME HOME (#demo.jsp,#readme.jsp,#about.jsp), to complete the request to locate the different actions.

  2. Browser forward and back ( requires HTML5 support )

    EasyOPOA support the use of the browser’s forward and back buttons , and traditional Web applications to provide the same customer experience for the user experience . Do not support HTML5 browsers , EasyOPOA use compatibility practices without any additional processing , completely transparent , does not affect programs.

3 , an increase of search engines to crawl OPOA program content features

In addition to addressing the positioning and movement forward and back issues outside of the browser , EasyOPOA frame design, but also takes into account the right of the search engines friendly solution to the traditional OPOA program content can not be crawled by search engine problems .

To solve this problem , just look at the transformation of menu links , addhrefattribute menu links to reptiles require crawling seURL (SearchEgine URL) can be. 

<!-- Menu DIV =->
<div id="menuDIV">
    <!-- Increased href, point to grab the corresponding real address seURL (SearchEgine URL) -->
    <a class="menu" hash="demo.jsp" href="demo.jsp"> examples </a>
    <a class="menu" hash="readme.jsp" href="readme.jsp"> documentation </a>
    <a class="menu" hash="about.jsp" href="about.jsp"> About </a>
</div>

Such a search engine to climb on the appropriate link href address to access specific content alone can crawl into the action associated with the current ( in order to allow reptiles to get relevant information , the server needs to provide the current seURL (SearchEgine URL) requests related handler returns information )

Note: href attribute defines the link to add as seUrl (SearchEngine URL, search engine crawling address ) , and will not be EasyOPOA triggered , it will not trigger a url Hash instance when the action request address. This property is only used as a search engine crawlers provide crawling pages.

4, EasyOPOA the hash, url, seURL (SearchEngine URL) of the three configurations and relationships :

EasyOPOA hash url seURL

Generally , url and server to crawl content seURL OPOA process customer requests show should be the same ( so the content is the same) .

Design reasons :

Due to the use of Ajax request data , does not rely on the href attribute A label , so any element (DIV, P, ……) can be triggered by clicking Hash action instance , complete the request load . So EasyOPOA defined by the concept of hash action trigger request identification , and then use url Hash mapping list associated with the line of action inside the hash action with a request to avoid reliance on href, for example, DIV or Button when the request does not have to be action to force users to add href attribute of DIV and Button.

Meanwhile , EasyOPOA take this design allows users to trigger action hash values ​​, url value behind Ajax requests executed , the search engine crawling seURL value of three completely unrelated (hash, url , seURL may be the same or different ) . In advanced applications and content also allows the user to load the request (url) loaded with search engines and content requests (seURL) different , more flexible personalized programs to choose from.

Href in EasyOPOA in a property can be omitted entirely , but the use of href tag in theAto specify the server load pathseURL` allows search engines to crawl the content of the program and included OPOA solve the OPOA the program can not be included in the search engine problems , combined with RSP provides more friendly SEO optimization.

5, the use of search engine optimization RSP design crawling

To make the search engines crawl the content can be obtained at the time to more meaningful information , such as web keywords, description, etc. …… seURL corresponding server-side pages can be taken RSP designed to provide a more user-friendly search engine optimization.

RSP: Rich Server Page, rich server-side page design/fat server design , server-side with the traditional design of the corresponding thin .

For example , the traditional design can be based OPOA demo.jsp page :

<h1 style="color: red"> This is DEMO.</h1>

Convert RSP designed demo.jsp page :

<html>

  <head>
    <title> OPOA demo DEMO </title>
    <meta http-equiv="keywords" content="easyopoa,opoa,demo,single page">
    <meta http-equiv="description" content="EasyOPOA框架开发实例">
  </head>
  <body>
      <!--Because HTML page can have only one body, wrapped in a div content -->
      <div id="content">
          <h1 style="color:red"> This is a demo DEMO. </h1>
      </div>
  <body>
</html>

This will help SEO and search engines .

6, the data returned from the RSP , the extraction of the specified content filtering find, notFound

In RSP design, the server returns the contents of the content contains some information not directly related . Typically page titles, keywords, descriptions and other information will not have any impact load and display . However, if the information is loaded into Ajax, hope remove unwanted label items , or filter to extract the contents of the specified , can take advantage of find and notFound parameters to achieve .

find: jQuery DOM selectors to filter out data from a specified area of the obtained data server

notFound: When the find parameter selectors did not find the content of the data returned from the server , the contents of the displayed function or call. There are four possible values ​​”empty“, “all“, “custom content“, function. Default value : empty.

7, EasyOPOA page ( static and dynamic ) configuration program

Common OPOA home design program has two modes :

1 . Static page ( home page content is static content , to show the contents of the written directly in the content area )

<!-- Static content DIV -->
<div id="contentDIV">
   <h1> Welcome ! </h1>
</div>

2 . Dynamic page ( Home need to use Ajax to load a specific request, the request returns the contents displayed in the content area )

For example , when the home is loaded request through Ajax welcome.jsp, content and welcome.jsp displayed in the content area .

Welcome.jsp:

 <h1> Welcome. Welcome EasyOPOA frame ! </h1>

EasyOPOA framework of the forward and backward processing :

When the user through the browser ‘s forward and back buttons to advance or return , in EasyOPOA will automatically trigger and load -related information and automatically displays the current hash to solve the problem of static content updates . For information on the Home Show , EasyOPOA framework recommendations when EasyOPOA program initialization, assign specific page content loading scheme according to Home mode to prevent the information can not be updated back to the home page and load .

8, EasyOPOA frame parameter data submitted to the server when the url request

You can submit a request to the framework EasyOPOA url parameter data postData, there are two ways :

(postData option is the parameter string, such as key1 = value1 & key2 = value2)

  1. directly through the url?postdata implementation:
    EasyOPOA.home ("Welcome.jsp?user=jack&role=admin", opoa);
  2. postdata parameters defined by the function realization (EasyOPOA.home ( url, opoa [, postData])):
    EasyOPOA.home("welcome.jsp", opoa, "user=jack&role=admin");

The above two methods can be used :

EasyOPOA.home("welcome.jsp?a=1&b=2", opoa, "user=jack&role=admin");

9,EasyOPOA framework submit the request mode (post / get) set

When requested url in EasyOPOA framework post submitted by default , by way of method parameters can be adjusted to submit a request .

If you submit way post:

Internally EasyOPOA framework for post request will automatically extract all the parameters in the url , and post the submission .

For example , in the post to submit the request to the following address :

welcome.jsp?user=jack&role=admin

The url in the address Ajax request is welcome.jsp, parameter user=jack&role=admin not at the request of the url, but in the post submission .

10, opoaList OPOA collection of entities defined

In EasyOPOA in , opoaList OPOA entity set parameters framework must be initiated . EasyOPOA.start (opoaList) function is completed by opoaList OPOA entity framework initialization EasyOPOA collection parameters.

EasyOPOA supports a variety of ways to define a collection ( array collection and a collection of objects ) :

  1. array collection method:

    // opoa instance
var opoa={
   "actions":"#menuDIV .menu",
   "show":"#contentDIV"
}

// ...

// Array collection opoa instance
var opoaList = [opoa, ...];

// Use opoaList start
EasyOPOA.start(opoaList);

  2. collection of by objects :

    An array of ways in obtaining relevant opoa specified instances from the list defined not intuitive and easy way to define a collection of objects can specify a name for the OPOA instance different functions and roles , citing instances opoa other action would be more convenient:

    // opoa instance
var opoa={
   "actions":"#menuDIV .menu",
   "show":"#contentDIV"
}

//....

// opoa instance object collection
var opoaList={
   // For the specified opoa instance , specify a name for the menu
   "menu": opoa,
   //...
}

//Use opoaList start
EasyOPOA.start (opoaList);

You can use the opoaList.menu instances cited opoa menu configuration.

11, the action and the url mapping configuration hash

Each instance of an action Hash (Hash Action Instance) structures are Hash action can be mapped objects as instances and actions through the same thing Action mapping object (ActionMap Object) organize and save ( because Hash action instance itself is defined by mapping object movement and storage ) .

A standard action mapping object (ActionMap Object) is structured as follows :

    {
        hash: [ url, opoaInstance ]
    }

One set of multiple hash and url can share a OPOA instance.

Action mapping object responsible hash, url, opoaInstance bind certain . Hash action to complete a three-step examples :

1,the use of hash trigger action instance Hash (hash value is displayed in the browser URL # hash)

http://domain/home.jsp#hash

2,the action instance Ajax request url

http://domain/hash

3,according to the opoaInstance (OPOA instance ) loading and rendering

actions attribute opoa instance using DOM selector to set the trigger DOM object , and also can automatically obtain the desired hash and url attributes from DOM to create the appropriate action to define Hash action mapping object instance . In addition , EasyOPOA also supports a variety of ways to define a more flexible configuration action mapping .

11.1 . Use DOM attribute specifies the mapping of hash and url

The default action to create a Hash instance hash and url DOM are the hash value of the property . This is the default configuration defined by the EasyOPOA.Configs and decisions .

// Get the DOM attribute name 'Hash action instance' of the hash value from the DOM node
// Default value : hash
"hash": "hash",
// Get the DOM attribute name 'Hash action instance' the url value from a DOM node
// Default value : hash (url default value is also equivalent to the hash value )
"url":"hash",

Modify hash and url configuration allows the value hash and url values ​​from different attributes. For example, let DOM object attributes define hash hash value , href attribute defines the url value.

<a class="menu" hash="demo" href="demo.jsp"> instance 2 </a>
<a class="menu" hash="readme" href="readme.jsp"> documentation </a>

11.2 . Use OPOA instance actionMaps property configuration map

actionMaps attribute can modify the default url specified hash corresponding to a different value .

EasyOPOA property values ​​based on the current hash Hash DOM to create instances of the default action , which action hash Hash values ​​and examples are url DOM hash value of the property . Such as:

<a class="menu" hash="demo.jsp">examples</a>

The default action is mapped to :

//{ hash : [url, opoaInstance] }

{"demo.jsp" : ["demo.jsp" , this]}

The use of actionMaps attribute can modify the default url specified hash corresponding to a different value . Syntax:

actionMaps: {
    // "hashname" : "executeurl"
    "demo":"demo.jsp",
    "about":"about.jsp",
    //...
}

Configuration:

Configure the following code will hash to demo and readme DOM element that triggered the action url Hash instance execution.

var opoa = {
    // Use actionMaps modify the default url specified hash corresponding to other values
    actionMaps: {
        // "Hashname ": " executeurl"
        "demo":"demo.jsp",
        "readme":"readme.jsp"
    },
    actions:"#menuDIV .menu",
    show:"#contentDIV"
}

Test:

Defined as an instance of the action can be triggered Hash hash hyperlinks are demo and readme:

<a class="menu" hash="demo"> instance 2 </a>
<a class="menu" hash="readme"> documentation </a>

Click to Example 2 , the browser address bar (hash as demo):

http://127.0.0.1:8080/opoa/home.jsp#demo
http://127.0.0.1:8080/opoa/home.jsp#readme

Request for load (request to demo.jsp):

http://127.0.0.1:8080/opoa/demo.jsp
http://127.0.0.1:8080/opoa/readme.jsp

11.3 . Directly addActionMap (hash, url, opoa) configuration mapping function

Modify the default url specified hash corresponding to a different value , you must specify OPOA render specific examples related .

//hash, url, opoa
EasyOPOA.addActionMap("demo",  "demo.jsp" ,opoaList.menu);
EasyOPOA.addActionMap("readme",  "readme.jsp" ,opoaList.menu);

AddActionMap function also supports passing parameters array list ( action mapping element can be represented using the object or array ) :

Syntax:

[
    // Standard action mapping object -based
    {hash: [url, opoaInstance]},
    {hash: [url, opoaInstance]},
    ...
]

Example:

 EasyOPOA.addActionMap([
    // Standard action mapping object -based
    // {hash: [ url, opoaInstance ]}
    {"demo" : [ "demo.jsp" ,opoaList.menu]},
    {"readme" : [ "readme.jsp",opoaList.menu ]}
 ]) ;

Syntax:

[
    // Array-based
    [hash, url, opoaInstance] , 
    [hash, url, opoaInstance] , 
    ... 
]

Example:

 EasyOPOA.addActionMap([
    // Array-based
    // [hash, url, opoaInstance]
    ["demo", "demo.jsp", opoaList.menu],
    ["readme", "readme.jsp", opoaList.menu]
]);

11.4 . Use actionMaps parameter start () function start

start (opoaList [, actionMaps ]): start start function has an optional parameter actionMaps, mapping defined objects can be passed at startup .

actionMaps: action can be mapped to a standard array list object or parameter ( action mapping element can be represented using the object or array ) .

// Standard action mapping object
var actionMap={"demo":[ "demo.jsp" ,opoaList.menu]};

// Use opoaList and actionMaps start
EasyOPOA.start(opoaList,actionMap);
var actionMaps=[
    // Standard action mapping object -based
    // {hash: [ url, opoaInstance ]}
    {"demo" : [ "demo.jsp" ,opoaList.menu]},
    {"readme" : [ "readme.jsp",opoaList.menu ]}
];

// Use opoaList and actionMaps start
EasyOPOA.start(opoaList,actionMap);
var actionMaps2=[
    // Array-based
    // [hash, url, opoaInstance]
    ["demo", "demo.jsp", opoaList.menu],
    ["readme", "readme.jsp", opoaList.menu]
];

// Use opoaList and actionMaps start
EasyOPOA.start(opoaList,actionMap2);

12, get DOM attribute specified hash value

By default EasyOPOA frame starts , it will automatically get from actions attribute OPOA instance selector to select DOM elements , binding action trigger events and automatically creates a corresponding action Hash instance .

Hash action when creating an instance , the default hash and url value and the hash value DOM attribute is the same .

<a class="menu" hash="demo.jsp">examples</a> 
<a class="menu" hash="readme.jsp">documentation</a> 
<a class="menu" hash="about.jsp">about</a>

If , in some cases , hash attribute conflicts with other elements , or want to use other attributes instead of hash property, can be modified by the following method.

Use opoahash attribute instead of the default hash is defined :

<a class="menu" opoahash="demo.jsp" href="demo.jsp"> examples </a>
<a class="menu" opoahash="readme.jsp" href="readme.jsp"> documentation </a>
<a class="menu" opoahash="about.jsp" href="about.jsp"> About </a>

Note that in the framework of the internal EasyOPOA if hash specified property is not found, loaded href attribute as the action url hash value and the value it will try .

13,invalid hash positioning action handler notHash

Sometimes users to store bookmarks or connection collection has failed or passed an invalid user undefined hash action. EasyOPOA framework calls EasyOPOA.notHash (hash) function (default is empty ) .

Below , to access a nonexistent hash action orientation mydemo:

http://127.0.0.1:8080/opoa/home.jsp#mydemo

NotHash parameters can now be registered with a parameter EasyOPOA framework handler function is invalid hash value for the current user request:

EasyOPOA.notHash=function(hash){
            alter ("you specify the action '"+hash+"' has failed!" ) ;
    // EasyOPOA.load("welcome.jsp","");
}

Note that the low version IE (6,7,8) does not support console.info (), replace the post in order to run for the alter or otherwise.

14 , using the loading process object state management for Ajax requests

In Ajax application development, because the browser does not refresh, so the process of requesting a URL, use the text or image to be loading Loading prompt the customer experience is very important. There are also some cases when Hash action request loading the update is complete pages also need to perform new tasks or complete some content (for example, after loading, the current state of the menu to change).

EasyOPOA framework supports the definition loading process object (loadingObject) for state management, a loading handle Ajax request object contains four state registration function for processing : Request start ( start ), the request is successful ( success , before rendering the page ) , request error ( error ), requesting end ( end , regardless of success or failure will be called ) . Function when ajax request different states are called, can be used for loading tips.

Each state handler can pass four optional parameters : hash, url, opoa, postData.
hash: current trigger action of hash value
url: the current request url
opoa: opoa instance
postData: Data submitted to the server

Syntax:

// Loading process object
"loading": {
        // Ajax request begins
        start:function(hash,url,opoa,postData){},
        // Ajax request is successful
        success: function(hash,url,opoa,postData){},
        // Ajax request error
        error: function(hash,url,opoa,postData){},
        //Ajax request ends( regardless of success or failure will be called )
        end:function(hash,url,opoa,postData){}
}

Tip: end state handler used to load after the completion of the request status updates menu, sub-page action to initialize and start.

On the page content DIV contentDIV define a display Loading prompt loadingDIV:

<!-- Loading Tips DIV -->
<div id="loadingDIV">
    <h1>Loading ......</h1>
</div>

Show LoadingDIV Ajax request at the beginning of the end of the request hide LoadingDIV.

15, using the loading object processing url page action returns

In actual OPOA development and use, and not simply load request , obtain content from the request and displayed it. Request the return of the loaded content often may also contain a new trigger EasyOPOA action DOM object, you need to initialize an instance of these actions through the start Hash function .

16,for handling HTTP response code

In addition to the Loading friendly tips , the server may generate an error in the Ajax request process, for different errors should also be given the necessary time to the user prompts . For example, 404 on behalf of the request is not found, server error 500 delegates ……

Each request will be submitted by the HTTP server returns the corresponding numerical code , EasyOPOA use urlErrors representatives HTTP response code object (urlErrors Object), different support when returning HTTP code , call the appropriate function response.

17, EasyOPOA framework action triggered manually hash load

load function allows control over the actions triggered by the developers to manage .

Under normal circumstances EasyOPOA default management framework to automatically trigger actions , before the action is triggered by clicking on the page ‘s DOM element triggered. If you want to manually trigger a defined Hash action instance , use EasyOPOA.load function .

EasyOPOA.load (hash [, postData]): Manually trigger the specified hash action , postData submit a request for the optional parameter data (key1 = value1 & key2 = value2).

Note : load function must be called after the start function to start ( for instance initialization is complete Hash action ) to be used in EasyOPOA framework. 

EasyOPOA.load("readme.jsp");
 <a onclick="if(confirm('You sure you want to delete it?')){EasyOPOA.load('delete/1')}return false;" href="do/doDelete.jsp?id=1">deleted</a>

18, perform hash chain operation

load function can start an action specified, loadLinked function can load multiple consecutive actions, each action (hash) are completely finished after an action is triggered, and submit a request to support additional parameter (postData) in the implementation of the action.

EasyOPOA.loadLinked([ [hash, postData], [hash2, postData2], [hash3, postData3], ... ]);

List manually in order to load the specified hash action name. In turn can be used to achieve the effect of multi-level hit loaded. For example, loading a hash request to start within the hash request, we turn to load.

 // In turn trigger api, EasyImageUtilsAPI hash action
 EasyOPOA.loadLinked([ [ "api" ], [ "EasyImageUtilsAPI", "lang=en&version=1.1" ] ]);

19, Hash initial pre-load handler preFirstHash

EasyOPOA framework can automatically handle hash action occurs in all browsers address, when the engine first treatment in the browser hash action, you may want to do some custom analytical hash operations before action, including termination default parsing .
For example, when loading a hash action, but the action can only be executed after the implementation of an action, it can terminate the default resolution, manually operated resolution.

preFirstHash function includes a first loaded into thehash motion parameters can be executed before the first load of hash, if it returns false may also terminate the default hash execution.

// API API menu operation process within the specified load
OPOA.preFirstHash = function(hash) {
         if (hash.indexOf("API") != "-1") {
               // Load the corresponding API
               if (hash == "EasyImageUtilsAPI") {
                     // In turn trigger api, EasyImageUtilsAPI hash
                     EasyOPOA.loadLinked([ [ "api" ], [ "EasyImageUtilsAPI" ] ]);
               } else if (hash == "EasyObjectUtilsAPI") {
                     EasyOPOA.loadLinked([ [ "api" ], [ "EasyObjectUtilsAPI" ] ]);
               } else if (hash == "EasyPropertiesUtilsAPI") {
                     EasyOPOA.loadLinked([ [ "api" ], [ "EasyPropertiesUtilsAPI" ] ]);
               }
               return false; // stop default action
         }
         return true; // execute default action
}

20, hash action mapping configuration with parameters

The traditional hash, hash value as the default request url. If the url hash and requests inconsistent, you need to use addActionMap hash function specified separately for each specific request url.

For example:

<a class="menu" href="demo">examples</a>
// ...

EasyOPOA.addActionMap("demo",  "demo.jsp" ,opoaList.menu);
// ...

However, if the hash is generated dynamically and is inconsistent url , url request parameters need to get the data submitted from the hash value , then by this method is very feasible :

// Define a hash (demo/version/logo )
<a class="menu" hash="demo/v1/123">instance A </a>
<a class="menu" hash="demo/v2/456">instance A </a>
// ...

// hash obtain parameter values ​​, convert url (demo.jsp?v=release &id=identity)
demo.jsp?v=v1&id=123
demo.jsp?v=v2&id=456
// ...


EasyOPOA only provides a load engine OPOA program . Also provides flexible configuration actions , support the use of data parameters in the action ( routing configuration ) , so that the action is more flexible matching in style RESTful client implementation senior custom action .


When using the hash action with data parameters , simply specify a placeholder in the hash action configuration, you can reference parameter values ​​corresponding placeholders in the url . hash action configuration supports two types of placeholders:

:param: URL placeholder component parameters , a colon ( :) at the beginning , matching slash / between .

*splat： (*) at the beginning of a wildcard placeholder asterisk matches multiple URL component that supports matching slash / .

21,action orientation and memory function ( action state recovery )

When a user accesses OPOA program directly home page , such as when http://127.0.0.1:8080/opoa/home.jsp, generally show the same load each time the default home page content.

If you want when the user next visit home.jsp home , to show the contents of their last last action performed by the user , to provide users save and restore the state 's action . Open action can locate memory function in EasyOPOA framework.

EasyOPOA framework action memory function is enabled by default , just add dependent jquery.cookie.js and json2.js function can be realized .

<!--jquery.cookie and json2 optional , if you want to open the final movement positioning memory function , you need to introduce -->
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/json2.js"></script>

If you need to disable the action memory function, remove js files or cookieLast set to false .

EasyOPOA.cookieLast=false;

22, EasyOPOA.noConflict non-conflicting object return function

Use EasyOPOA and OPOA global variables can be referenced EasyOPOA frame object .

EasyOPOA.noConflict ([boolean]): You can control EasyOPOA and OPOA release the results of the use of the returned object references EasyOPOA framework to prevent conflicts with other objects or OPOA 's called EasyOPOA .

Control over the operation of the function of the variable OPOA transfer to first realize that its library .

var $OPOA=EasyOPOA.noConflict();

Run this function will control variable OPOA and EasyOPOA the transfer to the first library that implements it .

var $OPOA=EasyOPOA.noConflict(true);

23, prevent arguments

prevent parameters generally do not modify the parameter is true, the action is triggered when the DOM will cancel the default action .
For example: cancel the default jump clicking on hyperlinks href tag .

If you need to modify , through global settings :

EasyOPOA.Configs.prevent=false;

Or opoa instance settings :

//opoa instance
var opoa={
    "actions":"#menuDIV .menu",
    "show":"#contentDIV",

    prevent:false;
}

24、Modular programming support - AMD specification

EasyOPOA support for modular programming, and support for AMD (Asynchronous Module Definition, asynchronous definition module) specification.

EasyOPOA rely jQuery, but it is not absolutely dependent on jquery.cookie and json2 (only when action is needed and memory needed).

jQuery and jquery.cookie inside have provided support for the AMD specification, but json2 also did not support any specification. So for json2 can introduce, or to transform according to the corresponding module definition specification.

1、AMD Support

home.jsp:

<!-- Since json2 not support AMD specification, introduced directly (also self-transformation, specifically refer to AMD specifications) -->
<script type="text/javascript" src="js/json2.js"></script>
<!-- Load master file module (Entry Module) -->
<script src="amd/require.min.js" data-main="js/main_amd"></script>

js/main_amd.js：

//Jquery and jqueryCookie path configuration
require.config({
    paths:{
        "jquery":"jquery-1.10.2.min",
        "jqueryCookie":"jquery.cookie"
    }
});

//Introduction of dependence, load module (jqueryCookie optional module)
//EasyOPOA engine has been cited internal documents dependence jquery
//So if you do not use jquery in the startup module, you can not introduce jquery
require(['easy.opoa','jquery','jqueryCookie'],function(EasyOPOA,$){
    //……
}

WebRoot file structure：

+amd
    require.min.js
+js
    main_amd.js
    jquery-1.10.2.min.js
    jquery.cookie.js
    json2.js

25、EasyOPOA and BackboneJS comparison when the OPOA system building

BackBoneJS be OPOA programming is also a favorable technology. Use EasyOPOA and BackBoneJS can complete OPOA design process.

From a design point:EasyOPOA focus on to build OPOA systems(System); while BackBoneJS focused on using the front-end MVC to build a module in the system(Module).

From a technical point:EasyOPOA OPOA is a purely procedural framework for building; while BackboneJS is essentially a front-end JS MVC framework, rather than OPOA framework.

Focus on providing a JavaScript engine side MVC framework. Server-side data is given only model, the client controls all business, views and updates are rendered by the client BackboneJS done with MVC components, systems rely on JS achieve full programming capabilities.

Advantages:

Advantages:

End

If you have more comments, suggestions or ideas, please contact me.

Comments

Contact , feedback, customization, training Email: inthinkcolor@gmail.com