JavaScript的模块化开发

这几天基于js写了一些自己的插件，有人跟我说这个东西网上一大片，你还写它干嘛（首先说明本人是后端开发）。的确，网上一大片，我为什么要写这些插件呢，是因为我觉得，写总比不写的好，一、是能够加深理解js的一些使用原理。二、方便以后能看得懂一些好的js插件，继而加强对js的知识体系。总之就是加强自己吧！

好了不废话了，看看下面我写的插件：

一、基于原生js的form验证表单插件，可能有些不足，但后面会完善：

效果截图：

上面就是这个插件的效果图，下面直接撸代码：

//调用
/*		var verifyArray = [{
				'id': 'phonenumber',
				'reg': /^1(3|4|5|7|8)\d{9}$/,
				'erromsg': '手机号格式错误'
			},
			{
				'id': 'username',
				'require': true
			},
			{
				'id': 'password',
				'reg': /[a-zA-Z].*[0-9]|[0-9].*[a-zA-Z]$/,
				'erromsg': '由字母,数字组成'
			}
		];
		function tijiao() {
			formVerify._init(document.getElementById('myform'), {
					'verifyArray': verifyArray,
					'default_icon': '<span class="iconfont icon-tishi"></span>'
				}) ?
				(function requests() {
					alert('验证通过');
				})() : (function requests() {
					alert('验证失败');
				})();

		}*/

;
(function(window) {
	"use strict";

	var formVerify = {
			_init: undefined,
			verifyArray: undefined,
			default_erromsg: '必填项不能为空',
			default_fontcolor: '#EA2000',
			default_icon: '!',
			className: 'test'
		},
		_global;

	_global = (function() {
		return this || (0, eval)('this');
	}());

	/*window.formVerify = formVerify;*/
	!('formVerify' in _global) && (_global.formVerify = formVerify);

	/*function formVerify(el,options){
		alert(this);
	}*/

	formVerify._init = function(el, options) {
		if(options.verifyArray instanceof Array) {
			return n(el, options.verifyArray, t(options));
		} else {
			console.error('参数必须要为数组类型');
		}
	}

	function n(e, t, p) {
		var r = document,
			c = p,
			verify = false;

		e.addEventListener('submit', function(ev) {
			ev.preventDefault()
		});

		for(var i = 0; i < t.length; i++) {
			verify = true;
			var elment = e.querySelector("#" + t[i].id),
				reg = t[i].reg,
				erromsg = t[i].erromsg ? t[i].erromsg : c.default_erromsg;
			if(!elment) {
				console.error("元素：" + t[i].id + "没找到==");
				continue;
			}
			/*获取元素坐标*/
			/*classie.add(e.querySelector('.' + t[i].className), 'test');*/
			/*
			 * var a = (reg && !reg.test(elment.value)) || t[i].require;
			 * 这里逻辑判断，如果没有正则表达式验证，再如果为必填项，那么就进入判断
			 * */
			if((reg && !reg.test(elment.value)) || (t[i].require && !elment.value)) {
				var o;
				r.querySelector('.' + t[i].id) ? (o = r.querySelector('.' + t[i].id)) : (o = r.body.appendChild(r.createElement("div")), o.className = t[i].id);
				elment.onfocus = function() {
					classie.remove(elment, formVerify.className);
					o.innerHTML = '';
				}
				verify = false;
				classie.add(elment, formVerify.className);
				o.innerHTML = c.default_icon + erromsg;
				var p = o.style;
				p.color = c.default_fontcolor;
				p.position = "absolute";
				p.fontSize = "13px";
				p.display = 'block';
				p.top = elment.offsetTop + r.documentElement.scrollTop + r.body.scrollTop + "px";
				p.left = elment.offsetLeft + elment.offsetWidth + r.documentElement.scrollLeft + r.body.scrollLeft + "px";
				return false;
			} else {
				r.querySelector('.' + t[i].id) ? r.querySelector('.' + t[i].id).style.display = 'none' : null;
			}
		}
		return verify;
	}

	function t(options) {
		if(!options) {
			return formVerify;
		}
		var n = {};
		Object.keys(formVerify).forEach(
			function(i) {
				n[i] = options.hasOwnProperty(i) ? options[i] : formVerify[i];
			}
		)
		return n;
	}

})(window);

实现逻辑：

 

知识点：

①.是怎么判断正则表达式和必填项的？

ps：通过逻辑判断，这个input是需要正则判断还是必填项判断，实现：（reg && reg.test(value) || (t[i].reqiure && !value)）,

reg：是正则表达式，value：input的值，t[i].reqiure是判断是否为必填项，默认为false（不判断）。

上面的逻辑判断可以看为下面逻辑：

if((reg && reg.test(value))){
//验证正则项
}else if(t[i].reqiure && !value){
//验证为必填项
}else{
//不验证项
}

所以说，在js里逻辑判断是非常实用的，它可以增强代码的精炼性、性能效率、可读性、维护性。

②.js原生的参数合并，这个有点类似于jQuery的，$.extends({},Arry,nowArray);

function n(options){
    if(!options){
        return formVerify;    
    }
    var n = {};
    Object.keys(formVerify).forEach{
        function(i){
            n[i] = options.hasOwnProperty(i)?options[i]:formVerify[i];
        }
    }
    return n;
}