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

Posted web_小隆

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单模拟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;  

以上是关于简单模拟jQuery创建对象的方法,以及封装一个js动画框架的主要内容,如果未能解决你的问题,请参考以下文章

封装几个简单的jQuery方法

js框架封装,模拟jQuery封装

jQuery是啥

继续封装jQuery框架的模块功能

模拟jQuery--获取事件的封装

jQuery图片轮播轮播实现并封装