(function(){ console.log('this is a function be called immediately.') })();第一对小括号中是一条语句,返回一个函数,然后通过第二对小括号对这个函数直接进行调用。
//代码段2 (function(_){ console.log(_); //输出:window,视浏览器输出的具体内容不同 })(this);在全局上下文中this指向window。
//代码段3 var f = (function(_){ function func(){ console.log('i am invoked by ' + this , 'arguments:' + _ );// output : i am invoked by [object Window] arguments:param value } return func; })('param value'); f();
//代码段4 (function(){ function func($$){ console.log('i am invoked by ' + this ); } window.func = func; // 相当于直接定义了全局函数func window.$$ = new func(); //相当于定义了全局变量 $$ ,在JavaScript中,$$ 是合法的变量名。 })(); func(); console.log($$.toString());// output : [object Object]
代码段5
<!DOCTYPE html> <html> <head> <title>jQ</title> <meta charset="utf-8"> <script type="text/javascript" language="javascript"> (function(){ var jQ = function(id){ if(!id){ return {}; // return empty object } if(id[0]=='#'){ id = id.substr(1);//remove the first letter '#' } var domEle = document.getElementById(id); if(!domEle){ return {}; } return domEle; } window.jQ = jQ; })(); console.log(jQ('#divTest')); </script> </head> <body> <div id="divTest">blabla</div> </body> </html>
//代码段6 (function(){ var jQ = function(id){ var ret = new jQ(); ret.innerDom = 'blabla'; return ret; } jQ.prototype = { innerDom : null } window.jQ = jQ; })(); console.log(jQ('#divTest'));
//代码段7 (function(){ var jQ = function(id){ var ret = jQ.prototype.getInstance(id); return ret; } jQ.prototype = { innerDom : null, getInstance :function(id){ //todo : init innerDom by id return this; // 调用者,即jQ } } window.jQ = jQ; })(); console.log(jQ('#divTest')===jQ('#divTest1')); // output : true
//代码段8 (function(){ var jQ = function(id){ var ret = new jQ.prototype.getInstance(id); // 增加new关键字 return ret; } jQ.prototype = { innerDom : null, getInstance :function(id){ //todo : init innerDom by id return this; // 调用者,即jQ } } window.jQ = jQ; })(); console.log(jQ('#divTest')===jQ('#divTest1')); // output : false
//代码段9 (function(){ var jQ = function(id){ var ret = new jQ.prototype.getInstance(id); return ret; } jQ.prototype = { innerDom : null, getInstance :function(id){ //todo : umimpl init innerDom by id this.innerDom = 'dom by '+id; return this; //this调用者,即新创建的对象 }, html:function(){ //todo : impl the method return this.innerDom;//this调用者,即新创建的对象 } } jQ.prototype.getInstance.prototype = jQ.prototype;//新增加代码,由于是传引用,不用担心循环引用的问题 window.jQ = jQ; })(); console.log(jQ('#divTest').html()); //output : dom by #divTest console.log(jQ('#divTest2').html()); //output : dom by #divTest2
//代码段10 <!DOCTYPE html> <html> <head> <title>jQ</title> <meta charset="utf-8"> </head> <body> <div id="divTest">blabla</div> <script type="text/javascript" language="javascript"> (function(){ var jQ = function(id){ var ret = new jQ.prototype.getInstance(id); return ret; } jQ.prototype = { innerDom : null, getInstance :function(id){ if(id && id[0]=='#'){ id = id.substr(1);//remove the first letter '#' } if(id){ var elm = window.document.getElementById(id); this.innerDom = elm; } return this; }, html:function(newhtml){ if(arguments && arguments.length>0){ if (this.innerDom && this.innerDom.innerHTML){ this.innerDom.innerHTML = newhtml; } }else{ return this.innerDom && this.innerDom.innerHTML; } } } jQ.prototype.getInstance.prototype = jQ.prototype; window.jQ = jQ; })(); console.log(jQ('#divTest',window).html()); //output : blabla jQ('#divTest',window).html('BRAND NEW'); //页面内容随之改变 console.log(jQ('#divTest',window).html()); //output : BRAND NEW </script> </body> </html>
功德圆满!
Java程序员的JavaScript学习笔记(7——jQuery基本机制)
原文地址:http://blog.csdn.net/stationxp/article/details/40384477