SeaJS biblioteca de JavaScript de desarrollo modular

En este artículo se reimprime de: https://www.cnblogs.com/snandy/archive/2012/03/30/2423612.html Autor: snandy reproduce, por favor indique el comunicado.

SeaJS de ganado doméstico lifesinger desarrollo. La versión actual es la 1.1.1, menos de 1.500 líneas de código, la compresión después de 4k, de muy alta calidad.

Esto hablar de algunas SeaJS de uso básico no lo hará exhaustivos, pero le dirá una comprensión personal del documento oficial de algunos detalles que no se mencionan.

 

A, SeaJS la interfaz global

 

SeaJS da a conocer dos a lo global identificador : seajs y definir.

 

Si su proyecto ya está utilizando el identificador seajs, no quiero a cambio. Entonces SeaJS puede hacer una seajs globales. como

var boot = seajs.noConflict();  

Luego de arranque es equivalente a los seajs anteriores.

 

Si su proyecto incluso definir identificadores también utilizados, no quieren a cambio. SeaJS es muy tolerante, también puede definir dejó escapar. como

var boot = seajs.noConflict(true);  

Lo anterior y algo más que un pase cierto. A continuación, el mundial definen ido. Luego hay que definir antes de usar boot.define lugar.

 

estudiantes jQuery usadas deben estar familiarizados con $ .noConflict método, SeaJS de noConflict similares.

 

Dos, SeaJS módulo de escritura

 

SeaJS definen módulo de función de escritura predeterminado mundial (disponible como para definir palabras clave de sintaxis), definen define tres parámetro id, deps, fábrica.

 

definir (id ?, deps ?, fábrica);

 

Esto es fácil de definir le recuerda AMD API única 's: definir la función. O confuso, no se entienden causa y SeaJS  RequireJS  diferencia definen el.

 

Tienen definen un mundial, el parámetro es de tres, y el nombre del parámetro correspondiente, también, serán erróneas SeaJS consiste en la realización de AMD.

 

De hecho antes de definir SeaJS y RequireJS dos parámetros que hagan lo mismo.

 

Identificación son cadenas, siga  Módulo Identificadores . deps refieren tipos de matriz módulo dependientes. Excepto que la tercera fábrica argumento, aunque el tipo de función son también, pero la importancia de los parámetros de fábrica son diferentes.

 

RequireJS los parámetros de fábrica en dos casos

a, y deps (Array) elementos corresponden. Eso DEP Hay unos pocos, hay varios argumentos en la fábrica.

define(['a', 'b'], function(a, b){
// todo
});

  

b, se fija a requerir, exportaciones, módulo (formato módulos / envolturas).

define(function(require, exports, module){
// todo
});

  

De esta manera, a finales de los RequireJS a  módulos / Envolturas  compromiso que sea compatible con él. Los SeaJS definen el apoyo de sólo el segundo RequireJS redacción: Módulos / envolturas.

Nota : SeaJS siguen los  módulos / Envolturas  y  módulos de E / 1.1.1 . Ambas especificaciones definen las palabras clave no son mencionados, el módulo Módulos / Embalaje define en la reivindicación module.declare no define. Sino sólo las especificaciones de AMD definen la definición. SeaJS no se dan cuenta de que mientras que AMD, sino que hace uso de un muy mal entendido identificador de definir.

 

 

Una vez dicho esto, todavía no ha comenzado a escribir un módulo. Empecemos desde el más sencillo

1, un módulo sencillo

define({
addEvent: function(el, type, fn){},
removeEvent: function(el, type, fn){},
fireEvent: function(el, type){}
});

  

Tal evento podría escribir módulos, y escribir un solo caso no es diferente. Más a menudo los datos puros módulo definido de esta manera. Es similar

var E = {
addEvent: function(el, type, fn){},
removeEvent: function(el, type, fn){},
fireEvent: function(el, type){}
};

  

