ReactNative之iconfont使用

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

阅读全文

ReactNative之CocoaPods基础知识

在使用react-native的时候,安装ios依赖时经常就会使用到cocoapods,这里我们介绍一下cocoaPods。

阅读全文

ReactNative之导航器使用

接上面那篇文章,上篇文章主要是介绍了react-navigation的相关配置和样式设置等,这篇文章主要讲讲react-navigation内的navigation属性。

阅读全文

ReactNative之导航器配置

监听事件

let _this = null;

export default class WebViewPage extends Component {
static navigationOptions = ({ navigation }) => ({
// ......
onPress={() => _this.reload() }>
// ......
)
});
componentDidMount() {
_this = this;
}
_reload() {
console.log("aaaaaaa");
}

阅读全文

ReactNative之基础内容

环境搭建完了,我开始了解一下ReactNative的基础内容吧。包括样式、高度宽度、

阅读全文

ReactNative之环境搭建

环境配置

按照官网https://reactnative.cn/docs/0.51/getting-started.html的教程一步一步来,不过还是遇坑无数,这里记录一下遇到的坑。

阅读全文

ReactNative之样式手册

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

阅读全文

大学毕业后的第一个小结

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

阅读全文

VueJs之Toast插件

插件是什么

插件通常用于为 Vue 添加全局级别的功能。Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:

阅读全文

javaScript事件详解

事件绑定和普通事件有什么区别

事件绑定就是针对dom元素的事件,绑定在dom元素上。普通事件即为非针对dom元素的事件。

阅读全文

call、apply和bind的区别

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

阅读全文

使用AWS搭建一年免费的Shadowscoke

作为一个前端开发,不能使用Google,那不就是相当于失去了左板右臂,这怎么可以? 但是要钱的FQ服务又有点贵,不舍得花钱,那今天我们就来薅一把亚马逊爸爸的羊毛。

阅读全文

canvas 图片合成填坑记

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

阅读全文

VueJs之组件

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

阅读全文

VueJs之过滤器

Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。

阅读全文

VueJS之Vuex使用指南

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

阅读全文

浏览器的工作原理

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

阅读全文

CSS之动画使用

CSS动画的两大组成部分:transition和animation。

阅读全文

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

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

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

阅读全文

前后端分离之JWT用户认证

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

阅读全文

前后端分离之跨域问题

最近在做的一个项目,原本是通过SpringMVC结合freemarker模板引擎和JSP实现HTML页面和后端的数据交互,现在为了业务需要,要将前后端拆分出来。使用Restful API的形式进行交互。然后刚上路就遇到坑了,在这里记录一下如何填坑,以防不时之需。这里介绍的方法是SpringMVC架构通过CROS协议解决跨域问题。

阅读全文

ESLint入门指南

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

阅读全文

HTML之Meta标签

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

阅读全文

HTML5之本地存储

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

阅读全文

一个HTTP的过程发生了什么

在浏览器的地址栏上输入lion1ou.win,然后点击回车,回车到看到页面这一段时间到底发生了什么?

答:域名解析 –> 发起TCP的3次握手 –> 建立TCP连接后发起http请求 –> 后台服务器响应http请求,浏览器得到html代码 –> 浏览器解析html代码,并请求html代码中的资源(如js、css、图片等) –> 浏览器对页面进行渲染呈现给用户

阅读全文

NodeJs之Express与MongoDB交互

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

阅读全文

NodeJs之Express入门

Express 是一种保持最低程度规模的灵活 Node.js Web 应用程序框架,为 Web 和移动应用程序提供一组强大的功能。详见:官网中文网站

阅读全文

CSS之垂直居中

在实际工作过程中经常会碰到水平垂直居中的问题,这里手机总结了几种水平垂直居中的常用方法。

阅读全文

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年提出的。指的是可以自动识别屏幕宽度、并对页面的布局会基于一定的因素搭建做出相应调整的网页设计。自适应布局能够提供一种更加实用的解决方案,使得项目的实现成本更低,并且更加易于测试。自适应布局可以被看作是响应式布局的一个更加廉价的替代品,换句话说自适应网页设计就是一个精简版的响应式布局。当固定宽度与流动宽度结合起来时,自适应就变成了响应式,响应式网页设计指的是页面的布局(流动网格、灵活的图像及媒介查询),响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。

阅读全文

webpack入门指南

Webpack 是德国开发者 Tobias Koppers 开发的模块加载器,它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

阅读全文

JavaScript数据类型转换

JavaScript是一种动态类型语言,变量没有类型限制,可以随时赋予任意值。虽然变量没有类型,但是数据本身和各种运算符是有类型的。如果运算符发现,数据的类型与预期不符,就会自动转换类型。比如,减法运算符预期两侧的运算子应该是数值,如果不是,就会自动将它们转为数值。

阅读全文

JavaScript之立即执行函数(IIFE)

在javascript里,每个函数,当被调用时,都会创建一个新的执行上下文。因为在函数里定义的变量和函数是唯一在内部被访问的变量,而不是在外部被访问的变量,当调用函数时,函数提供的上下文提供了一个非常简单的方法创建私有变量。

阅读全文

JavaScript之闭包

在前端学习中,一直提到JavaScript闭包,那闭包到底是什么呢?

阅读全文

JavaScript之null、NaN和Undefined的区别

在JavaScript编程中,我们经常会出现undefined、null和NaN。但是要怎么区分呢?该怎么去判断呢?

阅读全文

hexo博客搭建和配置

从工作开始,一路过来都是在学习。由于不是计算机专业,所以只能比其他人更勤奋才行。从刚进公司学习.net,到后来业务需要而接触web前端、cordova、H5等,各种全新的知识给我带了极大的冲击。感觉接触到的知识太乱,天天都是在迷迷糊糊中学了忘,忘了学。这样的过程触使我决定开始做一些备忘,于是就在博客园上开始记录一些东西。用了一段时间后,觉得在博客园上编辑太繁琐,翻出来查看时太麻烦,再加上刚接触Markdown,所以很想直接用Markdown来编辑记录,于是找到了Hexo + GitHub Page建立个人博客

阅读全文