javascript 的函数声明和(匿名)闭包以及执行顺序

主要是一些基本概念和模块方式的编程,以及不同模块设计方式的扩展方法还是很不错的,值得看看
一些非常好的设计思路和设计方案可以增强代码的易读性,直观、易于维护和扩展。
比如对于函数的声明和函数的表达式方式
以及函数的闭包 、匿名闭包
函数的声明和函数的表达式 执行选后的顺序区别
条件语句内部不要使用声明的方式来声明函数,而是要用表达式方式

部分来源于山姆大叔的javascript技巧

function foo(){}//声明,程序的一部分

(function foo(){});//分组操作符,内部只能包含表达式

var bar = function(){}; //表达式,赋值表达式

new function bar() {};//new表达式

(function() {
	function bar() {};//声明,函数体内部的一部分
})();



//函数的声明和函数的表达式的执行先后有区别,
alert(fn());

function fn()
{
	return 'hello world';
}


alert(fn2());
var fn2 = function ()
{
	return 'hello';
}

//条件语句内部不要声明函数,不过可以使用函数表达式

if(true) {
	var foo = function() {
		//code
	}
}

/*
函数声明的规则
函数声明只能出现在程序或者函数体内部,从句法上讲,他们不能出现在block中({...}),e.g 不能出现在if,while,for语句中,因为block中只能包含statement语句(表达式语句),而不能包含函数声明这样的源元素。another way,
*/

//Module组件,模块

var Calculator = function (eq) {
	var eqCtl = document.getElementById(eq);


	return {
		//公开暴露的成员
		add: function (x,y) {
			var val = x + y;
			eqCtl.innerHTML = val;
		}
	}
}


var calculator  = new Calculator('eq');

calculator.add(2,2);


//匿名闭包
(function () {
	// ...所有的变量和function都在这里声明,并且作用域也只能在这个匿名闭包里
	//... 但是这里的胆码依然可以访问全局的对象
}());


(function($,yahoo) {
	//
}(jQuery,yahoo))


//类库封装模式
var blogModule = (function(){
	var
		my = {},
		privateName = 'blog';

	function privateAddTopic(data) {
		//code
		return data;
	};

	my.Name = privateName;
	my.AddTopic = function (data) {
		return privateAddTopic(data);
	}
	//返回内部定义,作为全局可访问
	return my;

}())

//e.g

 var $  = (function(){
 	var 
 		_self = {};//声明一个对象

 	//内部私有函数
 	function handle(data) {
 		console.info("handle now");
 		return data;
 	}

 	//可用于全局调用的变量
 	_self.Name = 'sunshine';

 	//可以用于全局调用的函数表达式
 	_self.pushAll = function (data) {
 		console.info("push now");
 		return data+","+_self.Name;
 	}

 	//最关键的一步
 	return _self;

 }())


//extend
/*
可以实现blogModule的自我扩展
*/
var blogModule = (function (my) {
	my.AddPhoto = function() {
		//code
	};
	return my;
}(blogModule))


//e.g

var $ = (function(obj){
	_self = obj;
	_self.handle = function() {
		console.info(_self.Name);
	}

	return _self;

} ($))


//
var blogModule = (function(my){
	var _private = my._private = my._private || {},
		_seal = my._seal = my._seal || function() {
			delete my._private;
			delete my._seal;
			delete my._unseal;
		},
		_unseal = my._unseal = my._unseal || function () {
			my._private = _private;
			my._seal = _seal;
			my._unseal = _unseal;
		};

		return my;

}(blogModule || {}))


//子模块

blogModule.CommentSubModule = (function () {
	var my = {};
	// ...
	return my;
}());


//定义个一个Module(最经典,也最好用的设计方式,注意其细节方面)
var Sunshine = (function(_self){

	var 
		version = '1.0.0',
		author = 'sunshine';

	_self.say = function (words) {
		console.info(words);

	};

	_self.run = function (d) {
		_self.say("i'm running~");
	};

	_self.jump = function (d) {
		_self.say("i'm jumping~");
	};

	return _self;

}(Sunshine || {}));//这样可以允许在使用的时候,随意对这个进行扩展,也很方便的可以扩展插件,使用内部方法


//扩展为子模块
Sunshine.work = function(d) {
	this.say("i'm working~");
}

Sunshine.work();

//松耦合扩展
var Sunshine = (function(_self) {
	_self.version = 2;
	return _self;
} (Sunshine || {}))


function foo () {
	// code...
	console.info(1);
}()


//2
var foo = (function() {
	console.info(1);
}());
//3
(function foo() {
	console.info(1);
} ())


var obj = {a:1,b:2,c:3};

for(var = 0; i < 3; i++) {
	
}

posted @ 2016-10-31 11:41  穿越的一只小猪  阅读(965)  评论(0编辑  收藏  举报