标签 - JavaScript 共找到结果 16 条

1.安装需要的模块

cnpm install -S express ws

2.创建server.js

var express = require('express');
var app = express();
var server = require('http').Server(app);
var websocket = require('ws');

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

var wss = new websocket.Server({
    server
});

//广播  
wss.broadcast = function broadcast(s, ws) {
    wss.clients.forEach(function each(client) {
        if (s == 1) {
            client.send(ws.name + ":" + ws.msg);
        }
        if (s == 0) {
            client.send(ws + "退出聊天室");
        }
    });
};
// 初始化连接
wss.on('connection', function(ws) {
    ws.send('你是第' + wss.clients.size + '位');
    // 接收消息并发送到客户端  
    ws.on('message', function(jsonStr, flags) {
        var obj = eval('(' + jsonStr + ')');
        this.user = obj;
        if (typeof this.user.msg != "undefined") {
            wss.broadcast(1, obj);
        }
    });
    // 退出聊天  
    ws.on('close', function(close) {
        try {
            //手动退出
            wss.broadcast(0, this.user.name);
        } catch (e) {
            console.log('连接断开');
        }
    });
});



server.listen(4000, function() {
    console.log('listening on *:4000');
});

3.新建index.html页面:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>聊天</title>
    <link rel="stylesheet" href="">
    <script language="JavaScript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
    <script type="text/javascript">
    </script>
</head>
<style type="text/css" media="screen">

</style>

<body>
    <div style="width: 500px">
        <div id="show" style="height: 100px;width: 100%; overflow-x: auto; border: 1px solid #ccc;margin-bottom: 10px;">
        </div>
        <div style="float:left">
            <label>用户:</label>
            <label name="uname" style="display: inline; width: 200px;"></label>
            <label for="message" style="margin-left: 20px;">内容:</label>
            <input type="text" name="message" id="message">
        </div>
        <div style="float: right">
            <a href="javascript:void(0)" id="send">发送</a>
            <a href="javascript:void(0)" id="exit">退出</a>
        </div>
    </div>
</body>
<script type="text/javascript">
    var uname = "";
    while (!uname) {
        uname = prompt('请输入用户名');
    }
    $('[name="uname"]').text(uname);

    var ws = new WebSocket("ws://127.0.0.1:4000");
    ws.onopen = function() {
        console.log("连接状态", ws);
        $("#show").html("连接状态;" + !!ws.readyState + "</br>");
        console.log("open");
    };
    ws.onmessage = function(evt) {
        $("#show").append(evt.data + "</br>");
    };
    ws.onclose = function(evt) {
        console.log("WebSocketClosed!");
        console.log(evt);
    };
    ws.onerror = function(evt) {
        console.log("WebSocketError!");
    };

    $('#send').on('click', _ => {
        var msg = $("#message").val();
        var name = uname;
        var str = "{name:'" + name + "',msg:'" + msg + "'}";
        console.log("发送", str);
        ws.send(str);
    });

    $('#exit').on('click', _ => {
        var r = ws.close();
        console.log("退出", r);
    })
</script>

</html>

参考地址:

阅读全文

公司最近这个项目用的是spring boot,但是又需要前端使用Vue.js进行开发,单独使用requireJS和Vue.js配合又不方便,所以想到了直接使用webpack开发.

以下webpack介绍copy自:《入门Webpack,看这篇就够了》

为什要使用WebPack

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法:

  • 模块化,让我们可以把复杂的程序细化为小的文件;
  • 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别;
  • Scss,less等CSS预处理器
  • ...

这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的,这就为WebPack类的工具的出现提供了需求。

以下贴出我的配置文件:

