前端笔记（201902-201903）

1、响应式布局

参考：https://www.ui.cn/detail/351448.html

　　简而言之，就是一个网站能够兼容多个设备终端，它可以自动识别设备尺寸并相应调整布局，而不是为每个终端做一个特定的版本。随着越来越多智能移动设备的诞生，小到智能手表，大到4k显示屏，“主流设备”的概念正在慢慢消失，就算是PC和MAC我们也不能确定用户的浏览窗口有多大（有调研只有一半的用户会全屏显示浏览器），为了给不同终端的用户提供更加舒适的界面和用户体验，响应式设计应时而生。

　　对页面进行响应式设计，需要对相同的内容进行不同宽度的布局设计。首先要根据目标用户和使用环境等定位考虑侧重的是桌面端还是移动端：桌面优先（从桌面端开始向下设计）；移动优先（从移动端开始向上设计）。因为需要适应不同的尺寸，对样式上有较大的局限性，在各种因素的影响下让页面达不到最佳的效果，所以需要根据用户群和使用环境来考虑侧重哪种设备，尽量为最中心的用户提供最优的体验。无论基于哪种方向开始设计，要适配所有的设备，页面模块不可避免的需要随着设备尺寸做相应的改变。当页面宽度发生变化，超过了制定范围的临界点，页面样式就会发生变化，这个范围我们叫做断点区间。Bootstrap是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

　　响应式布局样式常见的有5种：1.挤压-拉伸、2.上下-左右、3.删减-增加、4.变换位置、5.隐藏-展开

• 挤压-拉伸：页面中的内容随着屏幕的变化拉伸挤压，适用于文本内容、纯色背景、按钮、填选框等伸缩不会发生变形的元素。
• 上下-左右：模块内容从左右排版变为上下排版，两栏、三栏变为一栏，适用于表单表格、图文列表、图片列表、主内容+右侧推荐等所有左右排版的组合。
• 删减-增加：移动端不同于桌面端网页，移动端可视区域小，而且使用环境可能在公交、地铁等无法专心操作的环境里，所以应当删减掉不重要的内容，保留主线任务内容，及足够用户分析判断的内容即可。
• 变换位置：响应式不是简单的等比缩放，要根据内容重要性在保证易用性基础上灵活布局。
• 隐藏-展开：移动端当内容过多时可以选择收起，以弹框或者单独一个页面显示。适用于分类、导航等内容。

总结：

　　很多时候单一的布局方式无法达到最好的效果，需要根据实际的情况，搭配灵活使用；适配移动端时，根据页面的功能主次做减法，不要为了保留所有内容让页面冗长，可读性差，认知难度增大；移动端是没有hover效果的，要考虑移动端的操作习惯（比如：桌面端hover内容就能出现的说明，移动端可能需要提醒+弹出，或者直接显示出来）；设计稿上的字体与用户实际看到的字体是有差别的，特别是适配移动端（使用电脑、电视与手机之间的距离不一样、分辨率也不一样，字体大小需求也会不一样。比如虽然电视屏幕大，但是距离较远，桌面端的字体大小在电视上可读性会很差；电脑上最小的字体是12px，但是在移动端时12px非常小）。

　　无论从手机端开始设计，还是电脑端，在做的过程中，要考虑发生变化以后页面整体的样式。相同设备的交互逻辑保持统一，比如平板与手机（手势操作），宽屏显示器与lapto（鼠标操作、触屏操作）。而且要考虑这两种不同的使用环境以及移动端和pc端用户的使用习惯。

2、图片上传（兼容ie8和ie9）

参考：https://www.jianshu.com/p/b2ab1eb2452e

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

1）如果不考虑ie9兼容性，可以通过ajax和FormData上传图片。FormData 是 XMLHttpRequest Level 2 新增的接口，低于IE10 的IE浏览器不支持该接口，也不支持html5表单上传控件Files API（e.target.files为undefined）。

 2）为了兼容低于IE10 的IE浏览器，可通过form表单形式实现图片上传。

<form id="file-form" method="post" action="xxx" enctype="multipart/form-data">
<label class="upload-select">
    <i class="add-icon"></i>
    <p class="upload-text">点击添加图片</p>
    <input type="file" accept=".jpg, .gif, .png" class="input-file" name="Filedata">
</label>
</form>

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

$(‘.input-file‘).change(function() {
    $(‘#file-form‘).submit(); // 触发提交表单 submit 事件
});
$(‘#file-form‘).submit(function() { // 将函数绑定到 submit 事件
    $(‘#file-form‘).ajaxSubmit(function(data) { 
    });
    return false; // 阻止页面跳转
});

ajaxSubmit方法是jQuery的一个插件jquery.form.js里面的方法，所以使用此方法需要先引入这个插件，它是一个form插件，支持ajax表单提交和ajax文件上传。通常情况下，我们直接通过form提交的话， 提交后当前页面跳转到form的action所指向的页面。然而，很多时候我们比不希望提交表单后页面跳转，那么，我们就可以使用ajaxSubmit来提交数据。

此时，如果服务器返回的是json对象，在ie8和ie9下并不能拿到服务器返回的数据，而是直接提示下载或打开（图片上传成功），如下图所示

