實例項目:獲取圖片 · PHP/Python/前端/Linux 等等學習筆記

[TOC] ## 示例 <details> <summary>index.html</summary> ``` <!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js"></script> <script src="flickr.js"></script> </head> <body></body> </html> ``` </details> <br/> <details> <summary>flickr.js</summary> ``` requirejs.config({ paths: { ramda: 'https://cdnjs.cloudflare.com/ajax/libs/ramda/0.13.0/ramda.min', jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min' } }); require(['ramda', 'jquery'], function (_, $) { var trace = _.curry(function (tag, x) { console.log(tag, x); return x; }); var Impure = { getJSON: _.curry(function (callback, url) { $.getJSON(url, callback); }), setHtml: _.curry(function (sel, html) { console.log(html); $(sel).html(html); }), }; var url = function (term) { return 'https://api.flickr.com/services/feeds/photos_public.gne?tags=' + term + '&format=json&jsoncallback=?'; }; var img = function (url) { return $('<img />', { src: url }); }; // debug // { // title:"xxx", // items:[ // { // title:"xxx", // media:{ // m:"http://...." // } // }, // ... // ] // } // var app = _.compose(Impure.getJSON(trace("response")), url); var mediaUrl = _.compose(_.prop('m'), _.prop('media')); var srcs = _.compose(_.map(img,mediaUrl),_.prop("items")); var readerImage = _.compose(Impure.setHtml("body"),_.map(img),srcs) var app = _.compose(Impure.getJSON(readerImage),url) app("cat") }); ``` </details> <br/> ## 有原則的重構從 items 中獲取 url map一次,從 url 轉為 url 轉為 img map 了一次,所以可以進行優化根據map的結合律:`var law = compose(map(f), map(g)) == map(compose(f, g));` ``` // 原有代碼 var mediaUrl = _.compose(_.prop('m'), _.prop('media')); var srcs = _.compose(_.map(mediaUrl), _.prop('items')); var images = _.compose(_.map(img), srcs); // 1.通過等式推導（equational reasoning）及純函數的特性 var mediaUrl = _.compose(_.prop('m'), _.prop('media')); var images = _.compose(_.map(img), _.map(mediaUrl), _.prop('items')); // 2.運用結合律 var mediaUrl = _.compose(_.prop('m'), _.prop('media')); var images = _.compose(_.map(_.compose(img, mediaUrl)), _.prop('items')); // 3. 提取map的可讀性 var mediaUrl = _.compose(_.prop('m'), _.prop('media')); var mediaToImg = _.compose(img, mediaUrl); var images = _.compose(_.map(mediaToImg), _.prop('items')); ```