发表于 | 分类于 | 阅读次数

最近在工作中一直用zTree来做一些树型结构的数据展示。结合了zTree源码对数据和dom的组装的思想。mTree使用React做view层,mock.js模拟数据,webpack打包管理代码。

  • webpack配置
  • zTree源码思想解读
  • React
  • bug及总结

什么是WebPack，为什么要使用它？

为什要使用WebPack

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

  • 模块化，让我们可以把复杂的程序细化为小的文件;
  • 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
  • Scss，less等CSS预处理器
  • …

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

阅读全文 »

发表于 | 分类于 | 阅读次数

1.作用域

1
2
3
4
function f(y = x){
let x =2;
console.log(y)
}

1.let的声明方式，可以给函数里的参数作声明。如果函数里没有定义参数，在全局let有声明，则函数的的参数会访问道let的声明。但是用var不行。

1
2
3
4
5
6
7
8
9
2var x = 1;
function foo(x, y = function() { x = 2; }) {
  var x = 3;
  y();
  console.log(x);
}
foo() // 2
x // 1

像这样的用全局的var来说声明得x，和函数里的x不再同一个作用域里面，而在函数里又一次声明了x，也和参数x不再一个作用域里面。而参数y是一个匿名函数，这个匿名函数内部的变量x，指向用一个作用域的第一个参数x。
这歌console.log（x）打印出来的其实是函数foo里重新声明的x，而不是参数。

1
2
3
4
5
6
7
8
9
3 var x = 1;
function foo(x, y = function() { x = 2; }) {
  x = 3;
  y();
  console.log(x);
}
foo() // 2
x // 1

这个和上面的区别是在于函数foo中，去掉了x的var声明，此时的x就是参数x的作用域。所以重新定义了x的值。然后又执行了y的密命函数，改变了x的值，所以最后打印出来的x的值是2.而全局的x一直都没有变。

阅读全文 »