JavaScript封装自己的库

封装自己的库

1. JavaScript立即执行语句

;(function(){
})();

(function(str1,str2){
	console.log(str1);
	console.log(str2);
})('11',22);

第二种

//----------------------------

;(function(global, factory) {
    console.log(global);
    console.log(factory);
}(this, function() {

}));

/********************************/

;(function(global, factory) {
    console.dir($);

    var factoryObj = factory();

    console.dir(factoryObj);

}(this, function() {

    function _init() {
        alert("test");
    }

    var _util = {
        init: _init
    }
    return _util;
}));

/********************************/

;(function(global, factory) {
    console.log(global);
    console.log(factory);
}('a', 'b'));

参考文章：javaScript中的立即执行函数

2. 设置全局绑定的对象

第一版

;(function($) {
	if (!window.project) {
		window.project = {};
	}
	window.project = {
		init: function() {
			alert("test");
		},
		show: function() {
			alert("test2");
		}

	};　　
})(jQuery);

此代码案例可以实现工厂函数库功能。

第二版

;(function($) {
	if (!window.project) {
		window.project = {};
	}
	function _init() {
			alert("test");
	}
	function _show() {
			alert("test2");
		}
	window.project = {
		init: _init,
		show: _show
	};　　
})(jQuery);

3. 实现jQuery插件

• BiliBili-JavaScript高级进阶-H5，73、jquery插件的概念与演示

;(function($){
   var _that;
   $.fn.color=function(c){
     _that = this;
     $(_that).css('color',c);
     return _that;
   }
})(jQuery);

$('body').color('red');

第一版

//自执行函数,带参
//jQuery插件，将对象绑定到jQuery对象上
;(function($) {
	console.log(jQuery);
    
    //第一种写法
	jQuery.prototype.showme = function() {
		alert("hello plugin");
	}
	
	/**
	 * 第二种写法
     * 两种写法效果相同，只是第二种需要重新加上构造器constructor:jQuery
     */
	jQuery.prototype = {
		constructor: jQuery,
		showme: function() {
			alert("hello plugin");
		}
	}
	// 调用方法：	$.prototype.showme();

    /**
     * 第三种使用jquery继承的方式
     * $.fn.extend()
     *  函数为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)。
     */
	$.fn.extend({
		showme: function() {
			alert("hello plugin");
		}
	})
	
})(jQuery);

调用写法：
$.fn.showme();
$('body').showme();

第二版

//jQuery插件入门
/**
  6. this关键字
     进入插件方法后，第一时间将this关键字（指向对象本身）存起来

  7. 确保$永远指向jQuery

  8. 正确使用分号

  9. 尽可能返回jQuery对象本身，
     为了实现链式调用

  10. jQuery插件固定格式
  ;(function($){
    var _that;//定义一个变量用于存放this关键字指向的对象本身

    var _插件名 = function(){
      _that = this;

      //实现插件功能的代码

      return that;
    }
    $.fn.插件名=_插件名
  })(jQuery);

*/


;(function($){
  var _that;//定义一个变量用于存放this关键字指向的对象本身

  function _showme(c){
    _that = this; //对象本身，进入方法时就将对象本身存起来，以便于后面使用；
    console.dir(_that);

    return _that;
  }
  $.fn.showme=_showme;
})(jQuery);

第三版

增加命名空间规则

;(function($) {
	var _that;

	//使用命名空间解决一个插件有多个方法的情况
	var obj = {
		printObj: function(config) {
			console.dir(config);
			console.log("obj"+config.msg);
			return undefined;
		},
		init: function() {
			console.log("调用init");
			return undefined;
		},
		show: function() {
			console.log("调用show");
			return undefined;
		},
		hide: function() {
			console.log("调用hide");
			return undefined;
		},
		getFileSizeMap:function(){
			var filesizeMap = new Map();
			filesizeMap.set('doc',25);//30MB
			filesizeMap.set('docx',25);//30MB
			filesizeMap.set('xls',15);//20MB
			filesizeMap.set('xlsx',15);//20MB
			filesizeMap.set('ppt',45);//50MB
			filesizeMap.set('pptx',45);//50MB
			return filesizeMap;
		}	
	}

	function _namespace(config) {
		_that = this;

        //obj[config.fn].apply(_that, [config]);
		var _val = obj[config.fn].call(_that, config);

		if(undefined==_val){
			return _that;
		}else {
			return _val;
		}
	}

	$.fn.namespace = _namespace;
})(jQuery);

//调用
$.fn.namespace({fn:"printObj"});

4. 我封装的库

方式一

; (function($) {

	function _init() {
		alert("test");
	}
	var _util = {
		init: _init,
	}

	function Cutil() {}

	function _circleUtility(config) {
		_that = this;
		_util[config.fn].apply(_that, [config]);
	}

	if (!window.CircleUtility) {
		window.CircleUtility = _circleUtility;
	}

	if (!window.Cutil) {
		window.Cutil = window.CircleUtility;
	}
})(jQuery)

方式二

; (function($) {

	function _init() {
		alert("test");
	}
	var _util = {
		init: _init,
	}

	function Cutil() {}

	function _circleUtility(config) {
		_that = this;
		_util[config.fn].apply(_that, [config]);
	}

	Cutil.prototype.circleUtility = _circleUtility;

	if (!window.Cutil) {
		window.Cutil = new Cutil();
	}
})(jQuery)

// 调用：
 Cutil.circleUtility({fn:'init'});

方式三

; (function($) {

	function _init() {
		alert("test");
	}
	var _util = {
		init: _init,
	}
	
	if (!window.Cutil) {
		window.Cutil = Object.create(_util);
	}
})(jQuery)

// 调用：
 Cutil.init()

4. 给对象的原型添加属性和方法。

function HashMap() {
	this.map = {};
}
HashMap.prototype = {
    //constructor: HashMap,//效果一致，另一种写法
	put: function(key, value) { // 向Map中增加元素（key, value)
		this.map[key] = value;
	},
	get: function(key) { //获取指定Key的元素值Value，失败返回Null
		if (this.map.hasOwnProperty(key)) {
			return this.map[key];
		}
		return null;
	},
	remove: function(key) { // 删除指定Key的元素，成功返回True，失败返回False
		if (this.map.hasOwnProperty(key)) {
			return delete this.map[key];
		}
		return false;
	},
	removeAll: function() { //清空HashMap所有元素
		this.map = {};
	},
	keySet: function() { //获取Map中所有KEY的数组（Array）
		var _keys = [];
		for (var i in this.map) {
			_keys.push(i);
		}
		return _keys;
	}
};
HashMap.prototype.constructor = HashMap;

5. 回调函数

1. 将方法对象作为参数进行传递，并调用该方法

function test1(str){
  console.log(str);
}
function test(callback){
  if(test1){
    callback("hello");
  }
}

//调用
test(test1)

2. eval()方法

eval的参数既可以是字符串，也可以是function对象。

eval("x=10;y=20;document.write(x*y)");
document.write("<br>" + eval("2+2"));
document.write("<br>" + eval(x+17));

附录

记录的代码

//自执行函数,带参
//jQuery插件，将对象绑定到jQuery对象上
;(function($) {
	var _that;

	var _util = {
		printObj:function(config){
			console.log(config.msg);
		},
		saveObj:function(config) {
			$('#btn_sub', config.iframe.document).click();
		}
  }

	function _circleUtility(config) {
		_that = this;
		_util[config.fn].apply(_that, [config]);
	}
	$.fn.circleUtility = _circleUtility;
})(jQuery);
//调用
//$.fn.namespace({fn:"printObj"});