`
achun
  • 浏览: 306696 次
  • 性别: Icon_minigender_1
  • 来自: 河南郑州
社区版块
存档分类
最新评论

[nicEdit专题]bkClass , bkElement and bkEvent

阅读更多

bkClass :

看名字就知道和类有关,不过javascript中没有Class的概念,一切都是对象。BK要做什么呢?

看看bkClass的代码:

function bkClass() { }
bkClass.prototype.construct = function() {};
bkClass.extend = function(def) {
  var classDef = function() {
      if (arguments[0] !== bkClass) { return this.construct.apply(this, arguments); }
  };
  var proto = new this(bkClass);
  bkExtend(proto,def);
  classDef.prototype = proto;
  classDef.extend = this.extend;      
  return classDef;
};

 好似是对象的Clone,当然了,因为javascript里没有Class,要模拟Class的话当然是Clone了,(注意不是深度Clone,因为bkExtend是引用的扩展)

当然更重要的是在Clone的同时,还进行了扩展,construct,extend,
都是Class所具备的最基础特性。

bkExtend(proto,def);

 bkExtend有返回值的,怎么没有用到?这是javascript本身的特性,当函数的参数是一个非简单对象(string,boolean,Number)时,传递的其实是实参,也就是对象引用了。

也就是bkClass把一个对象扩展的都像bkClass一样,好像是一个简单的Class工厂.

当然你在使用的时候要遵循的一个基本规则就是自己实现对象的

construct

方法,因为javascript并没有 因为名字是 construct 就真的自动去调用他的。调用construct正是

 if (arguments[0] !== bkClass) { return this.construct.apply(this, arguments); }

这一句,

(补充:javascript的构造属性是 constructor ,具体细节请您查查资料)

好了,通过bkClass来定义你的对象,这样你的对象就具备了 Class 中的,construct,和Exend这两大基本特征了。

bkElement :第一个用bkClass构建的对象。

bkElement就像他的名字一样是对DOM中的Element进行的封装,内部实现的都是我们常见的操作内容,包括:

创建Element
添加兄弟Element
添加 子Element
样式Style
样式类名Class
属性Attributes
在页面中的位置Pos
设置内容Content等
还有最重要的事件Event操作,当然后面我们回发现这里的事件不同于一般的事件,是自定义的事件,可以通过代码触发的事件,这就是一个简单的事件模型了.

再看看 bkEvent :

addEvent

看代码的话感觉只是名字叫Event,其实内部就是把传递过来的evFunc存储起来了,对就是这样因为触发靠的是代码方式

fireEvent

就是提供 触发 的接口了。

看上去代码很清晰,结构也很简单呀!

是这样的,BK就是用这些简单的工具来组合出nicEdit的

 

分享到:
评论

相关推荐

    nicEdit_脚本实例_

    NicEdit is a simple HTML pages online editor

    NicEdit编辑器API文档

    NicEdit官方API帮助文档,英文PDF版!

    NicEdit-Textarea编辑器

    NicEdit能够让任何 element/div变成可编辑或者能够把标准的TextArea转换成富文本编辑器。 NicEdit是我见过最轻量级的富文本编辑器,总共就一个JS文件和一张图片,经过我在项目里的使用情况来看,相当好用。

    nicEdit HTML网页在线编辑器.rar

    nicEdit 是一款简洁的HTML网页在线编辑器,上传功能需要自己添加,nicEdit除了上传功能外,几乎包括了常用的网页文字编辑功能,包括排版、字体样式设计、表格插入、图片插入等,若对编辑器上传功能无要求的话,...

    nicedit

    非常小功能齐全的文字编辑器

    nicEdit中文以及官方demo(自己汉化的)

    demo1中的方法是给页面中所有textarea增加编辑器 demo2中的这个方法是给...<script src="nicEdit.js" type="text/javascript">该方法加载编辑器js js文件中iconsPath : 'nicEditorIcons.gif'语句设置编辑器图片路径

    nicEdit(html编辑器) v0.9 r23

    NicEdit 是一个轻量级,跨平台,内联的内容编辑器。能够使你很容易地浏览器上实时的编辑站点内容。NicEdit Javascript 能够快速地整合到任一站点中并使得任一元素/DIV变的可以编辑或将标准文本区域转变成富文本形式...

    NicEdit基于AJAX 技术的WYSIWYG 在线编辑器

    ajax无刷新的编辑器,所见即所得!兼容各浏览器 具体如何结合后台可以参考官方网站http://nicedit.com的说明。

    简洁的富文本编辑器NicEdit插件

    NicEdit富文本编辑器是一个非常简洁的轻量级网页编辑器插件,跨平台的Inline Content Editor。

    nicEdit源代码

    非常轻量级的所见即所得web编辑器,只有一个js文件和一个图片文件

    nicEdit富文本编辑器

    NULL 博文链接:https://zhuyuehua.iteye.com/blog/1975221

    html文本编辑器(nicEdit)

    简单使用的JavaScript文本编辑器!

    nicEdit 编辑器

    最轻量级的的web页面富文本编辑器,只需要一个js文件和一个gif文件。

    nicEdit轻量级网页富文本编辑器

    js不超过100K,简单易用,附有Demo

    WP-NicEdit 0.1插件 for Wordpress.zip

    插件名称:WP-NicEdit 0.1 开发人:mac 本插件利用开源ajax-js代码NicEdit作为核心,使得Wordpress的评论输入框成为一个所见即所得(WYSIWYG)的图文编辑框,从而提高评论输入内容的精彩程度。 浏览器支持: ...

    nicEdit 支持图片上传 php

    最新版 nicEdit 支持图片上传,和压缩保存 php版 具体应用时,注意 文件路径

    前端项目-NicEdit.zip

    前端项目-NicEdit.zip

    已经修改好的nicEdit,可以实现上传

    别人写好的例子,好东西大家一起共享。 只有一个js文件和一张图片,总共才200k. 不依赖jQurey。 上传的代码可以自己实现,传回参数也可以不需要用到json包。但是如果你图方便,也可以copy到工程直接使用。

    nicEdit轻量级文本编辑器

    轻量级文本编辑器,使用于各种论坛,下载后可以直接调用,非常方便

Global site tag (gtag.js) - Google Analytics