JavaScript 学习笔记十一 函数高级应用

 var logs = function (str) {
            document.writeln(str + "<br>");
        }

        //利用闭包,保存两个对象各自成员的值，避免两个对象的成员的值影响
        var s = function () {
            var i = 0;
            return function () {
                return i++;
            }
        }
        var aa = s();
        logs(aa()); //aa 对象返回 0
        var ab = s();
        logs(ab()); //ab 对象返回 0
        logs(aa());  //aa 对象返回 1
        logs(ab()); //ab 对象返回 1

        var sdd = Base.extend({
            constructor:function () {
                this.name = 'bb';
            },
            name:"sdd",
            age:10,
            getName:function () {
                return this.name;
            }
        });
        var sddc = new sdd();
        logs(sddc.getName()); //bb

        //匿名函数的高级应用
        var mapped = [10, 2, 3].map(function (x) {
            return x * 2
        });
        logs(mapped);  //20,4,6

        [
            {id:"item1"},
            {id:"item2"},
            {id:"item3"}
        ].map(function (current) {
                    logs(current.id);   //     item1     item2      item3
                });

        // 柯里化
        //柯里化就是预先将函数的某些参数传入，得到
        //一个简单的函数，但是预先传入的参数被保存在闭包中，因此会有一些奇特的特性。
        var adder = function (num) {
            return function (y) {
                return num + y;
            }
        }
        var inc = adder(1);   //inc/dec 两个变量事实上是两个新的函数，可以通过括号来调用
        var dec = adder(-1);
        logs(inc(99));// 100   ++1   logs(adder(1)(99));
        logs(dec(99));//98     --1   logs(adder(-1)(99));

        //eg...当请求从服务端返回后，我们需要更新一些特定的页面元素，也就是局部刷新的概
        //      念。使用柯里化，则可以很大程度上美化我们的代码，使之更容易维护
        function update(item) {
            return function (text) {
                $("div#" + item).html(text);
            }
        }
        //Ajax请求，当成功是调用参数callback
        function refresh(url, callback) {
            var params = {
                type:"echo",
                data:"dd"
            };

            $.ajax({
                type:"post",
                url:url,
                cache:false,
                async:true,
                dataType:"json",
                data:params,
                //当异步请求成功时调用
                success: function(data,status){
                    callback(data);
                },
                //当请求出现错误时调用
                error: function(err){
                    logs("error : "+err);
                }
            });
        }
        refresh("action.do?target=news", update("newsPanel"));

 

评论

3 楼 sblig 2012-05-22  

<div id="newsPanel"> aa</div>
<div id="articlePanel"> bb</div>
<div id="picturePanel"> cc</div>

2 楼 sblig 2012-05-22  

refresh("action.do?target=news", update("newsPanel"));
refresh("action.do?target=articles", update("articlePanel"));
refresh("action.do?target=pictures", update("picturePanel"));
//其中，update 函数即为柯里化的一个实例，它会返回一个函数，即：
update("newsPanel") = function(text){
$("div#newsPanel").html(text);
}
/*由于 update(“newsPanel”)的返回值为一个函数，需要的参数为一个字符串，因此在
refresh 的 Ajax 调用中，当 success 时，会给 callback 传入服务器端返回的数据信息，
从而实现 newsPanel 面板的刷新，其他的文章面板 articlePanel,图片面板 picturePanel
的刷新均采取这种方式，这样，代码的可读性，可维护性均得到了提高。*/

1 楼 sblig 2012-05-22  

<script type="text/javascript" src="js/Base.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>