简介

ramda-jq 是把 jquery 转换为函数流风格 符合 ramda.js 的js库(对js的FP感兴趣的可以加群426566496一起讨论) 我只转换了一些常用函数 on,hide,show... 如果没有你需要的函数可以修改源码(转换类似 var hover = fntor2("hover"); 给出名字和参数个数就行俩) 随时提交pull request

初始化

引入依赖

<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/ramda/latest/ramda.min.js"></script>
<script src="../src/ramda-jq.js"></script>

接下来就可以直接使用了

var data = {
    msg: ["000000000", "1111111111"]
};
var pipe = R.pipe,
    split = R.split,
    jqpipe = ui.jqpipe;
var watch = pipe(
    ui.on("click", jqpipe(ui.attr("title"), R.concat("hello "), alert)),//点击触发:弹窗 hello+标题
    pipe(ui.find("[hover-up]"), ui.hoverToogle500(ui.find("[hover]"))),//鼠标划过hover-up显示或者隐藏hover 延迟500毫秒
    pipe(ui.find("[msg-path]"), ui.on("click", jqpipe(ui.attr("msg-path"), R.split("."), R.path(R.__, data), alert)))
);
watch($(document));

为什么使用函数流 而不是jq的链式 why

1. jq的链式 必须继承jq里面返回this 而且按照规范还得是跟dom相关 这既麻烦又不方便
2. 相比较函数流就好多了任何函数都可以组合进去(比如上面的 alert )近乎于完美
3. 写代码像是在写配置 功能一目了然 函数名字充当dsl

两个核心函数

ui.jq

等同于下面代码

function jq(fn) {
    return function(e) {
        return fn($(this), e);
    };
}

ui,jqpipe

等同于下面代码

function jqpipe() {
    return jq(r.pipe.apply(null, arguments));
}

一览表