基于Fatfree和Knockout的前后端分离的开发模式(2)

发表于

上一篇文章整理了这个开发模式的后端与数据库迁移方面的东西，这篇文章接着上一篇文章对前端的JS框架进行详细的介绍，由于我更加偏重于后端，因此对于前端的了解不够深入，文章仅做参考，具体的使用请自行查询文档，若文章存在问题，忘指正，以便进行修改。

1、Jquery.js框架

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery框架的出现大大减少了使用原生的js进行开发的速度问题，极大的简便了开发者。其中主要是简便了dom元素的查找和操作。

  • 选择器 开头符号：$()

    • 元素选择器 ：$(‘p’)
    • id选择器：$(‘#lab’)
    • 类选择器：$(‘.lab’)

  • 事件处理

    • on方法，能够绑定事

      1
      2
      3
      4
      $().on("",function(){
        //  ""中填写需要的时间
        //  该处填写需要执行的事件
      });

    • click 点击事件

      1
      2
      3
      $().click(function(){
        //  该处添加点击事件，其他的jquery方法可以类似的写
      });

  • AJAX方法

    • ajax方法（包括post方法和get方法，可以选择）

      1
      2
      3
      4
      5
      6
      7
      $.ajax({
        type: 'POST', // 选择方法
        url: url, // 上传URL地址
        data: data, // 提交数据
        success: success, // 请求成功后回调的函数
        dataType: dataType // 预期服务器返回数据类型
      });

    • post方法

      1
      2
      3
      4
      5
      6
      $.post(
        url,
        data,
        success(data, textStatus, jqXHR),
        dataType
      );

    • get方法

      1
      2
      3
      4
      5
      6
      $.get(
        url,
        data,
        success(response,status,xhr),
        dataType
      );

2、Require.js框架

require.js的诞生，就是为了解决这两个问题：

​ （1）实现js文件的异步加载，避免网页失去响应；

​ （2）管理模块之间的依赖性，便于代码的编写和维护。

现在，越来越多的js框架，并且js框架之间相互依赖，当依赖关系很复杂的时候，代码的编写和维护会变得更加困难。Require框架就是为解决着这些问题。

  • js加载

    • 添加js文件在js目录，直接加载

      1
      <script src="js/require.js"></script>

    • 异步加载

      1
      <script src="js/require.js" defer async="true" ></script>

    • 加载页面js文件

      1
      <script src="js/require.js" data-main="js/main"></script>

    • 当很多js文件，且依赖文件相同，可以简化，导入一次配置就可以了

      1
      2
      3
      <script src="js/require.js"></script>
      <script src="js/config.js"></script>
      <script src="js/main.js"></script>

  • 主模块

    使用AMD规范定义的的require()函数。

    1
    2
    3
    4
    // main.js
    require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
        // some code here
    });

    例如：

    1
    2
    3
    require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
    	// some code here
    });

    js文件加载会先加载jquery、underscore、backbone，再运行回调函数。

  • 模块加载

    针对依赖的问题，我们需要对模块的加载进行自己定义。require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。

3、Knockout.js

Knockout是一款很优秀的JavaScript库，它可以帮助你仅使用一个清晰整洁的底层数据模型（data model）即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新（比如：依赖于用户行为的改变或者外部的数据源发生变化），KO都可以很简单的帮你实现，并且非常易于维护。

我们使用Knockout来做数据的双向绑定，主要使用data-bind在View上进行数据绑定。

  • 建立数据模型

    在MVVM的设计模式中，View Model是很重要的一环，通过使用KO建立一个View Model，需要声明一个JS对象。例如：

    1
    var people = {name: 'xiaoming', age: '12'}

  • 激活对象

    data-bind属性并不是HTML固有对象，但使用它是完全正确的（这是完全遵守HTML5，尽管有验证器指出这是一个无法验证的属性，但在HTML4当中使用是不会造成任何问题的）。但浏览器并不知道它是什么意思，所以你需要激活Knockout来使其生效。

    1
    2
    3
    4
    5
    // 激活对象
    ko.applyBindings(people);

    // 设置使用data-bind属性的HTML元素或者容器
    ko.applyBindings(people, $('#people'));

  • 数据绑定

    1
    <span data-bind="text:name">