摘要:前端开发过程中会接触各种各样的编码,比较常见的主要是UTF-8和HTML实体编码,但是web前端的世界却不止这两种编码,而且编码的选择也会造成一定的问题,如前后端开发过程中不同编码的兼容、多字节编码可能会造成的XSS漏洞等。因此,本文旨在更好的全面了解涉及前端开发领域的字符编码,避免可能出现的交互和 阅读全文
posted @ 2016-05-07 16:58 royalrover 阅读(11303) 评论(2) 推荐(7) 编辑
摘要:XSS(Cross Site Scripting),又称跨站脚本,XSS的重点不在于跨站点,而是在于脚本的执行。在WEB前端应用日益发展的今天,XSS漏洞尤其容易被开发人员忽视,最终可能造成对个人信息的泄漏。如今,仍然没有统一的方式来检测XSS漏洞,但是对于前端开发人员而言,仍是可以在某些细微处避免 阅读全文
posted @ 2016-04-29 14:19 royalrover 阅读(16333) 评论(6) 推荐(8) 编辑
摘要:@(js) reduce函数 ,是ECMAScript5规范中出现的数组方法。在平时的工作中,相信大家使用的场景并不多,一般而言,可以通过reduce方法实现的逻辑都可以通过forEach方法来变相的实现,虽然不清楚浏览器的js引擎是如何在C++层面实现这两个方法,但是可以肯定的是reduce方法肯 阅读全文
posted @ 2016-03-01 11:21 royalrover 阅读(40834) 评论(3) 推荐(53) 编辑
摘要:@(Angular) $compile ,在Angular中即“编译”服务,它涉及到Angular应用的“编译”和“链接”两个阶段,根据从DOM树遍历Angular的根节点(ng app)和已构造完毕的 \$rootScope 对象,依次解析根节点后代,根据多种条件查找指令,并完成每个指令相关的... 阅读全文
posted @ 2016-01-25 09:01 royalrover 阅读(2771) 评论(0) 推荐(7) 编辑
摘要:objC 语言不仅仅有着面向对象的特点(封装,继承和多态),也拥有类似脚本语言的灵活(运行时),这让objC有着很多奇特的功能-可在运行时添加给类或对象添加方法,甚至可以添加类方法,甚至可以动态创建类。。。 [TOC] 运行时 runtime,即运行时,这里不详述其概念,我们可以类比... 阅读全文
posted @ 2016-01-18 08:14 royalrover 阅读(536) 评论(0) 推荐(5) 编辑
摘要:@(node,watcher) watcher ,在如今的前端领域已经数见不鲜了。目前流行的gulp流程工具提供了watcher的选项,是我们在开发过程中不需要手动进行触发构建流程,转而根据文件(目录)内容改变来触发。 深入到watcher实现层,其实是基于node的fs.watch API,但是f 阅读全文
posted @ 2016-01-06 17:23 royalrover 阅读(1357) 评论(0) 推荐(5) 编辑
摘要:@(webpack) webpack 是一款功能强大的前端构建工具,不仅仅是针对js,它也可通过各种loader来构建相关的less,html,image等各种资源,将webpack配合流程制定工具gulp结合起来,则更为方便的自定义工作流程。 [TOC] webpack的alias... 阅读全文
posted @ 2016-01-06 09:21 royalrover 阅读(8160) 评论(4) 推荐(4) 编辑
摘要:前端资源迁移 目前公司的前端资源托管在svn服务器上,由于团队的逐渐扩大,svn的分支管控越来越不灵活,而且对于以后前端流程一体化的处理支持不是很好,因此决定在版本控制上转向git。git的好处不用多说:多分支并行开发,自动化构建,持续集成等等,这也是促使我们转向它的原因。 具体操作中... 阅读全文
posted @ 2015-12-04 10:41 royalrover 阅读(2159) 评论(0) 推荐(4) 编辑
摘要:为何放弃第一种方案 UIWebView的JSContext获取 上篇中,我们通过简单的kvc获取UIWebVIew的JSContext,但是实际上,apple并未给开发者提供访问UIWebView的方法,虽然通过KVC可达到目标,但是当APP采用该种hack方法时,有很大几率不能通过A... 阅读全文
posted @ 2015-11-22 13:39 royalrover 阅读(2227) 评论(0) 推荐(6) 编辑
摘要:JavaScriptCore引擎 我们都知道WebKit是个渲染引擎,简单来说负责页面的布局,绘制以及层的合成,但是WebKit工程中不仅仅有关于渲染相关的逻辑,也集成了默认的javascript引擎--JavaScriptCore,目前Safari的js引擎也基于JSC构建,不过有一些私... 阅读全文
posted @ 2015-11-20 18:36 royalrover 阅读(3095) 评论(6) 推荐(4) 编辑
摘要:来由 纯粹的无聊,一直在搜索JavaScriptCore和SpiderMonkey的一些信息,却无意中学习了如何在ios的UIWebView中判断其js解析引擎的方法: if (window.devicePixelRatio) { //If WebKit browser var st =... 阅读全文
posted @ 2015-11-13 16:21 royalrover 阅读(4802) 评论(0) 推荐(2) 编辑
摘要:开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后,逐渐接触到具体的业务。在这里主要介绍下关于css3草案的position:sticky属性的兼... 阅读全文
posted @ 2015-11-11 16:08 royalrover 阅读(8875) 评论(0) 推荐(11) 编辑
摘要:场景 在移动端开发中,最为流行的开发模式就是hybmid开发,在这种native和h5的杂糅下,既能在某些需求中保证足够的性能,也可以在某些列表详情的需求下采用h5的样式控制来丰富内容。但是在大型产品的开发中,往往前端的职责不仅仅是h5的编写,还包括基本业务逻辑的实现,比如在h5页面中确定当... 阅读全文
posted @ 2015-09-14 16:29 royalrover 阅读(1794) 评论(0) 推荐(5) 编辑
摘要:回顾 在web后台开发中我们经常需要存储一些变量到session中进行暂存,最为特殊的就是“购物车”,由于http的无状态特性,因此我们需要在客户端打上一个标记,唯一的标示客户端并和服务端session一一对应,因此就有了通过cookie和url进行存储或传递这个标示--sessionID。 ses 阅读全文
posted @ 2015-07-06 20:18 royalrover 阅读(1019) 评论(0) 推荐(5) 编辑
摘要:## 现状 目前我们对异步回调的解决方案有这么几种:回调,deferred/promise和事件触发。回调的方式自不必说,需要硬编码调用,而且有可能会出现复杂的嵌套关系,造成“回调黑洞”;deferred/promise方式则对使用者而言简洁明了,在执行异步函数之前就已经构造好了执行链--then... 阅读全文
posted @ 2015-07-02 11:54 royalrover 阅读(6293) 评论(1) 推荐(6) 编辑
摘要:前言 本文翻译自Why Moving Elements With Translate() Is Better Than Pos:abs Top/left,本文有改动,添加了一些作者自己的理解,不当之处还请看客指出。翻译正文 目前我们对文档中的某个元素进行移动有两种方式, 1,使用trans... 阅读全文
posted @ 2015-06-22 17:46 royalrover 阅读(3148) 评论(0) 推荐(4) 编辑
摘要:介绍 目前使用ionic+cordova完成hybmid app开发,在安装geolocation插件时爆出来一个莫名的错误:Fetching from npm failed: CERT_UNTRUSTED Error: CERT_UNTRUSTED at SecurePair. ... 阅读全文
posted @ 2015-05-29 18:42 royalrover 阅读(959) 评论(0) 推荐(0) 编辑
摘要:grunt与seajs grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我们做一些重复度很高的事情,如压缩,合并,js语法检查等。通过定义grunt的配置文件Gruntfile.js,配置并注册grunt的任务,最终我们可以通过命令行来执行任务。 seajs主要用于模块化,通... 阅读全文
posted @ 2015-05-16 17:12 royalrover 阅读(2211) 评论(0) 推荐(4) 编辑
摘要:前言 在使用React进行构建应用时,我们总会有一个步骤将组建或者虚拟DOM元素渲染到真实的DOM上,将任务交给浏览器,进而进行layout和paint等步骤,这个函数就是React.render()。首先看下该函数的接口定义:ReactComponent render( ReactElement... 阅读全文
posted @ 2015-05-13 17:31 royalrover 阅读(19008) 评论(1) 推荐(8) 编辑
摘要:由于本人最近身体有恙,做了个小手术,暂时卧床休息,不能继续更新博客,还请他人谅解! 阅读全文
posted @ 2015-04-26 22:28 royalrover 阅读(236) 评论(2) 推荐(0) 编辑
摘要:本文翻译自React的官方博客,详情请阅读原文。React非常适合构建组件化的应用,它注重高性能,因此组建的重用,项目的扩展都十分灵活,Facebook和instagram的不少商业项目使用了此框架。本文主要通过“输入查询数据”这个简单的demo来说明或者学习如何用React来架构。数据模型 我们... 阅读全文
posted @ 2015-04-19 00:30 royalrover 阅读(655) 评论(0) 推荐(1) 编辑
摘要:开篇 随着javaEE的spring框架的兴起,依赖注入(IoC)的概念彻底深入人心,它彻底改变了我们的编码模式和思维。在IoC之前,我们在程序中需要创建一个对象很简单也很直接,就是在代码中new Object即可,有我们自己负责创建、维护、修改和删除,也就是说,我们控制了对象的整个生命周期,直到对... 阅读全文
posted @ 2015-04-16 22:46 royalrover 阅读(2756) 评论(0) 推荐(3) 编辑
摘要:起因 最近接触了一道有意思的题目,就是单击表格的表头,根据表头的那一栏进行排序。恰好有一栏的数据全部是中文汉字,如果仅仅对于汉字数组使用默认的sort排序,那么是针对汉字的unicode值进行比较排序,结果肯定与我们习惯的根据汉字的拼音排序大不相同。但是对于一个简单易用的程序而言,没有必要写个复杂的... 阅读全文
posted @ 2015-03-25 11:36 royalrover 阅读(512) 评论(0) 推荐(2) 编辑
摘要:困境 在响应式布局中,我们应该小心对待iframe元素,iframe元素的width和height属性设置了其宽度和高度,但是当包含块的宽度或高度小于iframe的宽度或高度时,会出现iframe元素溢出的现象:这样溢出的iframe会破坏页面的布局。我们可以采用一种方法让iframe元素也具有响应... 阅读全文
posted @ 2015-03-18 15:32 royalrover 阅读(6907) 评论(0) 推荐(2) 编辑
摘要:flex的一些属性 CSS3中引入了另一种框--flexbox,flexbox有一些block和inline不同的性质,比如: 现在就大体讲述下这个具体属性的表示含义。 设置flexbox的兼容性 将一个容器设置为flexbox(又称伸缩容器)很简单,但是却存在一些兼容性的问题,比如在IE10下,早 阅读全文
posted @ 2015-03-10 14:53 royalrover 阅读(1230) 评论(0) 推荐(1) 编辑
摘要:简介 在清除浮动一文中提到BFC不会被浮动元素遮盖,并没有详细探究表现行为。规范中指出,在同一个BFC内,作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box。其实,浏览器在内部通过隐式的给子BFC设置margin值来防止覆盖。例证 创建两个浮动元素和一个B... 阅读全文
posted @ 2015-03-04 10:35 royalrover 阅读(490) 评论(0) 推荐(1) 编辑
摘要:从头讲讲编码的故事。那么就让我们找个草堆坐下,先抽口烟,看看夜晚天空上的银河,然后想一想要从哪里开始讲起。嗯,也许这样开始比较好……很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物。他们看到8个开关状态是好的,于是他们把这称为"字节"。再后来,他们又做了一... 阅读全文
posted @ 2015-02-28 16:09 royalrover 阅读(180) 评论(0) 推荐(0) 编辑
摘要:入口方法 每个程序都有个入口方法,类似于c的main函数,seajs也不例外。系列一的demo在首页使用了seajs.use(),这便是入口方法。入口方法可以接受2个参数,第一个参数为模块名称,第二个为回调函数。入口方法定义了一个新的模块,这个新定义的模块依赖入参提供的模块。然后设置新模块的回调函数,用以在loaded状态之后调用。该回调函数主要是执行所有依赖模块的工厂函数,最后在执... 阅读全文
posted @ 2015-02-27 16:39 royalrover 阅读(183) 评论(0) 推荐(1) 编辑
摘要:模块类和状态类 参照上文的demo,我们结合源码分析在简单的API调用的背后,到底使用了什么技巧来实现各个模块的依赖加载以及模块API的导出。 首先定义了一个Module类,对应与一个模块function Module(uri, deps) { this.uri = uri this.depen... 阅读全文
posted @ 2015-02-27 15:26 royalrover 阅读(243) 评论(0) 推荐(1) 编辑
摘要:简述 前端开发模块化已经是大势所趋,目前模块化的规范有很多,众所周知的有commonJS,Module/Wrappings和AMD等,而且ES6也着手开始制定模块化机制的实现。类似于c/c++的include,java中的import关键字,在js中也定义了require关键字,用以引进依赖模块。 ... 阅读全文
posted @ 2015-02-27 12:37 royalrover 阅读(416) 评论(0) 推荐(1) 编辑
摘要:"被申遗"不是指"没申遗",而是全都经过了中国人重新包装。近日,有报道称韩国计划将火炕申报世界遗产,联系近年来韩国多起"申遗事件",国内网民纷纷吐槽东北土炕也要被韩国抢走了。实际上,国内流传的有关韩国的各种"申遗事件"全都经过中国人重新包装,要么完全是子虚乌有,要么带有事实偏差的误导性"被火炕":韩... 阅读全文
posted @ 2015-02-11 13:17 royalrover 阅读(324) 评论(0) 推荐(0) 编辑
摘要:简述 我们都知道无法通过delete关键字针对变量和函数进行操作,而对于显示的对象属性声明却可以进行,这个原因需要深究到js的实现层上去,让我们跟随 Understanding delete 来探究一番,另外本文并不考虑浏览器的兼容性实现问题。理论 为什么我们可以这样: var o = { x:... 阅读全文
posted @ 2015-01-29 23:42 royalrover 阅读(212) 评论(0) 推荐(1) 编辑
摘要:David Flanagan最近写了一个关于全局eval的简单表达式,可以用一行式子表示:var geval = this.execScript || eval; 尽管看起来很简短,但是跨浏览器的兼容性并不好。仔细考虑了下这个话题,我觉得还有一些方法来实现代码的全局执行。而且有些方法--间接eval... 阅读全文
posted @ 2015-01-26 15:56 royalrover 阅读(579) 评论(0) 推荐(1) 编辑
摘要:Gradient Filter和AlphaImageLoader Filter 这两个属性是legend IE(IE6,7,8)中的渐变滤镜和透明滤镜,我们先详细介绍下这两个属性的用法,详情可查看MSDN。 透明滤镜的使用方式很简单,只需在样式中定义 "filter:progid:DXIm... 阅读全文
posted @ 2015-01-25 16:33 royalrover 阅读(634) 评论(0) 推荐(0) 编辑
摘要:outline属性有什么作用 原文链接 a{outline:none} do not do it 当用户使用tab键进行链接切换时,该属性会在当前选中的链接(获得焦点)使用该属性,一般来说是虚线框的长方形。这对于没有使用鼠标输入的用户而言尤其有用,它可以作为视觉反馈来告知用户当前的输入。所以说如... 阅读全文
posted @ 2015-01-25 12:29 royalrover 阅读(718) 评论(0) 推荐(1) 编辑
摘要:介绍 闲来无事,去了CSS3Plus网站逛了逛,发现了一个很有意思的实现--css3实现进度条。粗略看了下代码,发现原理其实很简单,不难理解。现在在此讲述下原理并实现一个1s更新的进度条。 技术细节是这样的:进度条由两个半圆环组成,首先我们的任务是实现左右两个半圆环。圆环可以用border-ra... 阅读全文
posted @ 2015-01-22 16:46 royalrover 阅读(7257) 评论(0) 推荐(0) 编辑
摘要:CSS3的3d变换 CSS3给我们提供了一个新的功能,那就是3d变换。3d变换和2d变换的基本API函数类似,只不过多了些在Z轴上的操作,不难使用。 但是,为了让元素拥有3d变换的功能,我们需要给他的父元素设置相应的变换属性。与其相关的属性为perspective和transform-style。在... 阅读全文
posted @ 2015-01-21 16:10 royalrover 阅读(1761) 评论(0) 推荐(0) 编辑
摘要:无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了。但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情况更多,这里不详细讲解,只说明大概过程。 问题那么多,主要出现在浏览器自身实现上,其中尤属legac... 阅读全文
posted @ 2015-01-20 21:42 royalrover 阅读(937) 评论(1) 推荐(0) 编辑
摘要:简介 异步回调的书写往往打乱了正常流的书写方式,在ECMAScript 6中实现了标准的Promise API,旨在解决控制回调流程的问题。 简单的实现了Promise API: 1 (function(w){ 2 function Promise(f... 阅读全文
posted @ 2015-01-13 20:55 royalrover 阅读(1210) 评论(0) 推荐(1) 编辑
摘要:简介 在HTML中,我们可以将js嵌入到script标签中,可以嵌入到行内代码中,也可以嵌入到src(href)中。后者称作javascript URL。该方式的URL格式固定:javascript:expression。 其中,expression字符串必须能够被解释器所解析执行,执行结果若为... 阅读全文
posted @ 2015-01-09 10:41 royalrover 阅读(656) 评论(0) 推荐(0) 编辑