前端亂燉，總結一些細節點

時間 2019-11-22

標籤前端總結一些細節简体版

原文原文鏈接

總結一下前端方面，本身的一些體會，亂七八糟的整理了一下，暫時就想到了這些，之後會持續更新。css

構建工具必定要用，gulp等。使用requireJS、browserify等 js模塊管理，bower管理三方庫html

css：前端

　結構：ios

使用less，文件結構參考bootstrap less源文件
儘可能多分less文件，按照用途、分類等命名，儘可能讓一個less文件的代碼少一點，文件多一點，這樣後期好維護和查詢

　三方庫：css3

使用bower下載三方庫，若是有須要修改調整三方庫的類，引入三方庫的less源文件，覆蓋一些三方庫的類

　　（不要修改源文件，只是利用優先級方式本身修改一些類）web

　　以下，去boostrap入口文件本身添加一些less：gulp

@import "../../bower/bootstrap/less/mixins.less";
@import "../../bower/bootstrap/less/variables.less";
@import "variables.less";//my setting
@import "../../bower/bootstrap/less/normalize.less";
@import "../../bower/bootstrap/less/utilities.less";
@import "../../bower/bootstrap/less/type.less";
@import "../../bower/bootstrap/less/grid.less";
@import "../../bower/bootstrap/less/scaffolding.less";
@import "../../bower/bootstrap/less/buttons.less";
@import "../../bower/bootstrap/less/button-groups.less";
@import "../../bower/bootstrap/less/forms.less";



//my @import "buttons.less"; @import "form.less"; @import "scaffolding.less";

　命名：bootstrap

命名用中槓隔開，例如：.layout-text。
同時，我以爲自定義class必須在前面加前綴，好比項目叫 sun light，那前綴就是.sl，實際就是.sl-layout-text。或者也能夠是公司名的英文開頭、也或者本身的，具體根據項目狀況。

這樣有個好處，由於通常都會用到三方的css庫，當自定義的類和三方類混在html中的時候，一下就能看出哪一個是本身定義的，很是方便維護和理清頁面。less

根據不一樣狀況，也能夠不加上自定義前綴，好比（只須要在最上層加上一個前綴）：

<ul class="xx-user-comments">
　　<li>
　　　　<div class="con">
　　　　　　<img class="head">
　　　　　　<p></p>
　　　　</div>
　　</li>
</ul>
.xx-user-comments{//xx表明須要的前綴
    li{
        padding-top: 15px;
        .con{
            position: relative;
            padding-left: 45px;
            .head{
                position: absolute;
                left: 0;
                top: 0;
            }
            p{
                font-size: 14px;
            }
        }
    }
}

圖片命名也建議用中槓隔開

　代碼：dom

嚴謹，佈局時儘可能寫的完善，好比該寫寬高的地方必定要寫，不然會出現一些想不到的錯亂。
充分理解行內元素和塊級元素，儘可能少用併合理利用float。
ID class style !important等選擇器，理解他們的優先級
能抽離爲class的通用屬性儘可能抽離
能寫變量的地方儘可能寫變量，能夠幫助少寫代碼和後期維護，以下（若是路徑變更，只須要改變量，用編輯器批量修改也能夠，只是下面這樣更優雅一點）：

//##IMG
@img-path:      '../img';

//img button
@weixin:        '@{img-path}/weixin@2x.png';
@weixin-hover:  '@{img-path}/weixin-hover@2x.png';
@qq:            '@{img-path}/qq@2x.png';
@qq-hover:      '@{img-path}/qq-hover@2x.png';
@weibo:         '@{img-path}/weibo@2x.png';
@weibo-hover:   '@{img-path}/weibo-hover@2x.png';

通常頁面的色系是設計師肯定了的，把全部要用到的顏色寫成變量，統一管理
採用如下盒子模式，元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

注意一些冷門的css3屬性，能夠解決一些麻煩的問題，好比以前遇到一個問題，用user-select就解決了。《移動端 ios 長按複製兼容方案》
推薦使用webfont
試試rem

js：

根據頁面，模塊劃分目錄結構
jq的變量用$符號開頭
使用全局js變量加上window，好比: window.map,目的是後期維護，一眼就能知道這個是全局變量，節約一些看代碼的時間
注意異步和同步對邏輯形成的影響
用變量來存儲JQ或原生選擇器選擇的要屢次調用的dom，優化性能
學會封裝一些工具類，減小開發成本
搞清做用域的變化狀況
移動端也推薦用JQ，不用zepto
使用requireJS、browserify等模塊管理工具來管理js
移動端記得使用fastclick

html：

抽離公用模塊，footer、header、modal等
當心代碼換行形成的文字空格問題
感嘆號等符號儘可能用英文符號，中文符號間距較大，致使一些居中效果看起來沒居中
使用模板繼承，好處大大的
別再用超級長的document申明瞭，看到就受不了，直接<!doctype html>
dom的display：none的時候，去操做它，會容易有一些問題出現

思想：

不要太追求技術的流行程度，不要跟風，多作對比，使用適合項目的技術
頁面中別用太多動效，動的多了反而頭暈，不要爲了技術而在項目中炫技
別敷衍了事，有問題別以爲本身解決不了，敢於承擔，一點點發掘，多注意細節，總會解決的
遇到需求先找網上有沒有合適的三方插件，有就用，效率優先；沒有就本身寫，其實很是有趣味
思考清楚再下手，邊試邊寫，效率低，bug多
多看文檔，多補知識，不要依賴問人，費時間且沒有成長
不推薦買一大堆書，而後都沒看完
推薦寫博客，比網上或者當面技術交流有效果
多瞭解非技術的知識，我的成長的瓶頸每每不是技術
融入團隊，站在什麼層面想問題，最後就在什麼層面作事情
最後一點：遇到喜歡的妹紙不要慫

歡迎留言補充，關於一些細節的注意點、怪異狀況等等

以上只是一些點，每一個點均可以延伸不少知識。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。