微信小程序踩坑

日常开发中遇到的一些坑,写的比较简略,有些bug可能微信后续的版本已经修复,会有过时的风险,仅供参考

  1. 不支持important
  2. color不支持父级覆盖
  3. 如果视图滚动,则上层的vew背景色是半透明的,没法遮挡
  4. 事件绑定不支持delagate吧
  5. wx.login 不支持断网设置,会很慢,只能超时
  6. 获取网络状态,不管有无网络都是会触发success,只是networkType不同。没网的时候ios和adr返回值不同,分别为fail和none
  7. view 是 display:block。text是inline。只有text的可以选中
  8. input 如果value是通过data赋值的,同时又绑定了bindinput,有可能会触发循环,导致文字闪烁
  9. 按钮点击多次,对多次执行,比如页面跳转
  10. template的data传值,
  11. import src路径计算有bug ./item.wxml 和 item.wxml 是不一样的,用后者,否则就是../item.wxml
  12. setData 单次设置不能超过1024kb
  13. storage存储大小限制是每个10m
  14. 小程序中的组件样式是可以覆盖的,比如button,使用普通的class可以覆盖
  15. 小程序不支持webfont字体的外部引用,但是如果转成base64的话,是可以正常使用的

react进阶之flux

去年翻译的flux官方文档对flux架构的描述,觉得最近很多朋友开始react编程了,所以我觉得有必要拿出来这篇水水的译文了,如果你还是喜欢看英文原版,那么请点这里

简述

为了方便理解,主要的英文名词都没有翻译。比如:dispatcher(调度者)、 store(仓库)、view(视图)

Flux是Facebook用来构建用户端的web应用的应用程序体系架构。它通过利用数据的单向流动为React的可复用的视图组件提供了补充。相比于形式化的框架它更像是一个架构思想,不需要太多新的代码你就可以马上使用Flux构建你的应用。

Flux应用主要包括三部分:dispatcher、store和views(React components),千万不要和MVC(model-View-Controller)搞混。Controller在Flux应用中也确实存在,但是是以controller-view的形式。view通常处于应用的顶层,它从stores中获取数据,同时将这些数据传递给它的后代节点。另外,action creators - dispatcher辅助方法 - 一个被用来提供描述应用所有可能存在的改变的语义化的API。把它理解为Flux更新闭环的第四个组成部分可以帮助你更好的理解它。

Flux使用单向的数据流动来避开MVC. 当用户与React视图交互的时候,视图会通过中枢dispatcher产生一个action。然后大量的保存着应用数据和业务逻辑的视图接收到冒泡的action,更新所有受影响的view。这种方式很适合React这种声明式的编程方式,因为它的store更新,并不需要特别指定如何在view和state中过渡。

深入理解javascript原型继承

作为一门被长期误解的编程语言,javascript一直被人所诟病.但是如果你真正的了解它之后,你会深深的爱上它.

首先,javascript是一个面向对象的编程语言,而且是一个纯粹的面向对象.虽然很多人不能理解,因为在他们眼中,只有像java,c++这样的编程语言才能称之为面向对象.但是,我只想说,你误解我,是因为你不懂我.

JavaScrip秘密花园在JavaScrip中,一切变量皆对象,除了两个特殊值undefined 和 null.

什么是面向对象?

  • 一切事物皆对象
  • 对象具有封装和继承特性
  • 对象与对象之间使用消息通信,各自存在信息隐藏
    -
    以这三点做为依据,C++ 是半面向对象半面向过程语言,因为,虽然他实现了类的封装、继承和多态,但存在非对象性质的全局函数和变量。Java、C# 是完全的面向对象语言,它们通过类的形式组织函数和变量,使之不能脱离对象存在。但这里函数本身是一个过程,只是依附在某个类上。

然而,面向对象仅仅是一个概念或者编程思想而已,它不应该依赖于某个语言存在。比如 Java 采用面向对象思想构造其语言,它实现了类、继承、派生、多态、接口等机制。但是这些机制,只是实现面向对象编程的一种手段,而非必须。换言之,一门语言可以根据其自身特性选择合适的方式来实现面向对象。所以,由于大多数程序员首先学习或者使用的是类似 Java、C++ 等高级编译型语言(Java 虽然是半编译半解释,但一般做为编译型来讲解),因而先入为主地接受了“类”这个面向对象实现方式,从而在学习脚本语言的时候,习惯性地用类式面向对象语言中的概念来判断该语言是否是面向对象语言,或者是否具备面向对象特性。这也是阻碍程序员深入学习并掌握 JavaScript 的重要原因之一。

实际上,JavaScript语言是通过一种叫做原型(prototype)的方式来实现面向对象编程的。它和其他的面向对象类编程语言一样,只是它的实现方式不同而已,或者说他们采用了不同的面向对象设计哲学。

关于git你需要知道的事

原文已同步到前端派


gutv.png
版本控制相信大家都不陌生,从CVS,到SVN,再到现在越来越受到重视的git。关于它们三者特别是后两者的对比,我觉得有必要说一下。

