application.js herunterladen - application.js Quellcode herunterladen

application.js

Andere Kategorien

v1.0.0

Herunterladen

application.js

verlassen

jquery 3.1.1

Wie zu verwenden

1. Führen Sie jquery 3.1.1 ein

2.Führen Sie <script src="dist/application.min.js"></script>

Vorherige Einstellungen verwenden

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

Verwenden Sie die API-Schnittstelle

API-Anfragen werden in zwei Typen unterteilt

Get-Anfrage senden

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

wie

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

Der obige Code sendet die folgende Anfrage

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

Beitragsanfrage senden

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

wie

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

Der obige Code sendet die folgende Anfrage

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

如果 `versionSendType` 设置为 `param`

Aber

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

Postzeit

 Form Data:
version:v1

如果 `versionSendType` 设置为 `header`

Beim Senden der Anfrage wird ein Api-Version -Parameter zu Request Headers hinzugefügt. In diesem Fall muss der Server Api-Version zum Access-Control-Allow-Headers Parameter in Response Headers hinzufügen oder ihn direkt auf * setzen.

Verwenden Sie asynchrones Laden

Das automatische Laden umfasst HTML, CSS und JS. Beim automatischen Laden wird weiterhin standardmäßig das <a> -Tag verwendet, der Mechanismus des <a> -Tags wurde jedoch angepasst. Durch Klicken auf das <a> -Tag wird nicht mehr synchron gesprungen, sondern die Seite wird automatisch asynchron geladen.

Nach erfolgreichem Laden von HTML oder allen CSS wird das Größenänderungsereignis des Fensters automatisch ausgelöst.

Das <a> -Tag wurde um Attribute erweitert. Die Attribute werden nun wie folgt hinzugefügt:

Hier ist app erforderlich, der Wert muss jedoch nicht eingegeben werden. a ohne dieses Attribut verwenden weiterhin den synchronen Sprungmechanismus

href muss die HTML-Dateiadresse asynchron laden

container Container-ID rendert asynchron geladene Inhalte in den angegebenen Container.

Die CSS-Dateiadresse, die css asynchron laden muss

js Dateiadresse, die asynchron geladen werden muss

data-obj muss die von der Seite übertragenen Daten angeben

Anwendungsbeispiel

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

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

Achten Sie unbedingt auf die Verwendung von einfachen und doppelten Anführungszeichen für data-obj

Mehrere CSS laden automatisch css="css1.css|css2.css|css3.css"

Mehrere js laden automatisch js="js1.js|js2.js|js3.js"

Namensraum

Um Namenskonflikte zu vermeiden, bietet dieses js eine Methode zum Registrieren eines Namespace.

//Angenommen, der aktuelle Speicherort von js ist js/a/test.js

app.namespace.register('js.a.test'); das ist es

Danach können Sie js.a.test direkt verwenden

Zum Beispiel

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

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

Konstrukteur

Bei asynchron importierten js-Dateien wird der interne Konstruktor automatisch ausgeführt.

*Um Namenskonflikte in jeder JS-Datei zu vermeiden, wird empfohlen, jede JS-Datei zu schließen oder alle Variablen und Funktionen Namespaces zu verwenden

wie

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

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