IVY DOM


 

人生就像一副复杂拼图
每个人总有属於自己的记忆碎片
优质美国空间-老薛主机|IVY DOM|Flowline|

联系我

RSS




四月 05, 2016

我是如何入门编程的(6)

有位朋友让我写写前端是怎么上手的,那我就简单介绍下吧。

注:本文所说的项目中不包含商业项目。

传统阶段

在这个阶段,我还认为前端只是画网页,调样式,写动画。大部分逻辑还是由后端PHP完成,前端不参与任何逻辑,也没有拓展任何的用户交互,大部分交互还都是浏览器自带的交互。

当时想找个项目练手,而我用知乎日报的频率也挺高的,于是写了个知乎日报的爬虫。

已经平稳运行两年了(这也说明了知乎日报的数据结构也同样2年没有变化了)。这是我的早期作品,看上去还是比较稚嫩的。

此项目开源在GitHub上:

https://github.com/leinue/daily/tree/master/beta

此项目包含以下知识点:

JSON

面向对象编程

Web Service

CURL

CSS3

日历生成算法

入门阶段

后来,随着学习的深入,我不再认为前端是画网页。而是应用程序,只是不同于操作系统的承载平台。

那段时间,我不仅在编程,还在学画画,于是我写了个网站进行记录。

本项目是我首个单页面应用(SPA,Single Page Application),也让我现在十分偏爱SPA。

我是个自由软件主义者,所有程序都是开源的,本项目GitHub地址是:

https://github.com/leinue/HoCG

此项目包含以下知识点:

jQuery

CSS3 Animation

HTML5 本地存储

MySQL

AJAX

面向对象

单页面应用设计方法

一年多以前,我还没有脱宅,弹幕网站对我的影响极其深远。而现在的弹幕实现方式都是即将被淘汰的Flash技术,为了实验HTML5技术有多么厉害,我完成了一个弹幕播放器。

弹幕播放器,最难的一个点是碰撞检测,代码中有详细的碰撞检测算法介绍(这一个算法我折腾了三天,花费大约50个小时)。

GitHub地址:

https://github.com/leinue/barragePlayer

此项目包含以下知识点:

HTML5 Video处理

CSS3

JavaScript面向对象

DOM/BOM

碰撞检测算法

树-数据结构

HTML5 在线流程图绘制,提供在线脑图的制作,功能十分丰富,包含了各种属性的自定义、生成图片、生成JSON、导入JSON、快捷键、放大缩小绘制区域、贝塞尔曲线等。

GitHub地址:

这个项目忘记提交到GitHub上了=_=

如果您感兴趣的话可以访问:http://ivydom.com/flowchart/

然后查看源代码即可

此项目包含以下知识点:

浏览器事件处理

HTML5 Canvas

CSS3

flex-box

浏览器按键处理

贝塞尔曲线等知识

JavaScript面向对象编程

Web3D/数据可视化

Web3D项目因为被墙打不开了,就不截图了。

GitHub地址

https://github.com/leinue/HTML5/tree/master/D3.JS

https://github.com/leinue/HTML5/tree/master/3DWeb

以上都是我学习过程中产生的代码,非项目代码,包含以下知识点:

d3.js

x3d

有兴趣做VR,或者对计算机图形学、数据可视化有兴趣的,可以学习一个。

CSS3响应式框架,由于厌烦对bootstrap的使用,自己写了个响应式框架。

GitHub地址:

https://github.com/leinue/TidyCSS

此项目包含以下知识点:

响应式设计原理/原则

@media查询

CSS3

jQuery的深入学习

进阶阶段

所谓进阶阶段,也就是开始真正将前端看作是一种工程,并糅合多种框架、工具进行工程化开发、自动化部署等。在此期间所做项目基本都是商业项目,所以不一一展示,但是可以列出知识点。

MVC/MVVM/MVP

Angularjs

Reactjs

NodeJS

NPM

gulp/grunt

bower

AMD/CMD

Webpack/RequireJS

RESTful API

CORS

单元测试

脚手架-yeoman

Linux

shell

es6

typescript

mongoDB

jQuery源代码

git/svn

HTML5深入

CSS3深入

JavaScript深入

DOM/BOM深入

如有遗漏,欢迎补充。

好了,等你到了这一步,相信我,市面上任何一款前端框架都可以在一个晚上到3天内上手。当然,你也不会再纠结于技术细节,因为你已经知道一个原则:有的复用,没有再开发。

希望你能顺利进阶。

相关文章

返回
  1. 暂无评论。

  1. 暂无 Trackback

You must be logged in to post a comment.