【总结】迈出新的一步… 写一篇不那么敷衍的博客

最新推荐文章于 2024-05-22 13:52:22 发布

day67794

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量135

点赞数

文章标签： javascript 前端 webpack ViewUI

原文链接：http://www.cnblogs.com/fuyinsheng/p/6042229.html

版权

写博客一直都让我很头疼… 水平低见识浅，真是觉得无内容可写… 从自学前端一直到找到工作貌似有这么久了…

总觉得自己没什么进步，久而久之，便没了写博客的动力，总觉得这样敷衍还不如不写。

这段经历可以写，甚至写很多，但我觉得没必要，所以是时候重新审视下自己了~ 希望这是一个新的开始

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{width:200px; height:200px; border:1px solid #000; background-color: pink; padding: 20px;}

<div id="box"></div>

一开始很自然就这么写了，后来需求总是在变的，了解到时间的可贵，代码重用便于维护是多么重要

.w-h{width: 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");

好了，终于下了篇博客… 希望以后能坚持吧，不管是多久发一篇，至少… 写出来，心里好多了

该干嘛干嘛去了~~

转载于:https://www.cnblogs.com/fuyinsheng/p/6042229.html

day67794

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【总结】迈出新的一步… 写一篇不那么敷衍的博客

写博客一直都让我很头疼… 水平低见识浅，真是觉得无内容可写… 从自学前端一直到找到工作貌似有这么久了… 总觉得自己没什么进步，久而久之，便没了写博客的动力，总觉得这样敷衍还不如不写。这段经历可以写，甚至写很多，但我觉得没必要，所以是时候重新审视下自己了~ 希望这是一个新的开始1. HTML认识并学习html标签，知道如何用怎么用何时用…… 以前总喜欢这么...
复制链接

扫一扫