2019-06-15

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

再进入position.js中设定,其中设定res为数据的路径,然后用template.render(

)对这个模板所在的html页面(图中已经用positionListTpl进行引入)进行渲染,最后把这个渲染后的内容renderedPositionListTpl插入ID为All的div中

3.3

在Jquery中有一个eq(),从没用过,很不熟悉,薛大手子给我用了一下,我发现很好用,也记下来

eq() 方法返回带有被选元素的指定索引号的元素。

索引号从 0 开头,所以第一个元素的索引号是 0(不是 1)。

这个标签能解决很多问题,必须mark下来

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容