<![CDATA[思想之地]]> http://be-evil.org/ zh-cn www.emlog.net 如何删除ckeditor的状态栏 http://be-evil.org/?post=194 如何移除ckedior的状态栏上的元素路径显示和彻底移除状态栏？

点击查看原图

去ckeditor的官方文档库查找了一番，解决方案如下：

移除元素路径的方法（上图中状态栏显示的 body p）：

在config.js中配置以下参数

config.removePlugins = 'elementspath';

这玩意实际上是个ckedior自带的插件

彻底移除状态栏的方法：

在config.js中配置以下参数，其实是将ckedior窗口大小调整功能关闭

config.resize_enabled = false;

清空浏览器缓存刷新后即可看到效果

点击查看原图

]]> Fri, 14 May 2010 04:44:36 +0000 朦朧中的罪惡 http://be-evil.org/?post=194 符合为w3c标准的CSS Hack http://be-evil.org/?post=142 如何让你的CSS既兼容各种浏览器，又可以通过w3c的验证？答案是CSS hack

测试页面在附件压缩包中

标准CSS样式

#style {
    color  :orange;
}

火狐效果

点击查看原图

 

IE7 独有hack写法

*+html #style{
    color  :green;
}

表现效果

点击查看原图


* html #style {
   color    :blue;
}  /* IE6独有HACK，只有IE6可以理解，后复盖前，所以IE6会使用这个样式 */

点击查看原图

W3C CSS 验证

点击查看原图

CSS3 验证完美通过

点击查看原图

]]> Wed, 03 Feb 2010 08:42:54 +0000 朦朧中的罪惡 http://be-evil.org/?post=142 利用javascript闭包特性给setInterval(setTimeout)传递参数 http://be-evil.org/?post=122 function doSomething(paramA, paramB, paramC) {
    /*

       返回一个由函数表达式创建的匿名内部函数的引用 - 闭包

   */
    return (function() {
        /*

            这个内部函数将通过 - setInterval- 执行，

            而且当它执行时它会读取并按照传递给外部函数的参数行事：

       */
        paramA[paramB] = paramC;
    });
}

/*

   调用这个函数将返回一个在其执行环境中创建的内部函数对象的引用。

   传递的参数最终将作为外部函数的参数被内部函数使用。

   返回的对内部函数的引用被赋给一个全局变量

*/
var functRef = doSomething(menu, "display", "none");
/**//* 调用 setInterval函数，将赋给变量 - functRef - 的内部函数的引用作为传递的第一个参数:- */
setInterval(functRef, 500);

]]> Thu, 22 Oct 2009 04:26:36 +0000 朦朧中的罪惡 http://be-evil.org/?post=122 jquery修复ie6不支持position: fixed;的插件 http://be-evil.org/?post=116
<!--[if lte IE 7]>
<script type="text/javascript">
(function($) {
    $.fn.pozFixed = function(params) {
        var defaults = {
            top : 400,
            left : '50%',
            interval:100
        };
        defaults = $.extend(defaults,params);    
        return this.each(function(i,o) {
            var $this = $(this);
            this.fixPosition = function() {
            var st = $().scrollTop(); 
                $this.css({
                    top:st + defaults.top,
                    left:'50%'
                });              
            };
            $this.css({position:'absolute',top:defaults.top,left:"50%"});
            setInterval(this.fixPosition,defaults.interval);
        });
    };
})(jQuery);
</script>
<![endif]-->
]]> Fri, 25 Sep 2009 07:41:52 +0000 朦朧中的罪惡 http://be-evil.org/?post=116 FireFox和IE下使用ajax的一些小问题总结 http://be-evil.org/?post=101 1、FireFox下使用xmlHttpRequest的send方法是必须指定参数。即.send();是无效的，如果没有参数要使用.send(null);.
2、FireFox下处理DOM时把空白也当作是一个节点。因此为了避免出现一些意想不到的问题，要尽量不要使用空白（包括换行、空格等等）。
3、使用createElement创建节点时，IE下可以用document.createElement(”<tr>”);但是FireFox下只能用document.createElement(”tr”);
4、添加子节点，IE可以用add，但是FireFox下不可以。FireFox下只能用appendChild.
5、如果IE下往table节点里添加tr达不到预期效果，常常是因为没有添加tbody节点。
6、IE下使用javascript设定td的colspan无效是因为大小写的问题，必须使用colSpan。
7、FireFox下输出从服务器端返回XML时注意开头不能有空白（包括换行、空格等），否则会有解析错误。
8、使用xmlHTTPRequest实现分页效果时，每次处理完一次请求要把xmlHTTPRequest对象消掉，下次使用时再重新构建。

]]> Wed, 17 Jun 2009 12:07:56 +0000 朦朧中的罪惡 http://be-evil.org/?post=101 [译文]难倒你的9个JavaScript陷阱 http://be-evil.org/?post=88 本文来自于Nine Javascript Gotchas

