写博客一直都让我很头疼… 水平低见识浅，真是觉得无内容可写… 从自学前端一直到找到工作貌似有这么久了…
总觉得自己没什么进步，久而久之，便没了写博客的动力，总觉得这样敷衍还不如不写。
这段经历可以写，甚至写很多，但我觉得没必要，所以 是时候重新审视下自己了~ 希望这是一个新的开始
1. HTML
认识并学习html标签，知道 如何用 怎么用 何时用…… 以前总喜欢这么写
<div class="header"></div> <div class="container"> <div class="clearfix"> <div class="left"></div> <div class="right"></div> </div> </div> <div class="footer"></div>
一个典型的首尾两列布局~ 现在 会多尝试：
<header></header> <div class="container"> <main></main> <aside></aside> </div> <footer></footer>
拥抱HTML5新元素，让标签更语义化，不滥用class和id
2. css 写一个正方形带边框颜色的盒子
#box{200px; height:200px; border:1px solid #000; background-color: pink; padding: 20px;} <div id="box"></div>
一开始很自然就这么写了，后来需求总是在变的，了解到时间的可贵，代码重用便于维护是多么重要
.w-h{ 200px; height:200px;} .bd-0{border:1px solid #000;} .bgc-p{background-color: pink;} .p-a{position: absolute;} <div class="w-h bd-0 bgc-p p-a"></div>
虽然现在这样也很不规范… 理解控制可变量 再到后面js函数封装就友好多了
当然class的用法更多是在看Bootstrap源码学到的 典型的例子 btn btn-primary nav nav-bar等等~
3. 理解布局
固定也好流式也罢~ 都是从文档流的理解开始的， 提到文档流，层叠上下文也至关重要了。 理解到这些，才能更好地控制层级关系，
不胡乱使用z-index造成空间浪费
<div class="container"> <div class="row"> <div class="col-xs-6 col-sm-9 col-md-8 col-lg-8"></div> <div class="col-xs-6 col-sm-3 col-md-4 col-lg-4"></div> </div> </div>
用了bootstrap的栅格后，慢慢开始懂得 “响应式” 是如何产生， 怎么利用 block, inline-block的盒子属性, block块级元素结合margin实现 部分固定，需要的结构自适应~
margin负值 实现水平垂直居中(transform也可)
flex也是一个布局神器~ 虽然现在兼容性还不是太好，相信以后会大放光彩
4. 能用css完成的尽量少用js
弹出框， 小标签，提示文字 … 如果是页面中固定不变的元素，尽量多使用background, 抽成组件~ 或者 ::after ::before 结合伪元素
5. 第一次写JavaScript代码~~~ Hello World
<head> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript"> alert('hello world'); </script> </head>
以前看来没什么问题的写法 … 有可能阻塞css，造成页面卡顿 …… 即便加了window.onload 也是很糟糕的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="style1.css"> <link rel="stylesheet" type="text/css" href="style2.css"> <link rel="stylesheet" type="text/css" href="style3.css"> </head> <body> <!-- html --> <script defer src="js1.js"></script> <script async src="js2.js"></script> </body> </html>
head放样式~
body结束前放脚本的最佳实践先记下来了，加入async执行异步 defer延迟~ 他们都是在DOMContentLoaded前执行的
6. npm install 包管理
需要什么就npm install 一下… 不知不觉发现Node.js似乎没有这么遥远了 npm start ~ node xxx.js 命令行即可运行js脚本，虽然不及浏览器 … 但好歹离服务端又近了那么一点点…
Node新增的各大模块 DNS Domain NET Stream 在我看来依然是在读天书… 不过没事， 在Js之后，总会来挑战的… 就先放着好了
7. 前端工程化
Css预处理器 Less, Sass什么的… 样式里写样式 … 貌似看来也是这样？ 不过基本功依旧是， 提取公共模块，更多的代码复用， 模块化， 从而减小css体积， 只为了一时方便，编译出来更多的体积这并不是什么好事~~
之前一直用koala编译…… 然而Webpack可以导入 less-loader style-loader css-loader 一下子让看似复杂的东西变得真正复杂起来…
没法，谁叫前端就是爱折腾呢…毕竟前置技能必须点啊
// less打包到指定位置 var ExtractTextPlugin = require("extract-text-webpack-plugin"); // 提取公共元素 var commonsPlugin = new webpack.optimize.CommonsChunkPlugin({}); // 打包时复制本地资源到线上环境 var TransferWebpackPlugin = require('transfer-webpack-plugin');
这是几个常用的插件~~ 先放过来了
8. React
新手折腾React并不是什么轻松事，前置技能学完，技能树和点都加到这里了，但并没什么好的。 理解JSX不难， 替换模版也还成了…… 事件绑定了还留了小命在…
可是服务端取数据，重新渲染后，绑定的事件丢失 …
怎么办？~ 需要同构渲染的解决方案
Redux, Router 一大堆头疼的家伙过来了， 看了资料不少 store action reducer绕过来了， 折腾完了数据出来了，事件绑定上了，真的就结束了吗？~
9. 学习JavaScript
理解不到姿势？ 看不懂源码？ 只会拿不会写不会用？ 既不是英语的锅也不是无知的错
不懂没什么可耻的… 我原以为自己跑出了很远，结果却在原地踏步~~ 没事，好在我已经不那么讨厌敲代码、看书了…
重新学习Javascript， 真正理解那么以为懂了却根本不懂的~~~ 参考资料：
《你不知道的Javascript上、中》
《Javascript高级程序设计》
《Javascript设计模式》
function assert(value, desc) { var doc = document, ul = document.createElement("ul"), li = document.createElement("li"); if( !doc.getElementById("results") ) { doc.getElementsByTagName("body")[0].appendChild(ul); ul.id = "results"; } li.className = value ? "pass" : "fail"; li.appendChild(doc.createTextNode(desc)); var pass = doc.getElementById("results").getElementsByClassName("pass"); var fail = doc.getElementById("results").getElementsByClassName("fail"); doc.getElementById("results").appendChild(li); for( var i=0; i<pass.length; i++ ) { pass[i].style.cssText = 'color: green;padding: 5px; border:1px solid #ccc;'; } for( var i=0; i<fail.length; i++ ) { fail[i].style.cssText = 'color: red; text-decoration: line-through;padding: 5px; border:1px solid #ccc;'; } } // 贴一段我改良过的assert函数 assert("I'll stick to it", "So you will be better");
好了，终于下了篇博客… 希望以后能坚持吧，不管是多久发一篇，至少… 写出来，心里好多了
该干嘛干嘛去了~~