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

设置根元素大小,通常设计稿的设计宽度为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

具体实现代码:

阅读全文

Vue长笔陆续更新

Npm install

1
2
npm install -S vue
npm install -S vuex

Vuex

root组件处进行store注册注入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Vue.use(Vuex)
const store = new Vuex.Store(storeParams)
const storeParams = {
state:{
point: [55,90,29,66,86,85,99],
count: 0
}
getters:{
pointBoder(state){
const maxPoint = Math.max.apply(null, state.point)
return maxPoint-20 //最高分以下20分被认为是高分的边界
},
highPoints(state, getters){
const pointBorder = getters.pointBoder
return state.point.filter(item => item > pointBorder)
}
}
mutations:{
// 'increament'称为事件类型 对应方法称为回调函数
increament(state, { baseNum = 1 }){
state.count += payload.baseNum
}
}
actions:{
asyncIncreament({ commit }){
setTimeout(()=>{
commit('increament')
},1000)
}
}
}

阅读全文

webpack搭建react基础项目框架

初始化,生成package.json

1
npm init -y

初始化git

1
git init

阅读全文

Mac利用charles进行本地服务调试

更新于2019-01-25 17:24:49
Charles官网
mac上我一般都会用Charles作为抓包和代理映射工具
一、普通抓包
Charles和需要抓包的网络请求设备处于同一网络环境中。
1.工具栏的proxy -> macOS Proxy勾选就可以抓包本机的请求
2.移动设备或者其他设备抓包请将网络的代理设置成手动,代理地址即为Charles软件所在设备的网络环境ip,端口一般为8888,设置完成后Charles会有弹框提醒是否允许信任之类的询问,直接选择allow,这样就可以愉快的抓其他设备的请求包来看了,这种抓包不需要安装ssl证书也可以抓https

阅读全文

node笔记整理之HTTP模块

核心类
http.Server 提供服务处理客户端的请求
http.ServerResponse 服务端针对客户端的请求做出响应
http.IncomingMessage 获取服务端/客户端返回的相关信息
http.ClientRequest 客户端向服务端发起请求

http.Server类

提供服务,处理客户端的请求

createServer(requestListener)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**
* @param requestListener(request,response) <Function> 当接收到客户端的请求时候进行的处理
* * * * * @param request http.IncomingMessage对象 指客户端的请求
* * * * * @param response http.serverResponse对象 指服务端的响应
* @return HTTP Server类
*
* 继承自 net.server 类且具有以下额外事件方法属性
* @event clientError 客户端触发一个Error事件,该事件监听器负责销毁底层socket
* * * * callback(err,socket)
* * * * @param err 错误对象
* * * * @param socket net.socket对象 触发此事件将不会有(req,res),所以发送任何http响应,应写入socket对象
* @event close 当http服务关闭触发
* @event connect 当客户端发送HTPP CONNECT请求时候触发,HTTP method为connect,该事件未被监听则客户端会关闭连接
* @event connection 客户端和服务端建立连接时触发 callabck(socket)
* * * * @param socket 服务端监听客户端的socket对象
* @event request callback(req,res) 每接收到一个请求时触发,多个request可能对应的是一个 connection(keep-alive), 参数值同requestListener
* @event upgrade callback(req,socket,head) 每当客户端发送http upgrade请求时触发,该事件未被监听则客户端会关闭连接
*
* @method close 停止服务端接收新的连接
* @method listen([port],[hostname],[backlog],[callback])
* * * * * @param port <number> 端口 默认随机分配
* * * * * @param hostname <string> 主机名域名
* * * * * @param backlog <number> 等待连接的队列最大长度 默认511
* * * * * @param callback <function> 回调
* @method listen(path,[callback]) 启动一个unix socket服务
* @method listen(handle,[callback])
* @method setTimeout([msecs=120000],[callback]) 设置socket超时时间,发生超时触发服务器对象的 'timeout' 事件,并传入 socket 作为一个参数
*
* @property listening [boolean] 服务是否在监听连接
* @property maxHeaderCount 限制请求头的最大数量 默认2000 0表示无限制
* @property timeout 设置获取连接超时时间
* @property keepAliveTimeout 服务器完成最后的响应需要等待额外数据的时间,保持活跃的毫秒数,之后才销毁socket
*/

阅读全文