SEAJS Front-end development specification

SEAJS Introduction

Seajs is a JavaScript module loading framework that follows the COMMONJS specification, which enables the modular development and loading mechanism of JavaScript. Unlike JavaScript frameworks such as jquery, SEAJS does not extend the encapsulation language features, but only the modularity of JavaScript and the loading of modules by module. The main purpose of SEAJS is to make JavaScript modular and easy to load, freeing front-end engineers from heavy JavaScript files and object-dependent processing to focus on the logic of the code itself. The SEAJS can be seamlessly integrated with a framework such as jquery. Using SEAJS can improve the readability and sharpness of JavaScript code, solve the problems of dependency confusion and code entanglement commonly existed in JavaScript programming, and facilitate code writing and maintenance.

For more information, please refer to the official homepage: http://seajs.org/docs/.

Catalog specification

E:\WORKSPACES\MYECLIPSE10\FRONTPROJECTEXAMPLE\WEBROOT
│build.bat	Automatic packaging of compressed execution files
│
├─html	Storing front-end display pages
│└─test
│css.html
│test1.html
│
├─js	Javascrpt file
││cmd.bat
││seajs-config.js	SEAJS configuration file
││update.bat	Update the executable file for the SEAJS library
││update.rd
││
│├─apps	Project script File
│││package.json	NPM Packaging files
│││
││├─base	Class methods for the underlying common
│││do.js
│││in.js
│││lab.js
│││	Business Directory
││└─test
││1.css
││css.js
││
│├─otherlib	Third-party scripting libraries
│││
││└─jquery
││├─jquery
│││jquery-1.10.2.js
│││jquery-1.10.2.min.js
│││
││└─jquery-easyui-1.3.4
││
│└─sea-modules	SEAJS Library
│├─apps	Packaged Business Catalog Files
││
│├─gallery	Common libraries that bring your own
││├─handlebars
│││└─1.0.2
│││handlebars-debug.js
│││handlebars.js
│││package.json
│││runtime-debug.js
│││runtime.js
│││
││└─underscore
││└─1.4.4
││package.json
││underscore-debug.js
││underscore.js
││
│├─jquery
││└─jquery
││└─1.10.1
││jquery-debug.js
││jquery.js
││package.json
││
│└─seajs	SEAJS Core Library
│├─seajs
││└─2.1.1
││package.json
││sea-debug.js
││sea.js
││sea.js.map
││
│├─seajs-style	Style plug-in
││└─1.0.2
││package.json
││seajs-style-debug.js
││seajs-style.js
││
│└─seajs-text	Template Plugin
│└─1.0.3
│package.json
│seajs-text-debug.js
│seajs-text.js
│
├─meta-inf
│manifest. Mf
│
└─web-inf
│web.xml
│
├─classes
└─lib

Code Specification Module Authoring

Refer to the CMD specification. http://seajs.org/docs/#docs The specification of a module for a document.

Naming conventions

1. You must use the TAB key to indent the code to save code size (it is recommended that you set the tab of the editor to 4 spaces in width)
2. Interface style

Structure	Rules	For example
Class	Hump type	Moduleclass ()
Public methods	Mixed type	GetPosition ()
Public variables	Mixed type	FrameStyle
Constant	Uppercase type	Default_frame_layout

1. Other suggested styles, not necessary

structure	rules
Private method	Mix, example: Mixedcase
Private variable td>	Mix, example: Mixedcase
Method (methods) parameter	Blending, Example: Mixedcase, Mixedcase
Native (local) variable	Mix, example: Mixedcase, mixedcase

1. After all statements have been completed, they must be used; Number over
2. All variables must be meaningful in English, strictly forbidden Pinyin
3. The variable allows the use of the recognized English abbreviation
4. Class naming must be camel-like
5. Constants must be capitalized for all words and underlined between each word
6. Enumeration must be meaningful when enumerating types, enumerations and enumeration members must be in a camel-like
7. Constants and enumerations must be defined at the forefront of the merge, note that constants must be placed at the first bit of the file list with the files defined by the enumeration
8. Shorthand words within variables cannot be all capitalized XmlDocument strhtml
9. "On" can only be used as the name of the event
10. The beginning of a function must be a meaningful verb or verb phrase
11. The variable attribute members of the private class are recommended to use a mixed name, preceded by an underscore
12. Temporary global variables are placed in a global hash table for easy variable Recycling
13. All global variables must be initialized to minimize the use of global variables
14. Cannot have line break before curly braces
15. Reserved words and unique DOM properties cannot be used as variable names

Special Naming conventions

1. The variable name preceded by "is" should be a Boolean value, can also use "can" "has" "should"
2. The variable name prefixed with "str" should be a string
3. The variable name preceded by "arr" should be an array
4. The variable name preceded by "num" or "count" should be a number
5. "O" as a local variable or parameter, expressed as an object
6. "E" as a local variable or parameter, expressed as element
7. "EVT" as a local variable or parameter, represented as an event
8. "Err" as a local variable or parameter, expressed as error
9. Repeating variables suggest using names such as "I", "J", "K" (and so on) and so on (universally recognized)
10. Abbreviated words should be abbreviated as possible.
11. Avoid generating misleading Boolean values Isnotnumber IsNan
12. To handle the wrong variable, you must follow the "error" in the following
13. The initialized function must start with "Init", and if a page is initialized only, it can be used independently of Init ()
14. Try to make meaningful code wrapping, and do not let a line of code be too long. (except HTML strings)
15. The operator suggests using spaces to separate
16. function calls and methods avoid using whitespace
17. Commas (,) are recommended to be separated by white space.
18. Frequent use of previoussibling and nextSibling is not allowed

