前端笔记（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="multipart/form-data"的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form- data，才能完整的传递文件数据。

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/

 

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

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

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

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

标签：flex,form,用户,笔记,表单,201902,201903,移动,页面
来源： https://www.cnblogs.com/colorful-coco/p/10366297.html