摘要：我是一個(gè)從，，到的比較常規(guī)的技術(shù)棧過渡過程。第一授權(quán)，微信授權(quán)分為靜默授權(quán)和彈皮授權(quán)目的就是獲取用戶信息取得用戶的唯一以便業(yè)務(wù)的開發(fā)。

我也是一個(gè)經(jīng)歷過柴米油鹽醬醋茶、嘗過酸甜苦辣咸的前端程序員。知道前端的東西入門簡單，有深度卻很難；表似好看無比的應(yīng)用，其實(shí)背后邏輯復(fù)雜，然而要想成長的更快，一定要學(xué)會(huì)站在巨人的肩膀上，“學(xué)以師技以自長”。所以一些經(jīng)驗(yàn)非常可貴，在此我想和大家分享一下我的經(jīng)驗(yàn)。我是一個(gè)從jquery，zepto，到vue的比較常規(guī)的技術(shù)棧過渡過程。
本文涉及面包括：jquery處理模板的辦法，高效處理json數(shù)據(jù)，如何有效命名，如何搭建合適的web服務(wù)，如何做出h合理炫酷的動(dòng)畫，vue組件處理的方式，同時(shí)覆蓋如何使用github管理你的項(xiàng)目和文章

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

直接渲染上，堪比v-for；然而現(xiàn)在vue，angular框架可以替代jquery，同時(shí)開發(fā)效率高

在處理json數(shù)據(jù)的時(shí)候多用原生方法toString()和split();來合并和分割數(shù)組，效率會(huì)高很多

1.采用 text-align: justify; 實(shí)現(xiàn)段落對齊；
2.采用 text-justify: inter-ideograph; 解決 IE 下中英混排問題；
3.部分 webkit 瀏覽器在處理中英混排時(shí)會(huì)出現(xiàn)超過 1em 的間隙，可采用 word-break: break-all; 解決，但會(huì)導(dǎo)致行首行尾禁則失效。
 p {
    text-align: justify;
    text-justify: inter-ideograph; /* IE 私有，解決中英混排 */
    word-break: break-all; /* For webkit */
}

鏈接地址

用添加或者取消class來控制動(dòng)態(tài)效果最好，避免在js代碼中有一系列樣式問題；
動(dòng)畫單一效果時(shí)：就用自帶的移動(dòng)translate、方法縮小scale、旋轉(zhuǎn)rotate
多種組合：cubic-bezier(0.500, 0.250, 0.500, 0.750)曲線

如何提高有效的動(dòng)效反饋

動(dòng)畫參考地址：isux.tencent.com

animation就夠你用了

在做一個(gè)項(xiàng)目的時(shí)候，我們往往遭遇命名問題的困惑，當(dāng)看到一些非專業(yè)人的代碼，看到他們凌亂的碼法，有時(shí)候真的苦不堪言。深刻知道一個(gè)良好的命名規(guī)范的重要性，同時(shí)在項(xiàng)目中也會(huì)遇到一些命名的瓶頸。所以有必要寫一篇關(guān)于常見命名的方式。以下是通過3年的編程經(jīng)驗(yàn)，以及參考網(wǎng)上知名的開源項(xiàng)目總結(jié)的一點(diǎn)經(jīng)驗(yàn)。

1.最好用一個(gè)單詞描述

2.如果一個(gè)單詞描述不了，用2個(gè)詞（名詞加動(dòng)詞）

color-pick、button-groups、date-picker、option-grounp、jquery-select、jquery-swiper

3.中間用-或者_(dá)連接為了方便歸類、一目了然

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

1.最好用一個(gè)單詞描述

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

具體優(yōu)化命名文章原文章

基于微信開發(fā)，目前最火的是小程序和公眾號開發(fā)，而我做的最多的是公眾號開發(fā),基礎(chǔ)的有
1、微信公眾號 目的是進(jìn)行授權(quán) 要是需要支付功能，則需開通微信支付。
2、微信開發(fā)者工具 （1）目的是授權(quán)之后的網(wǎng)頁無法在pc瀏覽器中瀏覽 （2）微信api需要在微信環(huán)境下生效，可以利用微信開發(fā)者工具跟蹤你微信api的實(shí)現(xiàn)狀況。
3、需要一部手機(jī)、嚴(yán)格的說你需要兩部手機(jī)。一部安卓、一部ios手機(jī)。目的是安卓手機(jī)里面微信用的是自己的qq瀏覽器、但是蘋果手機(jī)是safari瀏覽器，因此兼容性你需要適配。
主要說下卡券和支付的問題。有點(diǎn)長請點(diǎn)擊地址

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

