nicEdit 源码组织结构

最新推荐文章于 2019-06-12 21:33:04 发布

最新推荐文章于 2019-06-12 21:33:04 发布 · 216 阅读

文章标签：

#Gmail #编程 #配置管理

nicEdit 专题专栏收录该内容

11 篇文章

订阅专栏

本文详细解析了nicEdit编辑器的源码结构，包括其模块化的文件组织方式、配置文件内容及扩展方法，并介绍了如何通过扩展和插件实现中文化。

nicEdit 源码组织很有规律从src目录开始看,

nicAdvancedButton
nicBBCode
nicButtonTips
nicCode
nicColors
nicCore
nicImage
nicLink
nicPane
nicSelect
nicUndo
nicXHTML
nicLicense.js

里面除了一个nicLicense.js 是个文件,其他的都是目录,而这个nicLicense.js其实就是一段版权的声明.

如果继续看每个子目录内容的话,你会发现一个规律:

每个目录下都有一个和目录名称一致的js文件

这就是第一个规律,或者称之为代码规范 ,编程契约 ,也就是说:

nicEdit按目录来存储模块,目录名和模块名称一致,目录下一定有一个和目录( 模块) 名一致的js文件

那我们就称这个文件为模块主文件 .让我们截取nicCore/nicCore.js的注释来看看:

/**
 * NicEdit Core
 * @description: Core of nicEdit with basic features, required for all plugins 
 * @author: Brian Kirchoff
 * @version: 0.9.0
 * @order: bkLib,nicConfig,nicCore,nicInstance,nicIFrameInstance,nicPanel,nicButton,nicPlugin
 * The core includes nicEditors and nicEditor classes that handle the public interface for using NicEdit as well as a central point for sending events and commands.
 */

注意这个注释不仅仅起到注释作用,阐明

@description: 模块功能说明
@author: 作者
@version: 版本

而且 @order 还明确了此模块中文件的调入次序要求.

@order: bkLib,nicConfig,nicCore,nicInstance,nicIFrameInstance,nicPanel,nicButton,nicPlugin

再看nicImage模块的主文件注释

/**
 * nicImage
 * @description: Adds buttons to insert images in the editor area
 * @requires: nicCore, nicPane, nicAdvancedButton
 * @author: Brian Kirchoff
 * @version: 0.9.0
 */

里面有一个:

@requires: nicCore, nicPane, nicAdvancedButton

也就是说:@requires 声明了模块间的依赖关系,在这个例子中要求预先调入

 nicCore, nicPane, nicAdvancedButton

这几个模块.

通过 @requires, @order .形成了一个模块,模块文件的调入次序定义.

最后我们看看nicCore/nicConfig.js

/* START CONFIG */
var nicEditorConfig = bkClass.extend({
	buttons : {为方便查看此处略去},
	iconsPath : /* NICEDIT_ICONSPATH_START */'nicEditorIcons.gif'/* NICEDIT_ICONSPATH_END */,
	buttonList : ['bold','italic','underline','left','center','right','ol','ul','fontSize','fontFamily','fontFormat','indent','outdent','link','image'],
	iconList : /* NICEDIT_ICONLIST_START */{}/* NICEDIT_ICONLIST_END */
	/* NICEDIT_REMOVE_START */,iconFiles : {'bold' : 'src/nicCore/icons/bold.gif', 'italic' : 'src/nicCore/icons/italic.gif', 'underline' : 'src/nicCore/icons/underline.gif', 'outdent' : 'src/nicCore/icons/outdent.gif', 'indent' : 'src/nicCore/icons/indent.gif', 'hr' : 'src/nicCore/icons/hr.gif', 'superscript' : 'src/nicCore/icons/superscript.gif', 'subscript' : 'src/nicCore/icons/subscript.gif', 'strikethrough' : 'src/nicCore/icons/strikethrough.gif', 'ul' : 'src/nicCore/icons/ul.gif', 'ol' : 'src/nicCore/icons/ol.gif', 'left' : 'src/nicCore/icons/left.gif', 'right' : 'src/nicCore/icons/right.gif', 'center' : 'src/nicCore/icons/center.gif', 'justify' : 'src/nicCore/icons/justify.gif', 'save' : 'src/nicCore/icons/save.gif'}/* NICEDIT_REMOVE_END */
});
/* END CONFIG */

