個人前端實踐

時間  2019-11-15
標籤 個人 前端 實踐 简体版
原文   原文鏈接

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

一、jQuery.js中的tmpl大法

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

<!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>複製代碼

tmpl.png

直接渲染上，堪比v-for；然而如今vue，angular框架能夠替代jquery，同時開發效率高

二、小坑總結大法

在處理json數據的時候多用原生方法toString()和split();來合併和分割數組，效率會高不少。如下只是舉了一些小例子
更多的我都總結在連接地址day-by-day裏面css

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)曲線html

四、命名大法

在作一個項目的時候，咱們每每遭遇命名問題的困惑，當看到一些非專業人的代碼，看到他們凌亂的碼法，有時候真的苦不堪言。深入知道一個良好的命名規範的重要性，同時在項目中也會遇到一些命名的瓶頸。因此有必要寫一篇關於常見命名的方式。如下是經過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個詞（名詞加動詞）vue

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

  • 3.中間用-或者_鏈接爲了方便歸類、一目瞭然node

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

2.文件命名

  • 1.最好用一個單詞描述

如下變量名能夠加css、js、html，例如index.html、index.js、index.css。jquery

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

具體優化命名文章原文章

五、微信公衆號開發大法

基於微信開發，目前最火的是小程序和公衆號開發，而我作的最多的是公衆號開發,基礎的有
一、微信公衆號 目的是進行受權 要是須要支付功能，則需開通微信支付。
二、微信開發者工具 （1）目的是受權以後的網頁沒法在pc瀏覽器中瀏覽 （2）微信api須要在微信環境下生效，能夠利用微信開發者工具跟蹤你微信api的實現情況。
三、須要一部手機、嚴格的說你須要兩部手機。一部安卓、一部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、以便業務的開發。複製代碼

六、vue消息傳遞大法

一、在vue1.0中組件消息傳遞

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

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

在作vue項目的時候咱們一般會寫一些公共組件組件，而公共組件由於會頻繁，考慮到效率問題確定會採用v-show來控制顯示隱藏；可是v-show的一些ready(mounted)方法會在編譯時就已經執行了，因此當再次-v-show時發現ready(mounted)以前的方法不會執行;不要急一般會有兩種辦法。

一、用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`方法。複製代碼

二、用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>
這樣對於公共組件效率並不高，因此適用於非公共組件複製代碼

八、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/這個服務中讀取，比較大的項目開發來講是很是方便的。

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

十、github博客和日誌大法

其實在開發的時候不免會遇到許多問題，許多坑，然而你若是本身從坑裏爬起來了，確定有不少感覺。那麼若是你想把這些感覺寫下來更好，若是不想寫下來建議你寫下來，分享便會成長。其中能夠經過如下幾種方式來完善你的博客和日誌

本次活動地址：juejin.im/post/58d8e9… 但願出現更多優秀的做品

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程