2, el módulo de embalaje simple

define(function() {
// 一些内部辅助函数
// ...
function addEvent() {
// ..
}
function removeEvent() {
// ..
}
function fireEvent() {
// ..
}
return {
addEvent: addEvent,
removeEvent: removeEvent,
fireEvent: fireEvent
};
});

  

Ya sabes, en esta función anónima que puede hacer muchas cosas. Por último, basta con abrir las interfaces necesarias. Es similar

var E = function() {
// 一些内部辅助函数
// ...
function addEvent() {
// ..
}
function removeEvent() {
// ..
}
function fireEvent() {
// ..
}
return {
addEvent: addEvent,
removeEvent: removeEvent,
fireEvent: fireEvent
};
}();

  

3, el módulo de embalaje estilo NodeJS

 

Ambos NodeJS de ortografía ver un estilo trace ( módulos / 1.1.1 ), y vuelve a escribir el "modo 2" equivalente.

define(function(require, exports) {
// 一些内部辅助函数
// ...
function addEvent() {
// ..
}
function removeEvent() {
// ..
}
function fireEvent() {
// ..
}
// 使用exports导出模块接口,而非返回一个对象
exports.addEvent = addEvent;
exports.addEvent = removeEvent;
exports.addEvent = fireEvent;
});

  

Se puede ver el "Modo 2" La diferencia es:

1: función anónima toma dos parámetros requieren, las exportaciones.

2: Interfaz de exportación no es un objeto, sino un retorno a las exportaciones de uso.

Mientras que las exportaciones no son exactamente NodeJS de estilo? estudiantes observantes pueden encontrar este ejemplo requiere no se utiliza el parámetro, este es el punto siguiente.

 

4, hay módulo dependiente

 

SeaJS la "dependiente" tendrá que obtener la función requieren, aunque SeaJS definen el segundo parámetro es también deps medios "dependientes", pero es proporcionar herramientas de empaquetado ( el SPM ) utilizados. Además, se pasa de SeaJS requieren como parámetro, RequireJS requieren es una variable global en la función anónima.

 

Se definió anteriormente no depende de un módulo, el módulo es dependiente.

define(function(require, exports) {
var cache = require('cache');

// ...

exports.bind = bind;
exports.unbind = unbind;
exports.trigger = trigger;
});

  

El módulo de eventos depende de los módulos de caché, funciones, y hay dos parámetros requieren las exportaciones. A pesar de función anónima y definir la capa exterior, que es el NodeJS de formato estándar: la requieren función toma exportaciones de módulo dependientes derivan usando la interfaz del módulo convencional.

De hecho módulo que tiene SeaJS dependientes debe presionar el "modo 4" para escribir, es decir, debe ser embalado módulo, y la primera función de parámetros deben ser anónimo identificador  "la requieren." Que podrían requerir las palabras clave de sintaxis original para usar, aunque no es global.

 

Aquí nos fijamos en algunos de los fenómenos interesantes requieren parámetros de la función anónimos y exportaciones de

una, si la escritura no se requiere, lo que el resultado va a cambiar req.

define(function(req, exports) {
var cache = req('cache');

// ...

exports.bind = bind;
exports.unbind = unbind;
exports.trigger = trigger;
});

 

Firebug solicitudes de red como sigue

Ver dependiente "caché" no está cargado, por supuesto, JS informe ciertamente incorrecto.

 

b, sólo los parámetros de la función anónimos en req forma, las funciones internas todavía utilizan requieren.

define(function(req, exports) {
var cache = require('cache');

// ...

exports.bind = bind;
exports.unbind = unbind;
exports.trigger = trigger;
});

  

Ver las solicitudes de red

El módulo de "caché" en realidad solicitar hacia abajo.

 

Un vistazo de cerca al código anterior no requieren la declaración de funciones anónimas, y el parámetro es req en lugar de requerir. que

var cache = require('cache');

