代码改变世界

随笔分类 -  Javascript

Zone.js 简介 & 抛砖引玉

2016-09-12 11:10 by Justany_WhiteSnow, 3472 阅读, 收藏, 编辑
摘要: Zone.js是angular团队参照NodeJS的Domain,Dart的Zone,为angular 2开发的核心组件。 一开始,我对Zone.js是拒绝的。我们知道类似的 Domain 模块,主要是为了解决异步错误跟踪问题。所以,当我没有太强烈的错误跟踪需求的时候,Zone.js有啥用? 然而e 阅读全文

Ques前端组件化体系

2015-07-19 23:56 by Justany_WhiteSnow, 1072 阅读, 收藏, 编辑
摘要: Ques是一套组件化系统,解决如何定义、嵌套、扩展、使用组件。传统开发模式的痛点无法方便的引用一个组件,需要分别引用其Javascript、Template、CSS文件我们期望能以MV*的方式去写代码,结果发现只有Javascript是MV*UI库打包成一坨(类似Bootstrap),但是实际上UI... 阅读全文

前端测试回顾及我们为什么选择Karma

2015-06-08 00:10 by Justany_WhiteSnow, 5010 阅读, 收藏, 编辑
摘要: 前端测试,或者UI测试一直是业界一大难题。最近Q.js使用Karma作为测试任务管理工具,本文在回顾前端测试方案的同时,也分析下为什么Q.js选用Karma而不是其他测试框架。像素级全站对比曾今有一批人做过这样的UI测试,即最终页面图像是否符合预期,通过图片差异对比来找出可能的问题。如图所示,所谓像... 阅读全文

React直出实现与原理

2015-05-30 22:39 by Justany_WhiteSnow, 15511 阅读, 收藏, 编辑
摘要: 前一篇文章我们介绍了虚拟DOM的实现与原理,这篇文章我们来讲讲React的直出。 比起MVVM,React比较容易实现直出,那么React的直出是如何实现,有什么值得我们学习的呢?为什么MVVM不能做直出?对于MVVM,HTML片段即为配置,而直出后的HTML无法还原配置,所以问题不是MVVM能否直... 阅读全文

HLS视频点播&直播初探

2015-04-26 16:42 by Justany_WhiteSnow, 40829 阅读, 收藏, 编辑
摘要: 前端可选的视频直播协议大致只有两种:RTMP(Real Time Messaging Protocol)HLS(HTTP Live Streaming) 其中RTMP是Adobe开发的协议,无法在iPhone中兼容,故目前兼容最好的就是HLS协议了。HTTP Live Streaming(HLS)是... 阅读全文

前沿技术解密——VirtualDOM

