6月13号做了点M站项目,多亏有薛大手子帮助,解决了不少问题,搞清楚了很多落下的知识,本来说趁着没忘早点记下来,结果一直又懒又没时间,恰好今天有点时间,赶紧记一下。
第一部分
首先是对模块化有了一定了解,commonJs使用规范:
1.module.exports表示当前模块对外输出的接口,其他模块加载引用该模块的内容,实际上就是读取module.exports的变量
2.require命令用于加载模块文件,相当于读取一个js文件,然后返回它的exports对象
eg: example.js文件 exports.name = 'tom';exports.age = 50;
同目录下的引用文件 var example = require('./example.js');
下面是ES6的输入输出规范:
// 全部导入
import swiper from './banner';
// 将整个模块当作单一对象进行导入,该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.getName())
// 导入部分,引入非 default 时,使用花括号
import {name, age} from './example'
// 导出export default
一般来说会写一个函数在里面,然后在调用的Js文件中直接调用这个函数来达到启动的目的
// 部分导出
export class App extend Component {};
第二部分
本来是ajax调取接口的方法,这里是jQuery版本的,以前直接用就好了,如今非要搞什么RMVC,分离什么的,还不是很清晰,只知道现在是把ajax又封装了一下先
fatch.js文件
fatch是另一种版本的ajax使用方式,妈的,和$.ajax不一样啊,老师为什么起个这名儿,不知道。。。。。。又一个坑啊,先往下写。
我们可以看到我在总的position.js文件中想调用别人的数据接口,直接打上了(’/代理名+后缀‘),fetch.get(),用了下这个函数,感觉倒是挺方便的。
这个例子又引进来async,await的大坑,唉,不想看不想讲。
直接学了讲一下吧,拖延症总是不好的。恰好找到一篇感觉不错
async代表异步的操作,用法是直接在函数后面加async即可
async异步函数,会返回一个promise对象,要想获取这个promise对象,我们要用then()函数调用
最后得到一个promise对象,这没什么乱用啊喂!
然后就到了await表演的时间,await关键字不能单独使用,只能结合async使用,它会等待跟在后面函数表达式的执行
我们来分析下这段代码
1、testAwait()方法中new一个Promise对象返回,promise对象中用setTimeout模拟一个异步过程,即1s后打印"testAwait"。
2、helloAsync()方法中,await testAwait(),表示将阻塞这里,等待testAwait这个异步方法执行并返回结果后,才继续下面的代码。
执行下,1s后打印了下面的日志。
到此,道友们是不是理解了await的作用,就是阻塞主函数的执行,直到后面的Promise函数返回结果。
聪明的道友可能要问,await后面只能 是Promise对象么?答案是否定的,可以是字符串,布尔值,数值以及普通函数。
执行结果:
方法没有报错,说明await后面是支持非Promise函数的,但是执行的结果是不一样的,所以await针对所跟的表达式不同,有两种处理方式:
1、对于Promise对象,await会阻塞主函数的执行,等待 Promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果,然后继续执行主函数接下来的代码。
2、对于非Promise对象,await等待函数或者直接量的返回,而不是等待其执行结果。
这里promise有两种状态,一个是resolved还有一个是rejected,真是一个坑套一个坑,人家的简述我都没看懂,算了,看了一下好像不复杂,也拿过来
我们来看下如果promise对象变为rejected,会如何处理。
从执行结果看,返回reject状态被外层的catch捕获到,然后终止了后面的执行。
但是在有些情况下,出错后是希望继续执行,而不是中断。对于这种情况可以采用tcy...catch在函数内部捕获异常。
异常被try...catch捕获后,继续执行下面的代码,没有导致中断。
关于async和await的用法,我这里基本全是学习的ES6系列教程第四篇--asyn详解 - 恰恰虎的博客 - CSDN博客,觉得讲的很好,粘过来了就。
第三部分
啊,对,薛大手子帮我解决了不少疑难杂症,我发现我更擅长写bug
3-1
在使用别人网站的图片的时候,我没有下载,直接复制链接地址拿来用了,后来就展示不出来了,不明白怎么回事。他给我指点了一下
图片的请求出现403错误:GET http://xxxxxxxxxxxx 403(Forbidden)。解决方法如下:在index.html中的head中添加<meta name="referrer" content="no-referrer" />
参考Referrer Policy 介绍 | JerryQu 的小站,说是一种引用策略,可以用来防止图片或视频被盗。它的原理是:http 协议中,如果从一个网页跳到另一个网页,http 头字段里面会带个 Referrer。图片服务器通过检测 Referrer 是否来自规定域名,来进行防盗链。如果没有设置referrer,那就可以直接绕过防盗链机制,直接使用或盗取。
下面这个兄弟又介绍了一下meta标签的具体用法,我就不赘述了,兴趣不大,直接贴上链接referrer策略和meta标签的问题 - 个人文章 - SegmentFault 思否,以后想看就去看看
3-2
然后是使用art-template模板引擎(必须吐槽一下,以前自己封装的模板用得好好的,又要换别人的用,鼓捣半天)
先到官网下载下来Js文件,再引用一下
然后是写一个模板
为什么用这么大张图呢,因为里面还有if-else的用法,就直接拿来了,默认用法是
{{each val}}
变量用{{$value['XXX']}}表示
{{/each}}
再进入position.js中设定,其中设定res为数据的路径,然后用template.render(
)对这个模板所在的html页面(图中已经用positionListTpl进行引入)进行渲染,最后把这个渲染后的内容renderedPositionListTpl插入ID为All的div中
3.3
在Jquery中有一个eq(),从没用过,很不熟悉,薛大手子给我用了一下,我发现很好用,也记下来
eq() 方法返回带有被选元素的指定索引号的元素。
索引号从 0 开头,所以第一个元素的索引号是 0(不是 1)。
这个标签能解决很多问题,必须mark下来