A brief talk on HTML5 single page architecture (three)--return to the true: custom route + Requirejs + zepto + underscore

This article was reproduced from: http://www.cnblogs.com/kenkofox/p/4650310.html

However, this article, I would like to further explore the advantages and disadvantages of these two frameworks, in addition, further, put aside these two frameworks, back to the real, and make a simple route to achieve a single page.

This for just do the front-end development of the new classmate is the best, if one came to the post on a lot of angular, backbone, requirejs, look at the information for a two weeks. In fact, we are most familiar with the dollar $, the dollar can solve the problem, do not trouble to angular, backbone big uncle.

In advance, due to my narrow business scope, not necessarily can be angular and backbone functions are used again, so the following analysis may be biased, welcome to discuss.

Angular Advantages:

• Powerful data two-way binding
• Component of the View interface layer
• Built-in powerful services (such as form validation)
• Simple routing

Angular Disadvantages:

• The introduction of JS larger, for the mobile side is a little too much
• Complex grammar, high learning costs

Backbone Advantages:

• The introduction of JS smaller
• Clear MVC Layering
• Model Layer Event mechanism
• Simple Routing and easy extension

Backbone Missing points:

• MVC is a bit rigid, sometimes it feels cumbersome.
• No two-way binding, interface modification can only rely on their own
• When the view switch, there is not enough convenient event notification (to listen to the route yourself)

In fact, these two frameworks are very good, but in the actual business, not necessarily hundred test lark, because there are some mobile single page web, the business is very simple, but the route to switch to a few sub-modules, each sub-module basically pull the data, show to the user, very few user interaction to modify the data, Change the functionality of the view.

For this situation, the use of angular is a bit overkill feeling, and backbone although a lot of small, but the function of the model is also wasteful.

So, here, I would like to discuss whether we can put aside these two frameworks and just ask for our basic needs and build a simpler framework.

Experience, some class libraries are essential:

• Requirejs: module Partitioning
• Zepto: Mobile-side jquery
• Underscore: easy-to-base approach, including template templates, each, map, and more
• Lu Yucu: Here first uses director.js, however this thing does not have backbone and angular the route to be useful, the article finally discusses this question

Make the simplest structure of your own, the idea is very simple:

1. Start the program
2. Listen for routing
3. Routing changes, mapping to the corresponding processing logic, loading the corresponding modules
4. Module loading complete, modify DOM, i.e. view
5. When the page jumps, remove the previous module and load the next module, that is, back to the 3rd

Simple ideas, so that the architecture is very concise and clear, new team members come to be able to easily get started, and angular and backbone architecture, less than 2, 3 days to fit into an existing project.

Next, let's look specifically at how to do it.

The first step, or the index.html

