The 2nd Week 汉得日记

yarn的相关学习

今早，吴老师布置了周末作业。我clone了工程之后，发现.gitignore里有一些有趣的文件。比如：

yarn-error.log
yarn.lock

让我很好奇yarn是什么，但是我进yarn官方文档的时候，发现有不少内容404了。于是我参照了一些博客进行自学：

以下是yarn的简单介绍：

Yarn是Facebook公司出品的用于管理nodejs包的一款软件，开发过nodejs的同学应该知道，我们一般都使用npm作为我们nodejs项目的模块管理器，但npm有一些历史遗留问题，首先，npm安装速度比较慢，而且当项目中模块数量越来越多时，管理这些模块及其依赖的版本是件令人头疼的事，其次npm在模块安装的过程中可以执行程序，安全性不高。yarn的存在正好解决了这些问题，模块安装速度简直快的令人发指，当某些模块通过yarn安装过后，再次安装甚至不需要连接网络；yarn也可以很好的控制模块依赖的版本（通过yarn.lock文件锁住），而且安全可靠。

由此，我们可以知道。yarn相对于npm作为包管理器来说，具有速度快，安全可靠的优点。下面介绍部分命令：

yarn和 yarn install ，这两个命令的效果是一样的，等同于npm install，使用这个命令会在该目录生成一个yarn.lock的文件。
yarn add koa，安装koa模块并更新package.json和yarn.lock文件，等同于npm install koa --save。也可以使用yarn global add koa，等同于npm install koa -g，将模块直接安装到全局环境变量里，方便使用。
yarn list，根据当前项目的package.json查看模块的依赖及版本。
yarn info koa，查看koa模块的详细信息，类似于npm view koa。
yarn init，初始化项目package.json文件，等同于npm init。
yarn run，运行package.json中的script。

yarn.lock文件的相关说明：

出现问题：比如今天安装模块的时候C和D是某一个版本，而当以后C、D更新的时候，再次安装模块就会安装C和D的最新版本，如果新的版本无法兼容你的项目，你的程序可能就会出BUG，甚至无法运行。这就是npm的弊端，而yarn为了解决这个问题推出了yarn.lock的机制
大家会看到，这个文件已经把依赖模块的版本号全部锁定，当你执行yarn install的时候，yarn会读取这个文件获得依赖的版本号，然后依照这个版本号去安装对应的依赖模块，这样依赖就会被锁定，以后再也不用担心版本号的问题了。其他人或者其他环境下使用的时候，把这个yarn.lock拷贝到相应的环境项目下再安装即可，注意：这个文件不要手动修改它，当你使用一些操作如yarn add时，yarn会自动更新yarn.lock。

关于周末作业的学习过程

周末作业的要求如下：

1.克隆工程https://rdc.hand-china.com/gitlab/train-front-end/weekly-homework-1.git并切换分支，分支名为工号 
2.使用webpack-dev-server构建开发环境
3.获取data/tree.json的数据构建树，要求同example中图片展示的样子，点击三角能展开和收缩（图中节点只供参考，以实际数据为准）
4.提交代码到gitlab

Koa的相关介绍

我看到了koa模块，那么我们顺带再来学习以下Koa的相关知识：

koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。 使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套， 并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件， 它仅仅提供了一个轻量优雅的函数库，使得编写 Web 应用变得得心应手。

完成周末作业时遇到的问题

1.首先是读取json的问题，由于我对jquery里的ajax很熟悉，之前做过的项目都是用ajax实现的。所以第一时间就想到利用jQuery框架去完成这个作业。

但是我一开始把问题想复杂了，我在想怎么利用构建出父子节点结构，想了很久也查了不少资料。在理解资料的算法的基础上，我突然发现我们这个作业是根本不用构建关系的，因为ParentID和ID是对应好的，利用each遍历只需要一层就够了。于是，一会儿就写好了js

2.在给三角形赋予click事件的时候，出了问题。怎么都赋不上去。尽管我知道动态生成的标签需要使用on()方法，但是还是无效。我查阅资料如下：

要看看你是怎么“动态添加”元素的。
如果你的元素是用click事件append进来的
那你的功能函数必须放在这个click事件里面。
比如：
$(".clickMeToAppendElement").click(function() {
    $(".toBeAppend").append("<li><span><i class=\"icon J_classtree\">这是元素内容</i>");
    $(".J_classtree").on("click",function(){
    alert("终于进来了");
    });
);
如果你把函数放在click事件外面，
最初加载页面的时候，$(".J_classtree")就找不到.J_classtree这个类，那段功能函数就添加不了了。

原来是这样，要给动态生成的元素绑定事件，必须使用On方法，而且还得在该元素生成的那个函数内部绑定才行，这是真的学到了，以前没有碰到过这个问题。

又因为我的span标签是在遍历中生成的，为了防止反复绑定，我使用了unbind()方法，成功解决问题。代码如下：

    $("span").unbind().bind('click',function()
{
    if($(this).attr('class')=='glyphicon glyphicon-triangle-right')
    {
        $(this).attr('class','glyphicon glyphicon-triangle-bottom');
    }
    else {
        $(this).attr('class','glyphicon glyphicon-triangle-right');
    }

        $(this).siblings(".toggle").toggle();

                            })

本周总结

详情请见PPT。在此不再赘述