吃货卡总结 (上)
近一个月，前端方面独自一人配合后台对接接口完成了整个项目。可以说这个项目是我首个独立全部完成，其中包括原型demo的完成、中间商家页面的修改UI、产品支付核销功能的添加、以下是这段时候遇见的问题和解决方案的总结（由于时间和内容问题本次总结分阶段进行）：
1. H5禁止页面选择复制问题
代码如下：
* { -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
这样写对于 -webkit-user-select: none; 存在问题是：在iPhone手机上会出现 input输入框 无法实现点击输入功能。（安卓可以实现）
解决方案：
*:not(input, textarea) {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
知识点衍生：CSS3: user-select
user-select是css3新增的一个属性,用来指定文本的可选择性.目前主流的浏览器都支持该属性,但是要加上各自的前缀.
-webkit-user-select: none; /* Chrome all / Safari all /opera15+*/
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none;
除了”none”还支持以下值:
auto——默认值，用户可以选中元素中的内容
text——用户可以选择元素中的文本
element——文本可选，但仅限元素的边界内(只有IE和FF支持)
all——在编辑器内，如果双击或上下文点击发生在子元素上，该值的最高级祖先元素将被选中。
2. CSS3 的渐进色变换用法
代码如下：
.fruit {
width: 65px;
height: 20px;
background: -webkit-linear-gradient(right, #7FFFD4, #43CD80);
/* Chrome、 Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #7FFFD4, #43CD80);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #7FFFD4, #43CD80);
/* Firefox 3.6 - 15 */
background: linear-gradient(to right, #2ee8b9, #43CD80);
/* 标准的语法（必须放在最后） */
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
position: relative;
left: 3%;
top: 15px;
}
知识点衍生：CSS3 Gradient
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。上面主要是线变，如果是径变类似一个圆往外变色。
语法：
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
参数：
其共有三个参数，第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，那么right就是从右到左了。
如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。（第一个参数 可以加入角度参数。）
运用好渐变色就可以做出很多炫酷 高亮的背景颜色了。
3. CSS3 对应的字体抗锯齿方法
font-smoothing是非标准的css渲染规则，由于不同操作系统对字体渲染不同，不同浏览器也有自己对样式的一套解释规则，所以这个css样式至今也没有加入web标准。
这个样式的主要功能是对字体的锯齿进行调整。
-webkit-font-smoothing 是webkit在自己的渲染引擎中增加的对字体抗锯齿的调整。这个调整在ios中表现比较明显，在windows中表现的不是很明显。
知识点衍生：CSS3 Gradient
body { -webkit-font-smoothing: antialiased;
/*chrome、safari*/
-moz-osx-font-smoothing: grayscale;
/*firefox*/
font-family: "微软雅黑";
}
CSS3里面加入了一个“-webkit-font-smoothing”属性。
这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。
加上之后就顿时感觉页面小清晰了。 淘宝也在用哦！
它有三个属性：
none ------ 对低像素的文本比较好
subpixel-antialiased ------默认值
antialiased ------抗锯齿很好
4. 关于标签选项卡对应展示数据写法
jQuery写法较为简单如下代码：
$(function() {
$li.click(function() {
//加上颜色样式
$(this).addClass("selected")
.siblings() //排除自身的同辈元素
.removeClass("selected");
var index = $li.index(this); // 添加索引 好对应显示DIV内容
$(".kk")
.eq(index).show()
.siblings().hide(); //对应 控制的div 对应索引进行显示出来。
});
});
主要针对==原生JavaScript==写法进行一个原型封装：
面向过程 代码如下：
<div id="div1">
<input type="button" name="" class="active" value="教育" />
<input type="button" name="" value="财经" />
<input type="button" name="" value="体育" />
<div style="display: block;">这是教育内容板块</div>
<div>这是财经</div>
<div>这是体育的</div>
</div>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById('div1');
var aBin = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');
var i = 0;
for(i = 0; i<aBin.length;i++) {
aBin[i].index = i;
aBin[i].onclick = function() {
for(i=0;i<aBin.length;i++) {
aBin[i].className = '';
aDiv[i].style.display = 'none';
}
// 先全部去掉样式 再独自添加样式。
this.className = 'active';
aDiv[this.index].style.display = 'block';
};
}
};
</script>
面向对象封装代码如下：
<div id="div1">
<input type="button" name="" class="active" value="教育" />
<input type="button" name="" value="财经" />
<input type="button" name="" value="色情" />
<div style="display: block;">这是教育内容板块</div>
<div>这是财经</div>
<div>这是色情的</div>
</div>
<script type="text/javascript">
/*
*改写：
*1.前提：所有东西都在onload里
*2.改写：不能有函数嵌套， 可以全局变量
*3.
*/
function TabSwitch(id) {
var oDiv = document.getElementById('div1');
this.aBin = oDiv.getElementsByTagName('input');
this.aDiv = oDiv.getElementsByTagName('div');
var _this = this;
var i = 0;
for(i = 0; i<this.aBin.length;i++) {
this.aBin[i].index = i;
this.aBin[i].onclick = function() {
_this.tab(this);
};
}
}
TabSwitch.prototype.tab = function (oBtn) {
for(i=0;i<this.aBin.length;i++) {
this.aBin[i].className = '';
this.aDiv[i].style.display = 'none';
}
oBtn.className = 'active';
this.aDiv[oBtn.index].style.display = 'block';
};
window.onload=function () {
var oTab=new TabSwitch('div1');
};
总结：
- 这段时间意识到原生JS 的重要性于是 自己在加强 原生JavaScript的基础----包括 原型、继承、封装代码等
- 也在学习Vue js 前端框架、Node js基础、npm运用。意识到自己之前所接触的开发模式和技术层面，还是很基础的东西。
- 觉得目前 前端基于Node 工程化开发 和 模块化开发 自动化（webpack）形式是未来的趋势（现在也已经普遍开来，时代在进步，技术也在不停的进阶）
- 最后 选择走前端这条路 就不应该把自己框死，我们要有对市面上新技术有敏锐的嗅觉，把握 web前端时代 的开发趋势。
网友评论