这个文件中含有全部的打包指示语法(略去"/* "和" */")

配置开始和结束:
START CONFIG
END CONFIG
合并图标文件的URL路径:因为打包后要把所有涉及的图标合并起来成为一个文件,所以要制定这个文件的URL
NICEDIT_ICONSPATH_START
NICEDIT_ICONSPATH_END
图标和标号列表:既然图标合并了,那就要标注图标名称和对应的序号
NICEDIT_ICONLIST_START
NICEDIT_ICONLIST_END
需要删除的代码:打包后应该删除的代码
NICEDIT_REMOVE_START
NICEDIT_REMOVE_END

这些定义在其他文件里也可能出现,回头看看这个组织结构,很合理.

我为这个结构添加了一个新的兼容规则:如果我们扩展(扩展不是插件,是指对nicEdit原模块的改造)了nicEdit,为了不破坏原来的结构和源代码(因为可能要升级),我采取了一个小技巧:对那一个文件的实现进行扩展就按这样的规则起名字:

foo.js-->fooEx.js

我们对nicEdit进行打包的时候,确定文件次序后,如果有扩展(Ex),直接把对应的扩展在原文件后调入就可以了(通过文件名的规则).

例子:对"__"函数的扩展,因__在nicCore/bkLib.js文件中所以对应的文件名是nicCore/bkLibEx.js:

/**
 * nicEdit bkLib module Extend
 * @description: bkLib module Extend
 * @author: achun.shx at gmail.com
 * @version: 0.9.0
 */
var nicEditorI18N=function(s){  
  return s;
};
function __(s) {
  return nicEditorI18N(s);
}

__函数的本意就是为了实现国际化(I18N)设立的接口,如果我们要中文化,就需要进行中文化的扩展,这里我起了一个符合常规习惯的函数

nicEditorI18N

重定义了__,让__调用nicEditorI18N,那国际化在哪里呢?

让我们做一个nicLang的插件:

nicLang/nicLang.js

/**
 * nicLang
 * @description: Add I18N for nicEdit
 * @requires: nicCore
 * @author: achun.shx at gmail.com
 * @version: 0.9.0
 */
var nicEditorI18N=function(s){
  var callee=arguments.callee;
  return callee[callee.withIn][s] || s;
};

bkExtend(nicEditorI18N,{
	withIn:navigator.userLanguage||navigator.language,
	setLang:function(lang){
		if (typeof this[lang]=='object') this.withIn=lang;
	},
	en:{}
});

这里重新定义了

nicEditorI18N

而具体的国际化文件是独立的,比如nicLang/zh-CN.js:

/**
 * nicEdit language support zh-CN
 * @description: Language Support zh-CN
 * @author: achun.shx at gmail.com
 * @version: 0.9.0
 */
nicEditorI18N['zh-CN'] = {
"save":"保存",
"undo":"撤销",
"redo":"重做",
"Click to Bold":"加黑",
"Click to Italic":"倾斜",
"Click to Underline":"下划线",
"Left Align":"左对齐",
"Center Align":"中间对齐",
"Right Align":"右对齐",
"Insert Ordered List":"有序列表",
"Insert Unordered List":"无序列表",
"Font Size...":"字体大小",
"Font Family...":"字体样式",
"Font Format...":"字体格式",
"Select Font Size":"字体大小",
"Select Font Family":"字体样式",
"Select Font Format":"字体格式",
"Click to Subscript":"下标",
"Click to Superscript":"上标",
"Click to Strike Through":"删除线",
"Remove Indent":"减少缩进量",
"Indent Text":"增加缩进量",
"Horizontal Rule":"水平线",
"Change Text Color":"更改文字颜色",
"Change Background Color":"更改背景色",
"Add Image":"增改图片",
"Add/Edit Image":"增改图片",
"Edit HTML":"编辑 HTML",
"Add/Edit Link":"增改链接",
"Add Link":"增改链接",
"Remove Link":"移除链接",
"File Explore":"文件管理器",
"submit":"确认",
"Align":"对齐",
"Alt Text":"替代文字",
"URL":"地址",
"Title":"提示",
"Open In":"打开方式"
};

好了我们分析完了nicEdit的结构,给出了最简单的一个扩展和插件实例,剩下的就是书写一个打包工具了,我准备用js重新写一个打包工具,稍后放出.

nicEdit专题