作为一个前端码农我三分之一的时间用来在f5上还乐此不彼,当然我也可以用runjs.cn之类的在线编辑器来及时预览我的页面,但在线编辑器的智能提示等功能远远没有本地编辑好用啊,有同学说了,我们可以用dw的代码/设计模式,但我不喜欢dw( 没有理由的不喜欢 O(∩_∩)O) 现在有一个问题是确定的我们要使用本地编辑器 vscode sublime 什么的爱用什么用什么 ,那么怎么才能让浏览器自动刷新呢,最开始我想着人为模拟f5。但这有个坏处: 第一,我不会写浏览器插件啊 第二,是不是每个浏览器都要写一套插件啊 ie chrome ff ......my god 飞机的发明告诉我们,人类要实现飞翔不是非要靠模拟鸟类震动翅膀。还有什么能实现页面自动刷新呢 。。。。。 一时的烦恼源于深陷概念无法自拔,我需要浏览器刷新吗,不,我需要的只是浏览器能够更新dom.....dom!!!! dom...realtime...dom...realtime....!!! 好吧我想到了socket.io ---------------------------------------------------以上为背景------------------------------------------------------------------------------ 首先说明一下工作原理: 利用fs.watchFile检测某个html文件是否改变(当我们在编辑器ctr+s的时候会触发change哦) 触发改变后向和客户端发送html文件文本 客户端接收到html文件文本后更新dom ps:他们通过 websocket通信(为啥用websocket,因为我觉得websocket体现了前端人员的NB支出.......) 然后就是客户端该怎么构建的问题 最开始我打算使用一个div用来渲染 服务器传递回来的html文本 但是有以下问题 怎么防止css js 污染 所以还是用iframe吧(iframe工作时并不总需要一个src) --------------------------------------------代码实践--------------------------- 首先安装 nodejs+socket.io(这不废话吗) 请大家自行百度怎么安装 本人的安装经历也很狗血 不敢擅自指点 正式开工: 创建app.js
app.js代码解读: 首先我们创建了一个httphandler(asp.net好像就这么叫)监听8080端口默认的就是本机locahhost喽,io,fs分别是socket.io和fs的引用 在handler里我们读取当前文件夹的sandbox页面(沙盒页面里面有个iframe用来预览,下面会有详细代码,注意这里的__dirname指的是当前app.js在的路径__是两个连续的_) 接下来是大家熟悉的建立连接 当连接建立后我们开始watchFile 现在我们只wath一个file 随便起一个名字 test.html fs.wathFile是fs模块自实现方法第一个参数为watch的路径,第二个为watch的间隔,第三个为文件 发生改变的时候做出的响应 之后的代码就简单了读取test.html的文本然后通过socket.emit发送给客户端 sandbox代码: <html> <head> <script type="text/javascript" src="socket.io/socket.io.js"></script> <script type="text/javascript" src="http://apps./libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <iframe style="height:100%;width:100%;margin:0px;border:0px;" id="prebox"> <body> </body> </iframe> <script type="text/javascript"> var port="http://locahhost:8080/" var socket=io.connect(port); socket.on('render',function (data) { $("#prebox")[0].contentDocument.documentElement.innerHTML=data.replace("<html>","").replace("</html>",""); }) </script> </body> </html> 引用socket.io.js(这个文件在哪呢?这个文件其实在 引用socket.io时候创建的node_modules里,虽然我没找到,但我就是这么理解的) 引用jquery(为啥引用这么高的版本,因为使用的百度的cdn啊,其实随便一个jquery版本就行了) 创建socket的链接 只需要在 服务器socket返回render事件的时候对对iframe更新一下就好了 测试浏览器为chrome 现在打开 http://localhost:8080/你只会看到一篇空白 然后你在test.html更新代码就会发现 浏览器代码已经在实时的更新了。。。激动啊 关于以下问题。。。。。 1.socket性能如何啊 2.watchFile稳定不 3.有没其他的框架实现啊,你这个方法有点像土包子啊 4.test.html路径为啥要写死啊 不能灵活点吗? 5.写这种垃圾的代码你到底接触过nodejs没 6.使用socket这种长连接有必要吗不浪费吗 7.这文章的排版太难看了,兄台你这排版是我见过最丑的。 我先自己回答 1.socket性能很好啊(我没测试过) 2.watchFile稳定不(不稳定,这个我测试过,但不妨碍正常执行) 3.有人开发过自动刷新f5的插件,但程序员的不就喜欢自己造轮子吗 4.为了代码的清晰可读(也可以理解为懒) 5.上周才接触 6.自己玩玩 7.第二篇博客园文章,第一篇是关于怎么前端表单写验证框架的被骂的很惨(理论描述了一般我就保存了,以为可以接着写结果好多人是来看代码的,骂我标题党,后来我把代码补上了,也没见夸我的,后来就删除了)
|
|
来自: 昵称10504424 > 《工作》