El requieren vienen?

 

Ver fuente SeaJS entendido, se definirá la función toString de la función anónima tomada mediante la comparación periódica Analizada en el que el "caché" (función parseDependencies privado).

 

También vemos que a pesar de la solicitud abajo caché, pero aún así el error, debido a que la fase de implementación requiere no está definido. Por lo que el módulo de escritura primer parámetro funciones dependientes deben requerir anónima y no se puede cambiar.

 

Dado que el uso regular de factory.toString y resuelve dependencias, y por lo tanto requieren el parámetro no puede ser una expresión, tales como

// require的参数不能是表达式运算
require("ui-" + "dialog");

 

No se puede requerir el uso de alias , como

// 不能将require赋值给另外一个变量
var req = require;
req("ui-dialog");

 

También se afirmó Opera Mobile no soporta la función de toString, por lo SeaJS no se puede utilizar (no se mide) en esta versión.

 

c, modificar las exportaciones a la expo

define(function(require, expo) {
var cache = require('cache');

// ...

expo.bind = bind;
expo.unbind = unbind;
expo.trigger = trigger;
});

  

Correr es ningún problema. El segundo argumento "exportaciones" se pueden personalizar. Obviamente SeaJS no a favor del cambio "exportaciones" a la otra, por lo que claramente violó el estilo NodeJS ( Módulos / 1.1.1 especificación del módulo) --- lo que utilizan "exportaciones" interfaz del módulo de exportación. Pero esto no puede ser ejecutada en SeaJS, las únicas convenciones artificiales.

 

5, el módulo de mezcla redacción

 

módulo de escritura se ha descrito anteriormente en diversas situaciones. De acuerdo con los NodeJS estilo: uso requiere acceso "dependientes" exportaciones uso de exportación "Interfaz". SeaJS que dependen de la adquisición de esta pieza se han restringido, es decir, debe utilizar requerir. Pero no tiene que utilizar las exportaciones de exportación, es decir, las exportaciones pueden ser reemplazados por otros. Incluso se puede utilizar directamente el "valor de retorno."

define(function(require) {
var cache = require('cache');

// ...

// 使用返回值导出接口
return {
bind: function() {},
unbind: function() {},
fire: function() {}
};
});

  

Sabemos que en NodeJS módulos sólo pueden ser un objeto. Eso siempre es un método para colgar las exportaciones. SeaJS Si utiliza la interfaz de exportación de las exportaciones, así, también, el módulo sólo puede ser objeto de JS. Si utiliza la interfaz de exportación "valor de retorno", entonces el módulo puede ser cualquier tipo de JS. Como se devolverá una función del tipo de módulo.

define(function(require) {
var cache = require('cache');

function ad() {
//...
}

// 函数类型的模块
return ad;
});

  

Tres, SeaJS de carga

 

A pesar de que ofrece una variedad de formas (asíncrono síncrono) de carga, la forma más fácil de escribir la etiqueta script directamente en la página. Después de la introducción de SeaJS, la mayor parte del tiempo de la entrada es el método seajs.use.

seajs.use tiene dos parámetros, el primer parámetro puede ser una cadena (nombre del módulo) o la matriz (múltiples módulos). El segundo parámetro es una función de devolución de llamada. Después se carga el módulo de devolución de llamada. El primer parámetro y un uno parámetros de la función de devolución de llamada por uno.

seajs.use('dom', function(dom) {
// todo with dom
});

  

A medida que usará el Reino módulo de función de devolución de llamada. Por supuesto, también proporciona un acceso directo a datos principales (con RequireJS).

 

 

La siguiente demostración escribir un evento completo módulo de eventos, que depende del módulo de memoria caché.

seajs-demo.zip

Artículos originales publicados 0 · ganado elogios 136 · vistas 830 000 +

Supongo que te gusta

Origin blog.csdn.net/xfxf996/article/details/103887841
Recomendado
Clasificación