根据nicEdit 源码组织结构
中所讲的组织方法,和打包注释,其实可以做一个通用的,nicEdit代码风格的模块打包器.
这里用JavaScript实现一个(没有全部完成,有些地方如何做更好,还在考虑中),
对于一个打包器来说,数据的来源我并不考虑,因为这和使用方法有关,你可以从后台程序输出,也可以通过web服务器支持目录列表自动获取,就是因为方法很多,所以这才不是打包器考虑的内容.
/**
* nicEdit 风格 模块打包器说明
*/
var modulePacker={
/**
* 初始化,输入是一个nicEdit 风格的 src 目录结构的对象,最终js文件直接附加原始文件文本
* 例如:
{
nicCore:{
nicCore.js:'source code',
bkLib.js:'source code'
},
nicCode:{
nicCode.js:'source code'
}
}
* 生成一个按模块分的依赖关系对象 this.Dep
* 生成一个按依赖关系的模块打包次序数组 this.Order
*/
init:function(src,license){
function find(str){
var s = module.indexOf(str);
if (s<0) return false;
s=s+str.length;
var e = module.indexOf('\n',s);
if (e<0) return false;
return module.slice(s,e).split(',');
}
this.Src=src;
this.Dep={};
this.Pk={};
this.Remove={};
for (var i in src) {
if (typeof src[i]=='string' || typeof src[i][i+'.js']!='string') continue;
this.Dep[i]={};
var module = src[i][i+'.js'];
var dep=find('@requires:');//分析依赖请求
if (dep)
for (var j = 0; j < dep.length; j++) {
dep[j]=(dep[j] || "").replace( /^\s+|\s+$/g, "" );
this.Dep[i][dep[j]]=true;
}
this.Pk[i]={};//[];
dep=find('@order:');//模块文件调入次序
if (dep){
for (var j = 0; j < dep.length; j++) {
dep[j]=(dep[j] || "").replace( /^\s+|\s+$/g, "" );
this.Pk[i][dep[j]+'.js']=this.config(src[i][dep[j]+'.js']);
}
}else{
this.Pk[i][i+'.js']=this.config(module);
}
}
this.sort();
if (license) return this.packer(license);
return this;
},
/*把 源文件根据配置分段存储与Pk,以便后续处理*/
config:function(module){
function slice(tn,b1,p,max){//把string第2段分成2段
var begin=tn.begin;
var end=tn.end;
var e1,b2,e2;
e1=module.indexOf(begin,b1);
if (e1<0 || e1>=max) return false;
b2=e1+begin.length;
if (b2<0 || b2>=max) return false;
e2=module.indexOf(end,b2);
if (e2<0 || e2>=max) return false;
p[0]=b1;p[1]=e1;
p[2]=b2;p[3]=e2;
p[4]=e2+end.length;
return true;
}
function toobj(str){
str=str.replace( /^\s+|\s+$/g, "" );
if(str.indexOf(',')==0) str=str.slice(1);
return Function('return {'+str+'};')();
}
function push(p){
if(0==obj.length){
obj.push(p);
return ;
}
var pos=false;
for(var i = 0;i < obj.length; ++i)
if (p.begin>obj[i].begin) pos=i+1;
if(pos==false)
obj=[].concat([p],obj);
else
obj = obj.slice(0,pos).concat([p],obj.slice(pos));
}
var obj=[];
/*config分析*/
var p=[0,0,0,0,0];
if(slice(this.Config.config,0,p,module.length)){
module=module.slice(p[0],p[1])+module.slice(p[2],p[3])+module.slice(p[4]);
if(slice(this.Config.remove,0,p,module.length)){
var remove=toobj(module.slice(p[2],p[3]));
if (typeof remove=='object')
for (var prop in remove){
if (typeof remove[prop] =='object'){
if (this.Remove[prop]==undefined)
this.Remove[prop]={};
for(var s in remove[prop])
this.Remove[prop][s]=remove[prop][s];
}else
this.Remove[prop]=remove[prop];
}
module=module.slice(p[0],p[1])+module.slice(p[4]);
}
for (var i in this.Config.tag) {
if(slice(this.Config.tag[i],0,p,module.length))
push({begin:p[1],end:p[4],name:i});
}
}
var pk=[];
var pos=0;
obj.push({begin:module.length,end:module.length});
for (var i = 0; i < obj.length;i++) {
pk.push({src:module.slice(pos,obj[i].begin),name:obj[i].name||''});
pos=obj[i].end;
}
return pk;
},
/**
* 根据依赖关系生成 module 打包次序
*/
sort:function(){
function find(str){
for (var i=0;i<order.length;i++) {
if (order[i]==str) return i;
}
return null;
}
var order=this.Order=[];
var pos;
for (var i in this.Dep) {
pos=find(i);
if(pos!=null) {
for (var j in this.Dep[i]) {
if (typeof this.Dep[i][j] !='boolean') continue;
var pos2=find(j);
if (pos2<pos) continue;
var str=order[pos];
order[pos]=order[pos2];
order[pos2]=str;
}
continue;
}
for (var j in this.Dep[i]) {
if (typeof this.Dep[i][j] !='boolean') continue;
pos=find(j);
if(pos!=null) continue;
order.push(j);
}
order.push(i);
}
return;
},
/**
* 多粒度获取依赖关系 this.Dep 的信息
* this.Dep 整个依赖关系
* this.Dep[module] 某个 module 的依赖关系
* this.Dep[module][dep] 检查某个 module 是否依赖于 dep
*/
getdep:function(module,dep){
if(undefined==module && undefined==dep) return this.Dep;
if(dep && this.Dep[module])
return this.Dep[module][dep];
return this.Dep[module];
},
/**
* 多粒度获取 this.Remove 的信息
*/
getremove:function(key){
if (undefined==key)
return this.Remove;
return this.Remove[key];
},
/**
* 生成打包前的数据
* modules:[]
*/
prePacker:function(modules){
var pack={};
for (var i =0 ;i<modules.length;i++) {
pack[modules[i]]=[];
for (var j in this.Dep[modules[i]]) {
pack[j]=[];
}
}
var prepack=this.Data.prePack={};
for (var i = 0; i < this.Order.length; i++) {
var m=this.Order[i];
if(pack[m]){
for(var j in this.Pk[m])
pack[m]=pack[m].concat(this.Pk[m][j]);
prepack[m]=pack[m];
}
}
return this;
},
/*给不同的需求留下的自定义处理数据处理对象*/
Data:{},
nicEdit:function(pre,iconsPath){
if(!pre) pre='';
if(iconsPath)
iconsPath='"'+iconsPath+'"';
else
iconsPath='nicEditIconsPath';
var prePack=this.Data.prePack;
var pack=[];
if(typeof pre=='string') pack.push(pre);
var pos=0;
var iconList=[];
/*偷懒的图片全部打包*/
for (var i in this.Remove.iconFiles)
iconList.push('"'+i+'":'+(++pos));
iconList = '{'+iconList.join()+'}';
for(var i in prePack)
for(var j=0;j<prePack[i].length;j++){
pack.push(prePack[i][j].src);
if(''==prePack[i][j].name) continue;
switch(prePack[i][j].name){
case 'iconsPath':
pack.push(iconsPath);
break;
case 'iconList':
pack.push(iconList);
break;
}
}
this.Data.pack=pack.join('');
},
/**
* 配置语法
*/
Config:{
/*配置文件*/
configfile:'nicConfig.js',
/*配置开始和结束*/
config:{
begin:'/* START CONFIG */',
end:'/* END CONFIG */'},
/*需要删除的代码*/
remove:{
begin:'/* NICEDIT_REMOVE_START */',
end:'/* NICEDIT_REMOVE_END */'},
tag:{/*需要替换的配置*/
/*合并图标文件的URL路径*/
iconsPath:{
begin:'/* NICEDIT_ICONSPATH_START */',
end:'/* NICEDIT_ICONSPATH_END */'},
/*图标和标号列表*/
iconList:{
begin:'/* NICEDIT_ICONLIST_START */',
end:'/* NICEDIT_ICONLIST_END */'}
}
}
}
分享到:
相关推荐
非常轻量级的所见即所得web编辑器,只有一个js文件和一个图片文件
最轻量级的的web页面富文本编辑器,只需要一个js文件和一个gif文件。
NicEdit is a simple HTML pages online editor
非常小功能齐全的文字编辑器
demo1中的方法是给页面中所有textarea增加编辑器 demo2中的这个方法是给...<script src="nicEdit.js" type="text/javascript">该方法加载编辑器js js文件中iconsPath : 'nicEditorIcons.gif'语句设置编辑器图片路径
这是一个相当轻量级的 所见即所得编辑器, 跨平台的Inline Content Editor。NicEdit能够让任何 ...NicEdit是我见过最轻量级的富文本编辑器,总共就一个JS文件和一张图片,经过我在项目里的使用情况来看,相当好用。
NicEdit官方API帮助文档,英文PDF版!
NicEdit Javascript 能够快速地整合到任一站点中并使得任一元素/DIV变的可以编辑或将标准文本区域转变成富文本形式来进行编辑。 下载的文件包含了NicEdit 所有的功能和插件,适合开发使用的未压缩的js。
nicEdit 是一款简洁的HTML网页在线编辑器,上传功能需要自己添加,nicEdit除了上传功能外,几乎包括了常用的网页文字编辑功能,包括排版、字体样式设计、表格插入、图片插入等,若对编辑器上传功能无要求的话,...
ajax无刷新的编辑器,所见即所得!兼容各浏览器 具体如何结合后台可以参考官方网站http://nicedit.com的说明。
简单使用的JavaScript文本编辑器!
NicEdit富文本编辑器是一个非常简洁的轻量级网页编辑器插件,跨平台的Inline Content Editor。
NULL 博文链接:https://zhuyuehua.iteye.com/blog/1975221
JS富文本编辑器插件NicEdit是一款轻量级插件,跨平台的Inline Content Editor。
js不超过100K,简单易用,附有Demo
JS 插件NicEdit富文本编辑器特效源码.zip
本插件利用开源ajax-js代码NicEdit作为核心,使得Wordpress的评论输入框成为一个所见即所得(WYSIWYG)的图文编辑框,从而提高评论输入内容的精彩程度。 浏览器支持: IE6.0以上,FireFox,Opera,Safari,Chrome ...
JS 插件 NicEdit 富 文本编辑器特效源码, 其中强大的功能, 实现更为丰富的页面显示效果
轻量级文本编辑器,使用于各种论坛,下载后可以直接调用,非常方便