话题
程柳锋 Node.js全栈
当Javascript的性能遇到瓶颈,或者需要增强Javascript能力的时候,就需要依赖native模块来实现了。 应用场景 日常工作中,我们经常需要将原生的Node.js模块做为依赖并在项目中进行使用。下面有个列表,你可能对它们的名字很熟悉: * node-sass [https://github.com/sass/node-sass] 将sass文件编译成css文件 * node-microtime [https://github.com/wadey/node-microtime] : 扩展Javascript的时间精度 * node-inspector [https://github.com/node-inspector] :进行调试 * v8-profiler [https://github.com/node-inspector/v8-profiler] :性能及内存使用分析 通常,我们开发原生Node.js模块包括但不仅限于以下原因: ...显示全部
1 年前发表 3299次浏览 0条评论 0次收藏
villainthr HTML&h5
SW-ROUTER image.png-2kB [http://static.zybuluo.com/jimmythr/wbmnfy7hah7qzjrzq8mhm7x5/image.png] PWA 全称是 Progressive Web Apps 。它的目的就是让你的网页越来越快。主要内容可以参考: PWA-cookbook [https://github.com/JimmyVV/PWA-cookbook/wiki/PWA-guider] 。不过,它上手的难度也是有的。它本身是基于 worker 而发展出 Service Worker,所以,要使用 PWA 你就必须学会如何使用 SW,然后,SW 里面还有很多坑要踩。而其中最大的坑就是,如何处理文件资源的缓存,这个一直都是 CS 领域的心病。当然,在 SW 中,这也是有点困难的。不过,为了大家能更快的掌握 SW 这里,鄙人写了一个关于处理 fetch 事件的路由分发库 sw-router [https://github.com/JimmyVV/sw-router] 。 这里也主要介绍一下它。 下载 ...显示全部
1 年前发表 1890次浏览 0条评论 0次收藏
villainthr HTML&h5
在几年前,天空一声巨响,ajax 闪亮登场. 前端宝宝们如获至宝~ 已经表单提交神马的, 真的太 心累了. 有了ajax之后, 网页的性能可大幅提升,告别刷新,告别如水的流量. 不过,长江后浪推前浪,一代更比一代强. 由于ajax被同域限制着, 导致, 多服务器配置,云服务资源的存储 没办法充分利用. 所以,业界想到另外一种方法--JSONP. JSONP实际上和ajax没有半点关系,唯一相同的就是都是异步执行,而且JSONP完美解决了CD(cross domain)问题. 科技就是第一生产力, web发展so fast. 以前追求就是静态网页,显示信息而已。 现在,正朝着web2.0,webapp前进。 以前的单向交流 已经不能满足 需求了。 怎么办呢? 改呗~ 所以,紧接着SSE,websocket 诞生了. 至今为止, 前端通信方式算是告一段落。 这里我们将围绕上述的几种通信方式进行,简单的介绍. 以下是几个技术的顺序. * ajax * JSOP * SSE * websocket ok~ 进入主题吧~ AJAX 相信这个应该不用过多的讲解了吧. 差不多就4步: ...显示全部
1 年前发表 1966次浏览 0条评论 0次收藏
villainthr HTML&h5
TL;DR 本文主要是讲解关于 SVG 的一些高级动画特效,比如 SVG 动画标签,图形渐变,路径动画,线条动画,SVG 裁剪等。 例如:路径动画 gif [http://demo.icanbecreative.com/animate-along-svg-path/svg-animate-along-path-600.gif] 图形渐变: fig [http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/08/1407310358spinner-cropped.gif] 线条动画: test.gif-388.2kB [http://static.zybuluo.com/jimmythr/ctsujbawcdlyqpcslean3jvx/test.gif] 以及,相关的动画的矩阵知识,这个也是现在 CSS 动画里面最重要,同时也是最为欠缺的知识点: image.png-7.1kB [http://static.zybuluo.com/jimmythr/v37ft0wq7elij74vaq9vlt99/image.png] ...显示全部
1 年前发表 2157次浏览 1条评论 0次收藏
caorich 性能
BODYMOVIN是什么 专业制作动画采用Adobe公司的 after effect 软件。做出来的动画可以导出为json文件,bodymovin就是这个动画json文件的前端播放器,支持渲染为svg\canvas\html三种格式。它不仅可以播放动画,可以完全控制动画的播放、暂停、速率、播放对应帧等等。更可以做到更改帧对象的位置。可以说是不可多得的好工具。 [http://i1.piimg.com/567571/c73e953311b7464c.png] 使用方法 bodymovin官网 [https://github.com/bodymovin/bodymovin] 首先机子要装AE(adobe after effect),如果没装,就需要找设计师要动画的json文件。 这里假设已经获取到动画导出的json文件了。我扒了codepen的例子到我的站点,大家可以用 这个json文件 [http://makto.win/bodymovin/bodymovin/data1.json] 来测试: 动画基本播放 以下所有代码默认都已经导入了 bodymovin.min.js ...显示全部
1 年前发表 1866次浏览 0条评论 0次收藏
villainthr HTML&h5
SVG 全称是 Scalable Vector Graphics,即,矢量图。在 Web 中使用 SVG 可以解决位图放大失真的问题。首先,不要把 SVG 和 CSS,Canvas,HTML 搞混。他们之间并没有你中有我,我中有你的关系。SVG 是通过 XML 的形式写在 HTML 文档中的。 如何书写 开篇说过,SVG 就是一个 XML。看一下代码吧: <svgx="0px"y="0px"width="450px"height="100px"viewBox="0 0 450 100"><rectx="10"y="5"fill="white"stroke="black"width="90"height="90"/><circlefill="white"stroke="black"cx="170"cy="50"r="45"/><polygonfill="white"stroke="black"points="279,5 294,35 328,40 303,62 ...显示全部
1 年前发表 2694次浏览 2条评论 0次收藏
villainthr HTML&h5
Web 进制操作是一个比较底层的话题,因为平常做业务的时候根本用不到太多,或者说,根本用不到。 老铁,没毛病 那什么情况会用到呢? * canvas * websocket * file * fetch * webgl * ... 上面只是列了部分内容。现在比较流行的就是音视频的处理,怎么说呢? 如果,有涉及直播的话,那么这应该就是一个非常!非常!非常!重要的一块内容。我这里就不废话了,先主要看一下里面的基础内容。 整体架构 首先,一开始我们是怎么接触到底层的 bit 流呢? 记住:只有一个对象我们可以搞到 bit 流 --> ArrayBuffer 这很似曾相识,例如在 fetch 使用中,我们可以通过 res.arrayBuffer(); 来直接获取 ArrayBuffer 对象。websocket 中,监听 message ,返回来的 event.data 也是 arraybuffer。 let socket = new WebSocket('ws://127.0.0.1:8080'); socket.binaryType = 'arraybuffer'; ...显示全部
1 年前发表 1926次浏览 0条评论 0次收藏
王少飞 HTML&h5
启用硬件加速 1 在chrome的地址栏中输入 chrome://settings/ 回车 [http://shaofei.wang/content/images/2017/04/QQ--20170408192029.png] 2 滚动页面到地步,点击 ==显示高级设置== [http://shaofei.wang/content/images/2017/04/QQ--20170408192219.png] 3 再次滚动到页面地步,找到 ==使用硬件加速模式== [http://shaofei.wang/content/images/2017/04/QQ--20170408192255.png] 开启GUP硬件加速 1 在chrome的地址栏中输入 chrome://flags/#disable-accelerated-video-decode 找到==硬件加速的视频解码==,点击==启用== [http://shaofei.wang/content/images/2017/04/QQ--20170408192649.png] 完成上面两步后重启浏览器。 ...显示全部
1 年前发表 3278次浏览 0条评论 0次收藏
villainthr HTML&h5
市面上现在流行两种沙箱模式,一种是使用iframe,还有一种是直接在页面上使用new Function + eval进行执行. 殊途同归,主要还是防止一些Hacker们 吃饱了没事干,收别人钱来 Hack 你的网站. 一般情况, 我们的代码量有60%业务+40%安全. 剩下的就看天意了. 接下来,我们来一步一步分析,如果做到在前端的沙箱.文末 看俺有没有心情放一个彩蛋吧. 直接嵌套 这种方式说起来并不是什么特别好的点子,因为需要花费比较多的精力在安全性上. EVAL执行 最简单的方式,就是使用eval进行代码的执行 eval('console.log("a simple script");'); 但,如果你是直接这么使用的话, congraduations... do die... 因为,eval 的特性是如果当前域里面没有,则会向上遍历.一直到最顶层的global scope 比如window.以及,他还可以访问closure内的变量.看demo: functionAuth(username) { var password = "trustno1"; ...显示全部
1 年前发表 1916次浏览 0条评论 0次收藏
villainthr HTML&h5
该库是应对当前 Google 提出的 PWA 概念而写的。以链式 API 来完成 PWA 相关的操作。 npm [https://img.shields.io/badge/npm-web--pwa-blue.svg] [https://www.npmjs.com/package/web-pwa] git [https://img.shields.io/badge/git-web--pwa-blue.svg] [https://github.com/JimmyVV/web-pwa] 安装 npm install web-pwa // 或者使用 yarn yarn add web-pwa DEMO 首先说明一下,我们要完成的目标: * 注册 sw * 添加 app.js 的缓存 * 实现推送,并在用户点击后关闭,然后聚焦当前页面 整个代码如下: import SW,{Notify,WebCaches} from'web-pwa'; window.onload = function(){ SW.register('sw.js'); ...显示全部
1 年前发表 962次浏览 0条评论 0次收藏
程柳锋 工具建设
[http://7tszky.com1.z0.glb.clouddn.com/FtM6zxr8gWVy1LQKD1e3lxkBAumx] 前言 随着开发团队不断发展壮大,在人员增加的同时也带来了协作成本的增加;业务项目越来越多,类型也各不相同。常见的类型有基础组件、业务组件、基于React的业务项目、基于Vue的业务项目等等。如果想要对每个项目进行一些规范上的约束比如Git提交规范、Javascript规范简直难于登天。所有的这些,只是因为还欠缺一个好用的工程化工具,在项目创建的初期自动的将这些目录结构和文件生成、并且集成工程常见的规范来进行约束。 本文分为两部分,首先会谈谈目前团队的痛点以及基于yeoman generator的设计思路;然后会详细介绍如何实现定制的generator,过程中遇到的问题和解决办法。 痛点一:工程创建不智能 * 代码目录文件手工拷贝 * 不同场景的工程对目录结构的要求不尽相同 痛点二:规范约束难以统一集成 * 难以在新的工程项目中集成新的规范,需要手动加hook * 缺少增量机制对旧项目集成 基于YEOMAN GENERATOR的设计思路 ...显示全部
1 年前发表 890次浏览 0条评论 0次收藏
程柳锋 工具建设
目的 * 统一团队Git commit日志标准,便于后续代码review,版本发布以及日志自动化生成等等。 * 统一团队的Git工作流,包括分支使用、tag规范、issue等 GIT COMMIT日志参考案例 * angular [https://github.com/angular/angular] * commit-message-test-project [https://github.com/cpselvis/commit-message-test-project] * babel-plugin-istanbul [https://github.com/istanbuljs/babel-plugin-istanbul] * conventional-changelog [https://github.com/conventional-changelog/conventional-changelog] 总体方案 ...显示全部
1 年前发表 4917次浏览 0条评论 0次收藏