标签归档:翻译

CodeMirror 模块加载器

在CodeMirror分发的文件中,包含了在AMD或者CommonJS环境加载他们(及其依赖)的加载器。如果变量 exports和module存在,并且是object类型,那么会使用CommonJS的require方式;如果不存在,但是有包含amd属性的define函数,那么就会使用AMD(RequireJS)的方式。

CodeMirror可以使用Browserify或类似的工具来静态编译模块。另外,使用RequireJS在运行时动态加载依赖。这两种方法都不会使用僵尸的命令空间,比如,需要加载多版本的CodeMirror并独立使用的情况。

正面是使用 RequireJS 加载CodeMirror的例子:

require([
  "cm/lib/codemirror", "cm/mode/htmlmixed/htmlmixed"
], function(CodeMirror) {
  CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    mode: "htmlmixed"
  });
});

这样会自动加载混合的HTML mode 所依赖的mode(XML, JavaScript, CSS)。不要使用 RequireJS 的 paths选项来配置CodeMirror的路径,因为使用paths会由于使用相对路径而破坏子模块的加载,使用packages来代替,如:

require.config({
  packages: [{
    name: "codemirror",
    location: "../path/to/codemirror",
    main: "lib/codemirror"
  }]
});

CodeMirror 基本用法

使用CodeMirror最简单的方法就是加载 下的js和css,再加上mode/目录下的mode js文件就好了。例如:

<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="mode/javascript/javascript.js"></script>

然后,就可以创建CodeMirror实例了:

var myCodeMirror = CodeMirror(document.body)

编辑器会被附加到body内,并且将使用前面加载的mode。要对新的编辑器进行更多控制,可以配置对象作为二个参数传给CodeMirror

var myCodeMirror = CodeMirror(document.body, {
  value: "function myScript(){return 100;}\n",
  mode:  "javascript"
});

此操作会初始化编辑器并往里面放一个代码片段(value部分),并且明确指定使用javascriptmode(这种做法在页面上加载了多种mode的时候很有用)。

有的时候,不想将编辑器添加到某元素内,而是希望能更好地控制其添加方式,那么给CodeMirror的第一个参数也可以是一个用于将编辑器放到某个指定元素内的函数。例如,使用一个真正的编辑器替换textarea

var myCodeMirror = CodeMirror(function(elt) {
  myTextArea.parentNode.replaceChild(elt, myTextArea);
}, {value: myTextArea.value});

这是通常使用CodeMirror的方法,然后CodeMirror还提供了一个更强大的简便方法:

var myCodeMirror = CodeMirror.fromTextArea(myTextArea);

这样做可以确保在form提交时(前提:属于form)textarea的值可以随着编辑器的值更新。

jQuery事件 .one()函数

函数原型

.one()

说明:将事件处理函数绑定到元素上。每个元素上的每种事件的处理函数最多只会执行一次。

阅读全文 jQuery事件 .one()函数

jQuery事件 .die()函数

函数原型

.die() (从jquery1.7开始不建议使用,到jquery1.9就移除了)

说明:移除通过.live()预绑定到元素上的事件处理函数。

阅读全文 jQuery事件 .die()函数

jQuery事件 .live()函数

函数原型

.live( events, handler ) (从jquery1.7开始不建议使用,到jquery1.9就移除了)

说明:将事件处理函数绑定到所有与当前选择器匹配的元素上,对现在和将来都有效(注:也就是说对现在存在于DOM中的元素和在执行了此函数后再添加到DOM中的元素都有效)。

阅读全文 jQuery事件 .live()函数

jQuery事件 .unbind()函数

函数原型

.unbind( eventType [, handler ] )

说明:移除预绑定(previously-attached)到元素的事件。
阅读全文 jQuery事件 .unbind()函数

jQuery 事件 .bind() 函数

函数原型:
.bind( eventType [, eventData ], handler )

说明:
给元素的事件绑定处理函数。
阅读全文 jQuery 事件 .bind() 函数

YUI工具部分-Cookie

YUI的Cookie工具提供了一组方便的函数用于创建和操作Cookie(和子Cookie(subCookie))。
关于 HTTPOnly Cookies 需要注意: HTTPOnly Cookies 是由Javascript或者服务器设置的Cookie,但是不能使用Javascript读取。由于浏览器对HTTPOnly Cookie 的支持尚不完善,所以YUI没有提供对HTTPOnly Cookie的支持。
阅读全文 YUI工具部分-Cookie

YUI工具部分-动画(Anim)

YUI的动画工具提供了一种以动画的效果来改变属性样式的方法。
阅读全文 YUI工具部分-动画(Anim)

YUI核心部分-事件 (Event)

YUI事件工具提供了工作在浏览器DOM事件上的API,它简化了如给按钮绑定点击事件(click)或取表单的提交事件(submit),而使用AJAX来与服务器完成数据交互。DOM事件相关的API是由 EventTargets 类提供的。
阅读全文 YUI核心部分-事件 (Event)