如何更好的编写js,node前端模板引擎Jade之标签的基本写法

 一、JS事件

2018年已经到了5月份,node的4.x版本也已经停止了维护我司的某个服务也已经切到了8.x,目前正在做koa2.x的迁移将之前的generator全部替换为async但是,在替换的过程中,发现一些滥用async导致的时间上的浪费
所以来谈一下,如何优化async代码,更充分的利用异步事件流 杜绝滥用async

1、文档声明

(一)JS事件分类

首先,你需要了解Promise

我们在开始写一个 html 页面的时候,首先要写上 DOCTYPE
文档声明的,现在通常情况下我们都是采用 HTML5 的文档声明方式,那么在 jade
里面我们应该怎么写呢?

1.鼠标事件:

Promise是使用async/await的基础,所以你一定要先了解Promise是做什么的

在 jade 里面编写文档声明有2种方式:

click/dbclick/mouseover/mouseout

Promise是帮助解决回调地狱的一个好东西,能够让异步流程变得更清晰。

  1. 我们可以直接在 jade 文件里面写 doctype html 即可
  2. jade 为我们提供了一个简单的写法,(不过好像 jade
    在升级之后的新版本中不推荐使用此方法了 -_-||| )

2.HTML事件:

 一个简单的Error-first-callback转换为Promise的例子:

当然,jade 还默认支持其他类型的文档声明,只需要使用 doctype
跟上下面的选项即可。jade 默认支持的有:

 onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll

const fs = require('fs')
function readFile (fileName) {
 return new Promise((resolve, reject) => {
  fs.readFile(fileName, (err, data) => {
   if (err) reject(err)

   resolve(data)
  })
 })
}
readFile('test.log').then(data => {
 console.log('get data')
}, err => {
 console.error(err)
})
var doctypes = exports.doctypes = {
 '5': '<!DOCTYPE html>',
 'xml': '<?xml version="1.0" encoding="utf-8" ?>',
 'default': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
 'transitional': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
 'strict': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',
 'frameset': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',
 '1.1': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">',
 'basic': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">',
 'mobile': '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">'
};

3.键盘事件:

我们调用函数返回一个Promise的实例,在实例化的过程中进行文件的读取,当文件读取的回调触发式,进行Promise状态的变更,resolved或者rejected状态的变更我们使用then来监听,第一个回调为resolve的处理,第二个回调为reject的处理。

doctype 对大小写是不敏感的, 所以下面两个是一样的效果:

 keydown:键盘按下时触发
 keypress:键盘按下并抬起的瞬间触发。
 keyup:键盘抬起触发

async与Promise的关系

doctype Default
doctype default

[注意事项]

async函数相当于一个简写的返回Promise实例的函数,效果如下:

例如:如果我们要想写 XHTML 1.0 Strict 文档声明,则可以这样写:

①执行顺序:keydown keypress keyup
②keypress只能捕获数字,字母,符号键,而不能捕获功能键。
③长按时循环执行keydown–keypress
④有keydown,并不一定有keyup,当长按时焦点失去,将不再触发keyup
⑤keypress区分大小写,keydown,kewup不区分。

function getNumber () {
 return new Promise((resolve, reject) => {
  resolve(1)
 })
}
// =>
async function getNumber () {
 return 1
}
doctype strict

4.事件因子:

两者在使用上方式上完全一样,都可以在调用getNumber函数后使用then进行监听返回值。
以及与async对应的await语法的使用方式:

编译结果如下:

当触发一个事件时,该事件将向事件所调用的函数中,默认传入一个参数,

getNumber().then(data => {
 // got data
})
// =>
let data = await getNumber()

复制代码 代码如下:

这个参数就是一个事件因子,包含了该事件的各种详细信息。

await的执行会获取表达式后边的Promise执行结果,相当于我们调用then获取回调结果一样。
P.S.
在async/await支持度还不是很高的时候,大家都会选择使用generator/yield结合着一些类似于co的库来实现类似的效果

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“;

 document.onkeydown=function(e){
 console.log(e);
 }
document.onkeydown=function(){
console.log(window.event);
}


//兼容浏览器的写法:
document.onkeydown=function(e){
e==e||Window.event;
var Code=e.keyCode||e.which||e.charCode;
if(code==13){
//回车
}
}

async函数代码执行是同步的,结果返回是异步的

2、标签

5.如何确定键盘按键?

async函数总是会返回一个Promise的实例
这点儿很重要所以说调用一个async函数时,可以理解为里边的代码都是处于new
Promise中,所以是同步执行的而最后return的操作,则相当于在Promise中调用resolve:

