zoukankan      html  css  js  c++  java
  • 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++) {
    	
    }
    
    
  • 相关阅读:
    CSS设置行高
    微信小程序-水平垂直居中
    CSS布局
    HTML学习笔记—标签
    微信小程序--通过请求网页获取信息并显示
    docker 安装完mysql 后客户端无法访问
    Docker
    docker安装成功启动失败
    嵌入式Servlet容器自动配置和启动原理
    springboot外置的Servlet容器
  • 原文地址:https://www.cnblogs.com/osinger/p/6015304.html
Copyright © 2011-2022 走看看