![Paste_Image.png](https://user-gold-cdn.xitu.io/2017/4/17/67b5199573c297f5117c1f15739bc9c2)
ok現(xiàn)在工具有了，可以開始講開發(fā)階段了。第一授權(quán)，微信授權(quán)分為靜默授權(quán)和彈皮授權(quán)、目的就是獲取用戶信息、取得用戶的唯一openid、以便業(yè)務(wù)的開發(fā)。

子向父傳遞消息：this.$dispatch("on-change", this.checked);
父向子傳遞消息：this.$broadcast("on-change", this.checked);
#### 2、在vue2中組件消息傳遞，已經(jīng)去除$dispatch、$broadcast，官方推薦使用vuex或者全局的事件驅(qū)動(dòng)；
防止子組件修改父組件的值已經(jīng)去掉雙向流動(dòng)的特性sync。所以
父組件向子組件傳遞：props[]
子組件向父組件傳遞：$emit，this.$emit("on-change", this.checked);

在做vue項(xiàng)目的時(shí)候我們通常會(huì)寫一些公共組件組件，而公共組件因?yàn)闀?huì)頻繁，考慮到效率問題肯定會(huì)采用v-show來控制顯示隱藏；但是v-show的一些ready(mounted)方法會(huì)在編譯時(shí)就已經(jīng)執(zhí)行了，所以當(dāng)再次-v-show時(shí)發(fā)現(xiàn)ready(mounted)之前的方法不會(huì)執(zhí)行;不要急通常會(huì)有兩種辦法。

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;
                }
            }
        }
    這就是監(jiān)聽"visible"、`loading`這兩個(gè)變量的值來重新執(zhí)行`removeScrollEffect`和`addScrollEffect`方法。

這樣對于公共組件效率并不高，所以適用于非公共組件

其實(shí)常用的tomcat、xampp和node搭建的web服務(wù)器環(huán)境、nginx。

tomcat服務(wù)器：這個(gè)14年以前的web開發(fā)者，幾乎再熟悉不過了。注意把靜態(tài)文件放到
webapps里面，啟動(dòng)后就可以訪問。缺點(diǎn)緩存太嚴(yán)重，每次需要清除緩存。

xampp：主要是針對php工程師的，不過前端訪問代碼也很方便，只需要配置一下
第一，打開httpd.conf文件。其位置位于XAMPP安裝目錄下面的“apacheconf”文件夾里。

第二，修改代碼。在httpd.conf文件中找到如下兩行代碼，并進(jìn)行修改。

(根目錄）
DocumentRoot “C:/xampp/htdocs”

將兩個(gè)目錄更改為你所希望的目錄即可，如我修改如下：（C:/Web為我本人新的網(wǎng)址根目錄）
DocumentRoot “D:/Webs”

可以方便的指定目錄;

node搭建服務(wù)器環(huán)境（源碼）

利用express來搭建服務(wù) npm install -g express

npm install -g express

建立項(xiàng)目

express project

建立項(xiàng)目并install,執(zhí)行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里面，啟動(dòng)瀏覽器訪問：http://localhost:3000/

nginx
nginx的功能不說了，最主要是反向代理，防止并發(fā)。運(yùn)用場合是，多人合作，連接不同的服務(wù)請求，如果當(dāng)web服務(wù)使用

配置如下：

   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)靜態(tài)文件在本地讀取,其他例如接口則在 http://192.168.60.10:8181/test/這個(gè)服務(wù)中讀取，做大項(xiàng)目開發(fā)時(shí)非常方便

vuex主要是利用狀態(tài)管理機(jī)制，來解決VUE中復(fù)雜項(xiàng)目頻繁組件通信，以及平行同行的問題，vue2.0推薦使用。
vuex比window可以當(dāng)全局變量的功能用，但是其優(yōu)勢是定義的數(shù)據(jù)更有模塊性和追蹤性。

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")
    // 應(yīng)用初始狀態(tài)
    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
            }
        })
        // 創(chuàng)建 store 實(shí)例
    return store
})

vuex參考實(shí)例

其實(shí)在開發(fā)的時(shí)候難免會(huì)遇到許多問題，許多坑，然而你如果自己從坑里爬起來了，肯定有很多感受。那么如果你想把這些感受寫下來更好，如果不想寫下來建議你寫下來，分享便會(huì)成長。其中可以通過以下幾種方式來完善你的博客和日志

github中readme
例如UI設(shè)計(jì)的想法你可以放資源，放筆記

github中issue
例如關(guān)于美學(xué)的思考你可以做筆記，寫文章

github中wiki
例如關(guān)于美學(xué)的思考你可以做筆記，寫文章,有目錄，美觀大方