Home - Julienedies/brick GitHub Wiki

Welcome to the brick wiki!

简介

brick是一个轻量级前端开发框架，基于jQuery(或zepto)和underscore。主要用于提升前端页面开发效率及复杂功能页面js代码的组织性和维护性。其设计及实现主要借鉴并且反映了angular的前端开发思想及解决方案。

其主要思想包含两点：

1.对代码类型进行划分，隔离。

因为前端开发通常同时涉及html、css、js，通过对代码类型进行划分，以提高代码复用性及维护性。通常分为以下几种类型的代码：

controller（控制器）类型代码，主要用于衔接dom操作及service调用：
service（服务）类型代码：主要用于封装纯js操作类型代码，会比较接近于mvc里m的概念。复用程度高；
directive（指令）类型代码，通过自定义dom属性的方式为所属dom元素绑定行为。主要用于封装操作dom的代码，譬如一个典型的标签页功能。复用程度高;

2.尽量解耦js行为与css样式。

虽然已经存在众多的UI组件，但是其使用便捷性及移植性并不好。譬如虽然jQuery提供了jQuery UI，但实际项目开发中，很少有人会直接使用jQuery UI的样式，很多时间精力花费在样式的修改上。考虑到这点，通过指令的形式提供基本的js行为，用户可以随意定义模板及样式；

ToDo 示例

https://julienedies.github.io/brick/public/example/todo/index.html

相关概念

1.服务(service)

服务通常是一个单例对象。用于封装特定的功能。例如对一个数据模型的增删改查。mvc里的v通常可以作为一个service存在。但service并不仅仅限于v。使用brick.services.reg方法注册service。一个service被注册之后，就可以通过依赖注入的方式，在声明对其依赖的控制器或其它服务中被使用。例如以下代码定义了一个名为stocksModel的服务：

brick.services.reg('stocksModel', function(){

 return {
      get: function(id){
               /* 从服务器获取股票列表模型*/
                return [];
       }
 };

});

2.控制器

控制器本质就是一个函数。作用的话比较像mvc里的c。定义一个控制器的同时，也即声明了一个作用域对象。该作用域对象在控制器初始化时作为实参被注入，对应于形参scope。使用brick.controllers.reg方法定义并注册一个控制器。控制器的定义需要必须的两个参数，控制器id，控制器Factory function，可选的控制器配置。例如：

brick.controllers.reg('demoCtrl',function(scope, stocksModel){
  console.log(this === scope) // true
  console.log(stocksModel === brick.services.get('stocksModel')) // true
  scope.name = 'me';
  scope.getTimestamp = function(){return +new Date};
},{depend:['stocksModel']});

以上的代码定义了一个id为demoCtrl的控制器，可选的第三个参数声明了该控制器依赖的服务。声明的依赖服务会在控制器初始化时，紧接着scope作为实参被传入。通过为scope实例添加属性的方式，提供对外可用的方法和属性。

3.指令

指令通常是操作dom的代码。通过自定义html属性的方式声明和绑定。

其实html元素中有很多属性都可以理解成一个指令。譬如一个文本输入框的maxlength属性可以定义最大输入字符长度；有title属性的元素会在鼠标滑入的时候显示title属性包含的字符串；一个有href属性的链接被点击之后进入到href属性指向的新页面，这些统统可以理解为指令。只不过这些指令对应的行为是由浏览器实现的。

在brick中，通过自定义属性声明的方式应用一个指令。譬如以下代码通过定义ic-pagination属性应用了ic-pagination指令，该指令定义了一个分页控件：

                <div class="pagination"
                     ic-pagination="companies"
                     ic-pagination-rows="30"
                     ic-pagination-total="32"
                     ic-pagination-step="10" >
                    <span class="prev" ic-role-pagination-prev>&lt;</span>
                    <span class="ellipsis" ic-role-pagination-ellipsis>...</span>
                    <span class="num" ic-role-pagination-num="{{}}">{{}}</span>
                    <span class="next" ic-role-pagination-next>&gt;</span>
                </div>

查看效果