学习前端总结
什么是表达式？
在页面中能够得到结果，那么就代表是表达式。
如下图：在控制台输入1==1 回车得到true，true就是一个结果，所以1==1 就是一个表达式
只输入一个数字2，回车也能得到一个值2，所以2也是一个表达式
输入一个不带引号的字符，则没有结果，直接报错，所以就不是表达式
带引号'123'，则代表是一个字符串，基本数据类型都可以是一个表达式，但是如果没有引号则代表是一个变量，找不到这个变量则没有返回值。
总结：分类如下
- 单值表达式：不使用运算符的表达式
- 简单表达式：不能再分解的表达式
- 复杂表达式：需要其它表达式参与的表达式
- 复合表达式：由运算符将多个单值表达式结合而成的表达式
所有表达式均有返回值
一个变量初始值为undefined，所以有一种写法，当condition这个变量没有赋值的时候直接这么用则返回false。
var condition;
if(condition){
alert("true") }else{
alert("false")
}
实现一个树节点：
最终展示效果：
使用vue的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<style>
li {
list-style: none;
}
</style>
<body>
<template id="treenode">
<ul>
<div @click="condition = !condition">
<span>{{condition ? "收缩":"展开"}}</span>
{{node.title}}
</div>
<li v-show="condition">
<tree-node v-for="(item2, index) in node.children" :key="index" :node="item2"></tree-node>
</li>
</ul>
</template>
<div id="app" style="margin: auto; width: 300px; border-color: aqua; border-style: solid">
<tree-node v-for="(item, index) in treeList" :key="index" :node="item"></tree-node>
</div>
<script>
Vue.component('tree-node', {
props: ['node'],
template: '#treenode',
data: function () {
return {
condition: true
}
}
})
var vm = new Vue({
el: '#app',
data: {
treeList: [
{
title: '1',
children: [
{
title: '1-1',
children: [
{
title: '1-1-1'
}
]
}
]
},
{
title: '2',
children: [
{
title: '2-1'
}
]
}
]
}
})
</script>
</body>
</html>
用jequery的写法：
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script>
<script src="./tree.js"></script>
</head>
<style>
* {
padding: 0px;
margin: 0px;
}
li {
list-style: none;
}
.item {
padding-left: 20px;
}
.toggle {
margin-right: 20px;
}
</style>
<body style="background: #888888">
<div style="margin: 30px auto; width: 300px; border: 1px solid #ccc; padding: 20px">
<ul id="tree"></ul>
</div>
</body>
<script>
let data = [
{
title: '1',
children: [
{
title: '1-1',
children: [
{
title: '1-1-1'
}
]
}
]
},
{
title: '2',
children: [
{
title: '2-1',
children: [
{
title: '2-1-1'
}
]
}
]
}
]
$(function () {
tree.init('tree', data, {
toggle: function (t) {
alert(t)
}
})
})
</script>
</html>
js代码
var tree = { buildHtml: function (list) { let html = '' for (let i = 0; i < list.length; i++) { let toggle = '' if (list[i].children && list[i].children.length > 0) { toggle = "<span class='toggle'>收缩</span>" } html += "<li class='item'><div>" + toggle + list[i].title + '</div>' let childHtml = '<ul>' if (list[i].children && list[i].children.length > 0) { childHtml += this.buildHtml(list[i].children) } childHtml += '</ul>' html += childHtml html += '</li>' } return html }, init: function (id, data, eventFn) { let html = this.buildHtml(data) $('#' + id).html(html) $(document).on('click', '.toggle', function () { if ($(this).text() == '展开') { $(this).text('收缩') } else { $(this).text('展开') } let display = $(this).parent().next().data('display') if (display != 'none') { display = 'none' } else { display = 'block' } $(this).parent().next().data('display', display) $(this).parent().next().css({ display: display }) if (eventFn && eventFn.toggle) { eventFn.toggle(display) } }) } }
由此可以比较出来，vue不用直接操作dom元素，直接将数据绑定即可，扩展修改时不需要那么复杂操作，jquery直接操作dom元素时，一旦需要扩展优化需要修改的地方会很多很多。
