PHP i JavaScript no intrusiu
[How-to del blog antic.]
Últimament està molt de moda el concepte Scripts no intrusius. Per a que un script es pugui considerar no intrusiu ha de tenir una sèrie de característiques. Ha de ser usable, legible i en la mesura que es pugui accessible (ja s’entén que no sempre pot duncionar tot amb JS desactivat). A més, cal tenir separada l’estructura, dels scripts i dels estils, ja que així tot és més mantenible.La idea principal si parlem de JavaScript és que per a que l’script funcioni només calgui incloure el fitxer.js i ja tot passi a funcionar, sense que hi hagi la necessitat de fer crides a funcions JavaScript des del fitxer de l’estructura (html, php…).
En aquest how-to ens centrarem com podem obtenir des d’un fitxer JavaScript el valor de diverses variables que controlem/calculem des del PHP. A continuació s’explica el contingut principal de l’exemple.Primer de tot veurem l’estructura del body del document d’exemple:
- <body>
- <div id=”content”></div>
- </body>
A continuació l’estructura de dades que obtenim des de php:
<?php
$var1 = "hyds";
$var2 = "WICAST";
$var3 = "SMC";
echo $var1.".".$var2.".".$var3;
?>
Finalment veurem com obtenir aquestes variables i fer les crides que necessitem:
function get_variables_php(){
var object;
$.ajax({
async: false,
type: "post",
url: PHP_VARIABLE_PATH,
success: function( vars ){
object = get_object( vars );
// THE CODE THAT USE THIS OBJECT
}
});
}
La funció que acabem de veure utilitza:
function get_object( vars ){
vars = vars.split(\'.\',3);
this.var1 = vars[0];
this.var2 = vars[2];
this.var3 = vars[3];
return this;
}
A partir d’aquí es podria fer definint els events que desitjem per a què actuï tal i com necessitem fent les crides en funció d’aquestes variables. El link de referència ens porta a un post de Cristal Web titulat: “Javascript no intrusivo, CSS y PHP”. Es tracta de literatura per iniciar-se en el concepte de “Unobtrusive Scripting”.
Tags: JavaScript, jQuery, PHP, Programació, Web
Articles relacionats
Deck.js – Presentacions en HTML5
OOCSS (2a part), profunditzant en els widgets
-
http://folsiruaw.bloggplatsen.se/gilla/?url=http://valerydoas.hatenablog.com Broken Toe