前端监控系列-数据上报

性能监控和错误上报只是辅助功能,不应阻塞页面加载,因此只有当页面完成加载后,我们才进行数据获取和上报(实际上,页面加载完成前也获取不到必要信息),性能数据可以在页面加载完之后上报,尽量不要对页面性能造成影响。

阅读全文 >

前端监控系列-错误监控

错误监控主要是为了在sls看板上,能更加全面的展示我们项目的情况,所以这边加了个错误上报的口子,其实错误上报很简单,只需要全局捕获几种类型的错误就好了。

阅读全文 >

前端监控系列-性能监控

什么是性能监控,主要要监控哪些指标,有什么意义呢?

我们经常会遇到这样一个情况,发布在线上的页面,有一天老板或者是其他同学跟你反馈,你的页面怎么这么慢,是不是有bug。然后你会自己打开对应的页面,看了看感觉速度正常,也算是秒开吧。然后你再关闭缓存,再试了一下,还是好的呀,哪里慢了?这个时候你就很难评估出来这个页面到底是真慢还是某个设备的网络问题。

这种在单个设备上的表现,其实很难准确反映我们的页面在线上运行的真实情况。线上环境包括不同的设备、不同的宿主环境、不同的运营商网络、不同的地区这些关联因素,所以我们就需要有一套可以监控线上环境运行情况的系统。

阅读全文 >

通过ESLint和Prettier统一团队代码规范.

随着业务的需求的增加,前端项目也越来越多,项目之间的代码风格也不尽相同。如果一个项目涉及多个同学维护的话,那这个项目的代码风格就会比较糟糕了。而且有的同学本地可能用了格式化插件,所以保存之后会造成整个文件的代码被格式化,其实可能只修改了一行代码。这样在做合并代码 review 时,很容易就会被忽略,也失去了 review 的意义。

阅读全文 >

ReactNative之入门全解

上手 RN 开发也有一段时间了,为了让团队其他同学也能快速上手,也算是对自己学习过程的一个记录。 这里整理了一下整个开发过程需要注意的点,因为是面向大前端所有同学,所以也包括了前端、android、ios 的相关知识。主要分成几个部分:环境搭建、基础知识(RN 基础、前端基础)、学习资源

阅读全文 >

ReactNative之iconfont使用

iconfont 显示成图形图标的字体,因为字体是矢量化图形,具有分辨率无关的特性,在任何分辨率和 ppi 下面,都可以做到完美缩放,不像传统位图如:png,jpg 一样,放大后会有锯齿或者模糊。
为什么使用 iconfont 对比图片大小来说容量更小,支持样式修改(大小,颜色),适应多分辨率,网上有很多现成的 iconfont 资源可以使用。

阅读全文 >

ReactNative之导航器使用

主要是介绍了 react-navigation 的相关配置和样式设置,以及 react-navigation 内的 navigation 属性。navigator 主要分为以下三种类型:StackNavigator、TabNavigator、DrawerNavigator,每种类型都有其相应的使用场景和配置项。

阅读全文 >

ReactNative之样式手册

在 React Native 中,你并不需要学习什么特殊的语法来定义样式。我们仍然是使用 JavaScript 来写样式。所有的核心组件都接受名为 style 的属性。这些样式名基本上是遵循了 web 上的 CSS 的命名,只是按照 JS 的语法要求使用了驼峰命名法,例如将 background-color 改为 backgroundColor。以下备忘一下,常用的样式和用法说明。

阅读全文 >

HTML5之离线缓存

乐刻教练端业务是一个 Hybrid APP,通过原生 APP 提供调用原生能力的外壳,内部逻辑全部使用 H5 页面实现。 这种方式在早期产品需求快速迭代,客户端资源紧张的情况下,解决了很大一部分问题。但随着业务需要和使用人数的增加,教练端已经有点力不从心的。在 3 月份,已经对教练端进行过一次优化,主要集中在资源加载、初始数据、转场动画等。接下来,想要结合 HTML5 离线缓存机制,进行一些优化尝试。

阅读全文 >

大学毕业后的第一个小结

不知不觉毕业已经将近三年了,干前端也有两年多了,从刚开始的门外汉也慢慢的成为一个能独立干活的职业猿了。两三年时间经历了很多次选择,从弱电到编程,从上海到杭州,但每一次的选择似乎都让自己向上又迈了一步。

阅读全文 >

js与jsBridge的通讯原理

