/TBjs

Primary LanguageJavaScript

TBjs开发文档

关于我:

QQ:464328895 由于本人能力有限,且读书少,英语更是烂上加烂,所以希望有兴趣的童鞋一起参于开发。

部分文档

当前前端框架及类库的一些限制(见识所限,难免谬误):

React

本身并没有做什么事,只是提供一了套前端组织代码的方法,JSX虽好,但需要编译,否则前端需要加载JSX的解析文件,不利于前端精简代码……

Angular

angular各种好,但2.0跳崖式升级,想必大家的有所诟病,另外不利于SEO,虽然有其他迂回的方法,但还是让人不爽,模板和指令很好,但后台不认识……

jQuery

这个基本不用说了,大家太熟悉,jQuery提供了一套非常优雅的API,操作DOM非常方便,但基本可能说,也仅些而已。

项目简介:

由于在实际开发过程中,因为前后台的一些差异,往往同样的逻辑需要实现两遍,且不能做到模板通用,所以爱折腾的我发起这个项目。TBjs发起的初衷是想成为一个具有模块化、MVC、AMD异步加载、数据双向绑定,整合第三方代码容易,当然,最重要的是能__前后台通用代码__,这样后台就能完成由前端模板及代码完成首屏渲染,有利于seo,前台也通过后台生成的页面,自动识别并做好数据映射。
在项目开发过程中,借鉴了Angular、React、jQuery的一些**,甚至有的代码是直接参考,但有的地方也有很大的不同,为了大家便于理解,故把整个工程的代码模块,用处,及最后的使用demo发布如下:

项目文件简介(可能因为不能及时更新,有所不同):

  • classes 源码目录
    • src 框架源文件
      • amd 类requirejs的AMD模块化框架
      • bootstrap 启动已注册的应用
      • injector 依赖注入方法
      • main 框架主文件
      • main 框架主文件
      • toolkit 公共方法集合
      • providers
        • ast 构建抽象语法树
        • async 兼容Node和Web的异步文件服务
        • compile 虚拟DOM编译器
        • directive 指令服务
        • lexer 词法分析器
        • model 数据模型
        • module 模块服务
        • parse 语法树解析器
        • promise 异步回调解决方案
        • query 兼容DOM和虚拟DOM的类jQuery类库
        • virtualDom 虚拟DOM成生器
      • directives
        • event 一般DOM事件指令集合
        • tbClass
        • tbFor
        • tbIf
        • tbInit
        • tbModel
        • tbModule
        • tbShow
        • tbStyle
        • tbTemplate
  • TBjs.html 测试文件

例用范例:

以下demo是当前开发进度下可能的预览,正式发布时可能有所更改

注册一个应用
var TBjs = require('TBjs');
var myApp = TBjs.app('myApplication');
给myApp注册通用服务

TBjs的service跟angular不同,TBjs只实现了angular的provider,剔除了angular的factory、service、value等方法,相应功能推荐用TBjs的AMD模块来定义:

返回一个常量
myApp.directive('serviceA', function() {
	var value = 'yourValue';
    this.$get = function() {
		return value;
	}
})
service中的依赖注入

依赖注入同angular一样,以数组的方式传入,最后一个元素为函数,函数参数会按照数组的书写顺序依次传入

myApp.service('serviceF', function() {
	this.$get=['service1', 'service2', function(service1, service2) {
		return 'value';
	}]
})
给myApp注册指令

指令是指在DOM元素中的一些有特殊行为的属性,TBjs的指令和Angular的指令不同,demo如下:

myApp.directive('myDirective', function() {
    return function(data, virtualDom, services) {
        //your code
    }
});

或者

myApp.directive('myDirective', function() {
    return {
        priority: 0,
        controller: function(data, virtualDom, services) {
            //your code
        }
    }
});

参数说明:

  • data:当前作用域的数据对象
  • virtualDom:应用当前指令的虚拟dom
  • services:当前指令所属application的服务集合

如果直接返回一个函数,TBjs会把这个函数当作controller来使用,并传入相应函数,但指令应用执行的优先级交由TBjs自动处理。

如果返回的是一个对象,TBjs会跟据这个对象的priority属性的值来确定优先级,并根据对应优先级来调用controller函数。 指令优先级顺序在TBjs开发完成后,将会在文档中公布。

给myApp注册模块

TBjs的模块是一个包含数据模型,视图模板的集合,有点类似于Angular中controller和direcitve的一部分,更像是React中component的概念,demo如下:

如果直接返回一个函数,那么这个函数将会被当做构造函数来调用,并传入当前module所属的已实例化的application的服务的集合

myApp.module('myModule', function() {
    return function() {
        this.name = '张三';
        this.age = 24;
        var _this = this;
        this.changeName = function() {
            _this.name = '李四';
        }
    }
})

或者这样

myApp.module('myModule', function() {
    return {
        template: '一个模板字符串',
        templateUrl: '一个模板字符串的url地址',
        model: function() {
            this.name = '张三';
            this.age = 24;
            var _this = this;
            this.changeName = function() {
                _this.name = '李四';
            }
        }
    }
})

如要需要服务,注入方式和angular一样:

myApp.module('myModule', ['serviceA', function(serviceA) {
    return {
        template: '一个模板字符串',
        templateUrl: '一个模板字符串的url地址',
        model: function() {
            this.name = '张三';
            this.age = 24;
            var _this = this;
            this.changeName = function() {
                _this.name = '李四';
            }
        }
    }
}])