1. webpack.base.config.js: (PS:这只是基础配置,因为还需要一个webpack生产环境,所以把代理单独提到webpack开发环境配置中)
/**
 * webpack配置基础
 */
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const vendor = [&quot;iview&quot;, &quot;vuex&quot;, &quot;vue-router&quot;, &quot;echarts&quot;];
const config = {
    entry: {
        main: './app/main.js',
        vendor: vendor //CommonsChunkPlugin打包第三方
    },
    output: {
        filename: '[name].js',
        path: path.join(__dirname + '/public/dist/'),
        publicPath: '/public/dist/'
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.common.js'
        }
    },
    externals: {
        'jquery': 'window.jQuery',
        'moment': 'window.moment',
    }, //较大的库引用cdn文件
    module: {
        rules: [{
                test: /.vue$/,
                loader: 'vue-loader',
                options: {
                    loader: {
                        css: ExtractTextPlugin.extract({
                            use: ['css-loader'],
                            fallback: 'style-loader'
                        })
                    }
                }
            },
            {
                test: /.js$/,
                exclude: /node_modules/, //编译打包时需要排除 node_modules 文件夹
                loader: &quot;babel-loader&quot;,
                query: { presets: ['es2015'] }
            },
            {
                test: /.scss$/,
                // loader: &quot;style-loader!css-loader&quot;
                use: ExtractTextPlugin.extract({
                    fallback: &quot;style-loader&quot;,
                    use: [&quot;css-loader&quot;, &quot;sass-loader&quot;]
                })
            },
            {
                test: /.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader']
                })
            },
            {
                test: /.(gif|jpg|png|woff|woff2|ttf|svg|eot$)??.*$/,
                loader: &quot;url-loader?limit=10240&amp;name=./[name].[ext]?[hash]&quot;
            }
        ]
    },
    plugins: [
        new OpenBrowserPlugin({ url: 'http://localhost:3000' }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery'
        }), //这个可以使jquery变成全局变量,不用在自己文件require('jquery')了
        new webpack.optimize.CommonsChunkPlugin({
            name: ['vendor'],
            filename: 'common.js'
        }), //第三方库打包生成的文件
        new ExtractTextPlugin({
            filename: '[name].css',
            allChunks: true
        }), //分离 CSS 和 JS 文件.
    ]
};
module.exports = config;
2. webpack.config.js:
/**
 * webpack开发环境
 */
 
const merge = require(&quot;webpack-merge&quot;);
const WebpackBaseConfig = require(&quot;./webpack.base.config&quot;);
 
module.exports = merge(WebpackBaseConfig, {
    devServer: {
        port: 3000,
        proxy: {
            '*': {
                //后台地址
                target: 'http://localhost:8080',
                secure: false,
                prependPath: false,
                changeOrigin: true
            }
        },
        publicPath: '/public/dist/',
        historyApiFallback: true
    }
});
3. webpack.prod.config.js:
/**
 * webpack生产环境
 */
 
const webpack = require(&quot;webpack&quot;);
const ExtractTextPlugin = require(&quot;extract-text-webpack-plugin&quot;);
const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);
const merge = require(&quot;webpack-merge&quot;);
const WebpackBaseConfig = require(&quot;./webpack.base.config&quot;);
WebpackBaseConfig.plugins = [];
WebpackBaseConfig.module.rules[1] = {
    test: /.js$/,
    //通常需要忽略node_modules,但iviews包含es6代码,压缩时需要转换成es5
    // exclude: /node_modules/, //编译打包时需要排除 node_modules 文件夹
    loader: &quot;babel-loader&quot;,
    query: { presets: ['es2015'] }
}
module.exports = merge(WebpackBaseConfig, {
    output: {
        filename: '[name].[hash].js',
        publicPath: '/public/dist/'
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery'
        }), //这个可以使jquery变成全局变量,不用在自己文件require('jquery')了
        new webpack.optimize.CommonsChunkPlugin({
            name: ['vendor'],
            filename: 'common.[hash].js'
        }), //第三方库打包生成的文件
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '&quot;production&quot;'
            }
        }),
        //在这个数组中new一个实例就可以了
        new webpack.BannerPlugin(&quot;Copyright mrabit.&quot;),
        //为组件分配 ID,通过这个插件 Webpack 可以分析和优先考虑使用最多的模块,并为它们分配最小的 ID.
        new webpack.optimize.OccurrenceOrderPlugin(), 
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                drop_debugger: false,
                drop_console: false
            }
        }), //压缩JS代码.
        new ExtractTextPlugin({
            filename: '[name].[hash].css',
            allChunks: true
        }), //分离 CSS 和 JS 文件.
        new HtmlWebpackPlugin({
            filename: '../../index.html',
            template: './index.ejs',
            inject: false
        })
    ]
});
4. 通过上面的配置可实现webpack-dev-server3000端口去代理8080端口。在package.json中添加:
"scripts": {
    "dev": "rimraf public/dist/* && webpack-dev-server --host 0.0.0.0 --history-api-fallback --inline --hot",
    "build": "rimraf public/dist/* && webpack --progress --config webpack.prod.config.js"
},
5. 之后直接启动spring boot后台,然后npm run dev就可以通过访问3000端口来进行前端的开发了.
6. 当然,这里推荐使用微软的VSCode,虽然我平时用的都是WebStorm,但是相对于webpack开发,VSCode确实要流畅很多

