完整資料進(jìn)入【數(shù)字空間】查看——baidu搜索"writebug"

# 一、今日新聞網(wǎng)站設(shè)計(jì)報(bào)告

## 1.1 1 設(shè)計(jì)思路

該網(wǎng)站設(shè)計(jì)大部分都是基于原生 js 實(shí)現(xiàn)?；舅枷霝槭紫葘⒒镜捻?yè)面架構(gòu)包括 header，導(dǎo)航條寫好。之后根據(jù)后臺(tái) PHP 請(qǐng)求接口請(qǐng)求返回 JSON 格式數(shù)據(jù)后，對(duì)獲得的數(shù)據(jù)進(jìn)行整理渲染結(jié)構(gòu)化。根據(jù)獲取到的每條新聞的數(shù)據(jù)不同渲染出不同的頁(yè)面樣式添加到容器里面即可。支持?jǐn)?shù)據(jù)的刷新，收藏新聞，切換新聞?lì)愋?，閱讀新聞詳情等基本功能。

## 1.2 2 技術(shù)運(yùn)用

整體項(xiàng)目工程化利用 webpack 進(jìn)行打包。用到的主要技術(shù)有基本編程語(yǔ)言 HTML，scss，JavaScript 大部分為 es6 的代碼，PHP。其他的技術(shù)棧主要包括 tpl 模板變量，前端緩存池以及 localStorage 存儲(chǔ)， nginx 反向代理實(shí)現(xiàn)跨域，封裝 AJAX 數(shù)據(jù)請(qǐng)求，圖片的懶加載，以及最后的項(xiàng)目上線域名訪問(wèn)等。

## 1.3 3 欄目設(shè)計(jì)

### 準(zhǔn)備部分

Webpack 部分

先建立好整體的項(xiàng)目架構(gòu)目錄。主要就是 webpack，因?yàn)楸菊n程重心不在此，所以不需贅述，比較重要的依賴就是 babel 轉(zhuǎn)義 es6+ 到 es5，sass-loader 處理 scss 文件，ejs-loader 處理模板文件，autoprefixer 配置兼容，以及最重要的 webpack 三件套。Npm install 后創(chuàng)建完后就是最頭疼的 webpack.config.js 配置文件，需要配置的主要就是基本的入口文件，輸出文件，module 模塊設(shè)置，plugin 插件配置等，以及 server 服務(wù)器配置。

CSS 部分

包括基本的 iconfont 圖標(biāo)字體，樣式清除 reset 的 CSS 等。

資源部分

包括基本的加載動(dòng)圖，各種樣式圖片等。

Js 部分

因?yàn)檫m配的是移動(dòng)端，解決移動(dòng)端的雙擊 click 判斷是點(diǎn)擊還是縮放造成的 300 毫秒的延遲，這里直接引用別人封裝好的 fastclick 文件即可。最后就是移動(dòng)端適配設(shè)置 rem。