WebApp问题整理

问题列表

伪类 :active 生效

要CSS伪类 :active 生效,只需要给 document 绑定 touchstarttouchend 事件

<style>
a {
  color: #000;
}
a:active {
  color: #fff;
}
</style>
<a herf=foo >bar</a>
<script>
  document.addEventListener('touchstart',function(){},false);
</script>

消除 transition 闪屏

两个方法

查看更多

评论

SwiftTips(一)

最新1年的Swift小Tip与一些建议阅读源码或者使用到项目中的开源库

查看更多

评论

如何利用Swift解析MarkDown

由于自己的开源项目需要使用MarkDown作为主要的文本语法,本该由iOS小组同学负责的东西由于他有点事情所以就改为由我负责了。由于也是第一次接触在Swift上边解析MarkDown,所以先去了解了一些github上边的开源项目,但是少之又少,而且实现的功能都很简单(大多数都是使用NSAttributeString来实现简单的加粗、倾斜、下划线),并不能达到我所期望的效果(支持90%以上的MarkDown并支持HTML)。

如何解决问题

首先根据经验,我首先想到的是CoreText + Regex。没错,给我一段MarkDown的文本,先用Regex匹配出每一个MarkDown的Element,然后使用CoreText绘制出来,如果是图片则预先占位,表格则细化解析,绘制。尝试着下手之后,发现MarkDown的语法不是一般的多,这样写下去光是解析器我可能要写一个月左右(编码、测试等)。

查看更多

评论

移动H5前端性能优化注意点

希望得到的最好的效果:

PC优化手段在Mobile侧同样适用

  1. 最多三秒钟渲染完成单屏或者使用Loading
  2. 基于3G/4G移动网络下,每屏幕资源不超过1024KB
加载优化
  • 合并CSS、JavaScript
  • 合并小图片、使用雪碧图
  • 缓存一切可以缓存的资源,部分资源css、js使用src="abc.css?cacheVersion=1"来控制版本
  • 使用长Cache
  • 压缩HTML、CSS、JS
  • 启用GZip
  • 使用首屏加载

查看更多

评论

如何迈出第四步(数据展示)

数据的获取与展示是每个App必不可少的功能,最常见的就是列表(iOS的TableView,Android的ListView)。在RN中当然也有ListView,第四步将在第三步建立好衔接的基础下,完成2个列表视图的构建,并加入网络请求知识(也就有下拉刷新了)。首先,我们去寻找一个接口,用以获取数据。这里为了方便直接使用聚合,我这里是找了一个微信文章推荐的接口:

1
http://v.juhe.cn/weixin/query?pno=1&ps=20&key=1cb0962fb0fb73dae41d96e88733ac96

参数:

  1. pno:页码
  2. ps:每页内容个数
  3. key:我的key,上边的可以直接拿去使用

接下来继续打开项目,进行编码,首先我们需要的是获取数据进行展示,在News.js中。

查看更多

评论

如何迈出第三步(衔接)

第二步,我们依旧遗留了一个问题,从引导页进入到程序主界面,打算使用React-Router来解决这个问题。目前我对React-Router也是处于知道但没用过的状态,我们先尝试着寻找资料了解一下这个功能组件(记住React-Router这个名字还是因为我之前使用了很久的vue-router)。来到Reacr-Router Github的主页后,阅读了一下大致的介绍,感觉还是只适合Web的React相关的路由操作(小白见解),我们使用另一个:

1
$ npm i react-native-router-flux --save

并且在使用之前建议大家阅读一下这篇文章,接着我们按照Github的文档来看下具体该如何操作:

查看更多

评论

如何迈出第二步(组件优化)

真的这种事情很好,勇敢的迈出第一步之后,就必须要接着走下去了。因为我第一篇的文章已经发出去了,并在结尾说下一次要做优化,为了厚脸皮也要用心的把问题解决了。解决完问题之后,还要装个逼,装逼到一半的时候,装不下去了,就必须得继续学习才能继续装逼。希望大家可以勇敢的迈出惧怕或者懒散的一步,程序员不要眼高手低。谁说高手组队不会翻车?不仅仅是这样,越牛逼的人翻车的后果越严重。

接着上一篇比较破的文章(我确实是第一天开始写RN的代码,之前都是看),发文章的时候我甚至有点脸红,妈的这是第一次,觉得这么坑的文章要发出去了,但是随之带来的就是写好下一篇的思想。不啰嗦,开始写:

查看更多

评论

如何迈出第一步

在算法前5课结束后,我渐渐的明白了一个道理:不管前方多难,放手去做吧,最难的是迈出第一步,迈出去了,以后就掌控在你手中了。快排、最短路径、二叉树算是算法的基础内容,但是之前一直不敢下手把他们写出来,因为工作3年多了,都是在创业公司,重重的业务负担让人满脑子充斥的都是业务逻辑、UI界面,5年前学的东西都忘的干净,所以我不假思索的在日程中加入了写算法文章,并且马上买了一本算法的书。然后逼着自己写了开篇之后,发现每天上午上班,先放开手中的工作,安静的读书、实践代码、写出来自己的思想并分享给大家是一件很不错的事情,而且渐渐的觉得重新拾起了算法。其实我买的书的内容,就是讲解到了二叉树就完结了,我大概用了4天的时间读完了这本书。

然后就是今天所写的react-native,其实在RN刚出的时候,我就开始入手了(忠实的FaceBook技术粉),但是一直在给自己找理由不去实践,每次版本更新,也只是去官网看看例子,觉得理解就行了。这段时间有朋友问到我相关的东西,我发现,在实际动手的时候,我就写个登录界面都写的不是很得心应手。所以决定迈出写项目的第一步。那,又有人要问了,写什么项目呢?先别急,既然是迈出第一步,那就要慢慢来。我姑且当读者都熟悉HTML、CSS、JS。

查看更多

评论

算法第五课

什么是树,没有回路的就是树,有回路的就是图。树有很多特性:

  1. 树中的任意两个点有且仅有唯一的一条路
  2. 树中如果有n个点,那么它一定恰好有n-1条边
  3. 在树中任意两点之间加一条,就会构成回路

常见的树,有家谱、操作系统的文件夹,目录等。并且我们规定,只要是没有回路的连通无向图就是树。为了确定每一棵树的形态,我们在对一棵树进行讨论的时候,将树中每个点称为结点或者节点,在树中,我们可以指定一个特殊的节点-。有一个根的树叫做有根树。根又叫做根节点,一棵树有且仅有一个根节点。根节点又可以被称为祖先,接下来就是父节点(没有父节点的节点就是根),子节点。如果一个节点没有子节点,这个节点被称为叶节点。如果一个节点既不是根节点也不是叶节点,也可以被称为内部节点,每个节点有深度,深度指的是从根到这个节点的层数(根为第一层)。

查看更多

评论

算法第四课

深度和广度是什么

为什么叫做深度与广度优先呢,其实是针对图的遍历而言的,请看

使用深度优先来便利这个图(具体什么是图,可以去搜索一下图论中关于图的定义)的具体过程是,假设从左边的顶点开始,沿着当前定点的边,走到未访问过的顶点;当没有未访问过的顶点时,返回到上一个点,继续试探别的点(沿着某一条分支走到底,然后回朔,再沿着另一条进行同样的操作)。所有的顶点都走过了或者是提前符合我们的条件,遍历结束。

广度优先的思想是:首先以一个未被访问过的顶点作为起始顶点,访问其所有相邻的顶点,然后对每个相邻的定点,再访问他们相邻的未被访问过的点定点,直到所有的点都被访问或者提前符合我们的条件,遍历结束。

查看更多

评论