阅读全文

我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持。 研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代码信息,并发送到到服务器端,由后端程序转换成图片格式后,以流的形式反射给浏览器端下载。

最近在项目中有需求将一个非HighChart的SVG地图转存为图片并下载的功能。 本希望模拟HighChart的原理实现,可是研究发现,该地图的SVG代码信息多达两万字节,然而HighChart后端制图程序却有着字节数限制,所以就不能这么处理了。

然后国外社区讨论的方法也多是前后端协同处理来完成这个功能的,这样实现会比较重, 而且部署不便。

经过一番搜寻,终于发现一个不依赖任何外部库,框架,同时仅仅通过浏览器端js便能实现的方法。 代码实现的具体来源地址已经忘记了, 这里保留代码原创作者的版权哈。

首先,我们约定SVG的上下文结构是如下的:

<div class="svg-wrap">
  <svg>...<svg>
<div>

然后,我们就可以通过如下代码来将svg图形转为图片并下载了:

var svgXml = $('.svg-wrap').html();

var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //给图片对象写入base64编码的svg流

var canvas = document.createElement('canvas');  //准备空画布
canvas.width = $('.svg-wrap svg').width();
canvas.height = $('.svg-wrap svg').height();

var context = canvas.getContext('2d');  //取得画布的2d绘图上下文
context.drawImage(image, 0, 0);

var a = document.createElement('a');
a.href = canvas.toDataURL('image/png');  //将画布内的信息导出为png图片数据
a.download = "MapByMathArtSys";  //设定下载名称
a.click(); //点击触发下载

阅读全文

Promise in js

回调函数真正的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力。而 Promise 很好地解决了这一切。

2015 年 6 月,ECMAScript 6 的正式版 终于发布了。

ECMAScript 是 JavaScript 语言的国际标准,JavaScript 是 ECMAScript 的实现。ES6 的目标,是使得 JavaScript 语言可以用来编写大型的复杂的应用程序,成为企业级开发语言。

概念

ES6 原生提供了 Promise 对象。

所谓 Promise,就是一个对象,用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理。

Promise 对象有以下两个特点。

(1)对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和 Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来,它的英语意思就是「承诺」,表示其他手段无法改变。

