摘要：我是一個從，，到的比較常規的技術棧過渡過程。第一授權，微信授權分為靜默授權和彈皮授權目的就是獲取用戶信息取得用戶的唯一以便業務的開發。

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

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

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

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

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 */
}

鏈接地址

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

如何提高有效的動效反饋

動畫參考地址：isux.tencent.com

animation就夠你用了

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

1.最好用一個單詞描述

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。

1.最好用一個單詞描述

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

具體優化命名文章原文章

基于微信開發，目前最火的是小程序和公眾號開發，而我做的最多的是公眾號開發,基礎的有
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、以便業務的開發。

子向父傳遞消息：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);

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

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`方法。

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

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

tomcat服務器：這個14年以前的web開發者，幾乎再熟悉不過了。注意把靜態文件放到
webapps里面，啟動后就可以訪問。缺點緩存太嚴重，每次需要清除緩存。

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

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

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

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

可以方便的指定目錄;

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/

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/這個服務中讀取，做大項目開發時非常方便

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參考實例

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

github中readme
例如UI設計的想法你可以放資源，放筆記

github中issue
例如關于美學的思考你可以做筆記，寫文章

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