Skip to content
Raymall前端项目
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
README.md
favicon.ico
package.json
webpack.config.js

README.md

Raymallweb---一个很无聊的商城项目

一个基于common.js规范,webpack打包的jQuery商城平台前台项目

概述

这个是我自己学习开发前端页面,同时完成整个项目的搭建,从初始化到上线发布,框架仅使用了jQuery,没有使用当红的一些框架,甚至没有使用样式框架如Bootstrap 为的就是学习了解一个纯正原生的前端开发过程。总之收获满满,非常开心哈哈哈哈

下面是学习过程中的一些笔记,也放这里吧哈哈哈哈哈

架构设计

  • 分层架构
    • 解耦(可服用)
    • MVC、MVVM
  • 模块化
    • 解耦,并行开发
    • AMD、CMD、CommonJS、ES6

开发环境

Node.js 和npm

  • JS的运行环境
  • 构建工具WebPack的环境依赖
  • 单线程、异步编程

npm:Node Package Manager

Chrome调试

  • Element : 网页标签结构元素
  • Console : 打印日志
  • NetWork : 网络以及资源的请求
  • Sources ; 网页请求的所有文件,可以在里面打断点
  • Application : 查看本地的一些保存信息

项目分包版本管理

npm、webpack

npm

  • npm init : 在项目根目录初始化
  • npm install xxx@v.v.v
  • npm uninstall xxx@v.v.v
  • -g : 全局配置
  • --registry==https://registry.npm.taobao.org : 指向淘宝npm源,速度快很多
npm config set registry https://registry.npm.taobao.org 
npm info underscore (如果上面配置正确这个命令会有字符串response)
  • npm run script : 运行自己的快捷脚本,在script里面配置

webpack

  • 加载方式 : 各种loader插件
  • 编译方式:commonjs模块-> function类型模块
  • 官网Github
  • npm install webpack -g: 全局webpack安装
  • npm install webpack@1.15.0 --save-dev

--save-dev 是你开发时候依赖的东西,--save 是你发布之后还依赖的东西。

webpack2.x版本会生成一条引用object.default的语句会在IE8中报错

webpack.config.js

  • entry : js的入口文件
  • externals : 外部依赖的声明
  • output : 目标文件
  • resolve : 配置别名
  • module : 各种文件,各种loader
  • plugin : 插件

常用loader

  • html : html-webpack-plugin/ html-loader
  • js : babel-loader + babel-preset-es2015
  • css : style-loader+ css-loader
  • img+font : url-loader

常用命令

  • webpack : 移步压缩的形式来打包,调试代码用
  • webpack -p : 压缩的形式来打包,常用于环境的发布
  • webpack --watch : 监听文件改变,用于开发过程
  • webpack --config webpack.config.js : 指定webpack配置文件

webpack-dev-server

  • 作用:前端开发服务器
  • 特点:可以在文件改变是,自动刷新浏览器
  • 安装:npm install webpack-dev-server --save-dev
  • 在webpack配置文件中添加:webpack-dev-server/client?http://localhost:8080
  • 使用:webpack-dev-server --port 8088 inline

脚本处理问题

  • Js用什么loader加载
    • 考虑到IE8的兼容性问题,不使用babel-loader
    • 使用webpack原生的js加载
  • 官方entry只有一个js,有多个怎么办
    • 具体可以看raymall项目的webpack.config.js有丰满的注释
  • output要分文件夹存放文件,要怎么设置
    • filename前面加上文件夹名字就可以了
  • jquery引入方法
    • 第一种:下面是基本步骤 : 这种还是比较繁琐的,因为每次都要引入
    • npm install jquery --save : npm的方式安装jquery
    • var $ = require('jquery');
    • $('body').html("hello");
    • 第二种:直接在入口的html引入就可以了
    • 第三种webpack.config里面的externals配置jquery,然后通过jquery使用
  • 想要提取公共模块
    • 使用CommonsChunkPlugin官网使用指南
    • 配置:看webpack.config里面plugin的配置
    • 这里不是很懂使用的必要性和简便性

样式处理问题

  • csss使用什么loader
    • css-loaderstyle-loader
  • webpack打包的css要如何独立成单独文件
    • 百度webpack css独立打包

html模板处理

npm install html-webpack-plugin --save-dev npm install html-loader --save-dev : 支持EJS语法,公共标签的引用

  • 用法:<%= require('html-loader!./layout/html-head.html') %>

将html打包到dist下

图片和字体的处理 针对webpack@1.15.0 需要先安装 npm install file-loader@0.11.1 --save-dev 然后再安装 npm install url-loader --save-dev 否则会报错,版本不够 url-loader : 图片和字体资源等的打包

