About

这里整理了我在平时开发和学习中做的一些小项目,主要与iOS和Web前端相关。 我将其分成了两部分,一部分是可以用在平时开发中提升效率的工具,让我们可以减少一些重复性劳动。 另一部分是对某些技术点的实践或造的轮子,主要以学习为目的。

项目都托管在了GitHub上,欢迎来一起讨论交流。

{
  "name": "张楠",
  "occupation": "software engineer",
  "skills": ["Web", "iOS"],
  "available_for_hire:" true
}

Technical Skills

这里列出了目前项目中涉及到的主要技术,我还会不断去尝试更多的~

Objective-C

Swift

JavaScript

Vue.js

Tools

这里是一些提高开发效率的工具,希望会对你有帮助。重复性的工作就交给程序去做吧~

Xib2ObjC< 项目源码 />

做过iOS开发的朋友都知道,因为文件包的大小要求或对加载速度的要求, 有时候不得不用代码来写UI,但是在xib中直接拖拽UI又是如此的快速, 所以这个工具就是把xib文件直接转换成Objective-C代码。你再也不用无聊地一遍一遍写layout了。工具主要的features:

  • 把xib文件转换成用Masonry布局的Objective-C代码。
  • 如果你在xib中给view取了名字,那在生成中的代码中也会同步使用该名字,并生成一个相应的property。 建议你对主要的view都取一个名字,免得再去代码中改。
  • 你可以拖拽完UI后,直接运行模拟器查看效果,不需要等到放回项目中再看。

涉及到的相关技术:SwiftSwift Package ManagerSWXMLHash

ModelMaker< 项目源码 />

在iOS的开发中我们总是会经历对照接口返回的JSON来定义Model文件, 但是一个property一个property地去敲实在即无聊又没有技术可言的活儿。 该命令行工具可以直接使用JSON文件来生成相应的Model文件,可以节省你大量的时间。工具主要的features:

  • 支持用JSON文件直接生成 Swift 的Model文件。
  • 支持用JSON文件直接生成 Objective-C 的Model文件,并且会自动设置Array的泛型。
  • 生成Objective-C的Model文件时,如果项目中用到了JSONModel,生成的Model也可以自动继承JSONModel。
  • 也可以指定Model的前缀和后缀。
  • 作为命令行工具,简单易用。

涉及到的相关技术:SwiftSwift Package Manager

pod-carthage-template< 项目源码 />

当你想贡献一个iOS的开源库时,你是怎样设计你项目的目录结构呢?我在观察了很多主流的开源库的目录结构设计后发现, 它们的主目录结构几乎都一样。所以这个命令行工具就是自动为你生成你的开源库框架,同时会配置好支持 CocoaPodsCarthage , 你只要专心实现项目的核心内容就好了。工具主要的features:

  • 生成一个开源库的项目模板。
  • 会自动配置好支持 CocoaPodsCarthage
  • 也可以指定项目依赖的第三方库,在生成项目时会自动配置好。
  • 自动配置好用git进行源码管理。
  • 作为命令行工具,简单易用。

涉及到的相关技术:RubyXcodeproj

module-template< 项目源码 />

在做iOS开发时,你有没有遇到过每新增一个模块都要重复创建一样的目录, 甚至重复创建一样的类文件,只是文件的名字使用的是当前模块的名字。如果是这样,那你可以按照该工具的使用说明, 做一个模块模板,以后再新增模块时,只要运行一下脚本,模块的所有信息都生成了。工具主要的features:

  • 自动生成项目模块,节省重复劳动的时间。
  • 作为命令行工具,简单易用。

涉及到的相关技术:Ruby

Code-Labs

这里是我实践过的一些好玩的点子,或对一些技术知识的探索,希望能给你一些启发~

js-download-upload

这个小项目演示了JavaScript中文件的下载和上传,并实现了server端,可以将源码clone到本地玩一玩。主要功能点:

  • 使用fetch和async/await批量下载图片。
  • 使用blob.slice分割大文件并上传。
  • 用node.js实现了server端:获取图片列表、获取某一张图片,合并分割后的图片并保存。

项目源码

vue-store

这个小项目可以看成是Vuex的简单实现吧,你也可以直接用在已有的项目中,不用安装任何其他库。

  • 支持指定模块名称。
  • 支持将getters映射到Vue组件的computed中。
  • 支持通过dispatch派发actions。

项目源码

vue-ghibli

这个小项目是利用ghibli提供的免费API,演示了Vue全家桶的使用。 尽量在保持功能简洁的同时,展示了一个Vue生态中各种技术的使用,让初学Vue的朋友可以对Vue项目有个大致了解。

  • 主要使用了Vuex进行状态管理, Vue Router进行页面路由管理,axios进行接口请求, Element UI进行页面搭建。
  • 并演示了使用开源库express-proxy-mock如何在开发环境中进行mock数据。
  • 我将这一套的搭建,基于vue-cli 2.0做了一份脚手架,下次再开发Vue的项目可以直接拿来用。
  • 项目中的编码风格,完全按照Vue的官方风格指南书写。

项目源码 项目预览