基于用户体验的前端开发规范

[zhuxiaojian]

系统迁移

• 因 MTS 会逐渐废弃，后面新项目引用公用资源，这里指 common 内资源，统一引用 res.m.suning.com 路径

原 m.suning.com 域名
<link rel="stylesheet" type="text/css" href="http://m.suning.com/RES/wap/common/style/base/2.0/base.css">

对应 res.m.suning.com 域名
<link rel="stylesheet" type="text/css" href="http://res.m.suning.com/common/style/base/2.0/base.css">

一像素的解决方案（根据新机型发布定期更新）

    <link rel="stylesheet" type="text/css" href="http://res.m.suning.com/common/style/base/2.0/base.css">

    <div class="border">实心边框</div>

    <div class="border-t">上边框</div>

    <div class="border-b">下边框</div>

    <div class="border-tb">上下边框</div>

## 　图片默认无 src 有边框问题，配合 lazyload 解决方案

// lib/zepto/1.1.4/zepto.min.js 内置了 lazyload 方法
<script type="text/javascript" src="http://res.m.suning.com/common/script/lib/zepto/1.1.4/zepto.min.js"></script>
<style type="text/css">
    /* 需要 lazyload 的图片自己把 opacity 设为 0 */
    .img-list img{opacity:0;}
</style>

<div class="img-list">
    <img data-src="http://image3.suning.cn/b2c/catentries/000000000126006615_1_200x200.jpg">
</div>

<script type="text/javascript">
    lazyload(".img-list");
</script>

客户端内置页面减少白屏方案

// lib/zepto/1.1.4/zepto.min.js 内置了 _loadScript_ 方法
<script type="text/javascript" src="http://res.m.suning.com/common/script/lib/zepto/1.1.4/zepto.min.js"></script>
// 引入通用加载方法
_loadScript_({
    // 加载的资源，依赖加载
    srcArr:[
        "http://res.m.suning.com/common/script/module/swipe/1.1.0/swipe.js?v=2015090106",
        "http://m.suning.com/RES/wap/V3/script/template/goods.js?v=2015090106"
    ],
    // 加载完毕的回调方法
    loadComple: function(){

    }
})

首屏问题

• 业务确认必定为首屏的图片资源无需调用 lazyload 方法，也无需设置 data-src
• 首屏元素代码层要控制提前渲染，相关 js 放在其他业务逻辑前

按需加载

• lazyload 方法默认做了 onerror 处理
• 选项卡和联版图自己添加对应的按需加载属性，如 data-src-iscroll，保证触发时才加载
• 小范围按需加载加上 loading 效果

搭配移动端前端性能优化规范阅读