記一次ts全棧開發（前端篇）

本文將最近學習的散亂的知識點做一次梳理，描述的一個簡單的商城頁面，這篇主要講前端方面所須要注意的點和收穫，詳細代碼詳見github:https://github.com/niceMatthew/simple-mall-web ，用到的技術棧主要爲webpack,react,ts,react-redux

網站結構

主要頁面

• 購物車頁面
• 登陸註冊頁面
• 我的中心頁面
• 首頁

網站截圖

環境配置

cnpm i react react-dom @types/react @types/react-dom react-router-dom @types/react-router-dom react-transition-group @types/react-transition-group react-swipe @types/react-swipe antd qs @types/qs  -S
cnpm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D
cnpm i typescript babel-loader source-map-loader style-loader css-loader less-loader less url-loader file-loader autoprefixer px2rem-loader postcss-loader lib-flexible -D
cnpm i redux react-redux @types/react-redux redux-thunk  redux-logger @types/redux-logger redux-promise @types/redux-promise immer redux-immer -S
cnpm i connected-react-router -S
cnpm i express express-session body-parser cors axios -S
複製代碼

項目使用babel-loader而非ts-loader解析ts文件

ts ： tsc --init 生成tscofing.json配置文件

{
  "compilerOptions": {
    "moduleResolution": "node",
    "outDir": "./dist", // 輸出目錄 tsc
    "sourceMap": true, // 是否要生成sourceMap文件
    "noImplicitAny": true, // 是否不容許出現隱含的any類型
    "module": "es6", // 模塊規範
    "target": "ESNext", // 編譯的目標是es5
    "jsx": "react", // 如何編譯JSX語法 
    "esModuleInterop":true, // 容許common.js模塊和es module進行轉換
    "baseUrl": ".", // 查找非相對路徑的URL的其實路徑
    "paths" : {   // 配置@路徑
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "./src/**/*" // 只編譯src目錄下的ts文件
  ]
}
複製代碼

ts圖片引用· image.d.ts

declare module '*.svg';
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.gif';
declare module '*.bmp';
declare module '*.tiff';
複製代碼

webpack中px轉rem

{
    loader: 'px2rem-loader',
    options: {
        remUnit: 75,
        remPrecesion: 8
    }
}
-------------------------------------
let docEle = document.documentElement;
        function setRemUnit() {
            docEle.style.fontSize = docEle.clientWidth / 10 + 'px';
}
setRemUnit();
window.addEventListener('resize', setRemUnit);
複製代碼

router配置

history注入

import { createHashHistory }  from 'history';
let history = createHashHistory();
export default history;

// --------
import { ConnectedRouter } from 'connected-react-router';
import history from '@/history';
...
<ConnectedRouter history={history}>
    <ConfigProvider locale={zh_CN}>
        <main className="main-container">
            <Switch>
            </Switch>
        </main>
        <Tabs />
    </ConfigProvider>
</ConnectedRouter>
複製代碼

react-redux配置

使用redux-promise,redux-thunk以及redux-logger中間鍵

let store = applyMiddleware(routerMiddleware(history), promise, thunk, logger)(createStore)(rootReducer);
複製代碼

無限下拉加載（實踐中採用了相對佔性能的scroll加載，實際上可使用IntersectionObserver優化）

展現商品頁時始終採用三個div展現內容+上下兩個div佔位模擬滾動條

props.container.current.addEventListener('scroll', () => {
            if (props.container.current) {//說明div已經 homeContainer 已經有了
                let scrollTop = props.container.current.scrollTop;
                //輪出去輪播圖高度
                if( (scrollTop > (4.266667 + 1.3333) * rootFontSize) ) {
                    let start = Math.floor((scrollTop - (4.266667 + 1.3333) * rootFontSize) / (8.66667 * rootFontSize))
                        if(lessonListRef.current.length - 2 >= start){
                            setStart(start);
                        }
                    
                }
            }
        });
複製代碼

debounce防抖優化scroll

export function debounce(fn: Function, wait: number) {
    let timeout: number = null;
    return function () {
        if (timeout)
            clearTimeout(timeout);
        timeout = setTimeout(fn, wait);
    }
}
export function loadMore(element: HTMLDivElement, callback: Function) {
    function _loadMore() {
        let containerHeight = element.clientHeight;//容器的高度
        let scrollTop = element.scrollTop;//向上捲去的高度
        let scrollHeight = element.scrollHeight;//內容的高度
        if (containerHeight + scrollTop + 20  >= scrollHeight) {
            callback();
        }
    }
    element.addEventListener('scroll', debounce(_loadMore, 300));
}
複製代碼