简单模拟jQuery创建对象的方法，以及封装一个js动画框架

今天无事点开了N年未点开的慕课网，看了一个js动画框架的视频，心血来潮用jQuery的方法封装了一下，虽然不如jQuery，但是还是有点点所获。

什么都不说，直接上代码:

/**

 * 这是框架的唯一对象，使用jQuery框架的创建方法

 * @class MyAnimation

 * @constructor 

 */
function MyAnimation(Selector){
	//返回MyAnimation原型链中init()方法创建的对象
	return new MyAnimation.prototype.init(Selector);
}

/**

 * 这是对象的初始化方法

 * @method init

 * @param {string} Selector 选择对象

 * @return 

 */
function init(Selector){
  var el = null;
  var identifier = "(?:\\\\.|[\\w-]|[^\0-\\xa0])+";
  var match = {
	"all": new RegExp( "^\\.(" + identifier + ")" )
  }; 		

  //匹配
  if(match["all"].exec(Selector) != null){
	  el = document.querySelectorAll(Selector);
  }else{
	  el = document.querySelector(Selector);
  }

 /**
  *	实现css样式的改变

  * @method changeStyle

  * @for MyAnimation

  * @param {Object} obj 元素对象(带timer)

  * @param {json} json json对象格式 --> {attr(String):String}(同时变化的属性和值)

  * @param {function} callback 回调函数，用于链式动画

  * @return {void}

  */　　//jQuery --> animate
   this.changeStyle = function(obj, json, callback){
	 clearInterval(obj.timer);
	 var _this = this; //保存init()
	 //一个定时器监视所有属性变化
	 obj.timer = setInterval(function(){
		 var flag = true; //判断是否所以的运动都完成了
		 for(var attr in json){
			 //初始值
			var icur = 0;
			//判断属性，分别处理
			if(attr == "opacity"){
				//0.07 * 100 --> 7.000000001 --> round --> 7
				icur = Math.round(parseFloat(_this.getStyle(obj, attr)) * 100);
			}else{
				//console.log(_this);
				icur = parseInt(_this.getStyle(obj, attr));
			}
			//计算速度
			var speed = (json[attr] - icur) / 8;
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
			/*
			以下代码是不对的，因为当有一个运动到达目标，就关闭了定时器
			if(icur == json[target]){
				clearInterval(timer);
			}
			*/
			//有运动未完成就会设置为false
			if(icur != json[attr]){
				flag = false;
			}
			if(icur == "opacity"){
				obj.style.filter = ‘alpha(opacity:‘+ icur + speed +‘)‘;
				obj.style.opacity = (icur + speed) / 100;
			}else{
				obj.style[attr] = icur + speed + ‘px‘;
			}
		}
		//已经遍历了attr，判断是否所有运动都完成了
		if(flag){
			clearInterval(obj.timer);
			//回调
			if(callback){
				console.log(_this);
				callback(_this);
			}
		}
	 }, 30);
 }
 /**

  * 获取style属性值

  * @method getStyle

  * @for MyAnimation  

  * @param {Object} obj 元素对象  

  * @param {String} attr 元素对象属性值

  */
 this.getStyle = function(obj,attr){
	 if(obj.currentStyle){
		 return obj.currentStyle[attr];
	 }else{
		 return getComputedStyle(obj,false)[attr];
	 }
 }
}

MyAnimation.prototype.init = init;
//使init()创建的对象指向MyAnimation
MyAnimation.prototype.init.prototype = MyAnimation.prototype;

//创建一个名为MA的MyAnimation外部对象引用
var MA = window.MyAnimation;　　

原文地址：https://www.cnblogs.com/githubMYL/p/8654677.html