Lexical structure

2. The normal code snippet should look like this:

   while (!isdone) {
   DoSomething ();
   IsDone = Moretodo ();
   }

4. The IF statement should look like this:

   if (somecondition) {
   statements;
   }elseif (someothercondition) {
   statements;
   }else{
   statements;
   }

6. The For statement should look like this:

   for (initialization; condition; update) {
   statements;
   }

8. The while statement should look like this:

   while (!isdone) {
   DoSomething ();
   IsDone = Moretodo ();
   }

10. The do ... while statement should look like this:

    do{
    statements;
    }while (condition);

12. The switch statement should look like this:

    Switch (condition) {
    Case ABC:
    statements;
    Fallthrough
    Case DEF:
    statements;
    Break
    Default
    statements;
    Break
    }

14. The try ... Catch statement should look like this:

    try{
    statements;
    }catch (ex) {
    statements;
    }finally{
    statements;
    }

16. A single line of if-else,while or for statements must also be enclosed in parentheses:

    if (condition) {statement;}
    while (condition) {statement;}
    for (intialization; condition; update) {statement;}

Annotation specification

Specific documentation examples can refer to the Https://github.com/senchalabs/jsduck/wiki

• @author: Author
• @class: Class
• @deprecated: Marking this method property or class is deprecated and is particularly useful when upgrading a transition to be compatible with the previous API.
• @example: Add a code example to a class or method, Jsduck not only coloring the code, but also generating a code editor for the code, previewing the code in real time, and using @example to indent four spaces.
• @extends: Marks a class that inherits from another class, and generates a type inheritance system that is displayed on the right side of the document view.
• @cfg: The constructor's configuration item followed by "{ClassName}" followed by the parameter name.

Example: @cfg {String} fieldname a description of the configuration item.

• @return: Similar to @cfg, marks the return type after a function member has been called.

Example: @return {number} literal description

• @param: Similar to @cfg, a function member is labeled with the type and description of the parameter it requires, and if the parameter type is multiple, it can be split with "/", and a "[Param.member]" descriptor can be used if the parameter needs to be described in more detail.

Example: @param {number/string} fieldName

Example: @param {string[]} fieldName

Example:/**
* @cfg {Object} opt
* @cfg {number} [Opt.age]
* @cfg {number} [opt.name=0]
*/

• @event: Marks an event followed by the @param tag to the description of the event callback function declaration parameter.
• @inheritdoc: After following the class#member, it is common to use a subclass comment block to continue using the parent class comment after the child class overrides the parent class member.
• @private: Marks a member as private, although there are @public but is public if it is not specifically marked.
• @protected: Marks a member as protected.
• @static: The members are marked as static, and static members are also categorized in the document.
• @img: Link a picture in a document comment to make the document more readable.
• @link: Marks the anchor point of a class or class member in a document comment.

An example Project

The sample project Svn:http://192.168.1.101:801/svn/998597/frontprojectexample

Environment configuration

First step: Install File download

• node. js http://nodejs.org/

Step Two: Perform the installation

$ NPM Install Spm-g

$ NPM Install Spm-chaos-build-g

For more information on SPM and Spm-chaos-build, refer to

Https://github.com/spmjs/spm2

Https://github.com/edokeh/spm-chaos-build

Step three: Create a business module

3.1: Create JS file

The module1.js content created under the js/apps/test/directory is:

3.2: Create HTML file

The module1.html content created under the html/test/directory is:

Notice the change of the red box (same as the JS file name and directory).

Preview Effect:

At this point, make sure that the Seajs-config.js production configuration property is Flase, such as:

3.3: Modify Package.json

Modify the Package.json in the Js/apps directory to modify the information in the red box below.

Fourth step: Build a packaged project

Double-click BUILD.bat in the root directory to complete automatic packaging.

View Seajs-config.js File

Automatically generate a map of Seajs

The preview works as follows:

Please note the difference between the two.

Summarize

1. Why to use Seajs

Manage effective management practices for development and packaging.

1. The Require is loaded asynchronously.

   Believe that after reading the following two articles, you can understand why require is loaded asynchronously, if you need to rely on the loaded file loader, select in.js:http://project.benben.cc/in/.

https://github.com/seajs/seajs/issues/259

https://github.com/seajs/seajs/issues/260

1. Export output cannot be a function return value

https://github.com/seajs/seajs/issues/242

1. Calling methods for external JS libraries or styles

It is strongly recommended to use In.js to load the required JS libraries before seajs.use, and there are two main reasons for using In.js

1. Ability to load administrative CSS files
2. No multiple CSS reload problems when loading CSS files (negative: do.js)

It is not recommended to use the own in the library. The Require module is loaded in the module using (DO,LABJS, in) for loading, because:

https://github.com/seajs/seajs/issues/993

1. JS and CSS in the module are automatically packaged

   As already demonstrated, the process of packaging using Pm-chaos-build is described in more detail:

   Https://github.com/edokeh/spm-chaos-build-example

2. Written according to the annotation specification, the document can be generated automatically.

   Https://github.com/senchalabs/jsduck

   This is a place where you can translate your code into. A good tool for ExtJS documents, but the premise is to write code according to the rules. Code rules

   Https://github.com/senchalabs/jsduck/wiki/Guide

3. testing is necessary.

http://llying.iteye.com/blog/258605

From: http://cxc3214.blog.163.com/blog/static/23812806201310145015273/