8.1.13 优化 jQuery 插件 -- 添加事件日志
在传统开发中，软件都包含有事件日志，这样就可以在事件发生时或发生后进行跟踪。在 JavaScript 程序调试中，我们常常使用 alert() 方法来跟踪进程，但是这种做法影响了程序的正常流程，不符合频繁、实时显示事件信息。我们可以模仿其他软件中的调试台 log() 函数，借助这个函数将事件日志信息输出到独立的日志文件中，从而避免中断页面交互进程。
首先，我们为 jQuery 对象添加一个全局函数 log() 。在这个函数中，将把发生的事件信息写入事件日志包含框中。实现代码如下。
- jQuery.log=function(msg){
- varhtml=jQuery('<divclass="log"></div>').text(msg);
- jQuery(".logbox").append(html);
- };
- <scripttype="text/javascript">
- jQuery.log=function(msg){
- varhtml=jQuery('<divclass="log"></div>').text(msg);
- jQuery(".logbox").append(html);
- };
- $(function(){
- $("input").click(function(event){
- vare=event.type;
- $.log(e);
- });
- $("input").mouseover(function(event){
- vare=event.type;
- $.log(e);
- });
- $("input").mouseout(function(event){
- vare=event.type;
- $.log(e);
- });
- });
- </script>
- </head>
- <body>
- <inputtype="button"value="提交按钮"/>
- <divclass="logbox"></div>
- </body>
- (function($){
- $.extend($.fn,{
- log:function(msg){
- varhtml=jQuery('<divclass="log"></div>').text(msg);
- returnthis.each(function(){
- jQuery(".logbox").append(html);
- });
- }
- });
- })(jQuery);
- <scripttype="text/javascript">
- (function($){
- $.extend($.fn,{
- log:function(msg){
- varhtml=jQuery('<divclass="log"></div>').text(msg);
- returnthis.each(function(){
- jQuery(".logbox").append(html);
- });
- }
- });
- })(jQuery);
- $(function(){
- $("h1").click(function(event){
- vare=event.type;
- $(this).log(this.nodeName.toLowerCase()+"."+e);
- });
- $("p").mouseover(function(event){
- vare=event.type;
- $(this).log(this.nodeName.toLowerCase()+"."+e);
- });
- $("input").mouseout(function(event){
- vare=event.type;
- $(this).log(this.nodeName.toLowerCase()+"."+e);
- });
- });
- </script>
- </head>
- <body>
- <h1>标题文本</h1>
- <inputtype="button"value="提交按钮"/>
- <p>段落文本</p>
- <divclass="logbox"></div>
- </body>
- <scripttype="text/javascript">
- (function($){
- $.extend($.fn,{
- log:function(msg){
- returnthis.each(function(){
- var$this=$(this);//获取当前元素
- while($this.length){//如果存在当前元素
- var$logbox=$this.find(".logbox");//在当前元素内搜索是否存在日志元素
- if($logbox.length){//如果存在日志元素
- varhtml=jQuery('<divclass="log"></div>').text(msg);
- $logbox.append(html);
- break;//跳出检索
- }
- $this=$this.parent();//检索上一级匹配元素
- }
- });
- }
- });
- })(jQuery);
- $(function(){
- $("h1").click(function(event){
- vare=event.type;
- $(this).log(this.nodeName.toLowerCase()+"."+e);
- });
- $("p").mouseover(function(event){
- vare=event.type;
- $(this).log(this.nodeName.toLowerCase()+"."+e);
- });
- $("input").mouseout(function(event){
- vare=event.type;
- $(this).log(this.nodeName.toLowerCase()+"."+e);
- });
- });
- </script>
- </head>
- <body>
- <h1>标题文本</h1>
- <inputtype="button"value="提交按钮"/>
- <p>段落文本</p>
- <divclass="logbox"></div>
- </body>
- (function($){
- $.extend($.fn,{
- log:function(msg){
- if(typeofmsg=="object"){//如果参数为对象类型，则解析该对象包含的信息
- varstr="{";
- $.each(msg,function(name,value){//遍历对象成员
- str+=name+":"+value+",";
- });
- str=str.substring(0,str.length-2);//消除最后一个成员的逗号
- str+="}";
- msg=str;//把解析的对象信息返回给参数变量
- }
- returnthis.each(function(){
- var$this=$(this);//获取当前元素
- while($this.length){//如果存在当前元素
- var$logbox=$this.find(".logbox");//在当前元素内搜索是否存在日志元素
- if($logbox.length){//如果存在日志元素
- varhtml=jQuery('<divclass="log"></div>').text(msg);
- $logbox.append(html);
- break;//跳出检索
- }
- $this=$this.parent();//检索上一级匹配元素
- }
- });
- }
- });
- })(jQuery);
- $(function(){
- $("h1").click(function(event){
- $(this).log({
- nodeName:this.nodeName.toLowerCase(),
- eventType:event.type
- });
- });
- $("p").mouseover(function(event){
- $(this).log({
- nodeName:this.nodeName.toLowerCase(),
- eventType:event.type
- });
- });
- $("input").mouseout(function(event){
- vare=event.type;
- $(this).log(this.nodeName.toLowerCase()+"."+e);
- });
- });
- </script>
- </head>
- <body>
- <h1>标题文本</h1>
- <inputtype="button"value="提交按钮"/>
- <p>段落文本</p>
- <divclass="logbox"></div>
- </body>
8.1.14 创建 jQuery 插件应注意的问题
由于插件结构简单，创建比较容易，对于初学者来说它简单易学，对于高手来说它很灵活，因此网上共享的 jQuery 插件数量急速上升。另外，jQuery 允许使用多种风格创建插件，如何遵守公共规则，是很多初学者必须注意的问题。
jQuery 开发团队制定了通用规则，为插件用户创建了一个通用而可信的环境。因此，建议读者在创建插件中遵守这些规则，确保自定义的插件与其他代码和平相处，并获得广大用户的认可。
创建 jQuery 插件应注意以下几个问题。
1.命名规则
如果希望用户查看文件时能立即知道这是一个什么插件，统一文件名称是必须的。我们可以遵循这样的命名规则： jquery.plug-in_name.js 。
其中 plug-in_name 表示插件的名称，在这个文件中，所有全局函数都应该包含在名为 plug-in_name 的对象中。如果插件只有一个函数，则可以考虑使用 jQuery.plug-in_name() 形式命名。
插件中的对象方法可以灵活命名，但是应保持相同的命名风格。如果定义多个方法，建议在方法名前添加插件名前缀，以保存清晰。不建议使用过于简短的名称，或者语义含糊的缩写名，或者公共方法名，如 set() 、get() 等，这样很容易与外界的方法混淆。
2.基本思想
所有新方法都附加到 jQuery.fn 对象上，所有新功能都附加到 jQuery 对象上。这是实际编码过程中最重要的规则。
3.方法内的 this 关键字
在插件方法中，this 关键字用于引用 jQuery 对象，这有利于插件编写，它让所有插件在引用 this 时，知道从 jQuery 接收到哪个对象。所有 jQuery 方法都是一个 jQuery 对象的环境中调用的，因此函数体中 this 关键字总是指向该函数的上下文，即 this 此时是一个包含多个 DOM 元素的数组。
4.迭代匹配元素
使用 this.each() 迭代匹配的元素，这是一种可靠而有效地迭代对象的方式。
出于性能和稳定性考虑，推荐所有的方法都使用它迭代匹配的元素。无论 jQuery 对象实际匹配的元素有多少，所有方法都必须以适当方式运行，一般来说，应该调用 this.each() 方法来迭代所有匹配的元素，然后再依次操作每个 DOM 元素。
****注意：在 this.each() 方法体内，this 关键字就不再引用 jQuery 对象，而是引用当前匹配的 DOM 元素对象。****
5.方法返回值。
所有方法都应该返回一个值，除了特定需求方法外，所有方法都必须返回 jQuery 对象。
除了需要方法返回计算值或者某个特定对象等，一般方法都应该返回当前上下文环境中的 jQuery 对象，即 this 关键字引用的数组。通过这种方式，可以保持 jQuery 框架内方法的连续行为，即方法连缀写法。jQuery 方法的顺序链非常著名，如果编写打破链条的插件，它就会给用户开发带来诸多不方便。
如果匹配的对象集合被修改，则应该通过调用 pushStack() 方法创建新的 jQuery 对象，并返回这个新对象，如果返回值不是 jQuery 对象，则应该明确说明。
6.方便压缩
插件中定义的所有方法或函数，在末尾都必须加上分号(即 ;) ，以方便代码压缩。压缩 JavaScript 文件是最佳实践，若大于最小值会让自定义插件很快就被用户抛弃。
7.jQuery 和 $ 有区别
在插件代码中总是使用 "jQuery" ，而不是 "$" 。$ 并不总是等于 jQuery ，这个很重要，如果用户使用 var JQ = jQuery.noConflict() ;函数更改 jQuery 别名，那么就会引发错误，另外其他 JavaScript 框架也可能使用 $ 别名。
在复杂的插件中，如果全部使用 "jQuery" 代替 "$" ，又会让人难以接受这种复杂的写法，为了解决这个问题，建议使用如下插件模式。
(function($){
// 在插件包中使用 $ 代替 jQuery
})(jQuery);
这个包装函数接受一个参数，该参数传递的是 jQuery 全局对象，由于参数被命名为 $ ，因此在函数体内就可以安全使用 $ 别名，而不用担心命名冲突。
上述这些规则在插件代码中都必须遵守，如果不遵守这些插件规则，那么自己开发的插件就得不到广泛应用和推广。因此，遵守这些规则非常重要，它不仅能保证插件代码的统一性，还能增加插件的成功几率。
