M端总结

Posted 追梦-dream

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了M端总结相关的知识,希望对你有一定的参考价值。

最近在项目开发过程中涉及到了移动端,现在对此进行总结。

在此次M端的开发过程中,遇到了许多问题,在此进行一次总结,希望大家在以后的开发过程
中能尽量规避类似的问题,提高开发效率和代码质量。
一、布局
1.移动端开头
<meta name="viewport" content="width=device-width, initial-scale=1,
minimum-scale=1.0, maximum-scale=1.0"/>
一般在写移动端时,会在head标签内添加上面这个meta标签,它的作用在于给手机端建立
一个viewport层,这样才能更好的去展现页面效果。比如有的手机分辨率达到了
1920*1080,这种高分辨率一般在电脑大屏中出现,那么手机那么小的手机,为什么能达到
1920*1080这么高的分辨率呢?因为他的dpi或ppi高。
注释:dpid:ots per inch,最初用于衡量打印物上每英寸的点数密度,就是打印机可以在一
英寸内打多少个点。当dpi的概念用在计算机屏幕上时,就称之为ppi。ppi和dpi是同一个概
念,android比较喜欢使用dpi,ios比较喜欢使用ppi。
1.单位
dom布局单位的问题,移动端的布局与PC端的布局有所差别,在PC端我们习惯于用px设置
固定宽高的值,而移动端的重点是自适应,所以在许多地方采用的是设置百分比或者以rem
为单位来设置宽高。 宽度一般设置百分比,高度设置rem。
一定要区分清楚什么情况下使用固定大小,什么情况下使用自适应大小。文字类基本都使用
固定大小,图片及背景图片类可酌情考虑自适应大小,具体情况请结合实际,不清楚的地方
可先与同事沟通,或者与产品沟通,务必做到了解需求后再写代码。
当采用rem作为单位时,如果是sublime text编辑器,可以先安装一个cssrem插件,方便自
动对rem单位进行换算。
2.弹性布局
在移动端里比较常见的布局有弹性布局,也就是display:box和boxflex?利用这两个属性可以
较方便的分配一行内的子元素;简单的理解就是能够按等分划分元素。
例如:
2016/3/29 M端总结  马克飞象  专为印象笔记打造的Markdown编辑器
https://maxiang.io/# 2/6
<ul style="display:box">
<li style="box-flex:1">1</li>
<li style="box-flex:2">2</li>
<li style="box-flex:1">1</li>
</ul>
结合上面的代码,我们可以这样理解,当把ul设置为弹性盒子时,则ul的三个子元素li都会被
分配各自的比重,我们可以把ul当成单位1,并被划分为了四等分,其中第一个和最后一个li
各占四分之一,中间的li占二分之一。
display:box兼容写法
display: -webkit-box;
display: -moz-box;
display: -o-box;
display: -ms-flexbox;
display: flex;
display:box兼容写法
-moz-box-flex: 1;
-webkit-box-flex: 1;
-o-box-flex: 1;
-ms-flex: 1;
flex: 1;
3.boxsizing布局
boxsizing布局比较适合用在自适应场景的开发。比较常见的例如:
这种情况下,把边框长度算入盒模型的宽度中是比较方便的。
4.css3属性
移动端对css3的支持非常给力,除了部分属性需要添加前缀。而且据说移动端使用css3的性
能比css2要高,所以大家优先使用css3属性,同时css3用起来有多方便也就不需要我说了。

二、js代码
技术选型:zepto.js+swiper.js+echarts.js+common.js
1.zepto.js
2016/3/29 M端总结  马克飞象  专为印象笔记打造的Markdown编辑器
https://maxiang.io/# 4/6
Zepto是一个轻量级的针对现代高级浏览器的javascript库, 它与jquery有着类似的api。 如
果你会用jquery,那么你也会用zepto。
正如zepto自己所说的那样,它只是个轻量级的js库,所以我们常用的一些jq方法它可能没有
提供,尤其是animate动画,当然,这个并不是特别要紧,大部分的动画都可以直接用css3
动画来实现,少部分有需求的动画,可以用原生js自行定义。
2.swiper.js
swiper是一款专门针对移动端所开发的开源触摸滑动插件,能够满足移动端大部分滑动特效
需求。而且swiper提供了基于zepto开发的插件,更加轻量。swiper的使用也比较方便,基础
引用方式如下:
var swiper = new Swiper(".swiper-container", {
slidesPerView: 3,
setWrapperSize :true
});
swiper常用API:
(1) slidesPerView 设置一个屏幕内元素显示的个数
(2) setWrapperSize 设置swiper自动计算对象的总长度
(3) direction 设置横向或者纵向显示
(4) pagination 设置小图标
3.echarts.js 3.0
echarts从3.0版本开始支持移动端图表。
4.common.js
简单列举common.js中的一些方法:
(1) common.backtop() 返回顶部按钮效果
(2) common.divselect(divselectid,inputselectid,height) 模拟下拉表单
(3) common.touchList(content,num) 调用swiper,左右滑动效果
(4) common.ajax(method, type, params, callback) 异步请求的通用方法
(5) common.getDate(data) 根据时间戳(秒)生成时间 1436412956699 > 20150709 12:00
5.Js代码规范
每写一个新的js方法,都要写好注释,形式如下图:
2016/3/29 M端总结  马克飞象  专为印象笔记打造的Markdown编辑器
https://maxiang.io/# 5/6
每一个事件,最好也简单的写上注释,如下图:
6.如何异步获取并渲染数据
var example = function(){
//定义了一个对象
}
(1)方法入口,例如:
2016/3/29 M端总结  马克飞象  专为印象笔记打造的Markdown编辑器
https://maxiang.io/# 6/6
house:function(){
var n = 1,
nickname,
typeid;
nickname = $(".nickname").text();
typeid = $(".typeid").val();
//调用发送异步请求的方法
example.sendHouse();
//除了调用请求方法,也可以在这里写一些相关的操作事件,例如点击加载更多
$(".btn-more").click(function(){
n++;
example.sendHouse();
})
}
(2)发送异步请求,例如:
sendHouse:function(nickname,typeid,pageIndex){
//调用通用异步请求方法
common.ajax("Image.s.List","post",{buildnickname:nickname||"bl
sd",typeid: Typeid||"0",PageSize: pagesize||"5",Pageindex: pageinde
x||"0",Requrl:"http://192.168.100.101:8088"},function(res,success){
if(example.loadHouseInfo && res[success]){
example.loadHouseInfo(res[success]);
}else{
console.log("没有提供函数调用...");
}
})
}

 

加群 474471759交流

以上是关于M端总结的主要内容,如果未能解决你的问题,请参考以下文章

VMware(威睿)后端开发笔试题总结

Spring MVC前后端数据交互总结

移动端开发来个总结吧

单调队列总结

C#常见问题总结

服务端测试总结