前端开发小结

 最近写了几个网站和一些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、bz二、colorpicker、csscomb、emmet css snippets、pyv八、terminal等）

后端开发工具： IDEA Go插件