触屏版开发总结

时间 2019-11-16

标签触屏开发总结繁體版

原文原文链接

概述

前段时间刚刚完成公司触屏版项目，我以为颇有必要写一篇文章总结下本身的心得和踩过的坑。每次回头看看本身写的代码，都有不同的体会，不过大体感受都是惊人的类似：这TM写的是啥？这TM写的又是啥？css

架构

Java+Node。尝试了先后端分离，Java端负责业务逻辑处理，提供接口。Node端负责页面渲染、SEO等balabala一堆非业务逻辑，二者经过HTTP接口交互。先后端分离确实带来了好处：html

分工明确，不会出现占着茅坑不拉粑粑的状况，一人一个坑蹲着
职能清晰，设计写SASS，前端写JavaScript，后端写Java
提升了代码的复用性，Java端的接口可供多个应用调用

先后端分离只有好处? No! 多了Node，实际上多了层请求，这个过程是须要花费时间的，不过这点性能的损耗同提升维护性来比是微不足道的，咋不纠结这个！真正来讲，先后端的过分分离让每一个人只关注本身的任务，等到联调的时候会发现出现不少问题，举个几个简单的例子：前端

撕逼1

通常都是设计跟据视觉稿先编码，作好HTML页面，而后丢给咱们前端开发。我套页面的时候，发现有个幻灯片效果，而后去找了个插件xxx.js，大部分的幻灯片插件对HTML结构都是有要求的（你懂的），因此我只好找到设计，让他从新写下这部分结构，设计欣然接收，改了！作着作着又发现某个div的须要fixed布局，又得找设计改SASS，某个div须要添加 overflow:hidden,仍是得找设计改，如此反复，设计内心确定会默念：我去年买了个表！说到这里我不得不说一点了，做为一个合格的设计，在编写HTML时，要根据交互效果编写CSS代码，站在套页面人的角度去编码。也须要将CSS模块化，便于维护啊！固然了，做为一个合格的JSer，也要善于同设计交流，提早沟通，避免出现上述的状况。不沟通的结果就是这样的：jquery

<div style="overflow: hidden;margin-top: 200px;">
    <div style="width: 500px;margin-left: 20px;"></div>
</div>

$('#btn').click(function(){
    $('.someDiv').css({overfolw : 'hidden'}).show();
});

来来来，放学别走！git

撕逼2

交互说，点击这里，我须要duang的效果，点击那里我须要duang duang的效果，点那那里，我须要duang duang duang的效果。我一看，但愿用尽可能少的代码实现，同交互交流但愿统一UI，保留一种效果就能够了，交互坚持！交互坚持，交涉无果，不得很少写额外的代码，然并卵！下次需求，又换交互效果！github

撕逼3

不一样的列表页，有着相同的HTML结构，本次相同代码不写两遍的原则，抽出告终构：数据库

<div>
     {{comName}}
    //...
</div>

可是后端返回的数据结构一处叫comName，一处叫companyName。问后端，他说数据库就是这样设计的。express

小结

我的以为整个开发流程就是一体的，没有绝对的先后端分离。产品、交互、设计、JSer、后端、库表设计都会对咱们的代码产生影响。及时沟通是一方面。处了本身的本职外，也须要了解他人的工做，当你对整个流程都特别熟悉，那就是所谓的架构师了。还在前端摸爬滚打的我，还差得远啊。后端

Zepto

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着相似的api。选择Zepto是由于它轻量高效，而且封装好了移动端的touch事件。细数下开发过程当中遇到的坑。api

下载

直接从官网上下载了Zepto，立刻编码

$('#btn').on('tap',function(){
    //todo
});

发现压根不起做用，再到官网上看下，我就呵呵了

看黄色部分，默认只添加了Effects、iOS3和Detect这三个模块，最最重要的Touch模块竟然没有！因此你们要下载Zepto还得本身定制模块
Zepto Builder
附上模块说明：

延时

总所周知，默认click事件，会有300ms的延时问题，Zepto的tap事件很好的解决了这个问题。可是也挖了一个大坑。

点透

Zepto的点透应该也是你们比较熟悉的了。当两个层叠加的时候，上层绑定的tap事件触发后会穿透到底层，刚好底层有个a标签，页面就跳转了。为了解决这个问题，我不得不把tap事件换成click事件，因为click事件有延时，还得引入了第三方的类库FastClick。

计算宽高

