正在加载...

一、背景:

        Team里的少年们用着各式各样的前端IDE, 我却一直“坚贞不渝”的使用adobe家的Dreamweaver作为前端开发的工具。Dreamweaver CS系列本身对Code hints(代码提示)支持就很不错,尤其是在CS5.5上还默认的支持的jQuery,Drupal,Joomla等框架的Code hints。这样在写代码的时候就可以瞧得更流利的。但是webryan 在现实的开发环境中还是会遇到需要自定义代码提示的场景。于是自己动手丰衣足食,搞了一个最适合自己的Code hints。

 

二、需要自定义Code Hints的原因:

 1.自己或团队自研的JS库,或者组件类

2.JS库里非显示的声明函数。例如

 

/**
 * @description 通过ajax发出get请求
 */
$.get = $.http.get;

这样的引用式的方式,默认情况下是没办法做到提示的。除非使用自定义。

或者使用函数执行返回的结构体作为提示,也是需要自定义Code hints的。

/**
 * @description 获取样式相关
 */
$.css= function(){
     return {
        getComputedStyle:function(){},
        setStyle:function(){},
        ...
    }
}

3.同时在一些大型前端开发的时候,通常也会存在三种情况:a.JS路径是CDN远程地址,非相对目录。b.JS是动态加载的。 c.JS是需要合并使用的。这个时候默认的包含文件方式的Code hints也是很乏力。

综上,webryan认为自己搞一套自动生成自定义Code hints的东西势在必行。提升工作效率就是珍惜声明啊~

三、创建自定义Code hints for Dreamweaver的原理:

核心原理:Dreamweaver启动时会加载Dreamweaver安装目录下的\configuration\CodeHints\目录下的xml文件,作为Code hints触发依据。所以我们制作一个Dreamweaver提示器可以识别的xml文件放置在\configuration\CodeHints\目录里即可(当然,也可以用扩展插件的方式实现)。

这里我们先看下Dreamweaver识别的xml格式(点击这里可以看到官方的说明):


	
        
            
        
        
                     
                            
                            	 
                            
        
				
		
						
						
		
	


这里简单说明下吧,这个 xml的组成:

1.第一层codehints是容器,保持一直即可

2.第二层是menugroup ,只属于codehints标签,有效属性有name, enabled, id,可以包含description,menu,function两种子标签

3.第三层,description是只是描述文档的。menu自身有pattern, doctypes, casesensitive, classpattern, displayrestriction这些属性,可以包含property和method两种子元素。 详情可以见这里。。 function是简单的来描述一个函数,主要可以用在类似php里面向函数的一些提醒。


4.第四层,method是匹配一个函数或方法,自身有pattern, icon, object, source, constructor, static, retType这些属性可以设置。property是匹配一个属性自身有label, value, icon, object, source, static, propType, item这些属性。

5.第五层是等,这里没用到,暂不赘述。想了解的可以参看这里

哦了,有这些基本的信息,我们就可以开工了。

四、使用jsdoc来创建自定义的code hints XML吧

好吧,又纠结了,知道了xml的结构和code hints的出现方式,总不能都手写吧。 还好,我们有jsdoc这个好东西。先看看jsdoc。

官网地址:http://code.google.com/p/jsdoc-toolkit/ , 在这里你可以获得到jsdoc所有的东西。

引用官方的说法吧,jsdoc是一个可以通过你的js脚本里的注释(注释是需要约定格式的),直接生成帮助手册(jsdoc依赖于java)。例如你的文档这么写:

经过执行一行脚本:

java -jar jsrun.jar app/run.js -a -t=templates/jsdoc simple.js

在out目录里就出现一堆的html文件,点击index.html中的array部分。效果如下:

怎么样,是不是很好用的东西?所以平时写代码的时候注意格式就好。函数开始的时候,指明param return example就可以啦。非常简单。

	/**
	 * @description 判断元素elem是否在数组array中
	 * @param {array} array 数组
	 * @param {object} elem 要判断的元素
	 * @return {number} 元素在数组中对应的位置,若不存在返回-1
	 * @example $.array.indexOf([1,2,3],2);
	 */

好啦,转入正题,我们借助jsdoc的格式化js脚本(最新版本支持return对象里的函数说明,只要你加入了注释),可以生成自己的xml文件。

我们只要改一下index.tmpl文件就好了(既然jsdoc可以生成上面那么牛逼的东西,说明数据已经格式好了,我们只要引用数据,并生成xml结构就可以)。下面webryan给出自己写好的index.tmpl文件:


  
    
 		
    

						
		
			
				 
					
					
						
					
					
			 
			{! var ownMethods = thisClass.methods.filter(function($){return $.memberOf == thisClass.alias  && !$.isNamespace}).sort(makeSortby("name")); !}
			
					 
						
					
			
		
		
   
  


 

从上面的结构可以看得出,jsdoc将所有的数据都放到data里,所有的输出都放到output里,用一种自定义的语言进行解析。 这里我们只要迭代data里的class名称就可以,然后二次遍历 class里的ownMethods就可以了。

然后再次执行

java -jar jsrun.jar app/run.js -a -t=templates/webryan simple.js

将out目录下生成的index.html改成.xml复制到D:\Program Files\Adobe\Adobe Dreamweaver CS5.5\configuration\CodeHints(Dreamweaver的安装目录里的)即可。这时候重启Dreamweaver,在任意文档中输入$. 或者$.array.提示代码如下:

 

 

大功告成! 立马将这个xml发给Team里用Dreamweaver的少年们~~ hiahia~~

: http://www.webryan.net/2012/01/based-on-jsdoc-make-custom-code-hints-for-dreamweaver/

本文相关评论 - 才 3 条评论
2012-01-01 21:33:49

刚才评论居然reset了

[回复]

2012-02-04 19:10:57

好东西,很实用!

[回复]

2012-02-22 20:06:35

谢谢你的分享啊

[回复]