NEJ框架的学习

最先着手是从NEJ官网教程开始学起的。NEJ教程
这个教程里有很多小例子，比如火车快跑，主要是对火车节点添加点击事件，从而控制每个块的移动速度；还有日历控件的实现，aJax请求，文件上传，利用JST模板实现Tab切换，表单填写验证，动画实现等等。这个教程里不仅有源代码的详细过程，还有一些讲解，可以说非常详细。另外，可以通过查API文档和Classes文档进行更多了解。下面从初学者角度对NEJ框架的使用做一个总结。

引入NEJ

在使用NEJ之前，需要引入NEJ库，有两种方式：
一种是直接引入NEJ在线地址，代码如下：

<script src="http://nej.netease.com/nej/src/define.js?pro=./"></script>

另一种方式是，将NEJ下载到本地，然后引入本地define.js文件即可

假设文件目录如图所示：
下载的NEJ库在js文件夹中保存。那么引入该库时，如下：

<script src="./js/nej/src/define.js?pro=./"></script>

这里，我想解释一下，src路径中会有?pro=./？

目前前端项目越来越大，依赖的文件也是越来越复杂，因此为了便于开发和管理，NEJ提供了一个依赖管理系统。因此，NEJ需要进行一些配置，比如预置配置，路径配置，平台配置（NEJ是跨平台的框架）等等，详情见依赖配置。其中，路径配置就有pro配置。项目脚本根路径配置名称为“pro”，文件定义和依赖时可直接使用pro或“{pro}”来表示脚本根路径，此配置信息可以通过外联的define.js路径中的查询串进行配置。如果没有自定义配置则默认相对于当前页面访问路径的“../javascript/”路径。
本人好奇，查询串是什么形式？难道是与我们平时URL的查询参数是一样的形式，即http://www.baidu.com?name=‘liu’&&level=”high”？看了下源码，发现并不是。但是与URL很像。

发现是以’&’来区分多个参数的。

下来是，关于NEJ的使用，其实他跟jQuery库有点像，都是引入库之后，就可以使用。而且会有自己定义的一套获取元素节点，设置节点属性，添加事件回调等等操作。
NEJ采用名字空间的方法，因此在使用这些API之前，先要设置名字空间。NEJ.P为设置名字空间的方法。

var _ = NEJ.P,     
    _e = _("nej.e"),       //可以获取元素节点等
    _v = _("nej.v"),       //可以添加事件处理等

下图是NEJ框架所有的API：

常见的节点接口有：

_e._$get(id)

事件处理相关的接口：

_v._$addEvent()

与jQuery不同的是，NEJ框架具有模板系统，即可以实现逻辑与视图的分离；动态数据与静态数据的分离等等。
关于模板系统，详细的介绍请点击这里
NEJ的模板系统主要可以分成两类：一类是基础模板，即我们平时HTML页面时，想把静态数据（共享页面部分）与动态数据分离时，需要用到的；另一类是资源模板，包括css资源、js资源以及html资源。

对于基础模板，有这么三种：

1. txt（文本类型）
   这种模板可以用字符串来缓存html结构。可以使用_t._$addTextTemplate()将其添加到缓存中，也可以用textarea标签来进行封装。
2. jst（jst模板）
   这种模板可以用_$add()来添加到缓存中，或者textarea标签。同时用_$get()来添加动态数据

3. ntp(节点类型模板)
   这种模板主要针对结构比较复杂的页面。可以用_$addNodeTemplate()添加到缓存中，也可以使用textarea标签。

   这些模板，添加到缓存中之后，都需要调_$parseTemplate()才能使其由字符串变成html页面。

TODOList实现

有了上面的一些基础，就可以开始TODOList的实现了。
首先，考虑页面如何设计？需要实现哪些功能？

其实页面上，可以是很简单一个input。如下所示：

实现的功能：

• Item的添加： 考虑是当在输入框敲回车时，就添加到列表中。
• Item的删除：每一项点击后面的叉，进行删除。
• Item的修改：点击每个条目，修改内容。
• Item的查找：在输入框输入要查找的内容，点击后面的查询按钮，返回包含有该关键字的条目。
• Item的筛选：点击所有条目下方的各个按钮，可以分别返回所有条目列表，已完成条目列表和未完成条目列表。

所有的实现可以通过对节点添加点击事件处理函数，和利用模板来进行事项列表的渲染。