前端开发小结

 最近写了几个网站和一些H5页面，简单总结一下遇到的各种坑。

写html主要用到的技术不外乎js、html、和css，以前会把它们都写在一起，样式也会用许多style，代码非常冗余，很ugly。在公司前辈的指导以及自己对于了他们的代码，对前端代码结构有了一点点的心得，分享给大家。

前端主要包含html、js和css。正如《ppk 谈JavaScript》所描述的，它们分别具有不同的语义信息，要分别对待，这样用起来才舒服，更能够保证前端显示的效果。Js主要是网页行为，可以算是一种行为编程，具有和后端编程一样的思想，可以用mvc模式来设计js模块，如数据流、函数流、dom流等。 Css主要是网页的显示，即装饰，简单的说是网页看起来的样子，主要是从设计师的角度来设计网页，如网页的显示效果，如背景、颜色、字体、间距、图片等等，从设计师的角度来装饰网页即可；HTML是结构，即网页中DOM是如何摆放的。

打个比方，前端开发，可以想象成自家里装修。 首先要买家具（dom元素），然后家具如何摆放（HTML结构），其次是装修（CSS），最后是交互（使用js，当然现在CSS3也可以实现部分交互，如hover，animation，rotate等操作） 

所以开发前端时，也要将结构明确化，主要包含四个部分，html页面，js文件，css文件，以及所需要的资源文件（img等）。然后在html中包含所需要的js、css以及资源文件即可。

Js开发时，以前主要是面向过程编程，现在js演过过程中，也开始面向对象编程，原生态的prototype比较麻烦，但jquery以及zepto等类库提供了比较简便的面向对象编程，在一个类中封装该类所需要的变量以及函数。在写所需要的js时要包含数据处理层和通用库层，便面调用。我项目中主要使用的reactJs,,改js是面向组件的编程，也是从数据流的角度来编写js，并将js和dom有效的融合在了一起，方便操作dom层。React可以让我们把许多通用模块进行抽象，没过模块都是一个类，该类中包含render函数是类最终的显示层。类中其余部分是显示层的控制逻辑，可以把一个react部件想象成装修家里的一个房间。所有房间装修完了，房子也就弄好了。在项目开发过程中，要不断的抽象所需要的组件，如登陆组件，列表组件，table组件，以及小控件（如button、form等），这样在写H5页面时，就可以利用多个组件来组装一个H5页面，有没有觉得和堆积木一样的，告诉你就是那样的。

HTML开发过程中，最大的麻烦是如何摆放DOM元素，以及如何装饰。每个DOM元素有不同的特性，如block，inline-block等。CSS如何有效控制元素并排，下拉等。我经常在display:inline-block中迷失，无法有效的控制元素显示。阅读CSS经典时，了解到可以多用float，以及ul、li，让元素自动的浮动，并且要约束好元素的宽度，这样就可以使得元素放在合适位置。要多关注margin，padding以及display的box模型。HTML中元素是从左到右排列的，如果位置被占据或者放不下会自动换行的。在网页PC设计中，要确定好网页的宽度，防止被缩放，可以使用滚动条，这样能够保持网页的效果，同时也避免适配。在H5页面开发中，要使用rem来自动调整字体，在H5初次加载时利用js来确定font-size的大小，rem可以根据网页root font-size来定位，因此也可以自动定位。在网页排列时，要多考虑居中，居中需要外边框来保证的，而内部元素则重新排列。

Ppk谈JavaScript开发，从浏览器的角度谈到了js，js可以控制浏览器整个窗体，主要用window来表示全局变量，并提供了navigator、location、document、history、screen、cookie等。Js可以操作BOM、事件、DOM、CSS、数据检索（XMLHttpRequest、readystatechange等）。 浏览器可能不兼容js，或者用户关闭了js提示框，要将js影响界面显示的内容动态生成，这样js无效时，这部分内容也不会被影响。

Js中常见的问题：int + string 加法出错， if(val) 为true， undefine 或者 Nan等；reactJs  push中必须每个都是完整的block。如<TR></TR>

Map[variable]，不能写成map.variable。    

常用的工具：subline text（babel、bz2、colorpicker、csscomb、emmet css snippets、pyv8、terminal等）

后端开发工具： IDEA Go插件