Un análisis completo del patrón de un solo cuerpo en el patrón de diseño de JavaScript

Un monolito es un objeto utilizado para dividir un espacio de nombres y organizar algunos atributos y métodos relacionados. Si puede ser instanciada, solo puede ser instanciada una vez (solo puede casarse una vez, no el segundo matrimonio).

El patrón monolítico es uno de los patrones más básicos pero útiles en JavaScript.

Características:

1. Puede usarse para dividir los espacios de nombres para borrar los peligros o los efectos de las variables globales.

2. Use la tecnología de ramificación para encapsular las diferencias entre los navegadores.

3. El código se puede organizar más de una manera, lo que facilita la lectura y el mantenimiento.

Escritura básica del modo de cuerpo único:

 /* El patrón de monómero más básico*/ var his = {nombre: 'Anna', sexo: 'Women', Say: Function () {// Some Processing Logic ...}, Doing: function () {// Otras funciones de procesamiento ...}}

1. Divide el espacio de nombres:

 var box = {width: 0, altura: 0, getArea: function () {return this.width * this.width; // El acceso a los objetos en JS debe mostrarse, es decir, esto no se puede omitir}, init: function (w, h) {// width = w; // height = h; Este método es equivalente a definir dos variables globales, (las variables no declaradas con var son variables globales) // No es una asignación al ancho y la altura del objeto // lo siguiente es el correcto this.width = w; this.Height = H;}} // El cuadro divide un espacio de nombres, y las variables en el espacio de nombres solo son válidas en el espacio

Todos los miembros y métodos en el monómero anterior son públicos, es decir, se pueden cambiar arbitrariamente fuera del monómero (pero no pueden acceder a las variables locales). Entonces, ¿por qué el monómero proporciona un espacio de nombres?

No te preocupes, sigamos mirando:

 var box = {width: 0, altura: 0, // La variable de monómero getArea: function () {return width * altura; // ancho, la altura no es una variable monómero, pero una variable global definida en init} init: function (w, h) {width = w; altura = h;}} // en init, la altura no es una ventana de monómero de monómero. box.getArea (); alerta (init);}

Dado que el ancho y la altura en init no se inicializan, se informará un error, así que cámbielo así:

 var box = {width: 0, altura: 0, getArea: function () {return width * height;}, init: function (w, h) {width = w; tight = h;}} window.onload = function () {width = 0; height = 0; // o box.init (0,0); var init = box.getArea (); alerta (alerta);}

Se encuentra que está bien. Dado que el ancho y la altura utilizados por Init y GetArea no son variables propiedad del monolito, pero son una variable global, podemos hacer llamadas aleatorias fuera del monolito sin ser afectados.

 var box = {width: 0, altura: 0, getArea: function () {return width * altura; // El acceso del objeto en js debe mostrarse, es decir, esto no se puede}, init: function (w, h) {width = w; height = h;}} // el ancho aquí, la altura en realidad no es una ventana de objeto solo un solo cardintear = function () {) box.getArea (); alerta (ancho);}

De esta manera, se informará que se informará un error. Se puede ver que nuestro método anterior no crea un espacio de nombres para variables globales, y las variables globales nos traen peligro. Entonces la palabra superior es correcta, verifiquemos:

 var box = {width: 2, altura: 2, getArea: function () {return this.width * this.height; / / js Access debe mostrarse, es decir, esto no puede omitir}, init: function (w, h) {this.width = w; this.height = h;}} window.onload = function =) {width = 0; // No afectará las variables locales en el monolito, es decir, la altura del espacio de nombres = 0; // No afectará las variables locales en el monolito, es decir, el espacio de nombres var ancho = box.getArea (); alerta (ancho);}

Se puede ver que el ancho y la altura en la ventana. La carga no tiene interferencia, porque los monómeros han establecido un espacio de nombres para el ancho y la altura en los monómeros.

2. Propiedades del miembro:

Aunque no existe un objeto (OOP) tan estricto en JavaScript, podemos usar cierres para imitarlo. Después de todo, no es bueno establecer algunas variables al público.

 var his = (function () {var name = 'anna'; var sex = 'women'; return {getArea: function () {return name + 'es un' + sex;}, init: function (b) {name = b;}}}) (); window.onload = function () {his.name = 'jock'; // no se puede acceder a alerta (ger.getArea ()); his.init ('lous'); alerta (her.getarea ());}

Las variables y métodos privados son de solo lectura, mientras que las variables y métodos públicos son escritos de lectura.

acceso:

Para los miembros privados, puede acceder a ellos directamente sin ninguna modificación antes que ellos.

Para acceso público, "esto". debe agregarse antes del alcance del monómero, y "ella". (Nombre del monobodio).

3. Use la tecnología de rama para encapsular las diferencias entre los navegadores

Notas:

a. Asegúrese de usar cierres para lograr un enlace instantáneo

b. Separe cada rama con un punto y coma

do. Lo último que regresa es el nombre de la rama

d. Use el nombre del método de nombre + rama cuando llame;

 // Use monomer branching technology to define XHR (XMLHttpRequest) objects, and you must use a closure to implement var XHR = (function(){//The three branchesvar standard = {cXHR:function(){return new XMLHttpRequest();} };var activeXNew = {cXHR:function(){return new ActiveXObject ('msxml2.xmlhttp');}}; var activexold = {cxhr: function () {return new ActivexObject ('Microsoft.xmlhttp');}}; // para asignar (asignar) la rama, try cada método; return that no failvar testObject; intent {testetject = standard.cxhr (); Si no se lanzó ningún error} capt (e) {try {testObject = activeXnew.cxhr (); return activexNew;} catch (e) {try {testObject = activexold.cxhr (); return activexNew;} catch (e) {testObject = activexold.cxhr (); return activexold;} catch (Erry {Erry {testObject.cxold.cxhr (); return Activexold;} Catch (Erry {Erry {testObject.Cain XmlhttprequestObject falló! ');

Lo anterior es un análisis completo del modelo de cuerpo único del patrón de diseño JavaScript introducido por el editor. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!