通过json-server学习Backbone

最近又再读Backbone源码,其实感觉源码学起来不困难,困难的是每个层之间的如何通信和联系,怎么去用mvc的思想去,写一个应用,而至用backbone源码里的方法和属性,我觉得可以像学jQuery一样,用到就查一下,没有必要全记住,当然常用的要知道。

json-server是一个以nodejs架设的REST 接口。

Give it a JSON or JS file and it will serve it through REST routes.
Created with <3 for front-end developers who need a flexible back-end for quick prototyping and mocking.

上面这段话就很容易理解了。至于我为什么要用它,不单是学习backbone要用到类似的接口,另一方面,在工作中有时候做前端需要请求一些服务器的数据,这时候一般前端开发都比后端要快些,我可以用这个小服务器做为我的私有数据接口模型,服务器返回的数据,这样就减少的联调的时间。我也不用一直等后端的数据了。

如何使用json-server

下面这是jsonServer的地址

https://github.com/typicode/json-server  
http://jsonplaceholder.typicode.com/  

官方文档很清楚了,不过有文档也不一定有多完美,官方还提供了一个在线版的接口,也做使用,不过数据太死板。我简单的总结一下,以便我自己使用,也便于搜索到此文章的人使用。

首先,安装nodejs,这些都不用说了然后 npm install -g json-server 安装到全局,然后可以使用json-server执行,下面就是帮助文档了,很简单了不过多介绍

json-server <source>
Examples:
  json-server db.json
  json-server file.js
  json-server http://example.com/db.json
Options:
  --help, -h     Show help
  --version, -v  Show version number
--port, -p     Set port             [default: 3000]

继续阅读

编写可维护的JavaScript 记录

随便记录一些书中重要的,因为当你真正自己写一个相对完整的前端项目,
你会发现你没有命名规范,没有一些模式,没有一些注释你以后就真的别想维护了。

代码格式及命名规范

代码4空格缩进,每行不要超过80个字符,如果判断条件过长,那么换行在运算符后换行的代码缩进也为4个空格
每个函数语句结尾不加分号, 每个流控制语句之前加入空行 方法之间也要加入空行
在方法中的局部变量和第一条语句之间最好也要加入空行,方便阅读。
在多行或单行注释之前适当加入空行

常量用全大写字母 驼峰式命名变量名函数或方法的前缀是动词,变量的前缀是名词 例如

 can has is get set 
 var URL MAX_COUNT

继续阅读

JavaScript 修炼之道 笔记

Part 1 JavaScript 必备操作

动态选择方法及属性

根据某个条件来调用两个方法,做不同的处理,或是更改两个属性,使用”[]”来动态选择方法或属性

var actionFlag = true,
    actionObj = {
        show: function () {
            console.log('show');
        },
        hide: function () {
            console.log('hide');
        }
    };

actionObj[ actionFlag ? "show" : "hide"]();

模块模式实现代码访问控制

控制在私有作用域中的函数和变量暴露的越来越多,这时你的全局作用域被“污染”的可能性就会越来越大。
模块模式的主要思想,是为那些通过var关键字声明的标识符和函数创建 个私有作用域,只有定义在这个作用域里的函数才能直接访问这些数据。

var obj = (function () {
    var privateField = 42;
    var publicField = 'footbar';
    function processInternals () {
        console.log('internal stuff' + privateField);
    }

    function run () {
        processInternals();
        console.log('still private stuff'+ privateField);
        console.log('still public stuff'+ publicField);
    }

    return {
        publicField : publicField,
        run : run
    }
}())

obj.run()

使用可选 可变 命名参数

在多数情况下,需要为参数的“空值”给出更明确的定义

var rant = rant || ‘ie 6 must die

part 2 DOM、事件及定时器

Dom操作一般为分
获取dom元素
改变dom元素
修改dom元素

优先使用事件委托(一直未使用过,老是忘记了)

绝大多数的事件可以冒泡,假设我们有大量的元素,而且这些元素需要共享同一个行为,我们最好在DOM的高层次,也就是离这些元素最近的公共祖先上或在document上监听事件。

在dom的高层监听事件对加载ajax内容的行为也有好处,由于你在加载内容的’外面’进行监听,因此新添加进来的元素会自动获得现有的行为,而不需要在加载后设置额外的监听器。

JavaScript本质上是单线程的

你的JavaScript运行线程实际上和你的页面共享了同样的资源。当你的JavaScript代码运行的时候,任何页面渲染都不会发生。新的内容不会出现,内容无法重排,甚至被其他窗体所遮挡的页面也无法被重绘。

Part 3 UI技巧

……就第一章吸引了我,剩下的章节好像对我来说用处不是很大了。