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=\App\Model\Home\AddData\Lesson::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编码

 

 

 

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

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