浅谈前端设计思想

浅谈前端设计思想

前言：

今天师父聊了下前端思想，只是真的是浅谈。但是收获还是有的，不过，师父引进门，修行还是看个人吧。
所以我想聊聊我的学习心得，就不贴代码了，太low，直接给传送门。(这次简单点，废话不说~…^_^).

话题：

1.前端开发问题（遇到的问题和多人开发遇到的情况，以及在以前我们是怎么处理的）

2.前端开发工具篇（打怪兽没武器怎么行？对吧）

3.不要小看了前端，这水很深的（目前主流的前端视觉，什么叫美与丑？此问刚一出立马懵逼的问题）

---

1.前端开发的问题

第一种情况（前端后端分离式开发）

在部分公司中 以往的开发中，我们总是自己开小组会议内部定好协议，那谁。前端页面你开发吧，所以规格他自己玩，自己改我们不用去管，只要结过页面和我们后端数据进行整合就好（笔者第一家公司就这么玩的T_T,不幸中的万幸是中招的是我旁边那位一脸茫然XX兄）。

这种情况的兄弟，你不用看了 这文章第一个主题不适合你看，请直接略过

第二种情况（模块化的开发）

这种情况就比较多了，SVN,GIT。代码管理开发，每天第一件工作就是更新工作代码，二件事加个锁搞自己的。然后每天（吃饭或者下班的时候）comint后，你准备在来个测试，你会发现，自己本机玩这个的时候一点问题没有，但是commit后，后再UPdate，整个模块都不兼容，甚至其他的模块也会有问题。所以我想以自己的经历来说 这里引出了冲突管理的慨念（师父提了2个，自己加了一个）

1.1 js变量污染（域污染）

1.2 文件名冲突

1.3 变量名冲突

以前我们是怎么处理的

电话 || QQ ||email（在公司||不在公司）

哥们，我的模块那块JS(变量名，文件名)和你的哪块JS(变量名，文件名)冲突了，谁先提交的谁用呗，后面的改改？嘻嘻。。（协调解决）

---

PS：想法总是好的，但是有时候却不尽人意，所以就有了分类分离式管理

以CSS为例：
我们将所有的默认样式重写做到统一，所以分出来一个reset.css
我们将所有的颜色样式提取出来，所以分出来一个color.css
字体的，布局的，。。。。

好像在CSS我们就很难再冲突了，可是问题又来了，手机移动的时代到来了。你会发现我们网站上运行没有一点问题，可是移动端时却好像卡成翔了（或者说，等好久都不出来，用户体验度降低，不明事由的老板就会说，我花这么多钱请你，你怎么做的。。。其实我想说，你这点钱，我在北京多久能买个厕所啊。），其实问题并不在于我们，而在于移动端的带宽和浏览器的线程上，我们以多文件的方式，文件越多那么浏览器一个是要消耗线程一个是消耗带宽，而且还很慢。
所以有了另一个技术的引入
那么就是

CSS：sass
JS: coffeeScript

具体吹牛逼请看下一章：2.前端开发工具篇（打怪兽没武器怎么行？对吧）

2.前端开发工具篇（打怪兽没武器怎么行？对吧）

说道cass 我就想聊聊less，因为他们的用法有点像，但运行机制缺失不同的，一个是本地客户端js编译，一个是服务器端的编译。具体的区别楼下传送门

LESS介绍及其与Sass的差异

less:是个什么鬼？其实这个问题以前我也问过自己，但是一直没管，直到我开始玩BS（BootStarp）时，接触后。
然后我就放弃了。为什么？因为 当时手机端JS支持真的很差或者说部分都不支持，而less需要js去编译转换成可执行的CSS。

---好了以上是我的吹牛逼，现在汇总我师父的吹牛逼(呵呵)，下面就是心得吧----

sass：通过import导入多个你自己需要的scss文件，编译时会合并 并自己生成css样式文件

sass 可以使用Compass工具 但是这种玩法并不适合小项目，但是非常试用于大型项目开发中

而JS 可以使用coffeeScript管理工具
能够做到和sass的模块化制作

JS不推荐玩coffeeScript，你玩这个,一般人没法接手，国内基本没有项目在用这个

再说个秒杀PS的工具Sketch
在菜单条中右侧点击网格或者layout布局，设置好偶数宽，和栅格数量，我这12.然后发现所有的布局是以3或者3的倍数来布局的
是不是很漂亮？可是为什么了？涉及到一个字体和美学的概念，然后说今天不吹了，

-关于CSS Compass管理工具资料

-关于JS coffeeScript管理工具资料

换我的话说，下章开始。3.不要小看了前端，这水很深

3.不要小看了前端，这水很深的

3.1什么叫美什么叫丑？（字体篇）

这个话题，个人比较了下，我真的说不好，什么叫美？什么叫丑？而我们为什么要使用这些东西工具来做？
所谓的美与丑，就是我们一眼看过去，大脑的接受程度，而美工或者说前端都需要考虑进去，就像师父说的，为什么有些字体，中文使用很难看，英文却很好看？（其实听到这的时候我考虑到人为什么感知美与丑，然后直接跳屏去 一个新的学科 神经学系统....后话）。
拉回话题，这个蛮好理解，中文属于象形文字，英文属于形式文字由拉丁文演化过来，中文常用汉字2W到3W个左右，英文26*2个，其字体规范化难易度很想而知。（而我查看了大量的网络资料，关键字：字体设计美学，知乎应该给的解释是最好的，但是却没有人说的特别清楚。）、对于我来说或者其他人来说 我觉得就像师父所说的那样这个只是你自己大脑所接受的程序来评判并无标准。

3.2什么叫美什么叫丑？（图片及布局篇）

这个是我自己加的一个主题，既然都说了字体，那么还有布局还有图像对吧，网页3元素嘛，不对还要加个动画（其实就是个动图。）。
布局的合理性，跟人觉得 让人一看 就知道这个页面的主要想表现的东西在哪部分，我觉得 这个就是突出意图，突出主题。
而图片的合理性在我这理解为装饰品，既美观而且和布局和字体结合起来，一种给人感官度。很舒服而明确。

4.总结下吧

什么叫设计思想？他是一种经验，一种在生活中我们开发所遇到问题的解决方案的汇总，一种模式，一种思想。并且不是固定的，因为随着外在技术环境的发展，生产环境的变化，业务的不断复杂化，我们也在不断总结，所以他也在不停的变化。

个人是一个是不是就有想法的，过了那个想靠自己手写的程序轰动全球年纪的，有点强迫症爱折腾的，初心不变并想玩自己喜欢的程序过活的极客。

我想说梦想啊，你遥不可及，但是我也在路上一步一步的走来。---你们好，我是孤雪飘寒