触屏版开发总结

小俞

概述

前段时间刚刚完成公司触屏版项目,我觉得很有必要写一篇文章总结下自己的心得和踩过的坑。每次回头看看自己写的代码,都有不一样的体会,不过大致感觉都是惊人的相似:这TM写的是啥?这TM写的又是啥?

架构

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

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

前后端分离只有好处? No! 多了Node,实际上多了层请求,这个过程是需要花费时间的,不过这点性能的损耗同提高维护性来比是微不足道的,咋不纠结这个!真正来说,前后端的过度分离让每个人只关注自己的任务,等到联调的时候会发现出现很多问题,举个几个简单的例子:

撕逼1

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

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

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

来来来,放学别走!

撕逼2

交互说,点击这里,我需要duang的效果,点击那里我需要duang duang的效果,点那那里,我需要duang duang duang的效果。我一看,希望用尽量少的代码实现,同交互交流希望统一UI,保留一种效果就可以了,交互坚持!交互坚持,交涉无果,不得不多写额外的代码,然并卵!下次需求,又换交互效果!

撕逼3

不同的列表页,有着相同的HTML结构,本次相同代码不写两遍的原则,抽出了结构:

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

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

小结

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

Zepto

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

下载

直接从官网上下载了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模板,貌似很吊的样子!

总结

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

阅读 4.7k

学习笔记
自我学习总结

对技术不懈追求

8.3k 声望
361 粉丝
0 条评论

对技术不懈追求

8.3k 声望
361 粉丝
文章目录
宣传栏