【记录】前端技能升级中坑集合

【1】文字换行自动隐藏或用省略号表示

网页在设备适配的时候，会出现由于文字过多而排版出现问题的情况。

解决方法：
超出行宽的文字用省略号表示，或者直接去掉不用省略号代替。

overflow: hidden; 
white-space: nowrap;
text-overflow: ellipsis;
max-width: 50%;

说明：
overflow: hidden
overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。hidden 表示内容会被修剪，并且剪掉的内容是不可见的。
white-space: nowrap
规定文本不进行换行。white-space 属性设置如何处理元素内的空白。nowrap 表示文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
text-overflow: ellipsis
text-overflow 属性规定当文本溢出包含元素时发生的事情。ellipsis 表示显示省略符号来代表被修剪的文本。

实现效果：

【2】点击图片或者图片名字转跳到新页面

解决办法：
用a标签，但默认a标签下的文字是有颜色和下划线。这时只要给a标签加个style就好了。

<a style="text-decoration:none;color:#A6A6A6;font-size:16px" href="../article.html">
	<img class="image"/>
	<p>我是模板</p>
</a>

【3】js除法

js中的/是数学意义上的除法，不是c语言中的向下取整。js中的%和c语言中的%意义相同，都是模运算。
在js中，
Math.ceil(x)是向上取整。
Math.floor(x)是向下取整。
Math.round(x)是四舍五入。

【4】jquery获取当前网页url并截取id

var url = " http://www.xxx.com/admin/?name=tian&id=1";//首先获取到你的URL地址;
var ary =  url .split("&");//用“&”将URL分割成2部分每部分都有你需要的东西;
var url1 = ary[1];//获取到URL的另一部分"id=1";
var id = url1.split("=")[1];//获取到id的值 1

【5】window.localStorage类型处理

window.localStorage只能存key value且value值为string字符串。在面对套娃式的对象的时候会比较棘手。

解决方法：
1.将object对象转换成string存储在window.localStorage。
2.在读取时将window.localStorage下的该字符串转化成json格式。
3.利用JSON.parse解析成object对象。

【6】dom添加元素

在dom上添加元素时最好新建一个虚拟的dom结点，再在虚拟的dom结点上append，将虚拟的dom结点挂载到dom树上。

创建一个 documentFragment 节点:

var d = document.createDocumentFragment();
d.appendChild(document.getElementsByTagName("LI")[0]);
d.childNodes[0].childNodes[0].nodeValue="Milk";
document.getElementsByTagName("UL")[0].appendChild(d);

如果直接在提前设定的dom结点上添加元素，每添加一个元素就会造成浏览器的重排（reflow）。对于加载元素较多的网页来说，容易造成浏览器性能消耗。

【7】将数据的英文键值转换成相对应中文

需要在页面上显示中文汉字，可以用键值映射的方法实现。

 var nameStatusJson = {
	'WZRY'  : '王者荣耀',
	'JDQS'  : '绝地求生',
	'CYHX'  : '穿越火线',
	'CQSJ'  : '传奇世界',	
    'HDL'  : '魂斗罗'
};
blabla......
 	{
    	field : 'game_name',
		title : '游戏名称',
		width : 20,
		align : 'center',
		formatter : function(value, rec, index) {
				return nameStatusJson[value];
			}
	}

ps：如果是在window.localStorage中的话可以考虑在键值后追加上对应的中文，之间用某个符号间隔开，再用split分割。

【8】2D转换transform

• rotate(x)

顺时针旋转x度
transform: rotate(9deg);
-ms-transform: rotate(9deg); //Internet Explorer
-moz-transform: rotate(9deg); //Firefox
-webkit-transform: rotate(9deg); //Safari and Chrome
-o-transform: rotate(9deg); //Opera

• translate(x,y)

元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标），从左侧移动x，从顶端移动y。
transform: translate(50px, 100px);

• scale(x, y)

把宽度转换为原始尺寸的x倍，把高度转换为原始高度的y倍。
transform: scale(2, 4);

• skew(x, y)

围绕 X 轴把元素翻转x度，围绕 Y 轴翻转y度。
transform: skew(20deg,40deg);

• matrix(a, b, c, d, e, f)

x’ = ax + cy + e
y’ = bx + dy + f