webpack-dev-server

热编译服务器,让前端调试更加轻松 通过配置config的变量来控制开发环境和正式环境的是否启动 npm install webpack-dev-server@1.16.5 --save-dev npm install webpack-dev-server@1.16.5 -g : 全局安装

webpack-dev-server --inline --port 8088 : 指定端口自定义启动

webstrom/idea保存不更新webpack-dev的方法:setting->System settings->取消勾选Use 'safe write' : 也就是不保存到idea的缓存临时文件

这个配置也可以让wds刷新快一点
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  },

font-awesome

字体图标库 npm install font-awesome --save

通用封装

Hogan

  • {{}} : 带转义的显示信息
  • {{{}}} : 不带转移的,用于显示数据就是html格式的
  • {{#imageList}} {{/imageList}} : 遍历imageList集合, {{.}} 表示集中的item
  <ul class="p-img-list">
                {{#subImages}}
                  <li class="p-img-item">
		       <img class="p-img" src="{{imageHost}}{{.}}" alt="{{name}}"/>
                   </li>
                {{/subImages}}
            </ul>
  • {{^title}} message{{title}}表示 title不存在的时候显示message
  • ``

通用js工具封装

  • 网络请求工具
  • URL路径工具
  • 模板渲染工具-hogan
  • 字段验证 && 通用提示
  • 统一跳转

页面布局

  • 定宽布局
  • 通用部分的抽离
    • 通用导航
    • 通用头部
    • 通用footer
    • 通用侧面导航
    • 通过结果返回页面
  • icon-font的引入
  • 通用样式

##业务开发

用户模块

  • 页面
    • 用户登录
    • 用户注册
    • 找回密码
    • 个人中心
    • 修改密码
  • 数据安全性处理方案
  • 表单同步/异步验证
  • 小型SPA开发
  • 事件委托、事件绑定、事件监听
  • hogan模板的使用

商品模块

知识点

  • jQuery插件模块化改造
    • 轮播图插件的封装使用
  • 独立组件抽离技巧
    • 分页组件
  • 多功能列表开发
  • 原型、原型链

首页功能点:

  • 推荐搜索关键字的快捷链接
  • 活动展示的轮播图
  • 分楼层的商品分类信息

列表页功能点

  • 列表展示
  • 排序
  • 分页处理

详情页

  • 信息展示
  • 缩略图
  • 添加购物车

购物车模块

  • 商品状态随时验证
  • 模块内部方法调用
  • 非Form提交时的数据验证

功能点:

  • 购物车商品展示
  • 修改购物车数量
  • 选择和取消选择,全选,反选,商品
  • 结算

订单模块

  • Modal式组件封装思想
  • 城市级联操作
  • 复杂表单回填

页面

  • 订单页
    • 地址管理(crud)
    • 订单信息展示
    • 订单提交
  • 订单列表页
  • 订单详情页
    • 订单详细信息
    • 未支付订单可以继续支付
    • 取消订单

支付模块

  • 支付宝功能对接
  • 支付宝状态动态监测
  • 支付成功回调

生产环境适配

  • 添加favicon
    • Html-webpack-plugin:添加favicon的配置
  • 线上域名分离,HTML路径简化
  • 添加DNS-prefetch -就是当你浏览网页时,浏览器会加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页链接无需DNS解析,减少等待时间
    • head-common添加配置,把需要引用的文件域名都添加进去
  • 对线上打包结果做回归测试

访问数据分析

  • PV:页面打开次数
  • UV: 一个人一个是时间无论打开多少页面都算一个UV
  • VV : 用户进入网站到离开,算一次VV
  • 流量来源监控:
  • 搜索关键词来源:
  • 用户设备信息:通过屏幕分辨率,浏览器版本等分析出来
  • 用户特征分析

SEO优化

  • SEO优化技巧
    • 增加页面数量
    • 减少页面层级
    • 关键词密度
    • 高质量友链
    • 分析竞争对手
    • SEO监控
  • 关键词设计
    • 品牌关键词:Raymall、Raymall电商...
    • 高频关键词:电商平台、手机、笔记本电脑、相机、手表...
    • 长尾关键词:肚子疼了怎么办,什么东西便宜
  • SEO监控
  • 百度统计 : 数据超多,基本能够满足需求
    1. 添加域名
    2. 获取js代码,添加到head-common中

可用性网站监控

  • 外部监控原理
  • 第三方监控的设置
  • 更高级的监控方式
You can’t perform that action at this time.