application.js Download - application.js Source code download

application.js

Other categories

v1.0.0

Download

application.js

rely

jquery 3.1.1

How to use

1.Introduce jquery 3.1.1

2.Introduce <script src="dist/application.min.js"></script>

Use previous settings

 app.settings({
	api: {
		location: "http://xxx.xxx.xxx/", //设置api服务器地址
		version: 'v1', //设置api版本
		versionSendType: 'url', //版本号的发送方式，可能的值 url、headers、param，默认为 url
	},
	isChangeURL: false //是否开启url自动变更，此选项仅在  server中允许时可以被设置为true
});

Use api interface

API requests are divided into two types

Send get request

 app.api.get('接口名称', 回调函数);

like

 app.api.get('user/get_name', {name: 'testname'}, function(data){
    //todo 接口请求成功后的后续操作
});

The above code will send the following request

 Request URL:http://xxx.xxx.xxx/v1/user/get_name?name=testname
Request Method:GET
Host:xxx.xxx.xxx

Send post request

app.api.post(接口名称, 参数, 回调函数);

like

 app.api.post('user/set_name', {name: 'testname'}, function(){
    //todo 接口请求成功后的后续操作
});

The above code will send the following request

 Request URL:http://xxx.xxx.xxx/v1/user/get_name
Request Method:POST
Host:xxx.xxx.xxx
Form Data:
name:testname

如果 `versionSendType` 设置为 `param`

but

Request URL:http://xxx.xxx.xxx/user/get_name?version=v1

post time

 Form Data:
version:v1

如果 `versionSendType` 设置为 `header`

An Api-Version parameter will be added to Request Headers when sending the request. In this case, the server needs to add Api-Version to the Access-Control-Allow-Headers parameter in Response Headers or set it directly to *

Use asynchronous loading

Automatic loading includes html, css, and js. Automatic loading still uses the <a> tag by default, but the mechanism of the <a> tag has been adjusted. Clicking the <a> tag no longer jumps synchronously, but automatically loads the page asynchronously.

After successfully loading html or all css, the resize event of the window will be automatically triggered.

The <a> tag has been extended with attributes. The attributes are now added as follows:

app is required here, but there is no need to fill in the value. a tags without this attribute still use the synchronous jump mechanism

href needs to be loaded asynchronously html file address

container container id will render asynchronously loaded content into the specified container.

The css file address that css needs to be loaded asynchronously

js file address that needs to be loaded asynchronously

data-obj needs to boast the data transmitted by the page

Usage example

 <a 
	app
	container="content"
	href="register.html"
	css="register.css"
	js="register.js"
	data-obj='{"user_id": 111}'

>这是一个超连接</a>

Be sure to pay attention to the use of single and double quotes for data-obj

Multiple css automatically loads css="css1.css|css2.css|css3.css"

Multiple js automatically load js="js1.js|js2.js|js3.js"

namespace

In order to avoid naming conflicts, this js provides a method to register a namespace.

//Assume that the current location of js is js/a/test.js

app.namespace.register('js.a.test'); that's it

After that, you can use js.a.test directly

For example

 js.a.test.alert = function(msg){
	
	alert("^_^" + msg + "^_^");
}

js.a.test.isShow = true;
……

Constructor

For js files imported asynchronously, the internal constructor will be automatically run.

*In order to avoid naming conflicts in each js file, it is recommended that each js file must be closed or all variables and functions use namespaces

like

 //假设当前js文件的文件名是 'js/a/brand.js'
app.namespace.register('js.a.brand'); //注册命名空间
(function(w){

	// 构造函数
	js.a.brand = function(){
		//todo 需要初始化的逻辑
	}
	
	
	// todo 其它的代码逻辑
}(window));