Vista previa del código
/**
* CommonUtil 0.0.1
* author 78**[email protected]
*/
;(function (win, doc, $) {
var CommonUtil = {
init: function () {
this.quickLink();
},
/**
* ajax封装
*
* @param url
* @param data
* @param sucFn
* @param isAsync
* @param errFn
*/
getJson: function (url, data, sucFn, isAsync, errFn) {
$.ajax({
url: url,
data: data,
async: isAsync ? isAsync : true,
success: function (res) {
if (typeof sucFn == 'function') sucFn(res);
},
error: function (err) {
if (typeof errFn == 'function') errFn(err);
}
})
},
/**
* 格式化时间戳
*
* @returns {
{year: number, month: number, weeks: string, day: number, hours: number, minutes: number, seconds: number, milliseconds: number}}
*/
formatDate: function () {
var d = new Date();
var weeks = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
function addZero(val) {
if (val.length < 2) {
return '0'.concat(val);
}
return val;
}
return {
year: d.getFullYear(),
month: addZero((d.getMonth() + 1).toString()),
weeks: weeks[d.getDay()],
day: addZero(d.getDate().toString()),
hours: addZero(d.getHours().toString()),
minutes: addZero(d.getMinutes().toString()),
seconds: addZero(d.getSeconds().toString()),
milliseconds: d.getMilliseconds()
};
},
/**
* 快捷链接
*
* @returns {CommonUtil}
*/
quickLink: function () {
$('body').on('click', '*[data-link]', function () {
var _url = $(this).data('link');
if (_url) {
location.href = _url;
}
});
return this;
},
/**
* 获取地址栏后带参数
*
* @returns {*}
*/
getQueryString: function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
},
/**
* 创建script标签
*
* @param src
* @param parent
*/
createScript: function (src, parent) {
var tag = doc.createElement('script');
tag.src = src;
parent.appendChild(tag);
},
/**
* 获取本地存储中的值
*
* @param name
* @returns {*}
*/
getLocalData: function (key) {
var result = localStorage.getItem(key);
try {
if ('object' == typeof JSON.parse(result)) return JSON.parse(result);
} catch (e) {
return result;
}
},
/**
* 设置本地存储值
*
* @param key
* @param value
* @param isObj
*/
setLocalData: function (key, value, isObj) {
if (isObj) {
return localStorage.setItem(key, JSON.stringify(value));
}
localStorage.setItem(key, value);
},
/**
* 移除本地存储中的值
*
* @param keyList 以数组格式传入字段名
*/
removeLocalData: function (keyList) {
$.each(keyList, function (index, obj) {
localStorage.removeItem(obj);
});
}
};
win.CommonUtil = CommonUtil;
}(window, document, jQuery));
jQuery(function () {
CommonUtil.init();
});
¿Qué es el embalaje?
La encapsulación, es decir, oculta las propiedades y los detalles de implementación del objeto y solo expone la interfaz al exterior.
En lugar de explicar el oscuro concepto de encapsulación , prefiero describir la encapsulación que entiendo en lengua vernácula:
1. ¿Qué código necesita encapsulación?
Respuesta: Los más utilizados, los que tienen mucho código y los que tienen lógica compleja.
El más utilizado, por supuesto, para ser envasado, este getJsonmétodo. Aunque el paquete del método jQuery ajax ha sido lo suficientemente simple, pero cualquiera que haya escrito una docena de veces $.ajaxtendrá muchos problemas, menos capaz de escribir una sola línea es una línea, adhiriéndose a lo que se puede considerar una de las ideas centrales de jQuery de el Write Less .
Creo que la lógica del código con mucho código no es simple. A lo largo del código anterior, solo formatDatemétodo un poco más que el número de filas, la lógica es relativamente simple, ¿de verdad ?. Aunque Baidu tiene muchas formas de formatear la hora, no son muy buenas para cumplir con los requisitos.
Además de escribir menos, hacer más , los beneficios de la encapsulación también son de complejos a simples . Escribe menos y haz más. También está la abstracción de cosas complejas en cosas simples, esto es lo que entiendo por encapsulación.
paso
1. Primero escribe un shell:
;(function(win, doc, $) {
}(window, document, jQuery));
Escribamos un protector de shell de función anónima que se auto-invoca, principalmente para evitar la contaminación de variables globales, porque no es bueno si usted y sus colegas tienen el mismo nombre de variable. Esta es una buena práctica de codificación.
2. Cree un objeto literalmente:
var CommonUtil = {};
Escriba un initmétodo para llamar a algún método de ejecución directa, como quickLinkel método. Este método se usa en lugar a标签de. Por ejemplo, al saltar de la lista de productos a la página de detalles del producto, de la manera tradicional, la etiqueta a envuelve el div y el elemento en línea anida el elemento a nivel de bloque, que no cumple con la semántica, y escribe una etiqueta más. y escribir algunas líneas más de estilo.
quickLinkEl método se utiliza de la siguiente manera:
<div data-link='https://www.baidu.com'>百度一下？</div>
El principio es simple, por eventos confiados a data-linkeventos de vinculación de propiedad del elemento, luego haga clic en el elemento location.hrefsaltando logrado.
De hecho, quickLinkinadecuado. Por ejemplo, solo puede saltar a la página actual, no a una nueva ventana, así que agregué un juicio más sobre la base del código original, de la siguiente manera:
$('body').on('click', '*[data-link]', function () {
var _url = $(this).data('link').toString();
var _target = $(this).get(0).hasAttribute('target');
if (!!_url && _target) {
window.open(_url);
} else if (!!_url) {
location.href = _url;
}
});
como esto:
<div data-link="https://www.baidu.com" target>百度一下？</div>
El método nativo de J al hasAttributedeterminar si el elemento tiene atributos, devuelve un valor booleano para determinar si adoptar window.openo location.href.
Tres, expuestos al objeto de la ventana.
win.CommonUtil = CommonUtil;
Al exponernos al windowobjeto, podemos llamar al método en su propio paquete de cualquiera de los otros js. ¿No vuelve a ser una variable global, quítate los pantalones y tira un pedo? Pero no hay nada de malo en escribir de esta manera.
jQuery(function () {
CommonUtil.init();
});
Finalmente, se llama al método de inicialización después de que se carga el DOM.
para resumir
La intención original de encapsular el código es principalmente que me gusta escribir el código de forma concisa. El código está escrito para que la gente lo vea, intervalos razonables, nombres populares y la escritura es simple y elegante, y las personas que lo leen también están dispuestas a leerlo. El paquete anterior es relativamente simple, de hecho, también puede lograr un paquete más profundo de acuerdo con la especificación de la interfaz de fondo, y no es necesario repetirlo aquí.