一个很简单的Tip提示，例如‘操做成功’、‘登陆失败’等等简单的提示，Tip在show以前，我会计算让Tip居中显示：

var left = ($(window).width() - $pop.width()) / 2 + $(window).scrollLeft();

然而$pop.width()始终为0，对于不可见元素，获取的宽高度始终为0，可是jQuery就能正常获取到，我又不得不采起以下的处理方式：

var cssShow = {visibility: 'hidden', display: 'block'};
var cssHide = {visibility: 'visible', display: 'none'};

$pop.css(cssShow);
var left = ($(window).width() - $pop.width()) / 2 + $(window).scrollLeft();
$pop.css(cssHide);

 $pop.css({
     left: left > 0 ? left : 0
 });

小结

Zepto相对于JQuery来讲确实比较轻量，可是成熟度还差得远，当出现点透和计算宽高失效的时候，我对Zepto有点灰心，但愿Zepto后续可以及时升级解决这些问题，否则就使用jQuery了，特别是jQuery升级到版本2，也是至关不错的选择。

浏览器的坑

禁用滚动

当页面弹出一个选择框。滑动屏幕，背后的页面跟着滚动，特别是在safari下，那效果太恶心，因此我选择禁用body的滚动。最暴力的解决方式是：

$(document).on('touchmove',function(e){
    e.preventDefault();
});

这样会同时禁用掉弹出层的滚动效果，明显不可取，因此我才用下面的方式：

.alpha {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.alpha body {
    height: 100%;
    overflow: hidden;
}

当遮盖弹出的时候或者隐藏的时候让html切换class alpha
$('html').toggleClass('alpha');

回到顶部

对于PC端，直接这样写，就会有一个向上平滑滚动的效果，然而对于移动端来讲，并无什么卵用：

$('body,html').animate({scrollTop: 0});

仍是使用了第三方的插件模式出这个效果的scrollToTop。

SEO

URL Rewiter

先后端分离后，Node端要干的事情太多了，URL重写这个模块是我一个前辈写的，配置放在JSON文件里，就像这样：

{
    "product.detail": {
        "in": {
            "from": "^/chanpin/(.+)\\.html$",
            "to": "/product/$1",
            "last": true
        },
        "out": {
            "from": "^/product/(.+)$",
            "to": "/chanpin/$1.html",
            "last": true
        }
    },    
    "special": {
        "in": {
            "from": "^/special/(.+)\\.html$",
            "to": "/special/$1",
            "last": true
        },
        "out": {
            "from": "^/special/(.+)$",
            "to": "/special/$1.html",
            "last": true
        }
    }
}

推广代码

就是这货：

<title>淘宝网 - 淘！我喜欢</title>    
<meta name="description" content="" />
<meta name="keyword" content="" />

我一样采用JSON文件管理全部页面的推广代码，就像这样：

{  
  "catalog": {
    "title": "产品目录–$1",
    "keywords": "产品目录,$1",
    "description": "$1，产品目录。"
  }, 
  "search.product": {
    "title": "产品搜索–$1",
    "keywords": "产品搜索,$1",
    "description": "$1，产品搜索。"
  }  
}

路由管理

本身编写了个模块，能够指定某个文件下的js文件做为路由，路由代码写起来就像这样的：

module.exports = {
    mapping: '/vo',
    get: {       
        /**
         * 登陆
         */
        '/login': function (req, res) {
            res.render('vo/login');
        },
        /**
         * 注册
         */
        '/register': function (req, res) {
            res.render('vo/register');
        }            
    },
    post: {
        /**
         * 登陆
         */
        '/login': function (req, res) {
            //todo
        },
        /**
         * 注册
         */
        '/register': function (req, res) {
           //todo
        }        
    }
};

详细使用请看这里Express-Mapping

吐槽下Handlebars

模板引擎使用的Handlebars。Handlebars的if判断不支持type==='2'这种逻辑判断的，然而咱们的数据库里有不少字段是使用数字1,2,3,4来标识不一样状态的，碰到这种状况就得在Node端预先处理，这个是很坑爹的！碰到列表展现的嵌套循环更是坑爹了。有时候还得写这种代码：

{{#if a}}
    {{#if b}}
        {{#if c}}
            //todo
        {{/if}}
    {{/if}}
{{/if}}

真实的业务场景更是复杂，额外的处理代码老是会带来维护的负担。最近在看nunjucks模板，貌似很吊的样子！

总结

学习就是不断踩坑的过程啊！