浏览器标签之间通信的几种方式

postmessage

第一种考虑的是postMessage ,方法可以安全地实现跨源通信

阅读全文

同步异步和阻塞非阻塞概念

下面的例子是自己想到的,感觉能解释这个几个概念。

A去蛋糕店买蛋糕,但是蛋糕现做需要一段时间,时间不确定,取决于甜点师心情和蛋糕只做难度。

同步阻塞

A订完蛋糕后,店员没有告诉A需要多久,A在店里坐着干等,两眼放空不做任何事情,直到蛋糕做好,A才走。

阅读全文

基于REST风格的查询api的构思设计

在REST中,资源的返回结构与返回数量是由服务端决定;在GraphQL,服务端只负责定义哪些资源是可用的,由客户端自己决定需要得到什么资源,所谓的api查询。我们的想法是在REST中服务端决定的资源,其实也是通过客户端所给予的信息来进行反馈(资源定位和http的动作),如果客户端和服务端之间有一套约定,这个约定框架下客户端给的信息足够多,那么也可以让服务端来满足客户端的查询需求,即按需请求按需返回,这个和GraphQL的思想是一致的。
至于为什么不统一使用GraphQL,每个公司的大背景下会有每种不同的实际情况,满足多端的需求又尽快的让服务端和客户端每个人都熟悉GraphQL,成本比较大;当然在有条件的额情况下统一使用GraphQL是最好的。所以我们就想用中间层和传统的REST来改造现有数据接口,又符合GraphQL的思想,在客户端的查询条件下,满足合并模块数据、过滤筛选冗余数据,选取特定数据的需求。

阅读全文

垂直横向曝光事件的发生

横划滚动曝光

横向滚动推荐swiper,常用于移动端网站的内容触摸滑动,是一款功能及其强大触摸滑动插件。
如果使用vue可以使用vue-awesome-swiper组件,如果是横向滑动曝光,可以使用其中的事件来监听滑动位置。
本次只是讨论曝光问题,更多文档内接口参考下面链接。

1
2
3
4
5
6
7
8
9
10
11
var mySwiper = new Swiper('.swiper-box',{
on:{
slideNextTransitionEnd: function(){
// 正向切换结束时执行
if(this.activeIndex > 3){
// 大于当前已经曝光的数目
console.log(`expo_${this.activeIndex}`)
}
},
},
})

阅读全文

移动开发中视觉稿和设备之间单位自适应转化

设置根元素大小,通常设计稿的设计宽度为750,也有720或者别的尺寸的,那么在这个尺寸上的所有元素的大小都是基于这个宽度来显示的,我们正常在移动端使用设备,每个设备的宽度不尽相同,所以只要按照这个比例进行缩放就可以完成所有设备的显示一致性。
按照比例进行缩放,就需要使用rem,rem是根据当前页面根元素大小调整的单位,设备的屏幕改变只要改变这个根元素的大小,就可以改变页面所有元素的尺寸。

阅读全文

搭建开发脚手架CLI

马上更新。。。。

原创内容,欢迎交流转载请注明出处

阅读全文

dotjs+webpack分模块拼接渲染

dotjs只有120行,比较轻量的模板渲染工具,也有其他的类似nunjucks art-template等等,三者都可以考虑使用感觉都不错,dotjsnunjucks可以在浏览器和node环境里做模板引擎。当然现在的主流前端框架把这类jquery时代的东西慢慢边缘化,node环境里也可以采用同构的方式,也不是必须需要这类工具了。如果在移动端开发中都不用考虑兼容性,ie8及以上都可以使用,ie8以下拒绝提供服务=。=
但是我想说,不是所有的项目都是要vue、react这样的框架去上手的,虽然用脚手架启动一个框架很容易,但是觉得没有必要,如果你能想到最快的方式就是用原生的办法搞定,比如临时需要一个页面支持,无任何拓展维护,那么这个项目就不值得用框架大费周折。主流框架一定得用,但是不能站在其他能实现方案技术的对立面,玩呗~

阅读全文

TS笔记整理(1)-类型

全局安装typescript,目的是使用这个tsc的命令工具去做ts文件的编译工作,编译时可配置的。
typescript是我们用的js的超集,也就是说它有的ts都包含,还增强增加了一些语法上的写法,比如适合大项目大团队开发的类型约束,使得弱类型的语言得到进一步的增强,个人认为越来越逼近java的写法。

1
npm install -g typescript

阅读全文

前端利用js进行图片压缩

经常遇到用户上传文件的场景,大多数是图像,在满足一些业务时候需要对用户上传的图像进行前端的校验控制,比如体积、长宽、类型等,如果遇到校验不通过的情况分两种一种是阻止上传一种是帮组用户处理出合法的图片。
第一种阻止上传影响用户的体验,用户还要自己找图片处理软件对着规则进行处理。
第二种就需要用到前端的一些技术帮组用户处理图像,目前可以做到压缩体积、压缩宽高、改变图片类型、甚至提供裁切宽进行裁切。

关键知识点:

FileReader
Canvas

关键代码:

1
2
3
4
5
6
7
8
9
10
11
12
// 以base64形式读取文件
reader.readAsDataURL(file)
// 读取成功回调 e.target.result
reader.onload = (e)=>{ img.src = e.target.result }
// canvas画图操作,this指当前image对象,起始点在平面坐标(0,0)处,画一张目标宽高的图像
context.drawImage(file, 0, 0, Width, Height)
// 转为blob对象
canvas.toBlob()
// 转为bae64对象
canvas.toDataURL()
// 图片加载完毕
img.onload = ()=>{}

阅读全文

限频节流函数debounce&throttle

lodash的function模块里有两个方法,debouncethrottle,可以做节流限频使用,为在某些特定的环境下做必要的优化。
这两个方法了解原理后也可以自己去实现。

场景一 曝光埋点

在一个多屏长度的页面中,A模块的A元素在出现在屏幕可视区域时候(即曝光)触发埋点事件,随即上报相应参数。
思路:A模块A元素距离文档顶部的高度是固定值设为bodyOffsetTop,添加onscroll事件到window上,通过监听滚动事件,不断计算此时被卷入上去的文档高度docScrollTop,假设屏幕可视区域的高度为viewHeight
当以下条件成立的时候,我们就认为该元素是出于可曝光的区域的。

1
bodyOffsetTop <= docScrollTop + viewHeight

具体实现代码:

阅读全文