解决方案：服务端返回json字符串，前台转成json对象，然后进行接下来的处理，展示上传的图片等。

$(‘#file-form‘).submit(function() {
    $(this).ajaxSubmit({
        success: function(data) {
            data = JSON.parse(data);
            console.log(data);
        },
        error: function() {
            globalFn.showToast({title: ‘图片上传失败‘});
        }
    });
    return false;
});

3、flex:1;

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

CSS属性flex规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置flex-grow, flex-shrink与flex-basis。

设置min-width，可避免flex 元素在默认宽度之和大于容器的时候发生收缩（CSS flex-shrink 属性）。

4、前端复制到剪切板 

$(‘body‘).on(‘click‘, ‘.copy-btn‘, function () {
    $(this).siblings(‘.code-input‘)[0].select(); // 选中文本
    document.execCommand("copy"); // 拷贝当前选中内容到剪贴板
    weui.toast(‘复制成功‘);
});

此方式兼容ie8，移动端安卓也支持，但是iOS不支持。

 解决方案：使用插件clipboard.js

参考：https://blog.csdn.net/sinat_34351851/article/details/82627198

https://clipboardjs.com/

1）页面引入clipboard.min.js（我使用的版本是v2.0.4）

2）html

可以从input、textarea、div等元素中获取目标内容，data-clipboard-target指向目标节点（被复制/剪切，匹配选择器）。data-clipboard-action可以使用copy和cut，使用cut则点击按钮后，内容里的值被剪切。如果没有指定，则默认值是copy。cut只对input和textarea起作用。

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut to clipboard</button>

3）js

var clipboard = new ClipboardJS(‘.copy-btn‘);
clipboard.on(‘success‘, function(e) { // 成功回调
    weui.toast(‘复制成功‘);
});
clipboard.on(‘error‘, function(e) { // 失败回调
　  console.log(e); 
});

5、weui

调出对话框：

weui.confirm(‘请使用购买商品时填写的手机号进行登录然后查看卡密详情，重新登录？‘, {
    title: ‘提示‘,
    buttons: [{
        label: ‘取消‘,
        type: ‘default‘,
        onClick: function(){}
    }, {
        label: ‘确定‘,
        type: ‘primary‘,
        onClick: function(){ 
            location.href = ‘/h5/login.html‘;
        }
    }]
});

调整对话框样式：

.weui-dialog {
    width: 85%;
    max-width: 500px;
}
.weui-dialog__title, .weui-dialog__btn {
    font-size: 24px !important;
}
.weui-dialog__bd {
    font-size: 22px !important;
}

浏览器渲染：

ios：

安卓：

6、document.referrer

返回跳转或打开到当前页面的那个页面的URI。如果用户直接打开了这个页面（不是通过页面跳转，而是通过地址栏或者书签等打开的），则该属性为空字符串。

返回上一页，可以使用history.go(-1)或者history.back()【使用这两种方式返回上一个页面在移动端不会刷新页面？】

解决方案：location.href = document.referrer（返回并刷新上一个页面）

7、Safari浏览器cookie问题

参考：https://blog.csdn.net/u011627980/article/details/79643428

对于前后端分离的项目或者单点登录的系统后台需要做session会话校验或者cookie跨域存储，Safari浏览器可能会遇到无法存储cookie，需要关闭浏览器的“阻止跨（网）站跟踪”开关。

8、单点登录

单点登录（Single Sign On），简称为 SSO，是目前比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

很早期的公司，一家公司可能只有一个Server，慢慢的Server开始变多了。每个Server都要进行注册登录，退出的时候又要一个个退出。用户体验很不好！你可以想象一下，上豆瓣 要登录豆瓣FM、豆瓣读书、豆瓣电影、豆瓣日记......真的会让人崩溃的。我们想要另一种登录体验：一家企业下的服务只要一次注册，登录的时候只要一次登录，退出的时候只要一次退出。

用户体验（User Experience，简称UE/UX）

　1）步骤型导引：将复杂的任务分解成有序的任务操作流，每个简化后的任务都可以快速完成，以帮助用户顺利完成整体任务。

　　综合考虑用户的易用性和情感化因素，过多的信息难以让用户聚焦，同时产生抵触情绪，同时在校验上也承载了极大的分险，因为数据越多，修改校验后的错误信息的难度就越大。面对这种交互信息繁多的情况，分步分解任务后，用户只需要按着机器预置好的一系列步骤，每完成一步对于用户情绪上会有成就感加成，同时聚焦每一页关键任务，分步校验，避免用户挫败感，高效完成表单的填写。

在上图中，金蝶云苍穹产品里的出差类应用，原来的长单据填写被拆解成三步填写，降低决策成本与用户风险，用户只需要关注当前步骤的结果。该方法同时适用于PC端、移动端等各终端。对于移动端而言，需要时刻注意在录入表单的场景中，键盘弹起后剩余的界面空间，此时保证信息出现在界面上方，也是易用性的细节保证。

注：https://segmentfault.com/a/1190000016271004

前端笔记（201902-201903）

原文：https://www.cnblogs.com/colorful-coco/p/10366297.html