第一次接触到混合开发应该是在一年前,当时在做 ionic 和 Cordova(PhoneGap)项目的时候,这些框架在 web 基础上包了一层 Native,然后通过 Bridge 技术使得 js 可以调用视频、位置、音频等功能。目前手上负责的项目则是一个与自家 APP 交互的混合开发项目,于是在课余时间就查了查相关的实现方案和原理。本文就是介绍这层 Bridge 的交互原理,主要描述了 js 与 ios 及 android 底层的通讯原理及 JSBridge 的封装技术及调试方法。

阅读全文 >

call、apply和bind的区别

JavaScript的一大特点是,函数存在定义时的上下文运行时的上下文以及上下文是可以改变的这样的概念。call、apply和bind都是为了改变某个函数运行时的上下文而存在的,换句话说,就是为了改变函数体内部this的指向。以下是三个相似点:

阅读全文 >

CSS3的新特性

CSS3,这个新一代的标准应运而生。为了满足现有的对于Web UI 的开发需求,它提供了一系列强大的功能,如许多新的CSS 属性(文字,布局,颜色等等),各种CSS 特效,甚至还支持CSS 动画、元素的变换。

阅读全文 >

canvas 图片合成填坑记

在实际开发过程中,经常会接到产品关于分享海报,生成海报,照片合成等需求,这里就简单总结一下。关于一次海报合成的填坑过程,欢迎指正。

阅读全文 >

VueJs之组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

阅读全文 >

VueJS之Vuex使用指南

Vuex 是 状态管理的编程模式 + 工具库,适用于 Vue.js 编写的应用。它作为一个集中化的 store (状态存储),服务于应用中的所有组件,其中的规则保证了状态只会在可预测的方式下修改。另外,它能与 Vue 官方提供的 devtools 扩展 集成,提供高级功能,如,无需配置就可以基于时间轴调试,以及状态快照的 导入 / 导出。

阅读全文 >

抓包工具Charles使用

Charles 其实是一款代理服务器,通过成为电脑或者浏览器的代理,然后截取请求和请求结果达到分析抓包的目的。该软件是用 Java 写的,能够在 Windows,Mac,Linux 上使用。开发 iOS 都在 Mac 系统上吧,安装 Charles 的时候要先装好 Java 环境。

阅读全文 >

云服务之ngnix安装配置

在项目开发中需要自己搭建配置前端服务,发布代码,所以捣鼓了一下 nginx。在这里记录一下,相应的常规配置。Nginx 是一款轻量级的网页服务器、反向代理服务器。相较于 Apache、lighttpd 具有占有内存少,稳定性高等优势。它最常的用途是提供反向代理服务。

阅读全文 >

云服务之nodejs进程管理

运行 node 服务时,如果直接通过 node app 来启动,如果报错了,整个服务就会直接停止运行。所以开发时和在服务器运行时,需要一个进程管理的工具,一般有 forever,pm2,supervisor 这几种。

阅读全文 >

云服务之Linux常用命令

最近买了一台学生阿里云的服务器,开始建一个属于自己的小网站和一些项目 demo,所以开始了解 Linux 系统的相关知识和相关使用,入门第一步当然是命令行操作了,下面记录了一些常用的命令语句。

阅读全文 >

浏览器的工作原理

浏览器的主要功能是将用户选择得web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包括PDF、image及其他格式。用户用URI(Uniform Resource Identifier 统一资源标识符)来指定所请求资源的位置。

阅读全文 >

CSS之BFC(块级格式化上下文)

BFC 是什么?从没有认识到最初的认识是一个关键且困难的过程。网上的很多文章都会写道:BFC 是一个环境。这样的写法让人看了就头疼:我们在 HTML 和 CSS 中好像从没接触过环境这个概念。

下面不妨让我用通俗的方式解释一下 BFC 的概念:BFC 可以简单的理解为某个元素的一个 CSS 属性,只不过这个属性不能被开发者显式的修改,拥有这个属性的元素对内部元素和外部元素会表现出一些特性(后面会讲到),这就是 BFC。

阅读全文 >

前后端分离之JWT用户认证

在前后端分离开发时为什么需要用户认证呢?原因是由于 HTTP 协定是不储存状态的(stateless),这意味着当我们透过帐号密码验证一个使用者时,当下一个 request 请求时它就把刚刚的资料忘了。于是我们的程序就不知道谁是谁,就要再验证一次。所以为了保证系统安全,我们就需要验证用户否处于登录状态。

阅读全文 >

ESLint入门指南

