101 完成 webpack 配置后，有一套类似 live-reload 自动刷新提供 REPL 环境。
【配置 webpack.config.js 别名，方便 js 文件做require 支持路径别名简写】
resolve:{
alias:{
util : __dirname + '/src/util',
page : __dirname + '/src/page',
service : __dirname + '/src/service',
image : __dirname + '/src/image',
}
},
【Access-Control-Allow-Origin】跨域问题
charles软件 remote map 功能，这样就能用同域名下请求 url l额。 （浏览器配合 switchy omega 切换成系统代理 给 charles 监听。）
==========================================
common工具
网络请求
URL路径
模板渲染 hogan
字段验证 通用提示
统一跳转
页面布局 layout
navigator header content menu footer
【技巧】~ 扁平化 、 对称 、 对齐 、 距离 、配色（百搭）
1。定宽布局
2。通用部分抽离
3。icon-font 引入
4。通用样式
通用导航条开发
通用页面头部开发
通用侧边导航开发
通用结果提示页开发
=============================================做
1. util 全局通用的工具 mm.js ，供其它js require 调用。
var _mm = {
// 网络请求
request : function(param){
var _this = this;
$.ajax({
type : param.method || 'get',
url : param.url || '',
dataType : param.type || 'json',
data : param.data || '',
success : function(res){
// 请求成功
if( === res.status){
typeof param.success === 'function' && param.success(res.data,res.msg);
}
// 未登录
else if( === res.status){
_this.doLogin();
}
// 请求数据错误
else if( === res.status){
typeof param.error === 'function' && param.error(res.msg);
}
},
error : function(err){
// 返回 404 503 错误码
typeof param.error === 'function' && param.error(err.statusText);
}
})
},
// 统一登录处理
doLogin : function(){
// redirect 支持返回
window.location.href = './login.html?redirect=' + encodeURIComponent(window.location.href);
}
};
module.exports = _mm;
2.正则获取url参数 list.do?key1=xxx&key2= 【目标获得 value 这个value要先弄key，然后value的结尾是 & 或者 没有东西】
// 取 key 要表示 开头有或没有 & ，得到 (^|&) 注释^为开头
// 取 value 要表示 ([^&]*)(&|$) 注释^为取反 (&|$)
// window.location.search.substr(1) 跳过问号
// 获取 url 参数
getUrlParam:function(name){
var regxp = new RegExp('(^|&)'+name+'=([^&]*)(&|$)');
var result = window.location.search.substr().match(regxp);
return result ? decodeURIComponent(result[]):null;
},
3. 渲染html 、 npm i --save hogan.js@3.0.2
// 渲染引擎
renderHtml: function(htmlTemplate,data){
var template = Hogan.compile(htmlTemplate);
var result = template.render(data);
return result;
},
4.正则验证字段
// 字段验证
validate: function(value,type){
var stripValue = $.trim(value);
// 非空判断
if('require' === type){
return !!stripValue;//对空值转一次布尔 true 再转一次 false
}
// 手机号验证
if('phone' === type){
return /^\d{}$/.test(stripValue);
}
// 邮箱格式验证
if('email' === type){
return /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{,})$/.test(stripValue);
}
//
},
5.meta 元数据提取到 header.html
<script> 提取到 footer.html
6.通用布局 css
/*
* @Author: chenhui7373
* @Date: 2018-07-06 09:03:05
* @LastEditors: chenhui7373
* @LastEditTime: 2018-07-06 09:33:45
* @Description:
* @Email: sunw31@163.com
*/ /* css 重置 */
*{
margin: ;
padding: ;
}
body{
background: #f6f6f6;
font: 12px/1.5 tahoma,arial,Microsoft YaHei,sans-serif;
}
li{
list-style: none;
}
img{
display: block;
border: none;
}
label{
cursor: pointer;
}
input[type='checkbox']{
cursor: pointer;
} /* 定宽布局 */
.w{
width: 1080px;
margin: auto;
position: relative;
overflow: hidden;
}
/* .large .w{
width: 1600px;
} */
/* 全局通用样式 */ /* 隐藏类 */
.hide{
display: none;
}
/* 超链样式 */
.link{
color: #;
cursor: pointer;
text-decoration: none;
}
.link:hover{
color:#e80012;
}
.link-text{
color:#;
text-decoration: none;
}
/* btn */
.btn{
display: inline-block;
padding: 20px;
height: 40px;
line-height: 40px;
vertical-align: middle;
background: #c60023;
border: none;
font-size: 17px;
font-weight: bold;
color: #fff;
outline: none;
cursor: pointer;
text-decoration: none;
}
.btn-mini{
height: 25px;
line-height: 25px;
font-size: 12px;
padding: 10px;
}
/* loading */
.loading{
margin:10px auto;
display: block;
width: 65px;
height: 65px;
border: 1px solid #ddd;
border-radius: 5px;
background: url(../../image/icon/loading.gif) no-repeat;
opacity: .;
}
7. 字体资源
npm i --save font-awesome@4.7.0
直接使用 webpack.config.js alias下node_modules ，单刀直入复制路径引用 .min.css。
========================================================================
8. 导航条
nav-simple.html
<div class="nav-simple">
<div class="w">
<a class="logo">MMALL</a>
</div>
</div>
/common/nav-simple/index.js index.css
/* index.css */
.nav-simple{
height: 60px;
line-height: 60px;/* 字体底部到字体顶部撑开，布局上一切都是容器。 */
border-bottom: 1px solid #ddd;
background: #fff;
}
.nav-simple .logo{
font-size: 26px;
font-weight: bold;
color: #c60023;
} /* index.js */
'use strict';
require('./index.css')
nav.html
<div class="nav">
<div class="w">
<div class="user-info">
<span class="user not-login">
<span class="link js-login">登录</span>
<span class="link js-register">注册</span>
</span>
<span class="user login">
<span class="link-text">
欢迎，
<span class="username"></span>
</span>
<span class="link js-logout">退出</span>
</span>
</div>
<ul class="nav-list">
<li class="nav-item">
<a class="link" href="./cart.html">
<i class="fa fa-shopping-cart"></i>
购物车(<span class="cart-count"></span>)
</a>
</li>
<li class="nav-item">
<a class="link" href="./order-list.html">我的订单</a>
</li>
<li class="nav-item">
<a class="link" href="./user-center.html">我的MMall</a>
</li>
<li class="nav-item">
<a class="link" href="./about.html">关于MMall</a>
</li>
</ul>
</div>
</div>
/common/nav/index.js index.css
/*index.css */
.nav{
background: #eee;
height: 30px;
line-height: 30px;
}
/* 用户部分 */
.nav .user{
float: left;
}
.nav .user.login{
display: none;
}
.nav .user .link{
margin-right: 5px;
}
/* 导航链接部分 */
.nav .nav-list{
float: right;
}
.nav .nav-list .nav-item{
display: inline-block;
margin-left: 5px;
} /* index.js */
'use strict'; // 导航条的 css 样式
require('./index.css');
9.脚注
.footer{
padding-bottom: 10px;
}
.footer .links{
text-align: center;
line-height: 30px;
color: #;
}
.footer .links .link{
padding: 10px;
}
.copyright{
text-align: center;
line-height: 30px;
color: #;
}