我的前端實踐

西安小哥發表於2017-04-17

我也是一個經歷過柴米油鹽醬醋茶、嘗過酸甜苦辣鹹的前端程式設計師。知道前端的東西入門簡單，有深度卻很難；表似好看無比的應用，其實背後邏輯複雜，然而要想成長的更快，一定要學會站在巨人的肩膀上，“學以師技以自長”。所以一些經驗非常可貴，在此我想和大家分享一下我的經驗。我是一個從jquery，zepto，到vue的比較常規的技術棧過渡過程。
本文涉及麵包括：jquery處理模板的辦法，高效處理json資料，如何有效命名，如何搭建合適的web服務，如何做出有效炫酷的動畫，vue元件處理的方式，同時覆蓋如何使用github管理你的專案和文章

1、jQuery.js中的tmpl大法

在當初沒有vue、react等mvvm框架的時候，這些都是非常牛逼使用的東西

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jquery-tmpl</title>
        <script type="text/javascript" src="./jquery.min.js"></script>
        <script type="text/javascript" src="./jquery.tmpl.js"></script>
    </head>
    <style>
        .left-box
        {
            float: left;
            width: 50%;
        }
        .right-box
        {
            float: right;
            width: 50%;
        }
        ul,li
        {
            overflow: hidden;
            margin: 10px;
            width: 100%;
        }
    </style>
    <body>
        <script type="text/x-jquery-tmpl" id="reuse">
            <li>
                <div class="left-box">
                <p>${name}</p>
                <p>${prize}￥</p>
                </div>
                <div class="right-box">點選</div>
            </li>
        </script>
        <div>
            <ul id="list">  

            </ul>
        </div>
    </body>
    <script>
    $(function() {
        var list = [{name:"電腦科學",prize:11},{name:"JAVA",prize:55},{name:"CSS",prize:42}]
        $( "#reuse" ).tmpl(list).appendTo("#list" );  
    })
    </script>
</html>複製程式碼

直接渲染上，堪比v-for；然而現在vue，angular框架可以替代jquery，同時開發效率高

2、小坑總結大法

在處理json資料的時候多用原生方法toString()和split();來合併和分割陣列，效率會高很多。以下只是舉了一些小例子
更多的我都總結在連結地址day-by-day裡面

1.採用 text-align: justify; 實現段落對齊；
2.採用 text-justify: inter-ideograph; 解決 IE 下中英混排問題；
3.部分 webkit 瀏覽器在處理中英混排時會出現超過 1em 的間隙，可採用 word-break: break-all; 解決，但會導致行首行尾禁則失效。
 p {
    text-align: justify;
    text-justify: inter-ideograph; /* IE 私有，解決中英混排 */
    word-break: break-all; /* For webkit */
}複製程式碼

3、頁面動效神器大法

用新增或者取消class來控制動態效果最好，避免在js程式碼中有一系列樣式問題；
動畫單一效果時：就用自帶的移動translate、方法縮小scale、旋轉rotate
多種組合：cubic-bezier(0.500, 0.250, 0.500, 0.750)曲線

如何提高有效的動效反饋
動畫參考地址：isux.tencent.com
animation就夠你用了

4、命名大法

在做一個專案的時候，我們往往遭遇命名問題的困惑，當看到一些非專業人的程式碼，看到他們凌亂的碼法，有時候真的苦不堪言。深刻知道一個良好的命名規範的重要性，同時在專案中也會遇到一些命名的瓶頸。所以有必要寫一篇關於常見命名的方式。以下是通過3年的程式設計經驗，以及參考網上知名的開源專案總結的一點經驗。

1.資料夾命名

1.最好用一個單詞描述

常用專案命名	omi、element、master、project、test、vue、iview
二級目錄	build、static、config、src、examples、base、common、issues、assert
三級目錄	libs、models、plugins、skins、images、css、js

2.如果一個單詞描述不了，用2個詞（名詞加動詞）

color-pick、button-groups、date-picker、option-grounp、jquery-select、jquery-swiper
3.中間用-或者_連線為了方便歸類、一目瞭然

node_models、async-demo、array-union、array-differ、babel-each。

2.檔案命名

1.最好用一個單詞描述

以下變數名可以加css、js、html，例如index.html、index.js、index.css。

常用元件命名	index、message、menu、slider（滑塊）、page、progress（進度條）、tooltip（提示）、tree、upload、time、button、checkbox、dialog、cascader（三級聯動）
常用檔案命名	index、shopping（購物）、 share（分享）、integral（積分）、advertisement（廣告）、pay（支付）、community（社群）、game、docs、bussiness

具體優化命名文章原文章

5、微信公眾號開發大法

