基于原生 js 实现今日新闻网站

完整资料进入【数字空间】查看——baidu搜索"writebug"

一、今日新闻网站设计报告

1.1 1 设计思路

该网站设计大部分都是基于原生 js 实现。基本思想为首先将基本的页面架构包括 header，导航条写好。之后根据后台 PHP 请求接口请求返回 JSON 格式数据后，对获得的数据进行整理渲染结构化。根据获取到的每条新闻的数据不同渲染出不同的页面样式添加到容器里面即可。支持数据的刷新，收藏新闻，切换新闻类型，阅读新闻详情等基本功能。

1.2 2 技术运用

整体项目工程化利用 webpack 进行打包。用到的主要技术有基本编程语言 HTML，scss，JavaScript 大部分为 es6 的代码，PHP。其他的技术栈主要包括 tpl 模板变量，前端缓存池以及 localStorage 存储， nginx 反向代理实现跨域，封装 AJAX 数据请求，图片的懒加载，以及最后的项目上线域名访问等。

1.3 3 栏目设计

准备部分

Webpack 部分

先建立好整体的项目架构目录。主要就是 webpack，因为本课程重心不在此，所以不需赘述，比较重要的依赖就是 babel 转义 es6+ 到 es5，sass-loader 处理 scss 文件，ejs-loader 处理模板文件，autoprefixer 配置兼容，以及最重要的 webpack 三件套。Npm install 后创建完后就是最头疼的 webpack.config.js 配置文件，需要配置的主要就是基本的入口文件，输出文件，module 模块设置，plugin 插件配置等，以及 server 服务器配置。

CSS 部分

包括基本的 iconfont 图标字体，样式清除 reset 的 CSS 等。

资源部分

包括基本的加载动图，各种样式图片等。

Js 部分

因为适配的是移动端，解决移动端的双击 click 判断是点击还是缩放造成的 300 毫秒的延迟，这里直接引用别人封装好的 fastclick 文件即可。最后就是移动端适配设置 rem。