legend3---26、懒加载 或者 复杂资源点击的时候再请求

legend3---26、懒加载 或者 复杂资源点击的时候再请求

一、总结

一句话总结:

懒加载:无论是组件还是静态资源都可以懒加载,这样对用户和服务器都非常有帮助
复杂资源点击的时候再请求:这个原理和好处和懒加载一样,比如一些要经过复杂计算的资源

1、laravel将数据库查询出来的集合数据转化为数组?

$lessons=$lessons->toArray();

2、laravel如何格式化分页数据?

getCollection()方法可以从分页数据中获取真实的数据(比如分页中的课程数据),setCollection()方法可以将真实数据设置进分页数据,collect()方法可以将数组数据转化为集合数据
//步骤五:给课程数据增加点赞和收藏
//1、获取分页数据中的数据集合
$real_lessons = $lessons->getCollection();
//2、将数据集合转化为数组
$real_lessons=$real_lessons->toArray();
//dd($real_lessons);
//3、进行数据数组的操作
$real_lessons=AppModelHomeAddDataLesson::addLikeAndCollected_lessonList($real_lessons);
//4、将数组数据转化为集合数据,并且设置到分页数据里面
$lessons->setCollection(collect($real_lessons));

3、laravel中如何将数组数据和集合数据互相转换(比如从数据库中取的数据默认为集合数据)?

集合数据=>数组数据:toArray()方法:$real_lessons=$real_lessons->toArray();
数组数据=>集合数据:collect()方法:collect($real_lessons)

4、oninput 事件(函数节流中提到)?

oninput 事件 在用户输入时触发。该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

5、oninput事件(函数节流中提到) 和 onchange事件的区别?

oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。

oninput事件类似于 onchange事件。不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

6、一个网页,200行的新闻,300条评论,评论都要显示,怎么优化?

可以拿到新闻数据之后,再去请求服务器来获取评论数据,这样用户体验好一点

7、base64转png或者jpg时候,Data URL scheme 支持的类型有哪些?

常见的图片类型都支持,比如gif、png、jpeg等等,也就是可以把base64格式的数据转换为这些类型
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/JavaScript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

8、如何将base64图片转换为jpg图片?

和Data URL scheme相关,获取base64数据的时候选择jpeg方式:var base64 = cas.toDataURL('image/jpeg'); // 转换为base64
var cas = $('#image_clip').cropper('getCroppedCanvas', {
    width : 150,
    height : 150
});// 获取被裁剪后的canvas
var base64 = cas.toDataURL('image/jpeg'); // 转换为base64
var data = encodeURIComponent(base64);//作为URI编码

二、懒加载 或者 复杂资源点击的时候再请求

博客对应课程的视频位置:

 
原文地址:https://www.cnblogs.com/Renyi-Fan/p/12552278.html