前端开发 | 尝试用Markdown写一下近几个月的总结

近期总结

回顾

半年前

半年前，接触了前端一年多(工作半年)的我了解的东西只有下面这些。因为在公司里的工作就是切静态页，捣鼓CMS。

• HTML (比较简洁的编写HTML)
• CSS/CSS3 (PC兼容IE6+,FF,Chrome | WAP兼容各种安卓浏览器)
• Javascript (基础比较扎实,不懂得写插件,不懂得设计模式,完全面向过程)
• jQuery (各种DOM操作)

当时我以为前端就这些东西了，听说过NodeJS，但觉得那是很遥远的东西，我应该还没到能学习它的程度。

工作中一些工作经验差不多的同事，很爱在网上搬一些插件来用，

但我觉得自己入行，应该自己多打点代码，所以坚持了半年多纯手打各种代码。

轮播，拖曳之类的，最后自己写了一些方便自己使用的插件。

Less有听说过，但是也没有主动去用。

由于工作中多数都是写静态页，所以工作了大半年，唯一让我感受得到在进步的就是「兼容性」;

ajax几乎没用到，就更加谈不上用模版引擎了。

git也没有用到，开发流程非常的乱，用邮件，直接丢静态页面代码的形式。很多修改直接用ftp修改线上的。

---

换工作后

当时的知识面很窄，后来我加入到了新公司，来了2个和同届毕业的学生。而且都不是计算机专业。

可能由于他们之前所在的公司开发流程比较规范，他们眼界更开阔，或者学习更努力。他们貌似比我懂得更多的知识。

但基础感觉也差不多。作为计算机专业的我感到好大压力。

随后我认识到，这是深度和广度的问题。我可能更加注重在一个知识上面深度去学习（虽然也没有多深），

然而他们更乐于去了解更多的新技术新想法。

我当时的状态来说，我觉得我应该多去了解一些新知识才是。

---

现在

随后我就学习并了解了以下相关知识

（并不能全部融会贯通，但我知道他们是干什么的，知道如何去使用。

有的甚至在学习的过程中遇到一些莫名的因素导致放弃了学习该知识）。

因为没有做到相关的项目，所以都是自己在捣鼓，发现不了很多的坑，有些东西也没用到精髓。算是拓宽了知识面吧。

• Git
• Less
• CreateJs
• Markdown
• AngularJs
• requireJs
• Underscore.js
• Backbone.js
• 设计模式
• 模版引擎
  • handlebars.js
  • template.js
• Node
  • gulp
  • Bower
  • Jade
  • Express
  • MongoDB

接下来我就粗略的说一下近半年来接触到的这些技术。以我自己的理解，比较浅的谈一下。希望大神们指导指导，指条明路。

顺便也梳理记录一下。

---

细说新接触的技术

Git

Git，版本管理工具。

用这个东西几个月了，没什么好说的，就是修改代码，提交代码，推送。 方便多人合作。
这个自己可以看一下网上的教程，了解一下每个操作的概念。具体的还得在实际工作中，看下团队的需要，才能知道具体需要用到哪些。

---

Less

Less是一种动态样式语言,属于CSS预处理语言的一种，和Sass是一个意思。就是通过一些嵌套，mixin，变量等。编译出你需要的CSS。让你自己写的样式更少些。

例如：

base.less

#box{
    @color1: red;
    @color2: blue;
    span{
        background: @color1;
    }
    a{
        color: @color2;
    }
}

编译后的CSS为

base.css

#box span { background: red; }
#box a { color: blue; }

附: Less教程

---

CreateJS

CreateJS是一个js库，是一款为HTML5游戏开发的引擎，用于操作。

其中包含五款工具：

EaselJS：用于 Sprites、动画、向量和位图的绘制，创建 HTML5 Canvas 上的交互体验（包含多点触控），同时提供 Flash 中的“显示列表”功能。

TweenJS：一个简单的用于制作类似 Flash 中“补间动画”的引擎，可生成数字或非数字的连续变化效果。

SoundJS：一个音频播放引擎，能够根据浏览器性能选择音频播放方式。将音频文件作为模块，可随时加载和卸载。

PrloadJS：帮助你简化网站资源预加载工作，无论加载内容是图形、视频、声音、JS、数据……

PxLoadr：一款用于网站资源预加载的 JavaScript 库，可加载图片、音频等任何类型的文件。PxLoader 除了可以帮你对资源加载的进度进行监测，捕捉“加载完成”事件外，还可以帮你指定资源加载的顺序。你甚至还可以按照优先级分组加载资源。

我本人只用到了EaselJs和SoundJS。

EaselJs是写了个小demo体验了一下,SoundJs是做一个H5的时候用到。

CreateJS没有中文版的文档，也找不到教程，看起来相当吃力。有一个类似的库，lufylegend，有中文的，我还没去了解，有兴趣可以看一下。

---

Markdown

很早之前就听说过markdown了，一直都没去了解。一般用来写文档吧。感觉还挺实用的。而且看起来好像挺装逼的样子。

这篇文章就是今天刚看了一下markdown的语法。试用一下，写个总结。

附： Markdown 语法 | Markdown编辑器

---

Angular

AngularJs是MVVM的模式。Model,View,ViewModel。

就是Model的数据发生改变时，View层的表现也会同时发生变化。

View层的数据发生改变时，Model里的数据也会随之改变。

不需要写任何的事件操作。只需要绑定一下模型。

这个跟着看了一遍文档教程,跟着视频走了一遍,Demo写了一些。

附: Angular文档教程 | Angular视频教程

---

requireJs

RequireJS的目标是鼓励代码的模块化，它使用了不同于传统script标签的脚本加载步骤。

可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。

附: requireJs 中文教程

---

Underscore.js

之所以学这个是因为想学习一下Backbone,然后Backbone强制依赖于这个库，就过了一遍。

这是一个函数库，里面都是一些功能函数。非常好懂。

附: Underscore.js 中文文档

---

Backbone

Backbone 这个东西，从头看到尾都懂，但是看一下demo，就不懂了。T _ T

寻求backbone视频教程.

附: Backbone API文档

---

设计模式

设计模式我是看纸质书的，感觉非常有用。开发模式可以让你写的代码更容易维护。

我们可以根据自己的需要，采取不同的模式

具体的模式如下：

【晚点补上】

---

模版引擎

• handlebars.js
• template.js

这里的模版引擎仅仅是为了"不拼字符串"。具体的操作也没什么好说的。

附: handlebars文档

---

NodeJS

主要是用了Node的一些插件。

大概了解Node建站的流程。（看了大漠老师的视频教程）

附: NodeJS菜鸟教程 | Node建站视频教程

Gulp

和grunt和Fis一样，是自动化构建工具，实现前端项目工程化就需要它了。

我用到的它的功能有下面几个：

• Livereload
• 编译Less/Sass
• 合并/压缩样式
• 混淆JS
• 压缩图片/拼接图片
• 打包文件

---

以下几个接触过，知道怎么用，但是没有深入的去了解和实践。

Bower

开发包管理工具。

Jade

模版引擎，Node建站时通过请求数据来渲染页面。

Express

web应用开发框架(在windows下面会有一些奇奇怪怪的问题，建议用linux)

MongoDB

非关系型数据库

---