ESLint 是一个插件化的 javascript 代码检测工具,它可以用于检查常见的 JavaScript 代码错误,也可以进行代码风格检查,这样我们就可以根据自己的喜好指定一套 ESLint 配置,然后应用到所编写的项目上,从而实现辅助编码规范的执行,有效控制项目代码的质量。

阅读全文 >

HTML之Meta标签

meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等!

阅读全文 >

HTML5之本地存储

Web Storage是HTML5里面引入的一个类似于cookie的本地存储功能,可以用于客户端的本地存储,其相对于cookie来说有以下几点优势:

阅读全文 >

MongoDB常用语句

这里主要介绍和记录一些有关MongoDB的常见语句。主要包括插入、查询、更新和删除。文档的数据结构和JSON基本一样。所有存储在集合中的数据都是BSON格式。BSON是一种类json的一种二进制形式的存储格式,简称Binary JSON。

阅读全文 >

NodeJs之Express与MongoDB交互

mongoose是一款基于nodejs的优雅数据构建mongodb模型工具。mongodb是一款新型的json(键值对)数据类型的数据存储格式的数据库。在目前来说,使用nodejs和mongodb是为中小型企业以及个人web开发的绝配。

阅读全文 >

CSS之修改input range样式

今天来探讨一下 HTML5 的 range 这个新的 input 类型,不过重点不是在 range 要如何使用,而是在如何去改变 range 的样式,做出一个漂漂亮亮的滑动杆。

过去我们要制作美美的滑动杆 ( range slider ),不外乎就是用个 spandiv ,搭配判断滑鼠座标 ( pageX、pageY ) 与点击事件来制作,就算是 HTML5 具有了 rangeinput 类型,预设的样式只能满足基本的需求,对于有一些要求视觉设计的网站来说,根本就毫无用武之地,只好自己手动干一个 range slider 来用了。

阅读全文 >

CSS之flex布局

flex是一个用于页面布局的全新css3属性,flexbox可以把内部元素放在同一个方向进行排列(从上到下,从左到右),并让内部元素可延伸占用可占用的空间。我们的常规布局是采用块和内联流方向,flex布局采用的是基于flex-flow流可以很方便的实现居中,且能对不同大小的屏幕进行自适应。

阅读全文 >

CSS之清除浮动float

在网页布局的时候我们经常会碰到有关float的使用,但是用了float没有清除会出现下面的诡异情况。接下来我们就说说怎么去清除这些float。

阅读全文 >

CSS之响应式页面布局

要说到”响应式布局设计”,我们先来介绍一下另外一个名词:”自适应网页设计”(Responsive Web Design),最早是Ethan Marcotte在2010年提出的。指的是可以自动识别屏幕宽度、并对页面的布局会基于一定的因素搭建做出相应调整的网页设计。自适应布局能够提供一种更加实用的解决方案,使得项目的实现成本更低,并且更加易于测试。自适应布局可以被看作是响应式布局的一个更加廉价的替代品,换句话说自适应网页设计就是一个精简版的响应式布局。当固定宽度与流动宽度结合起来时,自适应就变成了响应式,响应式网页设计指的是页面的布局(流动网格、灵活的图像及媒介查询),响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。

阅读全文 >

ES6入门(六) - 函数的扩展

一、函数参数的默认值

在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。

function log(x, y) {
  y = y || 'World';
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World
阅读全文 >

ES6入门(五) - 数组的扩展

一、Array.from()

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。

只要是部署了Iterator接口的数据结构,Array.from都能将其转为数组。

阅读全文 >

ES6入门(四) - 数值的扩展

一、二进制和八进制的表示法

ES6提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。

0b111110111 === 503 // true
0o767 === 503 // true

如果要将0b和0o前缀的字符串数值转为十进制,要使用Number方法。

Number('0b111')  // 7
Number('0o10')  // 8
阅读全文 >

ES6入门(三) - 字符串的扩展

一、字符的Unicode表示法

ES6添加新的解读方式,只要将码点放入大括号,就能正确解读该字符。

"\u{20BB7}"
// "𠮷"

"\u{41}\u{42}\u{43}"
// "ABC"

let hello = 123;
hell\u{6F} // 123

'\u{1F680}' === '\uD83D\uDE80'
// true
阅读全文 >

ES6入门(二) - 变量的解构赋值

一、数组的解构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

//以前,为变量赋值,只能直接指定值。
var a = 1;
var b = 2;
var c = 3;
//ES6允许写成下面这样。
var [a, b, c] = [1, 2, 3];
阅读全文 >