f5页面刷新如何带参数

插件功能：用于根据指定目录文件变化自动刷新指定页面的 whistle (https://github.com/avwo/whistle) 插件。

下文主要介绍livereload原理，直接查看插件安装和使用请看第五步

一、需求背景：

前端页面联调时，F5作为web开发常用刷新调试驱动键，已经深深刻在每个开发的心中。还在为修改页面不停的手动刷新而烦恼么？还在寻找其他F5替代方案么？如何优雅的释放F5，请看下文~。

二、目标拆解：

假如我们自己来开发一种替代F5的文件刷新方案，可以从三个目标来分析：

1）文件修改监听——目标是刷新页面，但页面刷新的前提是代码的变动修改，捕捉文件修改事件成为我们优先解决的问题；

2）页面刷新——页面刷新很简单，但是如何通知到页面进行刷新呢；

3）修改通知——这个是我们需要解决的重点；

三、解决方案（whistle插件采用fs而非gulp，此处借gulp简单介绍下原理）：

有了问题和目标，思考下每个问题的解决方案：

1）文件修改监听——

a、gulp非常nice的自动化构建工具

官网：

b、node的fs模块（livereload插件通过fs模块实现监控）

c、其他

2）页面刷新——js方法，loca(x);

3）修改通知——开启本地svr，浏览器长链接监听（常用的观察者模式）；

基于node svr+websock服务

四、开发实战：

方案已经枚举好，接下来就是开发实践：

（一）环境准备和代码实现（代码可在附件下载）：

1）项目目录下，安装需要的js模块

npm i -s gulp npm i -s ws

2）服务端代码编写

const WebSocket = require('ws'); const port = 8080; function startSvr() { con("start svr port:"+port); var wss = new WebSocket.Server({ port: port }); var connection = {}; w('connection', function(ws) { con("ws 已经连接"); ws.on('message', function(message) { con("收到message:"+message); msg = j(message); if === 'test') { connection[m] = ws; con('received: %s', JSON.stringify(msg)); if (!!connection[m]) connection[m].send(msg)); } else { w(function each(client) { client.send(message); }); } }); }); } module.exports = { start:startSvr };

3）客户端监听代码编写

var ws = new WebSocket('ws://localhost:8080'); ws.onopen = function() { con('open'); }; ws.onclose = function() { con('onclose'); }; ws.onmessage = function(event) { con('event,', event.data); //拿到的返回数据 var json = JSON.parse); i;reload"){ loca(1); }else i;javascript"){ eval); }else i;replace"){ document.getElementsByTagName("html")[0].innerHTML = j; } };

4）gulp监听配置文件编写（此处gulp采用4.0.2版本）

const { series, parallel, watch, src, dest } = require('gulp'); const WebSocket = require('ws'); const appsvr = require('.;); const watcher = watch(['*']);//此处监听目录下所有文件 // const fs = require('fs'); let ws = ""; //日志工具类 let showlog = function (svr) { var des = ""; for (var name in svr) { des += name + ":" + svr[name] + ";\n"; } con(des); }; //服务开启 function webserver() { a(); setTimeout(function () { ws = new WebSocket('ws://localhost:8080'); ws.on('open', () => { let msg = { command: 'init', text: "" }; ws.send(msg)); }); ws.on('error', err => { con(err); }); ws.on('message', data => { con(data); }); ws.on('close', (code, reason) => { con(code); con(reason + ':' + typeof reason); }); }, 2000); } //监听文件变化 wa('change', function (path, stats) { con(`File ${path} was changed`); //发送给监听者的动作 let msg = { command: 'reload', text: "reload" }; ws.send(msg)); }); ex = webserver; //默认出发，相当于main函数 ex = parallel(function () { con("running"); }, webserver);

5）客户端js监听文件如何嵌入页面？

a、通过script标签的方式手动嵌入，需要手动修改文件，且事后容易忘记删除；

<script type=“text/javascript” src=“.”></script>

b、基于whistle的优雅嵌入，会自动对匹配的页面（html）无感知嵌入指定js：

whistle 命令：jsAppend

daoju.qq.com/xxx/ jsAppend://daoju.qq.com/xxx/js

6）启动服务，刷新浏览器启动监听

7）文件修改，观察效果

（二）其他解决方案实现及问题：

其他常用方案：

实现和问题：

• 实现方式：通过插件生成的本地服务地址来进行自动刷新访问，比如：访问localhost:3000，查看本地未分离文件，适合重构开发；
• 问题：活动开发前端联调是以线上活动域名url访问来进行开发和测试，且需要配合host配置，就不太适合。

五、基于whistle的livereload插件，让刷新更优雅

通过上述实践我们释放了F5，但是打开项目目录，发现新增了一堆的js，跟我们的项目格格不入，如何更优雅的释放F5呢？

whistle插件化——目前已经开发整理成了whistle插件，地址如下：

npm地址：

1）如何安装：

注意：whistle需要升级到最新版本

npm i -g w

安装后：

2）使用方案：

#pattern w://需要监控的项目目录 daoju.qq.com/xxx/ w://D:\xxx\

相关文章

whistle的官方文档——