jade 中的标签的写法非常的简单,就是一个单词。

①再出发的函数中,接收事件因子e。
②可以使用e.key直接去到按下的按键字符(不推荐使用)。
③一次可以使用keyCode/which/charCode取到按键的ASCII码值。

async function getNumber () {
 console.log('call getNumber()')

 return 1
}
getNumber().then(_ => console.log('resolved'))
console.log('done')
// 输出顺序:
// call getNumber()
// done
// resolved
doctype html
html
 head
 title
 body

(兼容各种浏览器的写法)

Promise内部的Promise会被消化

以上代码会被编译成:

 var Code=e.keyCode||e.which||e.charCode;

//判断组合键
var isAlt=0,isEnt=0;
document.onkeyup=function(e){
if(e.keyCode==18){
isAlt=1;
}      
if(e.keyCode==13){
isEnt=1;
}    
if(isAlt==1&&isEnt==1){
alert("同时按下Alt和Enter键");
}
}

document.onkeyup=function(){
console.log("keyup");
}
document.onkeypress=function(){
console.log("keypress");
}
document.onkeydown=function(){
console.log("keydown");
}
document.onkeypress=function(){
console.log(window.event);
}
//判断是否按下了回车键
document.onkeydown=function(e){
var code=e.keyCode;
if(code==13){
alert("你输入的是回车键");
}
}

也就是说,如果我们有如下的代码:

<!DOCTYPE html>
<html>
 <head>
 <title></title>
 </head>
 <body></body>
</html>

二、事件绑定模型

(一)DOM0事件模型

绑定注意事项:

①使用window.onload加载完成后进行绑定。

window.onload =function(){//事件}

②放在body后面进行绑定。

//body内容
<body>
  <button onclick="func()">内联模型绑定</button>
  <button id="btn1">哈哈哈哈</button>
  <button id="btn2">DOM2模型绑定</button>
  <button id="btn3">取消DOM2</button>
</body>

1.内联模型(行内绑定):将函数名直接作为html标签中属性的属性值。

<button onclick="func()">内联模型绑定</button>

 缺点:不符合w3c中关于内容与 行为分离的基本规范。

2.脚本模型(动态绑定):通过在JS中选中某个节点,然后给节点添加onclick属性。

document.getElementById("btn1")=function(){}

 优点:符合w3c中关于内容与行为分离的基本规范,实现html与js的分离。
 缺点:同一个节点只能添加一次同类型事件,如果添加多次,最后一个生效。

document.getElementById("btn1").onclick=function(){
  alert(1234);  
}
document.getElementById("btn1").onclick=function(){
  alert(234);  
}//重复的只能出现最近的一次

3.DOM0共有缺点:通过DOM0绑定的事件,一旦绑定将无法取消。

document.getElementById("btn3").onclick=function(){//不能取消匿名函数
  if(btn.detachEvent){
    btn.detachEvent("onclick",func1);
  }else{
    btn.removeEventListener("click",func1);
  }
    alert("取消DOM2");
}

(二)DOM2事件模型

1.添加DOM2事件绑定:

 ①IE8之前,使用.attachEvent(“onclick”,函数);
 ②IE8之后,使用.addEventListener(“click”,函数,true/false);
 参数三:false(默认)表示事件冒泡,传入true表示事件捕获。
 ③兼容所有浏览器的处理方式:

 var btn=document.getElementById("btn1");
 if(btn.attachEvent){
 btn.attachEvent("onclick",func1);//事件,事件需要执行的函数IE8可以
 }else{
 btn.attachEventListener("click",func1);
 }

2.DOM2绑定的优点:

 ①同一个节点,可以使用DOM2绑定多个同类型事件。
 ②使用DOM2绑定的事件,可以有专门的函数进行取消。
3.取消事件绑定:
 ①使用attachEvent绑定,要用detachevent取消。
 ②使用attachEventListener绑定,要用removeEventListenter取消。
 注意:如果DOM2绑定的事件,需要取消,则绑定事件时,回调函数必须是函数名,
 而不能是匿名函数,因为取消事件时,取消传入函数名进行取消。

三、JS事件流模型

(一)JS中的事件流模型

1.
事件冒泡(fasle/不写):当触发一个节点的事件是,会从当前节点开始,依次触发其祖先节点的同类型事件,直到DOM根节点。
2.
事件捕获(true):当初发一个节点的事件时,会从DOM根节点开始,依次触发其祖先节点的同类型事件,直到当前节点自身。

  1. 什么时候事件冒泡?什么时候事件捕获?
     ① 当使用addEventListener绑定事件,第三个参数传为true时表示事件捕获;
     ② 除此之外的所有事件绑定均为事件冒泡。

  2. 阻止事件冒泡:

 ① IE10之前,e.cancelBubble = true;
 ② IE10之后,e.stopPropagation();

  1. 阻止默认事件:

 ① IE10之前:e.returnValue = false;
 ② IE10之后:e.preventDefault();

//css
#div1{
  width: 300px;;
  height: 300px;
  background-color: powderblue;
}
#div2{
  width: 200px;
  height: 200px;
  background-color: deeppink;
}
#div3{
  width: 100px;
  height: 100px;
  background-color:#A9A9A9;
}

