Frog frog recommendation: Best practices of Backbone and seajs combination

Document directory

• Overall static file directory Planning

Overall static file directory Planning

The static directory of the website contains the following sub-directories:

.├── css         ├── img├── js├── myjs└── sea-modules

1. The css directory stores the overall css, such as bootstrap and the css of the website master layout. Some plug-ins and the js files of the plug-in itself can be placed in the same directory. You do not need to put them here separately, it cannot be too rigid.
2. The img directory stores images, including images used by bootstrap and images used by websites.
3. The js directory stores third-party javascript scripts, such as jquery and jquery plug-ins. These scripts do not comply with the seajs specifications, but you can also use seajs to go to require, and the most common scripts such as jquery, I introduced it directly in html.
   1. Jquery is used as the built-in function of the browser. If jquery is built in, the jquery plug-in can directly use the seajs region require, saving the need to download a jquery plug-in and package it into the seajs format.
   2. In addition, some scripts such as bootstrap depend on jquery and are used throughout the site. It is not necessary to asynchronously load these scripts with seajs to achieve cleanliness.
4. Myjs stores our own code. Except for the code in this directory, the code in other directories is downloaded online and may be overwritten during upgrade.
5. The sea-modules directory stores third-party javascript packages in seajs format. The specific directory arrangement is described below.

Sea-modules directory

Packages under the sea-modules directory are installed with spm install. First, each subdirectory is created according to the package name, and each version of each package directory creates another subdirectory, the version directory stores the specific source files, including the development and debugging versions and the compressed version of the production environment. If you want to update a package, you can also directly use spm to update the package. Then, you can switch the version at any time in sejs. config, as shown below.

Myjs directory

This directory stores the js Code we have written, which must all comply with the seajs specification. First, create a utils and stuff directory to store the helper and miscellaneous packages used by each single page app. The other directories are basically a sub-directory that represents a single page app. The single page app is developed using Backbone. the following conventions are made in each app directory.

1. Main. js is used to guide the entire app, including seajs. config and seajs. use calls. The details are shown below.
2. App. js is used to initialize the Backbone, including the definition of the Backbone Router and the Backbone. History. start () statement that drives the route.
3. *-View. js is used to implement each View of the app.
4. *. Tpl is used to store the template files used by the view, and seajs is used for asynchronous loading on demand.
5. *. Css is used to store the style files required by the app UI. It is asynchronously loaded as needed using seajs.

Dependency

Each app is basically an independent individual, achieving high cohesion and minimal external dependency. In addition to the view, model, and tpl dependencies in this directory, the dependency of third-party components (such as Backbone and Mustache) and the dependency of public components of the project, such as require ('.. /utils/xxx. js ').

That is to say, if multiple apps use the shared code, they are also stored in the myjs directory, and sub-directories are created for namespace Division, such as stuff, utils, and xxxhelper. In this way, a website has many apps, and the entire file directory is also organized and will not be messy.

Main. js Development

This file in each app performs seajs configuration and app guidance, which is roughly as follows.

seajs.config({                                                                     alias: {                                                                           "underscore": "underscore/1.4.4/underscore-debug",                             "backbone": "backbone/0.9.2/backbone-debug",                                   "mustache": "mustache/0.5.0/mustache-debug",                                   "cookie": "cookie/1.0.2/cookie-debug",                                         "moment": "moment/1.7.2/moment-debug"                                      },                                                                             preload: ['seajs/plugin-text'],                                                map: [                                                                             ['.tpl', '.tpl?201304261457'],                                                            ['.js', '.js?201304261457']    ]                                                                          });                                                                            seajs.use(['/static/myjs/add-domain/app'], function(main){                         $(function(){                                                                      main.init();      });                                                                        });

1. First, declare the third-party dependency in alias. If you want to upgrade the component version or use the debug version, modify it here.
2. Load the necessary seajs plug-ins in preload. The most commonly used plug-ins are used to load templates and css.
3. Map to map various files. If the app is updated, remember to modify the version number to clear the cache.
4. Seajs. directly use the app in the app directory in use. js file, and agree to each app. js both export an init method, it is best to call init in document. in the ready callback, because the layout dom is loaded at this time, it may be used in the app. And jquery is loaded in html. You can safely use $ (function () {}) here (){}).

About Packaging

In principle, each app can be packaged into a js file to reduce the number of http requests. However, after a long time in the past, I posted a lot of issue on github, And I didn't understand why the packages I made were useless. I created a package. json file in the app directory.

{    "name":"app",    "output":{"app.js":"."}}

Executing spm build -- src. prompts that you cannot load ../utils. js. I manually changed the ../In app. js to http://www.cnblogs.com/and then completed the package. Then. in js, modify it to seajs. use (['/static/myjs/domains/dist/app-debug. js, but utils. js, there is no init method at all. In short, spm packaging problems, so once again give up, let's run the debugging mode.

Test

No.

Directory arrangement example

.├── css│   ├── bootstrap.css│   ├── bootstrap.min.css│   ├── bootstrap-responsive.css│   ├── bootstrap-responsive.min.css│   └── main.css├── img│   ├── global_sprite.png│   ├── glyphicons-halflings.png│   ├── logo.png│   └── simple.png├── js│   ├── bootstrap.js│   ├── bootstrap.min.js│   ├── china-zh.js│   ├── highcharts.src.js│   ├── jquery-1.8.2.min.js│   ├── jquery.vector-map.css│   ├── jquery.vector-map.js│   ├── jquery.zclip.js│   └── ZeroClipboard.swf├── myjs│   ├── add-domain│   │   ├── app.js│   │   ├── domains-view.js│   │   ├── domains-view.tpl│   │   ├── main.js│   │   ├── records-view.js│   │   └── records-view.tpl│   ├── charthelpers│   │   ├── chart.js│   │   ├── chinamap.js│   │   ├── isp_chart.js│   │   ├── region_chart.js│   │   └── time_chart.js│   ├── day_report│   │   ├── app.js│   │   ├── main.js│   │   ├── template.tpl│   │   └── view.js│   ├── domains│   │   ├── app.js│   │   ├── domains.tpl│   │   └── main.js│   ├── stuff│   │   └── moment-zh-cn.js│   └── utils│       ├── data_map.js│       └── utils.js└── sea-modules    ├── backbone    │   └── 0.9.2    │       ├── backbone-debug.js    │       ├── backbone.js    │       └── package.json    ├── cookie    │   └── 1.0.2    │       ├── cookie-debug.js    │       ├── cookie.js    │       ├── package.json    │       └── src    │           └── cookie.js    ├── jquery    │   └── 1.8.3    │       ├── gallery    │       ├── jquery-debug.js    │       ├── jquery.js    │       └── package.json    ├── marked    │   └── 0.2.4    │       ├── marked-debug.js    │       ├── marked.js    │       └── package.json    ├── moment    │   └── 1.7.2    │       ├── moment-debug.js    │       ├── moment.js    │       └── package.json    ├── mustache    │   └── 0.5.0    │       ├── mustache-debug.js    │       ├── mustache.js    │       └── package.json    ├── seajs    │   └── 1.3.0    │       ├── package.json    │       ├── plugin-base.js    │       ├── plugin-text.js    │       ├── sea-debug.js    │       └── sea.js    └── underscore        ├── 1.4.2        │   ├── package.json        │   ├── underscore-debug.js        │   └── underscore.js        └── 1.4.4            ├── underscore-debug.js            └── underscore.js