1.　最后一个逗号

如这段代码，注意最后一个逗号，按语言学角度来说应该是不错的（python的类似数据类型辞典dictionary就允许如此）。IE会报语法错误，但语焉不详，你只能用人眼从几千行代码中扫描。

 
  1. var theObj = {  
  2.         city : "Boston",  
  3.         state : "MA",  
  4.   } 

2.　this的引用会改变

如这段代码：

 
  1. <input type="button" value="Gotcha!" id="MyButton" > 
  2. <script> 
  3. var MyObject = function () {  
  4.     this.alertMessage = "javascript rules";  
  5.     this.ClickHandler = function() {  
  6.         alert(this.alertMessage );  
  7.   }  
  8. }();  
  9. document.getElementById(”theText”).onclick =  MyObject.ClickHandler  
  10. </script> 

 

并不如你所愿，答案并不是”javascript rules”。在执行MyObject.ClickHandler时，代码中红色这行，this的引用实际上指向的是document.getElementById("theText")的引用。可以这么解决：

  1. <input type="button" value="Gotcha!" id="theText" > 
  2. <script> 
  3. var MyObject = function () {  
  4.     var self = this;  
  5.     this.alertMessage = “javascript rules”;  
  6.     this.OnClick = function() {  
  7.         alert(self.value);  
  8.     }  
  9. }();  
  10. document.getElementById(”theText”).onclick =  MyObject.OnClick  
  11. </script> 