//html
<div id="div1">
  <div id="div2">
    <div id="div3"></div>
  </div>
</div>
<a href="01-事件笔记.html" rel="external nofollow" onclick="func()">超链接</a>
div1.addEventListener("click",function(){
  console.log("div1 click");
},false);
div2.addEventListener("click",function(){
  console.log("div2 click");
},false);
div3.addEventListener("click",function(){ //原来的顺序是:3-->2-->1。
//  myParagraphEventHandler(); //截获事件流后,只触发3.但是从2开始依然会冒泡;
  console.log("div3 click");
},false);

结果(事件冒泡)(由小到大div3-》div2-》div1):

图片 1

div1.addEventListener("click",function(){
  console.log("div1 click");
},true);
div2.addEventListener("click",function(){
  console.log("div2 click");
},true);
div3.addEventListener("click",function(){ 
//  myParagraphEventHandler(); //截获事件流后,只触发3.但是从2开始依然会冒泡;
  console.log("div3 click");
},true);

结果(事件捕获)(由小到大div3-》div2-》div1):

图片 2

//依然遵循事件冒泡
document.onclick=function(){
  console.log("document click")
}
//截获事件流阻止事件冒泡
function myParagraphEventHandler(e) {
   e = e || window.event;
  if (e.stopPropagation) {
     e.stopPropagation(); //IE10以后 
  } else {
     e.cancelBubble = true; //IE10之前
   }
}
//截获事件流阻止事件冒泡
function myParagraphEventHandler(e) {
   e = e || window.event;
  if (e.stopPropagation) {
     e.stopPropagation(); //IE10以后 
  } else {
     e.cancelBubble = true; //IE10之前
   }
}
//阻止默认事件
function eventHandler(e) {
  e = e || window.event;
// 防止默认行为 
   if (e.preventDefault) {
     e.preventDefault(); //IE10之后
  } else {
     e.returnValue = false; //IE10之前  
  }
}

总结

以上所述是小编给大家介绍的JS的事件绑定、事件流模型,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

function getNumber () {
 return new Promise(resolve => {
  resolve(Promise.resolve(1))
 })
}
getNumber().then(data => console.log(data)) // 1

jade 是以严格的缩进来区分标签的开始和结束的,默认为2个空格表示缩进。

您可能感兴趣的文章:

  • javaScript
    事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
  • JS
    事件绑定、事件监听、事件委托详细介绍
  • js事件绑定快捷键以ctrl+k为例
  • Node.js中使用事件发射器模式实现事件绑定详解
  • JS的事件绑定深入认识
  • js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
  • ExtJs事件机制基本代码模型和流程解析

如果按照上边说的话,我们在then里边获取到的data应该是传入resolve中的值
,也就是另一个Promise的实例。
 但实际上,我们会直接获得返回值:1,也就是说,如果在Promise中返回一个Promise,实际上程序会帮我们执行这个Promise,并在内部的Promise状态改变时触发then之类的回调。
 一个有意思的事情:

如果我们要写一个标签并且带有内容,比如说要写一个标题,我们只需要在标签单词后面加一个空格,然后跟上内容即可。

function getNumber () {
 return new Promise(resolve => {
  resolve(Promise.reject(new Error('Test')))
 })
}
getNumber().catch(err => console.error(err)) // Error: Test
h1 this is a title.
p this is a paragraph.

如果我们在resolve中传入了一个reject,则我们在外部则可以直接使用catch监听到。
这种方式经常用于在async函数中抛出异常 如何在async函数中抛出异常:

编译结果为:

async function getNumber () {
 return Promise.reject(new Error('Test'))
}
try {
 let number = await getNumber()
} catch (e) {
 console.error(e)
}

 <h1>this is a title.</h1>
 <p>this is a paragraph.</p>

一定不要忘了await关键字

有的时候,我们会需要输出一些特殊排版格式的文本或者是为了提高代码的阅读性,需要显示出如下的效果:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图