2015-04-08 00:07 by Justany_WhiteSnow, 11382 阅读, 收藏, 编辑
摘要: 作为React的核心技术之一Virtual DOM,一直披着神秘的面纱。实际上,Virtual DOM包含:Javascript DOM模型树(VTree),类似文档节点树(DOM)DOM模型树转节点树方法(VTree -> DOM)两个DOM模型树的差异算法(diff(VTree, VTree) ... 阅读全文

Ques核心思想——CSS Namespace

2015-04-07 00:30 by Justany_WhiteSnow, 748 阅读, 收藏, 编辑
摘要: Facebook’s challenges are applicable to any very complex websites with many developers. Or any situation where CSS is bundled into multiple files and ... 阅读全文

Unix Pipes to Javascript Pipes

2015-04-07 00:28 by Justany_WhiteSnow, 549 阅读, 收藏, 编辑
摘要: Unix PipesUnix管道扫描稿简单样例:$ netstat -apn | grep 8080相信这个大家经常使用,这里就不细说了。那么管道基本思想是什么呢?让每个程序只完成一件事,并将其做好(do one thing and do it well),完成一个新任务,新建一个程序,而不是在旧程... 阅读全文

Road to the future——伪MVVM库Q.js

2015-01-28 19:11 by Justany_WhiteSnow, 829 阅读, 收藏, 编辑
摘要: 模仿Vuejs的伪MVVM库,下面是使用说明项目地址:https://github.com/miniflycn/Q.js相关项目:https://github.com/miniflycn/Ques一个简单例子模版:脚本:var vm = new Q({ el: '#demo', data... 阅读全文

聊聊CSS postproccessors

2014-12-05 00:18 by Justany_WhiteSnow, 1670 阅读, 收藏, 编辑
摘要: 阿里妈妈 @一丝 准备发布其CSSGrace,即CSS后处理插件,于是顺便聊聊CSS postprocessors。从Rework说起Rework是TJ大神开发的CSS预处理框架。但为什么会出现呢?TJ大神如此回答:The simple answer is that Rework caters to... 阅读全文

为什么watch机制不是银弹?

2014-11-17 01:32 by Justany_WhiteSnow, 679 阅读, 收藏, 编辑
摘要: 几乎所有构建系统都选择使用watch机制来解决开发过程中需要反复生成构建后文件的问题,但在watch机制下,长期以来我们必须忍受修改完代码,保存完代码必须喝口茶才能刷新看看效果的问题。在这里我们尝试探讨为什么watch不是银弹,并尝试寻找一种更好的方案来解决这个问题。watch基于的事实当一个文件修... 阅读全文

我们的前端模版引擎更新总结

2014-09-28 23:12 by Justany_WhiteSnow, 1675 阅读, 收藏, 编辑
摘要: 最近花了些时间更新了下我们的模版引擎。就像构建工具一样,模版引擎也基本是大家玩烂的内容,什么运行速度啊,编译速度啊,大家也谈了很多。让我们讲些不同的东东^ ^原文地址:https://app.yinxiang.com/shard/s30/sh/83bcf109-aee4-44df-ab01-4990... 阅读全文

小矮人Javascript模块加载器

2014-02-05 14:54 by Justany_WhiteSnow, 1430 阅读, 收藏, 编辑
摘要: https://github.com/miniflycn/webkit-dwarf短小精悍的webkit浏览器Javascript模块加载器Why我们有许多仅基于webkit浏览器开发的应用无论是使用requirejs还是seajs都需要先加载完模块加载器本身之后才能加载其他模块无论出于首屏优化需要,还是手机2G优化需要,我们都需要一个足够小的模块加载器内置CDN失败回源策略AMD & CMDrequire([module], callback);这是AMD规范中模块引用的经典方式。实际上CMD规范在异步引用上也与之类似。require.async([module], callback 阅读全文

Javascript模版引擎简介

2014-01-16 10:40 by Justany_WhiteSnow, 650 阅读, 收藏, 编辑
摘要: 回顾Micro-Templating出自John Resig 2008年的一片文章,以及其经典实现:// Simple JavaScript Templating// John Resig - http://ejohn.org/ - MIT Licensed(function(){ var cache = {}; this.tmpl = function tmpl(str, data){ // Figure out if we're getting a template, or if we need to // load the template - and be sure t... 阅读全文

你可能不知道的跨域解决方案

2013-11-18 19:34 by Justany_WhiteSnow, 2228 阅读, 收藏, 编辑
摘要: 出于浏览器的同源策略,我们经常会遇到浏览器跨域的问题。简单的说跨域基本解决方案是:GET请求用JSONP其他请求用同源iframe做代理JSONP的介绍很多,这里就不多说了。而同源iframe做代理主要是主窗口与iframe的通讯问题,因为这里也有同源策略。常见的方法是使用window.name或者通过url param来通讯。但这些方法都需要反复加载iframe来完成的,资源消耗较高,有没有更好的方案呢?window.postMessagewindow.postMessage最早由IE8引入,主要为了解决跨文档通讯问题,以下使其支持列表:FeatureChromeFirefox (Gecko 阅读全文

高级Javascript调试——console.table()

2013-11-18 11:58 by Justany_WhiteSnow, 12015 阅读, 收藏, 编辑
摘要: 原文:http://www.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable本文只是简单翻译,部分不重要部分略去,请原谅。通过console.log()打印数组试想一下,假如你创建了一个编程语言以及其文件后缀名列表:var languages = [ { name: "JavaScript", fileExtension: ".js" }, { name: "TypeScript", fileExtension: ".ts& 阅读全文

NodeJS的url验证库模块url-valid

2013-11-17 15:31 by Justany_WhiteSnow, 3887 阅读, 收藏, 编辑
摘要: 这是我10月份做的项目其中的一个部件,主要用于url检验的。我们知道Javascript做url检验,通常是使用正则表达式来判定,其格式是否正确,例如:/^https?:\/\//.test(url);当然还有更好的检测方法比如基于RFC 3986, RFC 3966, RFC 4694, RFC 4759, RFC 4904等标准的进行验证的valid-url库。不过个根据格式进行验证当然不能确定该url是否存在啦,所以就有了url-valid,我们基于HTTP请求进行验证。接口设计实际上我们只需要一个函数传入一个url地址,并回调返回该链接是否可用。但请求容易产生未知错误,所以我们在回调函 阅读全文

NodeJS的url信息截取模块url-extract

2013-09-12 22:49 by Justany_WhiteSnow, 3206 阅读, 收藏, 编辑
摘要: 上一篇文章,介绍了怎么利用NodeJS + PhantomJS进行截图,但由于对每次截图操作,都启用了一个PhantomJS进程,所以并发量上去后,效率堪忧,所以我么重写了所有代码,并将其独立成为一个模块,方便调用。 阅读全文

Bootstrap Popover 隐藏的Javasript方法

2013-07-10 12:12 by Justany_WhiteSnow, 15228 阅读, 收藏, 编辑
摘要: 简单介绍了Bootstrap Popover的Javascript API以及一些隐藏却很有用的API。 阅读全文

冷门Javascript API——element.insertAdjacentHTML

2013-06-07 23:43 by Justany_WhiteSnow, 2605 阅读, 收藏, 编辑
摘要: John Resig(jQuery的作者)在2008年的时候曾经尝试将elment.insertAdjacentHTML引入jQuery,不过他最终放弃了。主要原因在于:其在IE6中不支持向table,tbody,thead或者tr插入html,否则会抛出错误。不支持XML文档。不过当时,这一由IE4.0开始出现的接口已经进入了HTML5的接口名单,将会有更多浏览器实现该接口,下面便是目前桌面浏览器的支持情况:FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)Basic support1.08.0 (8.0)4.0 阅读全文