<! DOCTYPE html>
There is no difference between the two articles. Requirejs introduction of Main.js as a program entry
In the second step, Main.js configures the Requirejs dependency and starts the WebApp
(function (Win) {//config baseUrl var baseUrl = document.getElementById (' main '). getattribute (' Data-baseurl '); /* * File dependent */var config = {Baseurl:baseurl,//Dependent relative path paths: {//IF The dependency of a prefix is not as simple as baseurl stitching, it is necessary to point out the director here: ' Libs/director ', Zepto: ' Libs/zepto.min ', und                     Erscore: ' Libs/underscore ', text: ' Libs/text '//For REQUIREJS import of HTML type dependency}, Shim: {            Introduces a class library that does not use Requirejs module notation.            Underscore: {exports: ' _ '}, Zepto: {exports: ' $ '},    Director: {exports: ' Router '}};    Require.config (config);      Require ([' zepto ', ' router ', ' underscore '], function ($, router, _) {Win.appview = $ (' #container ');                          For each module control view changes win.$ = $;        Exposing the necessary global variables, there is no need to rigidly adhere to the requirejs of the mandatory modular win._ = _; Router. Init (); Start monitoring URL changes}) (window);
Director.js does not have an AMD notation, or is introduced in the Shim way. Also, because the usage of $ and _ is too high, it is directly exposed as a global variable.
In addition, Appview variables are added to facilitate the modification of the interface for each sub-module.
Step three, Router.js configure routing
The Routing class library used here is Director (Https://github.com/flatiron/director), relatively thin routing, but in fact, for our program, it seems to be thin enough. Just do it.
The example given by the Director's official website is quite simple, which means "path" corresponds to "function", which is very clear and practical.
      var author = function () {Console.log ("author");};      var books = function () {Console.log ("books");};      var viewbook = function (bookId) {        Console.log ("Viewbook:bookid is populated:" + bookId);      };      var routes = {        '/author ': Author,        '/books ': [Books, function () {          console.log ("an inline route handler.");        }],        '/books/view/:bookid ': Viewbook      };      var router = router (routes);      Router.init ();
Take a look at our own version:
Define ([' director ', ' underscore '], function (Router, _) {////First set up a Routing information table, can be directly out of HTML, pure string configuration var routes = {' Modul E1 ': ' Module1/controller1.js ', ' module2/:name ': ' Module2/controller2.js '//director built-in the common required parameters of the notation, such routes, must use the path "#mod Ule2/kenko "to match, cannot default//' module2/? ([^\/]*)/? ([^\/]*) ': ' module2/controller2.js '//can be the default parameter of the notation, in fact, is the regular expression, the brackets will be extracted from the part into the parameter value. Backbone is doing better, simplifying this grammar//? ([^\/]*)    "Such a paragraph represents an optional parameter that accepts any character that is not a slash/"};    var currentcontroller = null; Used to convert a string into a function, which is also the processing core of the route var routehandler = function (config) {return function () {var url = Co            Nfig;            var params = arguments;                    require ([url], function (Controller) {if (Currentcontroller && currentcontroller!== Controller) {                Currentcontroller.onroutechange && Currentcontroller.onroutechange (); } Currentcontroller = ControlLer            Controller.apply (null, params);        });    }    };    for (var key in routes) {Routes[key] = Routehandler (Routes[key]); } return Router (routes);});
Here the director's routing configuration modified, the original can only accept <string, function> such a key value pair, but reference before backbone, the better way should be to make the table as far as possible only string configuration, do not write logic (function).
So, in the above code, there is a routehandler, the purpose is to create a closure, the string (configuration) into a closure function.
As a result, the effect is that, when a route is encountered, the corresponding submodule code is loaded according to the configuration. The subsequent actual execution of what is decided by the submodule itself. This allows the main/router to be completely decoupled from the submodule.
Fourth step, create a module
Tpl.html
<div> here is    Module 1. My Name: <%=name%><br>    <a href= "#module2/frommodule1" >turn to module 2</a></div>
Controller1.js
define ([' text!module1/tpl.html '), function (TPL) {    var controller = function () {        appview.html (_.template (TPL, {name: ' Kenko '});    };    return controller;});
I think that the simpler the architecture is, the better it is, the easier it is to inherit and maintain the business logic.
Controller is this sub-module to do the logic, Appview is the entire view root node, how to play on how to play, which is not familiar with angular, backbone students most cool.
The focus here is to use Requirejs for modularity and dependency loading, and underscore template Library template.
Fifth step, then do a module, plus some destruction interface
Tpl.html
<div> here is    Module 2. My Name: <%=name%><br>    <button>click me!</button>    <a href= "#module1" >turn to Module 1</a></div>
Controller2.js
define ([' text!module2/tpl.html '), function (TPL) {    var controller = function (name) {        appview.html (_.template ( TPL, {name:name?name: ' Vivi '});        $ (' button '). On (' click ', Function ClickHandler () {            alert (' Hello ');        });        Controller.onroutechange = function () {            console.log (' change ');      You can do some destruction work, such as canceling the event binding            $ (' button '). Off (' click ');   Dismiss all Click event Listeners        };    return controller;});
At this point, the entire simple framework is complete.
Boulevard to Jane, I like this simple architecture very much. Hope to be helpful to the novice friend.
Finally, about the director of the route, to spit the groove, this is not backbone those so good, it does not have built-in default parameter notation, need to understand the regular expression, write complex ([? *. Refer to the code above router.js.
The nature of route matching is actually the exec matching and extracting parameters of regular expressions. I will follow a simple and easy to use routing, refer to the backbone mode, Punch here: http://www.cnblogs.com/kenkofox/p/4650824.html
This article is code: Https://github.com/kenkozheng/HTML5_research/tree/master/UnderscoreRequireJS
A brief talk on HTML5 single page architecture (three)--return to the true: custom route + Requirejs + zepto + underscore