• 平移
  假定初始值为transforms:matrix(1,0,0,1,0,0);
  要让元素往x轴的正方形平移10，在y轴方向上不动，反映到方程式里：
  x’=ax+cy+e —（x’=ax+cy+e+10)
  y’=bx+dy+f — （不变）
  transform: matrix(1, 0, 0, 1, 10, 0);
• 缩放
  x放大2倍，y不变：
  x’=ax+cy+e —（x’=2ax+cy+e)
  y’=bx+dy+f — (不变)
  transform: matrix(2, 0, 0, 1, 0, 0);
• 旋转
  transform：matrix(cosθ, -sinθ, sinθ, cosθ, 0, 0);

【9】架构

从 传统后台MVC 向 REST API + 前端 MV* 迁移。

1. REST API
   REST(Representational State Transfer)

如果我们想要获取某个电商网站的某个商品，输入http://localhost:3000/products/123，就可以看到id为123的商品页面，但这个结果是HTML页面，它同时混合包含了Product的数据和Product的展示两个部分。对于用户来说，阅读起来没有问题，但是，如果机器读取，就很难从HTML中解析出Product的数据。
如果一个URL返回的不是HTML，而是机器能直接解析的数据，这个URL就可以看成是一个Web API。比如，读取http://localhost:3000/api/products/123，如果能直接返回Product的数据，那么机器就可以直接读取。
REST就是一种设计API的模式。最常用的数据格式是JSON。由于JSON能直接被JavaScript读取，所以，以JSON格式编写的REST风格的API具有简单、易读、易用的特点。
编写API有什么好处呢？由于API就是把Web App的功能全部封装了，所以，通过API操作数据，可以极大地把前端和后端的代码隔离，使得后端代码易于测试，前端代码编写更简单。
此外，如果我们把前端页面看作是一种用于展示的客户端，那么API就是为客户端提供数据、操作数据的接口。这种设计可以获得极高的扩展性。例如，当用户需要在手机上购买商品时，只需要开发针对iOS和Android的两个客户端，通过客户端访问API，就可以完成通过浏览器页面提供的功能，而后端代码基本无需改动。

2. MV*: MVC、MVP、MVVM

• MVC
  Model数据层
  View视图层
  Controller控制层
  

• MVP
  Model数据层
  View视图层
  Presenter逻辑处理层
  MVP 里的M 其实和MVC里的M是一个，都是封装了核心数据、逻辑和功能的计算关系的模型，而V是视图（窗体），P就是封装了窗体中的所有操作、响应用户的输入输出、事件等，与MVC里的C差不多，区别是MVC是系统级架构的，而MVP是用在某个特定页面上的，也就是说MVP的灵活性要远远大于MVC，实现起来也极为简单。

• MVVM
  Model数据层
  View视图层
  ViewModel通讯层：为View量身定制的model，ViewModel包含所有由UI特定的接口和属性，并由一个 ViewModel 的视图的绑定属性，并可获得二者之间的松散耦合，所以需要在ViewModel 直接更新视图中编写相应代码。
  

【10】钉钉小程序免登

login() {
let _this = this
dd.showLoading();
// 获取免登授权码
dd.getAuthCode({
success: res => {
_this.setData({
authCode: res.authCode
})
}
})
// 根据appkey和appSecret获取access_token
dd.httpRequest({
url: ‘https://oapi.dingtalk.com/gettoken?appkey=【】&appsecret=【】’,
success: res => {
_this.setData({
access_token: res.data.access_token
})
dd.httpRequest({
url: ‘https://oapi.dingtalk.com/user/getuserinfo?access_token=’ + _this.data.access_token + ‘&code=’ + _this.data.authCode,
success: res => {
_this.setData({
userid: res.data.userid
})
// 获取用户详情
dd.httpRequest({
url: ‘https://oapi.dingtalk.com/user/get?access_token=’ + _this.data.access_token + ‘&userid=’ + _this.data.userid,
success:res => {
_this.setData({
unionid: res.data.unionid,
hideList: false
})
console.log(res.data)
console.log(_this.data)
}
})
},
fail: function(err) {
console.log(err)
dd.alert({content: JSON.stringify(res)})
},
complete: (res) => {
dd.hideLoading()
}
})
},
fail: function(err) {
console.log(err)
dd.alert({content: JSON.stringify(res)})
}