【day4】 谷粒商城-前端相关(不全,没认真看)
es6
es6是一个标准,而js是es标准的具体实现。
-
使用let关键字声明变量,let关键字更加的严谨,类似于Java的声明方式让js变得不那么奇怪。建议以后都使用let
-
const声明常量。const a =1 ,类似于C++
-
解构表达式:
let arr=[1,2,3]; const[a,b,c]=arr; //这样a,b,c就被对应赋值了。
对象解构,注意使用的是大括号
const{name,age}=object 自动取出object对象中的name,age属性
-
字符串拓展,类似于与java的字符串了
-
字符串模板,使用来包括``字符串模板。可能是为了避免转义?
-
字符串插入变量和表达式,变量名写在了${js表达式(变量,变量运算,函数)}
-
函数优化
-
不定参数,类似与Java的不定参数 …args
-
函数的参数有默认值了,写法类似于python。
-
箭头函数
var pri=obj(参数) =>console.log(obj) 等价于 fun pri(obj) { console.log(obj); } 多参数版本是 var sum2=(a,b)=>a+b;
-
-
回调地狱
就是在ajax在success中再次发送其他的请求,这就是很乱的嵌套查询,也成为回调地狱。es6为了解决这个问题,提出了promise功能。
promise 可以封装异步操作,将之前的嵌套操作,更改为了顺序操作。
let p = new Promise( (resolve,reject)=>{ //1. 异步操作 $.ajax({ url:"mooc/user.json", success:function(data){ resolve(data); }, error:function(err){ reject(err); } }); }); p.then((obj)=>{ //成功,对应的是resolve 在这里可以继续发送ajax请求。 }).catch((err)=>{ //失败了,对应的是 reject }); //封装一下 function get(url,data){ return new Promise((resolve,reject)=>{ $.ajax({ url:url, data:data, success:function(data){ resolve(data); }, error:function(err){ reject(err) } }) }); } get("url").then((data)=>{ return get("url2"); //让下一个查 }).then((data)=> { console.log("第二个") }).catch((err)=>{ //出错了,在这里处理 })
-
模块化
类似于Java的导包, export 将指定的模块到处去,import 将模块导进来。
export{一切js东西都可以导出,name,age} import {} from "./hello.js"
Vue
看的是Vue2*的东西,不是最新的。但是想到效率第一,还是先看这个吧。
npm init -y
npm install vue@2.6.10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id ='app'>
<h1>{{name}},非常帅</h1>
</div>
<script src="./dist/vue.js "></script>
<script>
let vm =new Vue({
el:"#app",
data:{name:"张三"}
});
</script>
</body>
</html>
-
插值表达式
使用{{html}}插值表达式可能会在网络慢的时候渲染先出源代码,再出成果。使用vue中的v-html可以避免这种情况。
<span v-html>"msg"</span>