(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。

Promise 也有一些缺点。首先,无法取消 Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。第三,当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

var promise = new Promise(function(resolve, reject) {
 if (/* 异步操作成功 */){
 resolve(value);
 } else {
 reject(error);
 }
});

promise.then(function(value) {
 // success
}, function(value) {
 // failure
});

Promise 构造函数接受一个函数作为参数,该函数的两个参数分别是 resolve 方法和 reject 方法。

如果异步操作成功,则用 resolve 方法将 Promise 对象的状态,从「未完成」变为「成功」(即从 pending 变为 resolved);

如果异步操作失败,则用 reject 方法将 Promise 对象的状态,从「未完成」变为「失败」(即从 pending 变为 rejected)。

基本的 api

  1. Promise.resolve()
  2. Promise.reject()
  3. Promise.prototype.then()
  4. Promise.prototype.catch()
  5. Promise.all() // 所有的完成

     var p = Promise.all([p1,p2,p3]);
  6. Promise.race() // 竞速,完成一个即可

进阶

promises 的奇妙在于给予我们以前的 return 与 throw,每个 Promise 都会提供一个 then() 函数,和一个 catch(),实际上是 then(null, ...) 函数,

    somePromise().then(functoin(){
        // do something
    });

我们可以做三件事,

1. return 另一个 promise
2. return 一个同步的值 (或者 undefined)
3. throw 一个同步异常 ` throw new Eror('');`

1. 封装同步与异步代码

```
new Promise(function (resolve, reject) {
 resolve(someValue);
 });
```
写成

```
Promise.resolve(someValue);
```

2. 捕获同步异常

 new Promise(function (resolve, reject) {
 throw new Error('悲剧了,又出 bug 了');
 }).catch(function(err){
 console.log(err);
 });

如果是同步代码,可以写成

    Promise.reject(new Error("什么鬼"));

3. 多个异常捕获,更加精准的捕获

somePromise.then(function() {
 return a.b.c.d();
}).catch(TypeError, function(e) {
 //If a is defined, will end up here because
 //it is a type error to reference property of undefined
}).catch(ReferenceError, function(e) {
 //Will end up here if a wasn't defined at all
}).catch(function(e) {
 //Generic catch-the rest, error wasn't TypeError nor
 //ReferenceError
});

4. 获取两个 Promise 的返回值

1. .then 方式顺序调用
2. 设定更高层的作用域
3. spread

5. finally

任何情况下都会执行的,一般写在 catch 之后

6. bind

somethingAsync().bind({})
.spread(function (aValue, bValue) {
 this.aValue = aValue;
 this.bValue = bValue;
 return somethingElseAsync(aValue, bValue);
})
.then(function (cValue) {
     return this.aValue + this.bValue + cValue;
});

或者 你也可以这样

var scope = {};
somethingAsync()
.spread(function (aValue, bValue) {
 scope.aValue = aValue;
 scope.bValue = bValue;
 return somethingElseAsync(aValue, bValue);
})
.then(function (cValue) {
 return scope.aValue + scope.bValue + cValue;
});

然而,这有非常多的区别,

  1. 你必须先声明,有浪费资源和内存泄露的风险
  2. 不能用于放在一个表达式的上下文中
  3. 效率更低

7. all。非常用于于处理一个动态大小均匀的 Promise 列表

8. join。非常适用于处理多个分离的 Promise

```
var join = Promise.join;
join(getPictures(), getComments(), getTweets(),
 function(pictures, comments, tweets) {
 console.log("in total: " + pictures.length + comments.length + tweets.length);
});
```

9. props。处理一个 promise 的 map 集合。只有有一个失败,所有的执行都结束

```
Promise.props({
 pictures: getPictures(),
 comments: getComments(),
 tweets: getTweets()
}).then(function(result) {
 console.log(result.tweets, result.pictures, result.comments);
});
```

10. any 、some、race

```
Promise.some([
 ping("ns1.example.com"),
 ping("ns2.example.com"),
 ping("ns3.example.com"),
 ping("ns4.example.com")
], 2).spread(function(first, second) {
 console.log(first, second);
}).catch(AggregateError, function(err) {

err.forEach(function(e) {
console.error(e.stack);
});
});;

```
有可能,失败的 promise 比较多,导致,Promsie 永远不会 fulfilled

11. .map(Function mapper [, Object options])

用于处理一个数组,或者 promise 数组,

Option: concurrency 并发现

    map(..., {concurrency: 1});

以下为不限制并发数量,读书文件信息

var Promise = require("bluebird");
var join = Promise.join;
var fs = Promise.promisifyAll(require("fs"));
var concurrency = parseFloat(process.argv[2] || "Infinity");

var fileNames = ["file1.json", "file2.json"];
Promise.map(fileNames, function(fileName) {
 return fs.readFileAsync(fileName)
 .then(JSON.parse)
 .catch(SyntaxError, function(e) {
 e.fileName = fileName;
 throw e;
 })
}, {concurrency: concurrency}).then(function(parsedJSONs) {
 console.log(parsedJSONs);
}).catch(SyntaxError, function(e) {
 console.log("Invalid JSON in file " + e.fileName + ": " + e.message);
});

结果

$ sync && echo 3 > /proc/sys/vm/drop_caches
$ node test.js 1
reading files 35ms
$ sync && echo 3 > /proc/sys/vm/drop_caches
$ node test.js Infinity
reading files: 9ms

11. .reduce(Function reducer [, dynamic initialValue]) -> Promise

Promise.reduce(["file1.txt", "file2.txt", "file3.txt"], function(total, fileName) {
 return fs.readFileAsync(fileName, "utf8").then(function(contents) {
 return total + parseInt(contents, 10);
 });
}, 0).then(function(total) {
 //Total is 30
});

12. Time

  1. .delay(int ms) -> Promise
  2. .timeout(int ms [, String message]) -> Promise

Promise 的实现

  1. q
  2. bluebird
  3. co
  4. when

ASYNC

async 函数与 Promise、Generator 函数一样,是用来取代回调函数、解决异步操作的一种方法。它本质上是 Generator 函数的语法糖。async 函数并不属于 ES6,而是被列入了 ES7。

参考文献(说是抄也可以的):

阮一峰的ES6 教程
关于promises,你理解了多少?
Bluebird 的官方文档

阅读全文

原文:http://www.zcfy.cc/article/2127

“征服 JavaScript 面试”是我写的一系列文章,来帮助面试者准备他们在面试 JavaScript 中、高级职位中将可能会遇到的一些问题。这些问题我自己在面试中也经常会问。

在我面试时问出的一系列问题里,闭包通常是我问的第一个或最后一个问题。坦白地说,如果你连闭包也弄不明白,你是不会在 JavaScript 的道路上走多远的。

你别东张西望,说的就是你。你真的理解如何构建一个严谨的 JavaScript 应用?你真的理解代码背后发生的事情或者说一个应用程序是如何工作的?我表示怀疑。如果连个闭包问题都搞不清的话,真是有点够呛。

你不仅仅应该了解闭包的机制,更应该了解闭包为什么很重要,以及能够很容易地回答出闭包的几种可能的应用场景。

闭包在 JavaScript 中常用来实现对象数据的私有,在事件处理和回调函数中也常常会用到它,此外还有偏函数应用(partial applications)和柯里化(currying),以及其他函数式编程模式。

我不在乎面试者是否知道“closure”这个单词或者它的专业定义。我只想弄清他们是否理解基本原理。如果他们没有,那么通常意味着这些面试者在构建实际 JavaScript 应用方面并没有很多经验。

如果你不能回答这个问题,你只是个初级开发者。不管你实际上已经干这个多久了。

为了快速理解下面的内容:你想一下能否举出两个闭包的通用场景?

什么是闭包?

简言之,闭包是由函数引用其周边状态(词法环境)绑在一起形成的(封装)组合结构。在 JavaScript 中,闭包在每个函数被创建时形成。

这是基本原理,但为什么我们关心这些?实际上,由于闭包与它的词法环境绑在一起,因此闭包让我们能够从一个函数内部访问其外部函数的作用域

要使用闭包,只需要简单地将一个函数定义在另一个函数内部,并将它暴露出来。要暴露一个函数,可以将它返回或者传给其他函数。

内部函数将能够访问到外部函数作用域中的变量,即使外部函数已经执行完毕。

闭包使用的例子

闭包的用途之一是实现对象的私有数据。数据私有是让我们能够面向接口编程而不是面向实现编程的基础。而面向接口编程是一个重要的概念,有助于我们创建更加健壮的软件,因为实现细节比接口约定相对来说更加容易被改变。

“面向接口编程,别面向实现编程。” 设计模式:可复用面向对象软件的要素

在 JavaScript 中,闭包是用来实现数据私有的原生机制。当你使用闭包来实现数据私有时,被封装的变量只能在闭包容器函数作用域中使用。你无法绕过对象被授权的方法在外部访问这些数据。在 JavaScript 中,任何定义在闭包作用域下的公开方法才可以访问这些数据。例如:

const getSecret = (secret) => {
  return {
    get: () => secret
  };
};

test("Closure for object privacy.", assert => {
  const msg = ".get() should have access to the closure.";
  const expected = 1;
  const obj = getSecret(1);

  const actual = obj.get();

  try {
    assert.ok(secret, "This throws an error.");
  } catch (e) {
    assert.ok(true, `The secret var is only available
      to privileged methods.`);
  }

  assert.equal(actual, expected, msg);
  assert.end();
});

在上面的例子里,get() 方法定义在 getSecret() 作用域下,这让它可以访问任何 getSecret() 中的变量,于是它就是一个被授权的方法。在这个例子里,它可以访问参数 secret

对象不是唯一的产生私有数据的方式。闭包还可以被用来创建有状态的函数,这些函数的执行过程可能由它们自身的内部状态所决定。例如:

const secret = (msg) => () => msg;
// Secret - creates closures with secret messages.
// https://gist.github.com/ericelliott/f6a87bc41de31562d0f9
// https://jsbin.com/hitusu/edit?html,js,output

// secret(msg: String) => getSecret() => msg: String
const secret = (msg) => () => msg;

test("secret", assert => {
  const msg = "secret() should return a function that returns the passed secret.";

  const theSecret = "Closures are easy.";
  const mySecret = secret(theSecret);

  const actual = mySecret();
  const expected = theSecret;

  assert.equal(actual, expected, msg);
  assert.end();
});

在函数式编程中,闭包经常用于偏函数应用和柯里化。为了说明这个,我们先定义一些概念:

函数应用:一个过程,指将参数传给一个函数,并获得它的返回值。

偏函数应用:一个过程,它传给某个函数其中一部分参数,然后返回一个新的函数,该函数等待接受后续参数。换句话说,偏函数应用是一个函数,它接受另一个函数为参数,这个作为参数的函数本身接受多个参数,它返回一个函数,这个函数与它的参数函数相比,接受更少的参数。偏函数应用提前赋予一部分参数,而返回的函数则等待调用时传入剩余的参数。

偏函数应用通过闭包作用域来提前赋予参数。你可以实现一个通用的函数来赋予指定的函数部分参数,它看起来如下:

partialApply(targetFunction: Function, ...fixedArgs: Any[]) =>
  functionWithFewerParams(...remainingArgs: Any[])

如果你要更进一步理解上面的形式,你可以看这里

partialApply 接受一个多参数的函数,以及一串我们想要提前赋给这个函数的参数,它返回一个新的函数,这个函数将接受剩余的参数。

下面给一个例子来说明,假设你有一个函数,求两个数的和:

const add = (a, b) => a + b;

现在你想要得到一个函数,它能够对任何传给它的参数都加 10,我们可以将它命名为 add10()add10(5) 的结果应该是 15。我们的 partialApply() 函数可以做到这个:

const add10 = partialApply(add, 10);
add10(5);

在这个例子里,参数 10 通过闭包作用域被提前赋予 add(),从而让我们获得 add10()

现在让我们看一下如何实现 partialApply()

// Generic Partial Application Function
// https://jsbin.com/biyupu/edit?html,js,output
// https://gist.github.com/ericelliott/f0a8fd662111ea2f569e

// partialApply(targetFunction: Function, ...fixedArgs: Any[]) =>
//   functionWithFewerParams(...remainingArgs: Any[])
const partialApply = (fn, ...fixedArgs) => {
  return function (...remainingArgs) {
    return fn.apply(this, fixedArgs.concat(remainingArgs));
  };
};


test("add10", assert => {
  const msg = "partialApply() should partially apply functions"

  const add = (a, b) => a + b;

  const add10 = partialApply(add, 10);


  const actual = add10(5);
  const expected = 15;

  assert.equal(actual, expected, msg);
});

如你所见,它只是简单地返回一个函数,这个函数通过闭包访问了传给 partialApply() 函数的 fixedArgs 参数。

轮到你来试试了

你用闭包来做什么?如果你有最喜欢的应用场景,举一些例子,在评论中告诉我。

英文原文:https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36#.yuiywtkcn

阅读全文