node 包管理器随着nodejs的出现,另外两个东西也进入了前端大众的视野–CommonJS规范、node 包管理器。
说到node 包管理器,就不得不提npm,毕竟是官方标配,安装了node就自带了npm。npm + nodejs,构成了一个宏伟了前端世界。当然,出于各种原因,市面上还存在着各种包管理器,比较著名的端资源包管理器 – ‘bower’;镜像为主的cnpm、tnpm;工具提供的rnpm、spm;还有很多其他的(我也没用过):jamjs、component。
今天,想向大家介绍的是yarn– 2016.10.11 Facebook 正式发布的 javascript 包管理器, 用来替代npm。我在一次偶然的升级react native的时候,接触了yarn(react native已经将自家的yarn融入安装环境中)。一遍文章《Yarn: A new package manager for JavaScript》讲述了yarn的诞生历程。
阅读全文
前端跨域前端跨域方案很多,jsonp、iframe等等,但是个人觉得,最正宗,最无损的跨域方式还是CORS。CORS(Cross-origin resource sharing)是一个W3C标准,翻译过来是跨域资源共享。它允许浏览器向跨域(协议、域名、端口任一不相同)服务器发送XMLHttpRequest请求。目前支持所有现代浏览器(>IE10)借阅了阮一峰大神的《跨域资源共享 CORS 详解》,结合自己的理解,说一说自己的CORS的领会。
简介CORS协议本身,可以说,完全是由浏览器执行的。对前端开发者而言,CORS是在浏览器检查到跨域请求的时候,自动发起的。对后台开发者而言,只要在headers中返回特定的信息(相当于白名单)–具体的CORS步骤,浏览器会根据headers中返回的信息做出具体的行为。
请求浏览器会自动将请求分为两类:简单请求、非简单请求。只要同时满足以下条件,就属于简单请求。
(1) 请求方法是以下三种方法之一:· HEAD· GET· POST(2)HTTP的头信息不超出以下几种字段:· Accept· Accept-Language· Content-Language· Last-Event-ID· Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain凡是不同时满足上面两个条件,就属于非简单请求。浏览器对这两种请求的处理,是不一样的。
阅读全文
动作同步尝试用过browser-sync辅助开发的前端同学,大概都会感到神奇:在多个端打开网页,网页的动作却是完全同步的。当然我还没有看过源码,大概也知道是通过’websocket’实现信息同步。今天在看书籍《跨终端Web》–徐凯 的时候,里面有一部分 web动作同步的代码演示。于是做了demo做练习。
准备工具
koa : @1.1.2socket.io : @1.5.0
其中koa并没有什么特别意思,只是作为一个服务器存在,用express或者其他什么都可以。socket.io是我们需要的通讯库
原理1、 前端捕获正在发生的动作action,和触发动作的元素target,通过客户端socket传输到服务器socket;2、 服务器socket接收到信息,再将信息广播到其他所有客户端socket;3、 其他客户端socket接收到广播信息,使特定的元素target触发特定的动作action
阅读全文
编写邮件模板最近在写业务开发的时候,需要去写邮件通知的模板。积累了一些邮箱编写经验呀呀。
邮件html编写要求邮件编写参照的是 阮一峰大神的HTML Email 编写指南
里面大致提了
使用table 布局外链除了图片全部失效css使用行内样式为佳
各邮件对css的支持
阅读全文
什么是electronElectron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。Electron 集合了 nodejs + Chromium 浏览器浏览器;这意味着前端开发者可以通过web的方式构建视图,通过nodejs去进行io操作,甚至可以在html文档中直接调用nodejs功能;这可以使前端开发者以一种非常熟悉的方式去开发一款桌面应用。
当electron启动一个应用的时候,最创建一个主进程(就是启动的入口文件)。这个主进程负责与你系统的GUI交互,并为你的应用创建GUI(就是新建窗口);借用Get社区的一个图片进行流程展示,一定要看哦;继续向下看:
阅读全文
一周周实习,很少时间写博客了,但本周的实习中,遇到了一些问题,可以说是争长了阅历,所以一定要好好记下来。遇到的问题主要是关于跨域和css3的;
下面我们探讨一下跨域问题,还是css3下的translate会导致显示模糊的问题。
阅读全文
最近在慕课网上找到了很好的canvas教程,来自 @liuyubobobo 的 学写一个字 canvas绘图教程在 @liuyubobobo 老师的系列canvas教程中,我学到不少知识。今天,运用在视频中的所学,结合自己的代码风格,我自己尝试也写一个字帖出来,在这里分享一下思路和过程具体代码其实已经push在github上,感兴趣的可以clone下来参考一下。代码/canvas-demo/write这里还有在线的效果演示在线演示
想法如图:在canvas在实现这样一个效果,有一个米字格,可以用鼠标(pc)甚至手指(手机)在上面写字,字要有点像毛笔字。下面有控制部件,可以控制笔的颜色,还是可以清空米字格的墨迹。
下面就开始着手去写了。
阅读全文
遇见问题最近的时间都在开发社团内部的应用–隧道口,虽然只有简单的几个页面,但是依然是遇到了不少坑。其中 date 的时间处理就是一个。
简单说一下需求。。现在在做一个活动列表,后台传一个json,里面包含活动的列表数组。我遍历数组并创建对应的视图显示,并且以月份作为分类标准。展示一下后台拿来的数据
阅读全文