实质上，这就是javascript作用域的问题。如果你看过，你会发现解决方案不止一种。




	3.　标识盗贼



	在javascript中不要使用跟HTML的id一样的变量名。如下代码：


 


    
	
  1. 
		<input type="button" id="TheButton"> 
    2. 
	
  2. 
		<script> 
    3. 
	
  3. 
		    TheButton = get("TheButton");  
    4. 
	
  4. 
		</script> 
    5. 




	IE会报对象未定义的错误。我只能说：IE sucks.



	4.　字符串只替换第一个匹配



	如下代码：


 


    
	
  1. 
		var fileName = "This is a title".replace(" ","_"); 
    2. 




	 



	而实际上，结果是”This_is a title“. 在javascript中，String.replace的第一个参数应该是正则表达式。所以，正确的做法是这样：


 


    
	
  1. 
		var fileName = "This is a title".replace(/ /g,"_"); 
    2. 




	

	 



	5.　mouseout意味着mousein



	事实上，这是由于事件冒泡导致的。IE中有mouseenter和mouseleave，但不是标准的。作者在此建议大家使用库比如YUI来解决问题。



	6.　parseInt是基于进制体系的



	这个是常识，可是很多人给忽略了parseInt还有第二个参数，用以指明进制。比如，parseInt("09")，如果你认为答案是9，那就错了。因为，在此，字符串以0开头，parseInt以八进制来处理它，在八进制中，09是非法，返回false，布尔值false转化成数值就是0. 因此，正确的做法是parseInt("09", 10).



	7.　for...in...会遍历所有的东西



	有一段这样的代码：


 


    
	
  1. 
		var arr = [5,10,15];  
    2. 
	
  2. 
		var total = 1;  
    3. 
	
  3. 
		for ( var x in arr) {  
    4. 
	
  4. 
		    total = total * arr[x];  
    5. 
	
  5. 
		} 
    6. 




	

	 



	运行得好好的，不是吗？但是有一天它不干了，给我返回的值变成了NaN, 晕。我只不过引入了一个库而已啊。原来是这个库改写了Array的prototype，这样，我们的arr平白无过多出了一个属性（方法），而for...in...会把它给遍历出来。所以这样做才是比较安全的：


 


    
	
  1. 
		for ( var x = 0; x < arr.length; x++) {  
    2. 
	
  2. 
		    total = total * arr[x];  
    3. 
	
  3. 
		} 
    4. 




	其实，这也是污染基本类的prototype会带来危害的一个例证。



	8.　事件处理器的陷阱



	这其实只会存在使用作为对象属性的事件处理器才会存在的问题。比如window.onclick = MyOnClickMethod这样的代码，这会复写掉之前的window.onclick事件，还可能导致IE的内容泄露（sucks again）。在IE还没有支持DOM 2的事件注册之前，作者建议使用库来解决问题，比如使用YUI:


 


    
	
  1. 
		YAHOO.util.Event.addListener(window, "click", MyOnClickMethod); 
    2. 




	

	 



	这应该也属于常识问题，但新手可能容易犯错。



	9.　Focus Pocus



	新建一个input文本元素，然后把焦点挪到它上面，按理说，这样的代码应该很自然：


 


    
	
  1. 
		var newInput = document.createElement("input");  
    2. 
	
  2. 
		document.body.appendChild(newInput);  
    3. 
	
  3. 
		newInput.focus();  
    4. 
	
  4. 
		newInput.select(); 
    5. 




	但是IE会报错（sucks again and again）。理由可能是当你执行focus()的时候，元素尚未可用。因此，我们可以延迟执行：


 


    
	
  1. 
		var newInput = document.createElement("input");  
    2. 
	
  2. 
		newInput.id = "TheNewInput";  
    3. 
	
  3. 
		document.body.appendChild("newInput");  
    4. 
	
  4. 
		 
    5. 
	
  5. 
		setTimeout("document.getElementById('TheNewInput').focus(); document.getElementById('TheNewInput').select();", 10); 
    6. 




	在实践中，javascript的陷阱还有很多很多，大多是由于解析器的实现不到位而引起。这些东西一般都不会在教科书中出现，只能靠开发者之间的经验分享。谢天谢地，我们生活在网络时代，很多碰到的问题，一般都可以在Google中找到答案。



	 



	 



	
		

			
				 
		

	




	 


    
	
  • 
		 
    • 

]]>
	Sat, 18 Oct 2008 11:01:50 +0000
	朦朧中的罪惡
	http://be-evil.org/?post=88



	IE的document.getElementById混淆name和id属性的BUG
	http://be-evil.org/?post=86
	
	前不久我在开发中遇到了在IE下Form.submit()的一个BUG,没想到IE的BUG还不只这么一个,下面我来介绍我遇到的另外一个关于document.getElementById的BUG.



	BUG演示



	页面演示在这里,代码在下面




    
	
  1. 
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 
	
  2. 
		<html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
	
  3. 
		<head> 
    4. 
	
  4. 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5. 
	
  5. 
		<title>IE document.getElementById BUG DEMO</title> 
    6. 
	
  6. 
		</head> 
    7. 
	
  7. 
		 
    8. 
	
  8. 
		<body> 
    9. 
	
  9. 
		<script language="javascript"> 
    10. 
	
  10. 
		/*  
    11. 
	
  11. 
		    IE document.getElementById BUG 演示DEMO  
    12. 
	
  12. 
		    作者:朦朧中的罪惡  
    13. 
	
  13. 
		    博客:http://be-evil.org  
    14. 
	
  14. 
		*/  
    15. 
	
  15. 
		function changeValue()  
    16. 
	
  16. 
		{  
    17. 
	
  17. 
		    var username = document.getElementById('username');  
    18. 
	
  18. 
		    username.value = 'Whahaha';  
    19. 
	
  19. 
		}  
    20. 
	
  20. 
		</script> 
    21. 
	
  21. 
		<form action="IE_BUG2.html" method="get"> 
    22. 
	
  22. 
		<p>name:<input type="text" name="username" /></p> 
    23. 
	
  23. 
		<p>name2:<input type="text" id="username" name="name" /></p> 
    24. 
	
  24. 
		<p><input type="button" value="改变" onclick="changeValue();" /></p> 
    25. 
	
  25. 
		</form> 
    26. 
	
  26. 
		</body> 
    27. 
	
  27. 
		</html> 
    28. 




	 



	很简单的一段代码,看上去似乎没有任何错误,但是在IE下点击改变按钮后,被改变值的对象居然是第一个name属性为username的input对象.而不是第二个id属性为username的对象. 



	 



	 



	 



	如何避免这个问题?



	 



	方法一：尽量避免在页面中出现name与id属性相同的对象



	 



	方法二：利用JavaScript的特点,重写document.getElementById



	 



	下面j解决问题的方法和思路是根据国外某位兄弟的经验翻译过来,原文在这里,这里非常感谢他的文章给我作参考!



	 



	1.首先初步的尝试复写document.getElementById的方法



	 




    
	
  1. 
		
    if (/msie/i.test (navigator.userAgent)) //根据userAgent确定用户使用IE浏览器  
    2. 
	
  2. 
		{  
    3. 
	
  3. 
		    document.nativeGetElementById = document.getElementById;  
    4. 
	
  4. 
		    document.getElementById = function(id)  
    5. 
	
  5. 
		    {  
    6. 
	
  6. 
		        var elem = document.nativeGetElementById(id);  
    7. 
	
  7. 
		        if(elem)  
    8. 
	
  8. 
		        {  
    9. 
	
  9. 
		            //确定id相同  
    10. 
	
  10. 
		            if(elem.id == id)  
    11. 
	
  11. 
		            {  
    12. 
	
  12. 
		                return elem;  
    13. 
	
  13. 
		            }  
    14. 
	
  14. 
		            else 
    15. 
	
  15. 
		            {  
    16. 
	
  16. 
		                //如果没有ID相同的,那么就遍历所有元素的集合找到id相同的元素  
    17. 
	
  17. 
		                for(var i=1;i<document.all[id].length;i++)  
    18. 
	
  18. 
		                {  
    19. 
	
  19. 
		                    if(document.all[id][i].id == id)  
    20. 
	
  20. 
		                    {  
    21. 
	
  21. 
		                        return document.all[id][i];  
    22. 
	
  22. 
		                    }  
    23. 
	
  23. 
		                }  
    24. 
	
  24. 
		            }  
    25. 
	
  25. 
		        }  
    26. 
	
  26. 
		        return null;  
    27. 
	
  27. 
		    };  
    28. 
	
  28. 
		} 
    29. 




	 



	看起来似乎没有任何问题,但是在IE7下的某些情况中又会引出一个getAttribute()方法的问题.



	 



	看代码:



	 




    
	
  1. 
		
    <html> 
    2. 
	
  2. 
		    <head> 
    3. 
	
  3. 
		        <title>Demonstrate IE7 getAttribute() bug</title>   
    4. 
	
  4. 
		    </head> 
    5. 
	
  5. 
		    <body> 
    6. 
	
  6. 
		        <form id="myForm1"> 
    7. 
	
  7. 
		            <input id="user_id" name="user_id" value="text" /> 
    8. 
	
  8. 
		        </form> 
    9. 
	
  9. 
		        <form id="myForm2"> 
    10. 
	
  10. 
		            <input id="id" name="id" value="text" /> 
    11. 
	
  11. 
		        </form> 
    12. 
	
  12. 
		        <script type="text/javascript"> 
    13. 
	
  13. 
		            var formElement1 = document.getElementById('myForm1');  
    14. 
	
  14. 
		            var formElement2 = document.getElementById('myForm2');  
    15. 
	
  15. 
		            alert(formElement1.getAttribute('id')+ "\n" + formElement2.getAttribute('id'));  
    16. 
	
  16. 
		        </script> 
    17. 
	
  17. 
		    </body> 
    18. 
	
  18. 
		</html> 
    19. 




	 



	这个情况出现在表单中,如果有一个表单元素name的值为id的时候



	 



	在火狐下我们得到的结果是



	 



	myForm1 myForm2



	 



	但是在IE7下面,却变成了



	 



	myForm1 [object]



	 



	不知怎么的,ie错误的访问了它内部name位id的input元素而不是表单元素本身的id属性.使用formElement2.id的方法替代getAttribute()我们仍然可以得到相同的效果.(参见我先前遇到的一个IE的BUG)



	 



	幸运的是我们仍然可以通过以下的方式得到正确的元素:



	 



	formElement2.attributes['id'].value formElement2.getAttributeNode('id').value



	 



	既然还有以上的隐性BUG,那我们还要再次修改一下我们覆写的document.getElementById方法



	 




    
	
  1. 
		
    if (/msie/i.test (navigator.userAgent)) //根据userAgent确定用户使用IE浏览器
    2. 
	
  2. 
		{  
    3. 
	
  3. 
		    document.nativeGetElementById = document.getElementById;  
    4. 
	
  4. 
		    document.getElementById = function(id)  
    5. 
	
  5. 
		    {  
    6. 
	
  6. 
		        var elem = document.nativeGetElementById(id);  
    7. 
	
  7. 
		        if(elem)  
    8. 
	
  8. 
		        {  
    9. 
	
  9. 
		            //修改后的确认能得到id属性方法  
    10. 
	
  10. 
		            if(elem.attributes['id'].value == id)  
    11. 
	
  11. 
		            {  
    12. 
	
  12. 
		                return elem;  
    13. 
	
  13. 
		            }  
    14. 
	
  14. 
		            else 
    15. 
	
  15. 
		            {  
    16. 
	
  16. 
		                //如果没有ID相同的,那么就遍历所有元素的集合找到id相同的元素  
    17. 
	
  17. 
		                for(var i=1;i<document.all[id].length;i++)  
    18. 
	
  18. 
		                {  
    19. 
	
  19. 
		                    if(document.all[id][i].attributes['id'].value == id)  
    20. 
	
  20. 
		                    {  
    21. 
	
  21. 
		                        return document.all[id][i];  
    22. 
	
  22. 
		                    }  
    23. 
	
  23. 
		                }  
    24. 
	
  24. 
		            }  
    25. 
	
  25. 
		        }  
    26. 
	
  26. 
		        return null;  
    27. 
	
  27. 
		    };  
    28. 
	
  28. 
		}  
    29. 




	 



	OK,这个问题总算解决了,希望我们的微软公司能早日修复这些JavaScript DOM BUG
]]>
	Wed, 15 Oct 2008 14:54:03 +0000
	朦朧中的罪惡
	http://be-evil.org/?post=86



	Discuz!编辑器附件添加原理不完全研究
	http://be-evil.org/?post=66
	
	Discuz!在6.0版的时候推出了自己的编辑器,除了它常用的编辑功能之外有一个很有特色的功能就是附件无上传插入.



	用这个这个功能人都会发现在编辑时只要在本地选择了文件附件无需上传即可将它插入到帖子内容中,图文并排在第一次发贴的时候就可以实现,而不像一些传统程序必须上传了附件才可以插入到编辑器中.



	作为开发者的我对这个功能实现的方式非常感兴趣,花了一点时间来研读了一下Discuz!编辑器此功能的代码.



	本文分析的Discuz!版本为6.0,涉及的javascript和php文件包括



	include/javascript/post_attach.js



	include/javascript/post_editor.js



	include/javascript/bbcode.js



	include/newthread.inc.php



	代码版权归康盛创想公司所有



	



	首先我们来分析 include/javascript/post_attach.js 中的 插入附件操作



	实现的过程是大体这样的:



	1.获得File表单域的值,也就是本地文件路径



	2.检查文件和浏览器类型,如果是IE切附件是图片格式才开始



	3.用Dom+IE AlphaImageLoader滤镜把图片加载到一个隐藏的图片中.



	4.算得图片的高宽后再根据系统设定的缩略图计算图片在编辑器中的大小.



	5.将得到值写入全局变量中存储,并生成HTML代码插入到编辑器中



	计算图片宽高和生成插入到编辑器可视化内容的HTML操作函数 insertAttach()



	/* 

	    Discuz!编辑器附件添加原理不完全研究 

	    作者:朦朧中的罪惡

	    博客:http://be-evil.org

	*/

	

	

	function insertAttach(id) {

	    var localimgpreview = '';

	    //根据附件序号获得对应file对象的值(本地文件地址)

	    var path = $('attach_' + id).value;

	    //获取文件后缀

	    var ext = path.lastIndexOf('.') == -1 ? '' : path.substr(path.lastIndexOf('.') + 1, path.length).toLowerCase();

	    //正则表达式验证文件后缀

	    var re = new RegExp("(^|\\s|,)" + ext + "($|\\s|,)", "ig");

	    //获得文件名

	    var localfile = $('attach_' + id).value.substr($('attach_' + id).value.replace(/\\/g, '/').lastIndexOf('/') + 1);

	    //如果路径为空则跳出

	    if(path == '') {

	        return;

	    }

	    //判断系统允许附件设置是否加载

	    if(extensions != '' && (re.exec(extensions) == null || ext == '')) {

	        alert(lang['post_attachment_ext_notallowed']);

	        return;

	    }

	    //判断当前浏览器是否为IE且文件是图片

	    attachexts[id] = is_ie && in_array(ext, ['gif', 'jpeg', 'jpg', 'png', 'bmp']) ? 2 : 1;

	    //浏览器是IE且文件是图片

	    if(attachexts[id] == 2) {

	        /* 

	        * img_hidden 是一个隐藏的 img 位于 id 为 posteditor_bottom 的div 中 

	        */

	        //设定图片 alt 属性为附件序号

	        $('img_hidden').alt = id;

	        //设定img的滤镜 AlphaImageLoader 的 sizingMethod 属性为 image (增大或减小对象的尺寸边界以适应图片的尺寸) 

	        $('img_hidden').filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'image';

	

	        try {

	            //尝试将本地图片用滤镜加载到 img_hidden 中

	            $('img_hidden').filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $('attach_' + id).value;

	        } catch (e) {

	            //如果失败则提示附件错误,并删除当前的文件上传表单

	            alert(lang['post_attachment_img_invalid']);

	            delAttach(id);

	            return;

	        }

	        //获得img_hidden本身的高和宽

	        var wh = {'w' : $('img_hidden').offsetWidth, 'h' : $('img_hidden').offsetHeight};

	        //获得图片序号

	        var aid = $('img_hidden').alt;

	        //如果图片高宽超过了系统设定的缩略图高宽则获得系统设定的缩略图高宽

	        if(wh['w'] >= thumbwidth || wh['h'] >= thumbheight) {

	            wh = attachthumbImg(wh['w'], wh['h']);

	        }

	        //附件高宽数组索引赋值

	        attachwh[id] = wh;

	        //调整img_hidden的高宽

	        $('img_hidden').style.width = wh['w']

	        $('img_hidden').style.height = wh['h'];

	        //设定img的滤镜 AlphaImageLoader 的 sizingMethod 属性为 scale (缩放图片以适应对象的尺寸边界) 

	        $('img_hidden').filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale';

	        //生成一个查看缩略图的 Div

	        div = document.createElement('div');

	        //根据附件编号设定其id

	        div.id = 'localimgpreview_' + id + '_menu';

	        //设定该层为不可见

	        div.style.display = 'none';

	        //设定层的样式

	        div.style.marginLeft = '20px';

	        div.className = 'popupmenu_popup';

	        //插入该层到body中

	        document.body.appendChild(div);

	        //将图片插入到层中

	        div.innerHTML = '<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=\'scale\',src=\'' + $('attach_' + id).value+'\');width:'+wh['w']+';height:'+wh['h']+'" src=\'images/common/none.gif\' border="0" aid="attach_'+ aid +'" alt="" />';

	    }

	    //生成附件后的 [删除] [插入] [图片序号] [图片名称] 按钮

	    $('localfile_' + id).innerHTML = '<a href="###delAttach" onclick="delAttach(' + id + ')">[' + lang['post_attachment_deletelink'] + ']</a> <a href="###insertAttach" title="' + lang['post_attachment_insert'] + '" onclick="insertAttachtext(' + id + ');return false;">[' + lang['post_attachment_insertlink'] + ']</a> ' +

	        (attachexts[id] == 2 ? '<span id="localimgpreview_' + id + '" onmouseover="showMenu(this.id, 0, 0, 1, 0)"> <span class="smalltxt">[' +id + ']</span> <a href="###attachment" onclick="insertAttachtext(' + id + ');return false;">' + localfile + '</a></span>' : '<span class="smalltxt">[' + id + ']</span> ' + localfile);

	    //隐藏当前的file对象

	    $('attach_' + id).style.display = 'none';

	    //生成一个新的file对象

	    addAttach();

	}



	插入到编辑器的操作函数 insertAttachtext()



	//插入编辑器操作 @id 附件序号 

	function insertAttachtext(id) {

	    //根据传入的id判断全局数组索引中是否有该对象

	    if(!attachexts[id]) {

	        return;

	    }

	    //检查该对象是否在IE下产生

	    if(attachexts[id] == 2) {

	        /*

	        *

	        *  检查编辑器是discuz代码插入模式还是所见即所得模式

	        *  所见即所得模式则往编辑器中插入隐藏层中的img HTML代码

	        *  代码插入模式则插入 "[localimg=高度,宽度]附件序号[/localimg]" 代码

	        *

	        */

	        bbinsert && wysiwyg ? insertText($('localimgpreview_' + id + '_menu').innerHTML, false) : AddText('[localimg=' + attachwh[id]['w'] + ',' + attachwh[id]['h'] + ']' + id + '[/localimg]');

	    } else {

	        //在其他浏览器下直接插入 "[local]附件序号[/local]" 代码

	        bbinsert && wysiwyg ? insertText('[local]' + id + '[/local]', false) : AddText('[local]' + id + '[/local]');

	    }

	}



	读到这里我产生了一个疑问:



	在所见即所得模式下插入的是HTML代码,并未插入Discuz!代码,同样,在Discuz!代码模式下插入的是Discuz!代码而没有插入HTML代码.但是我点击切换模式后对应的代码却会出现在编辑器中,这是如何实现的?



	 



	经过分析,原来编辑器在切换模式的时候会对内容代码使用正则表达式进行替换操作



	 



	在include/javascript/bbcode.js 第96行 是将 Discuz!代码转换为HTML代码的操作



	 



	str = str.replace(/\[localimg=(\d{1,4}),(\d{1,4})\](\d+)\[\/localimg\]/ig, function ($1, $2, $3, $4) {if($('attach_' + $4)) {var src = $('attach_' + $4).value; if(src != '') return '<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=\'scale\',src=\'' + src + '\');width:' + $2 + ';height=' + $3 + '" src=\'images/common/none.gif\' border="0" aid="attach_' + $4 + '" alt="" />';}});



	将HTML代码转换为Discuz!代码在277-305行



	function imgtag(attributes) {

	 var width = '';

	 var height = '';



	 re = /src=(["']?)([\s\S]*?)(\1)/i;

	 var matches = re.exec(attributes);

	 if(matches != null) {

	  var src = matches[2];

	 } else {

	  return '';

	 }



	 re = /width\s?:\s?(\d{1,4})(px)?/ig;

	 var matches = re.exec(attributes);

	 if(matches != null) {

	  width = matches[1];

	 }



	 re = /height\s?:\s?(\d{1,4})(px)?/ig;

	 var matches = re.exec(attributes);

	 if(matches != null) {

	  height = matches[1];

	 }



	 if(!width || !height) {

	  re = /width=(["']?)(\d+)(\1)/i;

	  var matches = re.exec(attributes);

	  if(matches != null) {

	   width = matches[2];

	  }



	  re = /height=(["']?)(\d+)(\1)/i;

	  var matches = re.exec(attributes);

	  if(matches != null) {

	   height = matches[2];

	  }

	 }



	 re = /aid=(["']?)attach_(\d+)(\1)/i;

	 var matches = re.exec(attributes);

	 var imgtag = 'img';

	 if(matches != null) {

	  imgtag = 'localimg';

	  src = matches[2];

	 }

	 re = /aid=(["']?)attachimg_(\d+)(\1)/i;

	 var matches = re.exec(attributes);

	 if(matches != null) {

	  return '[attachimg]' + matches[2] + '[/attachimg]';

	 }

	 return width > 0 && height > 0 ?

	  '[' + imgtag + '=' + width + ',' + height + ']' + src + '[/' + imgtag + ']' :

	  '[img]' + src + '[/img]';

	}



	 



	虽然这个功能只有IE Only。但是的确能够提高不少的用户体验，同时我非常佩服Discuz!团队的解决问题的思想。
]]>
	Fri, 13 Jun 2008 05:39:30 +0000
	朦朧中的罪惡
	http://be-evil.org/?post=66



	Pro JavaScript系列讲座(3):继承
	http://be-evil.org/?post=65
	
	本文系转载,来源和出处不明



	JavaScript的继承需要首先明确的是，它是模拟的，而不是真正（精确）的实现了继承。或者可以这样说，JavaScript的继承更倾向于由使用者自己来实现。



	



	对象伪装法 (Object Masquerading)



	对象伪装法实际是程序员为了实现继承的Trick。



	继承：ClassB继承ClassA，注意delete this.newMethod的使用。



	附件[ematt:95] 



	多重继承：ClassZ继承自ClassX与ClassY



	附件[ematt:96] 



	上述的实现有一个Gotcha，当ClassX与ClassY有同名的属性或方法时，因为ClassY后初始化，所以会覆盖掉ClassX的同名方法或属性。



	—————————————————————————————————————————



	使用call()方法实现：



	call()方法的第一参数为被当作This的对象，其他参数直接被传给funciton，通过使用Call(),我们也可以实现继承：

	附件[ematt:97] 



	—————————————————————————————————————————

	使用Apply()方法实现：



	Apply()方法只有两个参数，第一个与call()一样，被当作this；第二个是被传入function的参数数组，使用Apply()的好处是你可以使用function的arguments对象直接当作第二参数。



	附件[ematt:98] 



	注意：如果使用arguments对象则需保证参数顺序与ClassA一致。

	—————————————————————————————————————————

	使用Prototype链，要求构造器不能有参数



	附件[ematt:99] 



	好处是可以使用instanceof，对对象进行判断，如果obj为ClassB对象，则instanceof ClassA和ClassB都会为true，这是使用伪装法所不具备的，但是prototype的构造器不能有参数。所以最好的方式是混合法。

	—————————————————————————————————————————

	使用混合法 （The Best Way）



	附件[ematt:100] 



	混合法的缺点是无法多重继承。



	—————————————————————————————————————————



	动态原形的一些问题：主要指xxx.protoype = new xxx() 不能被放在构造器里面，必须放在外面，可是如果要放在外面，那动态原形法本身就失去意义了，因为动态原形法本身就是为了把原形方法放在function的构造器里面，以使得代码风格接近Java。所以最好还是不要用动态原形法了。



	—————————————————————————————————————————



	其它通过工具库实现继承



	xbObject(http://archive.bclary.com/xbProjects/)



	Zinherit （Nicholas C. Zakas的库，写Professional Javascript for web develop
]]>
	Thu, 12 Jun 2008 13:28:56 +0000
	朦朧中的罪惡
	http://be-evil.org/?post=65



	在线正则表达式测试工具Regex Tester
	http://be-evil.org/?post=61
	
	最近无意中发现一个在线测试正则表达式的网站http://regexpal.com/



	它提供所见即所得的正则表达式匹配方式,将你写的正则和匹配的字符串直接高亮标出,非常方便快捷..



	 附件[ematt:94] 



	和emlog 一样 Regex Tester 是开源的,它对于经常要调试正则表达式的程序员来说是开发编程,居家旅行之必备工具...



	好东西 收了~!
]]>
	Sun, 08 Jun 2008 15:20:00 +0000
	朦朧中的罪惡
	http://be-evil.org/?post=61