Backbone.js 使用模板

前面一篇 Backbone.js HelloWorld,应用起步 只是让 Backbone 跑起来,实际的应用中会使用到模板,Model 等,而模板又是进阶的基础。所以这里介绍在 View 中使用模板,以及如何向模板填充值,模板可以用字符串,或是用 <script type="text/template"> 声明的内容。使用 <%= %><%- %> 来声明变量输出的占位符。

Backbone 的模板要用到的是 underscore.js 库, 要深入了解 Unserscore 就看官方的 Underscore.js 的文档,Underscore 的 template 方法的原型如下:

_.template(templateString, [data], [settings])

下面是些完整的例子

一: 使用字符串模板

阅读全文 >>

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 的插件。

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