基於微信開發，目前最火的是小程式和公眾號開發，而我做的最多的是公眾號開發,基礎的有
1、微信公眾號目的是進行授權要是需要支付功能，則需開通微信支付。
2、微信開發者工具（1）目的是授權之後的網頁無法在pc瀏覽器中瀏覽（2）微信api需要在微信環境下生效，可以利用微信開發者工具跟蹤你微信api的實現狀況。
3、需要一部手機、嚴格的說你需要兩部手機。一部安卓、一部ios手機。目的是安卓手機裡面微信用的是自己的qq瀏覽器、但是蘋果手機是safari瀏覽器，因此相容性你需要適配。
主要說下卡券和支付的問題。有點長請點選地址

![Paste_Image.png](https://user-gold-cdn.xitu.io/2017/4/17/0a769ba168157b96a319d9eea620dd18)
開發請時刻開啟葵花寶典微信開發者文件：http://mp.weixin.qq.com/wiki/home/

![Paste_Image.png](https://user-gold-cdn.xitu.io/2017/4/17/67b5199573c297f5117c1f15739bc9c2)
ok現在工具有了，可以開始講開發階段了。第一授權，微信授權分為靜默授權和彈皮授權、目的就是獲取使用者資訊、取得使用者的唯一openid、以便業務的開發。複製程式碼

6、vue訊息傳遞大法

1、在vue1.0中元件訊息傳遞

子向父傳遞訊息：this.$dispatch('on-change', this.checked);
父向子傳遞訊息：this.$broadcast('on-change', this.checked);
#### 2、在vue2中元件訊息傳遞，已經去除$dispatch、$broadcast，官方推薦使用vuex或者全域性的事件驅動；
防止子元件修改父元件的值已經去掉雙向流動的特性sync。所以
父元件向子元件傳遞：props[]
子元件向父元件傳遞：$emit，this.$emit('on-change', this.checked);複製程式碼

7、vue避免某些生命週期只執行一遍問題

在做vue專案的時候我們通常會寫一些公共元件元件，而公共元件因為會頻繁，考慮到效率問題肯定會採用v-show來控制顯示隱藏；但是v-show的一些ready(mounted)方法會在編譯時就已經執行了，所以當再次-v-show時發現ready(mounted)之前的方法不會執行;不要急通常會有兩種辦法。

1、用watch監聽

watch: {
            visible (val) {
                if (val === false) {
                    this.buttonLoading = false;
                    setTimeout(() => {
                        this.wrapShow = false;
                    }, 300);
                    this.removeScrollEffect();
                } else {
                    this.wrapShow = true;
                    this.addScrollEffect();
                }
            },
            loading (val) {
                if (!val) {
                    this.buttonLoading = false;
                }
            }
        }
    這就是監聽'visible'、`loading`這兩個變數的值來重新執行`removeScrollEffect`和`addScrollEffect`方法。複製程式碼

2、用v-if強制結束生命週期

<template>
    <div v-if="!closed" :class="classes" transition="fade">
        <span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span><Icon v-if="closable" type="ios-close-empty" @click="close"></Icon>
    </div>
</template>
這樣對於公共元件效率並不高，所以適用於非公共元件複製程式碼

8、web伺服器選擇

其實常用的tomcat、xampp和node搭建的web伺服器環境、nginx。

tomcat伺服器：這個14年以前的web開發者，幾乎再熟悉不過了。注意把靜態檔案放到
webapps裡面，啟動後就可以訪問。缺點快取太嚴重，每次需要清除快取。
xampp：主要是針對php工程師的，不過前端訪問程式碼也很方便，只需要配置一下
第一，開啟httpd.conf檔案。其位置位於XAMPP安裝目錄下面的“apache\conf”資料夾裡。
第二，修改程式碼。在httpd.conf檔案中找到如下兩行程式碼，並進行修改。
```
(根目錄）
DocumentRoot “C:/xampp/htdocs”
<Directory “C:/xampp/htdocs”>
將兩個目錄更改為你所希望的目錄即可，如我修改如下：（C:/Web為我本人新的網址根目錄）
DocumentRoot “D:/Webs”
<Directory “D:/Web”>複製程式碼
```
可以方便的指定目錄;

node搭建伺服器環境（原始碼）

利用express來搭建服務 npm install -g express
```
npm install -g express複製程式碼
```
建立專案
```
express project複製程式碼
```

建立專案並install,執行npm start

cd project,npm install,npm start複製程式碼

安裝ejs修改解析的模板

npm install ejs
修改app檔案把jade修改成html解析模板
var ejs = require('ejs'); app.engine('html', ejs.__express);app.set('view engine', 'html');複製程式碼

把你的程式碼放到views裡面，啟動瀏覽器訪問：http://localhost:3000/
Paste_Image.png

nginx
nginx的功能不說了，最主要是反向代理，防止併發。運用場合是，多人合作，連線不同的服務請求，如果當web服務使用
配置如下：

 server {
      listen       9006;#登入配置訪問地址
      server_name  localhost;
      index index.html index.htm index.php;
      autoindex on;
      ssi  on;
      limit_rate 2000k;
      client_max_body_size 2048m;

      location ~* .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|exe|map|json)$ {
          root D:/resource/public; #
          index index.html index.htm;
      }

      location ^~ /test/ {
          proxy_pass http://192.168.60.10:8181/test/;
          proxy_redirect  default;
          proxy_cookie_path   / / /;
          proxy_set_header    Host    $host:$server_port;
          proxy_set_header    X-Real-IP $remote_addr;
          proxy_set_header    X-Forwarded-Host $host:$server_port;
          proxy_set_header    X-Forwarded-Server $host:$server_port;
          proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;
      }
  }複製程式碼

其中(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|exe|map|json)靜態檔案在本地讀取,其他例如介面則在 http://192.168.60.10:8181/test/這個服務中讀取，比較大的專案開發來說是非常方便的。

9、vuex使用大法

vuex主要是利用狀態管理機制，來解決VUE中複雜專案頻繁元件通訊，以及平行同行的問題，vue2.0推薦使用。
vuex比window可以當全域性變數的功能用，但是其優勢是定義的資料更有模組性和追蹤性。

1、編寫store物件

define([], function() {
    var Vue = require('vue')
    var Vuex = require('src/libs/vuex/vuex.js')
    Vue.use(Vuex)
    var modelA= require('src/libs/vuex/modelA.js')
    // 應用初始狀態
    var state = {
        count: 2
    }

    // 定義所需的 mutations
    var mutations = {
        INCREMENT: function(state) {
            state.count++
        },
        DECREMENT: function(state) {
            state.count--
        }
    }
//這一塊可以引入模組物件
     var store = new Vuex.Store({
            state: state,
            mutations: mutations,
            modules: {
                test: modelA
            }
        })
        // 建立 store 例項
    return store
})複製程式碼

vuex參考例項

10、github部落格和日誌大法

其實在開發的時候難免會遇到許多問題，許多坑，然而你如果自己從坑裡爬起來了，肯定有很多感受。那麼如果你想把這些感受寫下來更好，如果不想寫下來建議你寫下來，分享便會成長。其中可以通過以下幾種方式來完善你的部落格和日誌

github中readme
例如UI設計的想法你可以放資源，放筆記
github中issue
例如關於美學的思考你可以做筆記，寫文章
github中wiki
例如關於美學的思考你可以做筆記，寫文章,有目錄，美觀大方

本次活動地址：juejin.im/post/58d8e9… 希望出現更多優秀的作品

微前端實踐
2019-04-10
前端
[實踐系列] 前端路由
2019-01-11
前端路由
前端圖床搭建實踐（前端篇）
2022-02-07
前端圖床
GMTC 大前端時代前端監控的最佳實踐
2018-06-29
前端
聊聊微前端的原理和實踐
2020-07-27
前端
Babel 在提升前端效率的實踐
2019-05-20
Babel前端
IMVC（同構 MVC）的前端實踐
2019-02-10
MVC前端
lerna管理前端packages的最佳實踐
2018-03-02
前端Package
我認為的 Runloop 最佳實踐
2019-03-04
OOP
我理解的 Python 最佳實踐
2015-11-18
Python
前端快取最佳實踐
2019-03-03
前端快取
lerna管理前端模組實踐
2020-10-20
前端
qiankun微前端實踐
2023-09-20
前端
FFmpeg前端影片合成實踐
2024-02-29
前端
canvas在前端開發中的實踐
2019-11-22
Canvas前端
前端同構渲染的思考與實踐
2019-03-08
前端
前端微架構實踐(Vue)
2019-10-10
前端架構Vue
高效前端程式設計實踐
2019-03-03
前端程式設計
前端可用性保障實踐
2019-02-23
前端
前端最佳實踐（一）——DOM操作
2019-03-04
前端
前端工程化最佳實踐
2021-07-03
前端
前端面試之vue實踐
2018-09-28
前端面試Vue
前端:WebP自適應實踐
2021-11-25
前端Web
實踐指南-前端效能提升 270%
2023-04-13
前端
前端異常監控實踐
2018-03-02
前端
前端優化實踐總結
2016-07-15
前端優化
gulp 前端自動化實踐
2017-12-14
前端
前端元件化開發實踐
2015-07-12
前端元件化
前端程式碼質量的思考與實踐
2020-03-20
前端
「Vue實踐」武裝你的前端專案
2019-04-09
Vue前端
前端資料層的探索與實踐（一）
2019-03-16
前端
前端資料層的探索與實踐（二）
2019-03-16
前端
微前端的設計理念與實踐初探
2018-08-12
前端
單測在商家前端業務中的實踐
2022-12-27
前端
前端感官效能的衡量和優化實踐
2017-09-27
前端優化
我所認為的RESTful API最佳實踐
2019-05-10
RESTAPI
我的管理實踐---《人件》讀後感
2024-06-17
微前端在得物客服域的技術實踐/ 那麼多微前端框架，為啥我們選Qiankun + MF
2022-06-08
前端框架