Backbone.js HelloWorld,应用起步

Backbone 是一个 JavaScript 框架,可用于创建模型-视图-控制器 (model-view-controller, MVC) 类应用程序和单页界面。它试图让 JavaScript 应用程序更清晰结构化,所涉及到的概念有  View, Event, Model, Collection 和 Router,所以新手刚开始接触 Backbone 反而会显得零乱了。再加上网上找来的一些起步教程一上来就把 Event, Model, Collection 或是 Router 揽上了。其实新手最想要一个最简单的真相,因此第一个例子只需用到 View,其他的玩艺暂且搁置。

Backbone 强依赖于 Underscore,jQuery 是可选的,不过为操作 DOM 方便一般都会引用到 jQuery。

最简单的例子,分两步走:

1. Backbone.View.extend(obj) 创建一个 View 类型
2. 创建上一步得到的 View 的实例,实例化时将会调用前一步 obj.initialize() 方法

上代码(为方便起见,所有 JS 脚本都从公网上加载): 阅读全文 >>

JavaScript 获得代码行号和脚本文件名

比如要写一个 JavaScript 的日志输出工具,在方法 log.info() 中能得到调用它所在的文件和代码行号。和众多的日志工具一样,像 log4j,都是在程序代码中主动抛出异常,然后从异常栈中去查找到调用者所在的代码行和文件名。不过也就刚刚才了解到 JavaScript V8 引擎提供了自己的 StackTrace API,Chrome 和 Node.js 可用。先来看可通用的 JavaScript  抛异常 throw new Error() 的方式,下面的代码:

点击链接 http://jsfiddle.net/Unmi/53xas/ 执行,其中是用 document.write() 输出的,完整异常栈是: 阅读全文 >>

JSON.stringify(obj) 时 TypeError: cyclic object value 异常

从 ECMAScript 5th Edition 开始,JavaScript 内建了 JSON 对象,用来处理 JSON 的序列化和反序列化,有以下几个方法原型

JSON.stringify(obj [,filter]  [,indent])
JSON.parse(text [,reviver])

jQuery 也提供了 jQuery.parseJSON 方法,但是没有相应的序列化方法。

如果用  JSON.stringify() 来对一个有循环引用的 JSON 对象进行序列化,会产生 TypeError: cyclic object value 异常,类似下面的代码

点击链接 http://jsfiddle.net/Unmi/6eLFF/ 运行上面的代码  阅读全文 >>

JavaScript 模块应用与编程

前边有一篇关于 JavaScript 对象声明,可以作为是 JavaScript 模块化的一个铺垫。这里会涉及到两个话题模块的定义和引入,对于模块化的编程语言,我们可以用 include, require 或 import 那样的谓词来引入模块。回想下我们对于非模块化的 JavaScript 是怎么引入的,比如在 html 文件里 js 文件,用 <script src="some.js"></script>。如果是更动态一点就会用 document.createElement("script"), 再指定它的 src 属性为一个 js 文件,添加加到 DOM 中去的方式来加载 js 文件。

上面两种方式都不够优雅,我们现在想要实现为 require() 函数来引入 js 库的方式,所以 JavaScript 模块的规范就出现了 CommonJSAMD(Asynchronous Module Definition) 两种。

1. CommonJS

CommonJS 中有一个全局的  require() 方法,它就是执行 require() 代码后马上使用模块提供的属性或方法,它假定执行完 require() 行后,模块即已就绪。例如加载一个 'math' 模块

var math = require('math');
math.add(2, 3);

阅读全文 >>

JavaScript 对象声明

对象,类,模块的概念可以让系统更清晰,亦能增强代码的重用性。目前 JavaScript 规范本身并不支持类或模块,正在制定中的 ECMAScript 6th Edition 将会纳入类,模块的概念,不过不知会是何年马月的事,毕竟这不能像 JDK 升级那么干脆。

还有种办法来写模块化的 JavaScript 就是使用微软的  TypeScript 或是 Google 的 Dart,它们是面向对象的编程语言,能直接编译成兼容的 JavaScript 代码,有条件的可以去尝试。

回到现实来,就现有的 JavaScript 规范怎么去模块化。众所周知,JavaScript 中函数是第一等公民,所以我们早先是这样使用函数来声明对象的:

1. 原始写法(比直接调用函数显得高级些):

阅读全文 >>

35 个最好的 Ajax jQuery 自动完成插件,带例子

In this article,We are providing the best tutorials of Autocomplete in jQuery , ajax autocomplete and autosuggest with examples. jQuery Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.In these days every body want fast and instant search,for this reason many popular search engines like google are using this feature ajax autocomplete.Combination of Php,ajax and jQuery autocomplete gives some extra feature to autosuggest.

1. Ajax AutoComplete for jQuery

Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields. Built with focus on performance – results for every query are cached and pulled from …
Ajax AutoComplete for jQuery

Read More Demo 阅读全文 >>

jQuery 使用 $.getJSON() 跨域获取 JSON 数据

假设在服务器上有文件 http://test.unmi.cc/json.php 文件,它的内容为:

[代码 1]

要是在同一个域上要取该文件的内容,那好办,比如同为 test.unmi.cc 域上的 ajax.html 文件中写上:

[代码 2] 阅读全文 >>

WordPress Code Editor 插件让你在线编辑主题/插件即时语法高亮

晚上找了一些时候在线的即时语加亮组件,很多的,在线的代码编辑器就语法即时高亮上都可与客户端的编辑器相媲美了。有商业的,功能很丰富的,也有开源的,像 CodePress,   就很简单它支持 PHP, JavaScript, Java, Perl, SQL, HTML 和 CSS 代码的即时着色,完全由 JavaScript 来进行渲染。

顺着 CodePress 来搜索,恰好还找到一个能让我们在 WordPress 的后台在线编辑插件/主题的代码编辑框中实现语法着色,并且时编辑时实时语法着色哦,那就是插件:WordPress Plugin Code Editor,可以点击 Code Editor  链接下载并安装为 WordPress 的插件。

安装完启用后,使能看到编辑插件/主题时的代码都高亮了,使代码的可读性大大增加,编辑时即时的效果,能让你修改代码时出错的几率明显降低。 阅读全文 >>

在FCKEditor中使用插件UGeSHi-GeSHi实现代码高亮显示

本人安装了一个个人知识库管理系统 Knowledgeroot,选定了其中所见即所得编辑器比较好用的是 FckEditor,又再需要给它配上一款代码高亮的插件,于是找来了 UGeSHi-GeSHi。下面是从网络上摘来的在 FckEditor 中如何安装 UGeSHi-GeSHi 插件。

什 么是UGeSHi?UGeSHi是一个连接器,它把FCKEditor与GeSHi(采用PHP编程语言写的代码高亮插件,目前它已能高亮100多种程序 语言)紧密的结合在一起,您可以称为它为FCK插件,也可以称它为连接器(因为代码高亮的核心文件不是本人编写,本人只编写了其与FCKEditor整合 的过程)。

UGeSHi的功能:高亮程序代码,使程序代码美观且易读。

为什么采用GeSHi作为核心文件?原因很简单,因为GeSHi高亮足够完美,而且支持高亮的程序语言也很完善。

UGeSHi能高亮多少种程序语言?粗略的说可以高亮100多种,具体细节看下表: 阅读全文 >>