现在很多人,很多项目从svn转到了git,相信还是有一部分人是被动转到git的,比如说项目的改变,其中又有一部分人可能对git的好处并不是十分了解,以及git也不太了解。我们在使用一个东西的时候,常常会进入到我会用就行了,当我会用了,我就很容易就懂,但是实际情况并非如此。我们要会用,也应该知道究竟为什么我们要这么用。比如说学车的时候,我们虽然没必要知道汽车内部的构造,但是如果能明白为什么换挡的时候要踩离合的时候,对你学车觉得是很有用的。

  • GIT是分布式存储的,而SVN是集中式存储。

    什么意思呢?相信大家都用过SVN,它的工作流程就是:checkout 远端分支到本地 -> 本地修改 -> commit (这一步自动将代码push到远端的代码仓库) -> 加入版本控制这就要求,你必须得有网络,保证本地能够顺利的push代码改动到远端,否则就没法加入版本控制。
    而GIT的工作流程就不同了:ckeckout远端仓库到本地 -> 本地建立分支 -> 在分支上做些修改 -> add 并 commit -> 加入版本控制 -> push本地缓存的commit到远端

    所以最大的区别就是,使用git你完全不需要网络就可以进行版本控制,在本地修改,并提交到本地,并在合适的时候再push到远端。而svn要想加入版本控制就必须保证网络通常。

  • GIT把内容按元数据方式存储,而SVN是按文件
    意思就是GIT会在本地存储项目下的所有文件,因为本地存储的是一个远端的克隆版本,而svn则只需要checkout你需要的那部分代码文件到本地即可。所以通常本地的git目录的大小要远远大于svn的目录。

  • 另外一些特性包括GIT的操作速度要远远快于svn,这对发布来说速度提升明显。

参考:版本控制系统对比:Git与Subversion


下面说正事,说这么多其实最重要的还是得学会使用,毕竟工具的目的就是让我们的工作更加方便有效率。

拿github的工作方式举例吧:

  • 1.在github上新建一个项目
  • 2.checkout 到本地
1
2
3
4
5
6
git clone git@github.com:HoTT/book.git -o o
// -o可以指定oringin的alias。而oringin是远端仓库地址的alias
//如果需要指定本地文件夹
git clone git@github.com:HoTT/book.git gitbook -o o
//如果想查看所有分支
git branch -a
  • 3.建立分支

建立一个新的分支:

1
2
3
4
5
6
7
git branch example //新建example分支
git checkout example //跳到example分支
OR:
git checkout -b example //新建并跳到新分支
//如果新建了分支之后,想把它的远端设置为init的话应该怎么做?
git branch -u upstream/init //upstream是远端地址,一般为oringin

clone默认会chekout出master分支,如果你还想要远端的init分支呢?

1
2
3
4
5
6
git checkout init origin/init //克隆远端的init分支到本地的init分支
//你也可以在clone版本仓库的时候指定分支;
git clone <remote_repo> -b <branch>
//用gitk看下你的工作流
gitk--all &

  • 3.修改并提交
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//本地修改
git status //列出当前分支的状态
git difftool //调用diff工具diff代码
or
gitk & //
or
git gui & //如果你安装了git gui的话
git add -A . //将所有文件加入缓存
//提交代码
git push o init:init //第一次,新建远端init分支,并将本地init分支push过去
or
git push o init //效果参见上一条命令
or
git push o //push当前分支到upstream。设置了本地分支的upstream之后,可以不用指定远端的分支
git push //是 git push o prd_1:prd_1 的简写。因为要push的是本地当前分支prd_1,且其upstream分支名是o/prd_1,同名,所以可以全省略
  • 4.merge
1
2
3
4
5
6
//merge 当前分支中的别人的修改
git pull //等同于 git fetch 更新所有的远程分支,然后再 git merge o/prd_1。
or
git fetch (and) git merge
//merge master 分支到当前分支
git merge o/master
  • 5.conflict 冲突解决

merge的时候很容易就会出现代码冲突,一般情况下git会自行自动resolve,但是如果自动没能解决的话就需要手动解决冲突了。

1
2
3
4
5
6
7
8
9
//如果配置了mergetool,可以这么使用
git mergetool
//修改冲突后,直接提交就行了,就像正常的提交
git add -A .
git ci -m 'merge master'
git push
//查看下状态
git status

###上面所说的只是一些很基本的用法,对于每个都没有深入去讲,后面会针对常见的问题做一些深入的讲解。

最后再放送一些小技巧

  • 配置alias
    找到你的.gitconfig文件,在里面增加
    1
    2
    3
    4
    5
    6
    st = status
    ci = commit -m
    co = checkout
    br = branch
    unstage = reset HEAD --
    last = log -1 HEAD

或者直接配置全局的alias:

1
2
$ git config --global alias.st status
$ git config --global alias.ci 'commit -v'

配置了alias之后,命令将大大减少

1
2
$ git st //git status
$ git ci 'commit one' //git commit -m 'commit one'

如果你觉得这样还是费事的话,你还可以配置的bash或者zsh的alias:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
alias gst='git status'
alias gl='git pull'
alias gp='git push'
alias gd='git diff | mate'
alias gau='git add --update'
alias gc='git commit -v'
alias gca='git commit -v -a'
alias gb='git branch'
alias gba='git branch -a'
alias gco='git checkout'
alias gcob='git checkout -b'
alias gcot='git checkout -t'
alias gcotb='git checkout --track -b'
alias glog='git log'
alias glogp='git log --pretty=format:"%h %s" --graph'
  • 我同时还使用github,这样的话,公司的username和github的不同怎么办?
1
2
//如果不想使用全局的username的配置,只需在项目目录下单独配置即可
$ git config user.name 'developer' //记得不加--global