JavaScript AJAX

使用管道(props)和公共方法(methods)作为指针进行调用!

this.props

state内部 '.size'和'.main' 节点可通过管道流出，在this.methods内部使用$scope获得this.props返回的属性.

this.props = function (){
    return {
        state: [{static:'.size', class:'.main'}]
    }
}

this.methods

返回对象为公用API方法, 然而this.el方法接收props管道的属性!

如果是单个state属性直接保存, 如：this.el($scope.state.static);

如果是多个state属性使用[]数组保存, 如： this.el([$scope.state.static,$scope.state.class]);

this.el().后面的add()方法为调用公用API方法addClass.

this.methods = function  () {
    var $scope = this.$scope
    return {
        addClass: function ($scope){
            this.el([$scope.state.static, $scope.state.class]).add()
        }
    }
}

外部方法(如this.success)

然而外部的方法使用作用域$scope的方式调用el元素绑定的私有方法(如add(), remove(), push())

添加解析数据类型：调用json数据的格式, 通过$props方法传入一个args, 于是在后面的push方法调用到数组对内部的数据.

比如：

var suc = [{name:'yes'},{num:'123'}]
var props = $scope.$props
$scope.$props( {suc} ).$el(props.$scope.state.static).push('<em>{{' +props.$data.suc.name+ '}}<em>-')

另一种props不传入json格式, 调用push方法直接推入字符串.push('<div>123456</div>').

比如：

var scope = $scope.$props.$scope
$scope.$props().$el(scope.state.static).push('<div>123456<div>-')

合并如下：

function( $scope ) {
    var suc = [{name:'yes'},{num:'123'}]
    $scope.$props( ).$el($scope.$props.$scope.state.static).push('<div>123456<div>-')
    $scope.$props( {suc} ).$el($scope.$props.$scope.state.static).push('<em>{{' +$scope.$props.$data.suc.name+ '}}<em>-')
}

完整的示例

<html><body><style>.color{color: #FF0000}.font{font-size: 38px}</style><div class='main size'>hello world!</div>
<script src="https://koringz.github.io/rewrap/rewarper%200.12V/lib/wrap.js"></script>
<script>
wrap.service('ajax', function ajax() {
    this.props = function (){
        return { state: [{static:'.size',class:'.main'}] }
    }
    this.methods = function () {
        var scope = this.$scope
        return {
            pushHtml: function (scope) {
                this.el(scope.state.static).push()
            },
            addClass: function (scope) {
                this.el([scope.state.static,scope.state.class]).add()
            }
        }
    }
    this.URL = "query.do"
    this.TYPE = "GET"
    this.SUCCESS = function ( $scope, data ) {
        console.log(data)
        var scope = $scope.$props.$scope
        var props = $scope.$props
        var suc = [{name:'百度',val:'0'},{name:'淘宝',val:'0'},{name:'腾讯',val:'0'}]
        $scope.$props( {suc} ).$el(scope.state.static).push('<em>{{' +props.$data.suc.name+ '}}<em>')
    }
    this.ERROR = function ( $scope, err ) {
        console.log(err)
        var scope = $scope.$props.$scope
        var props = $scope.$props
        $scope.$props().$el(scope.state.static).add('color')
        $scope.$props().$el(scope.state.class).add('font')
        $scope.$props().$el(scope.state.static).push('<em>调用出错<em>')
    }
})
</script>
</body></html>

演示DEMO : REWRAP-AJAX TEST

Blog简介 : REWRAP-AJAX TEST

API方法：

'.props'
'.methods'
'.addClass'
'.hasClass'
'.pushHtml'
'.removeClass'
'.getEleId'
'.getSelector'
'.nextAll'
'.prevAll'
'.type'
'.url'
'.data'
'.success'
'.error'

ZWLTZ/rewrap-ajax