柠檬铺

立即咨询

柠檬铺

JS框架 NEJ快速入门教程

快速入门

NEJ是什么?

NEJ是一个简洁、美观，真正跨平台的javascript开发框架。它拥有依赖管理，多平台适配，自由定制，新技术应用，多方案集成和多工具支持六大特性。

下载NEJ

你可以在三个地方找到NEJ下载链接。第一个地方是首页。首页提供最新稳定版本的下载。第二个地方是下载页面。下载页面提供最新版本和历史版本的下载。第 三个地方是github。你可以通过gitHub地址下载NEJ的最新版本。下载下来的NEJ压缩包包含有NEJ库和NEJ依赖库两个部分，其中NEJ依 赖库为nej/src/define.js文件，其余为NEJ库文件。

引入NEJ依赖库

为了方便开发者管理脚本文件，NEJ开发了一套依赖管理系统来管理脚本。依赖系统通过文件定义来引用本脚本需要的脚本文件。要使用NEJ，要先引入NEJ 依赖库。引入NEJ文件可以分为两种方式，一种为引入下载的依赖库。另一种可以直接引用在线的依赖库。假设项目文件目录如下：

  • project

    • js
    • css
    • image
    • index.html

将下载NEJ压缩包解压到js中，则解压后目录如下:

  • project

    • css
    • image
    • index.html
    • js

      • pro
      • nej

        • demo
        • doc
        • res
        • qunit
        • src

          • define.js
          • define.cmp.js
          • base
          • native
          • patched
          • ui
          • util
          • test

上图中，./project/js/nej为解压的文件，./project/js/pro为项目自己的js文件夹。 在index.html中引入NEJ依赖包，其代码如下：

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

无需下载NEJ包，直接在index.html中引入在线NEJ依赖库，其代码如下：

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

其中上述代码中，"pro=./"i为路径配置，下面将进行讲解。

配置NEJ

NEJ是支持路径配置和平台配置的js框架。它通过使用define.js文件的查询参数进行配置。下面将分开介绍NEJ的路径配置和平台配置。

路径配置

文件定义时指定的路径可以通过路径配置的变量来指定前缀。如路径配置时指定了A，则文件定义时可以直接使用{A}来表示A指定的路径前缀。

前面代码中的pro也是路径配置的变量，代表项目的脚本根路径，是NEJ保留变量名。像这样具有特殊意义的保留变量名，还包括有代表框架路径的lib，代表框架补丁路径的patch，代表框架混合模式路径的native和为平台配置保留的特殊字母p。

平台配置

NEJ是真正的跨平台的JS框架, 但是也提供按需的平台配置。你可以选择只支持某类浏览器，也可以额选择只支持哪种平台。例如你可以只支持Firefox和Chrome，你也可以只支持android平台。
NEJ对前者的支持，通过修正浏览器平台对外接口及控件的支持来实现，叫做补丁配置。NEJ对后者的支持，通过对native接口的适配来实现，叫做混合 配置。两种平台配置，NEJ都是通过查询上节中介绍的特殊字母p的值来确定。p的值是由一个或者多个平台标识组成。当同时出现补丁配置标识和混合配置标识 时，补丁配置标识会被忽略。当出现多个混合配置标识时，第一个混合配置标识生效，其他的忽略。
在补丁配置中，NEJ支持的平台按照浏览器引擎划分，其支持的标识如下：

标示 说明
td 以trident为核心的浏览器平台，如IE、360、maxthon
gk 以gecko为核心的浏览器平台，如firefox等
wk 以webkit为核心的浏览器，如chrome、safari
pt 以presto为核心的浏览器平台，如opera

对于此类值的配置自动生成的patch路径值为{lib}patched/目录下的一个或者多个路径，因为为非混合模式，因此native值不存在，实际引入的框架和应用中都不允许出现{native}的路径。

在混合配置中，NEJ支持的平台按照native平台划分，其支持的平台标识如下：

标示 说明
cef 基于cef框架混合应用，主要针对桌面应用
ios ios平台混合应用，如iphone应用、ipod应用、ipad应用等
win windows phone平台混合应用
android android平台混合应用

对于此类值的配置自动生成的patch路径值为{lib}patched/目录下对应的引擎目录，native值为{lib}native/目录下的具体配置目录。

默认情况下，在引入依赖库时没有指定平台信息，则支持全部浏览器平台。

使用NEJ

引入依赖库和配置好NEJ后，我们就拥有一个满足自己需要的NEJ开发环境。下面我们来看一个火车快跑的Demo。其效果如下：

要启动，请点车；要加速，请继续点车。

慢车

快速

直达

高铁

实现上面的代码如下:
html:

<div id='cardemo' class="demo"> <div id='trainrun'> <div class='x-item'>要启动，请点车；要加速，请继续点车。</div> <div> <div class="x-item">慢车</div> <div class="x-item">快速</div> <div class="x-item">直达</div> <div class="x-item">高铁</div> </div> </div> </div>

css:

.demo{width:800px;border:1px solid #3C3C3C;background-color:#FDF5E6;} .x-item{position:relative;width:300px;height:50px;margin:5px 0;background-color:#FFE4C4;text-align:center;line-height:50px;}

js:

<script src="http://172.31.130.138/nej/src/define.js?pro=./"></script> <script> var f=function(){ var _ = NEJ.P, _e = _('nej.e'), _v = _('nej.v'), _j = _('nej.j'), _u = _('nej.u'), _p = _('nej.ut'); //获取节点 var _parent=_e._$get('trainrun'); //滚动效果 var _roll=function(_target,_index){ if(!_target.style.left) _target.style.left=(_index*3)+"px"; else _target.style.left=(parseInt(_target.style.left)>(600-_index*3))? "0px":parseInt(_target.style.left)+3*_index+"px"; }; //车速数组 var _carSpeed=[0,0,0,0]; //item节点点击事件 var _onItemClick=function(_event,_index){ var _target=_v._$getElement(_event); _carSpeed[_index-1]+=1; _target.innerHTML=_target.innerHTML.substring(0,2)+"x"+_carSpeed[_index-1]; setInterval(_roll._$bind(this,_target,_index),1000); } //item回调函数 var _cbWithItem=function(_item,_index,_list){ if(_index%2==0)_item.style.backgroundColor="#B4EEB4"; _v._$addEvent(_item,"click",_onItemClick._$bind2(this,_index+1)); } //获取Item节点 var _xItems=_e._$getByClassName(_e._$getChildren(_parent)[1],"x-item"); //给Item节点添加事件 _u._$forEach(_xItems,_cbWithItem,this); }; define(['{lib}base/event.js'],f); </script>

通过脚本，我们可以清楚地看到，NEJ的代码结构。
首先，引用依赖库，并进行路径配置，平台配置。本例中，路径配置了pro，平台配置采用默认的全浏览器平台支持。 然后，定义文件，引入我们依赖的库和项目的公共js。 最后，定义一个方法f，在方法体中实现本页面的所有逻辑。
代码解释:
NEJ采用名字空间的概念，它把不同的接口按照作用，分配到不同的名字空间中去，这样开发者，可以非常清晰方便地调用接口。而NEJ.P为创造或者取名字空间的方法。
例如：_e=NEJ.P(‘nej.e’)，为名字空间window.nej.e。这个空间主要包含节点操作的接口，譬如，_$get(id|Node)取节点，_$hasClassName(id|_node,_className)判断节点含有某些类，_$create(_nodeType,_style,_parent)创造节点等接口。
_v=NEJ.P(‘nej.v’)，为名字空间window.nej.v。这个空间主要包含事件接口，譬如，_$addEvent(_id|_node,_eventType,handler,bool)添加事件，_$stopDefault(_event)阻止默认事件，_$pageX(_event)获取事件的水平位置等。
_u=NEJ.P(‘nej.u’)，为名字空间window.nej.u。这个空间主要包含一些便捷调用的接口，譬如，_$isFunction(_variable)判断数据类型，_$escape(_htmlStr)将HTMLString转码，_$forEach(_list,_cbFun,_object)遍历列表等等。
除了上述名字空间外，NEJ还定义了提供前后端及本地资源交互相关的的接口的名字空间window.nej.j，定义了NEJ的UI控件的名字空间window.nej.ui等等，具体请查看手册。
本Demo中，通过_$getByClassName的方法获取了所有了火车的节点，并对其进行遍历。在回调函数中，对序号为偶数的火车进行了背景色设置，并对每一列车添加了点击事件。这里要注意的是，为了保证this的一致性和区分各个列车的不同速度，用_$bind(_o,_arg0,_ar1…)绑定了当前对象，并传递各个列车的index参数。在各个车的点击事件处理中，通过绑定传递过来的index参数，实现了各个车的不同速度。

使用控件

NEJ提供了大量控件，以帮助开发人员完成开发，加快开发速度。下面请看我们的日历控件Demo，看是如何方便使用的。


实现上面的代码如下：
html:

<div class="demo"> <input type="text" id="datepick" /> </div>

js:

<script src="http://172.31.130.138/nej/src/define.js?pro=./"></script> <script> var f = function(){ var _ = NEJ.P, _e = _('nej.e'), _u = _('nej.u'), _v = _('nej.v'), _p = _('nej.ui'); var _input = _e._$get('datepick'); _v._$addEvent(_input,'click',onInputClick) function onInputClick(_event){ _v._$stop(_event);//因为日历控件是卡片，在document上接收到click 事件都会回调到卡片，所以阻止掉事件 var _datepick = _p._$$DatePick._$allocate({ parent: _input.parentNode, clazz: 'm-dt', //通过这个样式改变日历控件的表现 onchange: onChange }); } //选中时回调，把值设到input中 function onChange(_value){ _input.value = _u._$format(_value,'yyyy-MM-dd'); } } define(['{lib}ui/datepick/datepick.js'],f); </script>

代码解释：
代码的核心部分为var _datepick = _p._$$DatePick.$allocate( {parent:_input.parentNode, clazz:’m-dt’,onchange:onChange} ); 它的作用是返回window.nej.ui的名字空间下的公共类_$$DatePick的一个实例。初始化这个实例需要三个参数，parent，日历节点的父节点；clazz，日历节点的样式，通过修改这个参数，实现样式不同的日历；onchange，日历变化事件函数。当日期发生改变时，如何进行处理，譬如回写等等。
本Demo中，当点击input时，触发onInputClick事件，生成一个日历，日历节点被append在parent节点的下面。在选定日期后，触发日历的onChange事件，将日期写回到input中去。

使用Ajax

NEJ提供了对AJAX的统一接口，位于window.nej.j名字空间的_$request方法。此方法还需要uitl控件xhr的支持，所以需要定义{lib}uitl/ajax/xhr.js文件。以下是通过AJAX请求好友数据的一个Demo。

 

点我

实现上面的代码如下:
html:

<div id='ajax'> <div id='cnt'></div> <div id='bnt'>点我</div> </div>

css:

#ajax{position:relative;width:800px;height:200px;margin:5px 0;border:1px solid #696969;background-color:#F0FFF0;overflow:hidden;} #bnt{position:absolute;top:0;left:0;width:50px;height:200px;background-color:#FFE4C4;font-size:12px;line-height:200px;text-align:center;cursor:pointer;} #cnt{position:absolute;top:0;left:50px;width:848px;padding:10px 20px;} #cnt p{height:28px;padding:4px 0;margin:0;font-size:12px;line-height:14px;color:#333;}

js:

<script src="http://172.31.130.138/nej/src/define.js?pro=./"></script> <script> var f=function(){ var _ = NEJ.P, _e = _('nej.e'), _v = _('nej.v'), _j = _('nej.j'); //上次显示最后一条序号 var _lastIndex=0; //ajax回调函数 var _cbShowAjaxData=function(_data){ var _cnt=_e._$get('cnt'); _cnt.innerHTML=''; var _len=_data.length; for(var i=(_lastIndex>=_len?(_lastIndex=0):_lastIndex),l=(i+5<_len?i+5:_len);i<l;i++){ var _tempP=_e._$create("p",null,_cnt); _tempP.innerHTML="title:"+_data[i].title+"<br/>"+_data[i].shortPublishDateStr +" "+_data[i].publishTimeStr+" 访问"+_data[i].accessCount+" 评论"+_data[i].commentCount; } _lastIndex+=5; }; //bntClick响应函数 var _onBntClick=function(event){ //ajax请求数据 _j._$request("http://172.31.130.138/api/getFriendsLatestBlogs",{ sync:false, type:"json", data:null, query:"userid=126770605", method:"GET", onload:_cbShowAjaxData }); }; //添加事件 _v._$addEvent(_e._$get('bnt'),'click',_onBntClick._$bind(this)); }; define(['{lib}util/ajax/xdr.js'],f); </script>

代码解释:
NEJ使用ajax的方法非常简单，只要定义好依赖文件{lib}util/ajax/xhr.js文件，就可以很方便的使用ajax请求。Demo中只 使用了onload事件，其它还有出错回调onerror，上传中回调onuploading，下载中回调ondownloading等等配置，具体请参 照ajax专题。
Demo中通过ajax请求到好友的最新日志列表。在获得数据后，为简化长度，通过对数据长度的判断，最多显示5条好友最新日志数据。随后在parent节点下面，为每条日志数据创建一个P标签，并将数据取出来放到标签上，最终显示在页面上。

使用动画

NEJ也提供了对动画的支持，下面演示一个弹簧减速效果减速的动画效果。

点我

 

实现上面的代码如下
html:

<div id='anim'> <div id='bnt2'>点我</div> <div id='ball'></div> </div>

css:

#anim{position:relative;height:50px;width:800px;margin:5px 0;border:1px solid #696969;} #bnt2{position:absolute;top:0;left:0;width:50px;height:50px;background-color:#FFE4C4;font-size:12px;line-height:50px;text-align:center;cursor:pointer;} #ball{position:absolute;top:20px;left:70px;width:10px;height:10px;background-color:black;border-radius:10px;}

js:

<script src="http://172.31.130.138/nej/src/define.js?pro=./"></script> <script> var f=function(){ var _ = NEJ.P, _e = _('nej.e'), _v = _('nej.v'), _p = _('nej.ut'); var _ac = _p._$$AnimBounce._$allocate({from:{offset:70,velocity:1000},acceleration:500,springtension:0.5,onstop:_onBounceStop,onupdate:_onBounceUpdate}) function _onBounceStop(_offset){ //todo } function _onBounceUpdate(_offset){ _e._$get('ball').style.left = _offset.offset +'px'; } _v._$addEvent(_e._$get('bnt2'),'click',_onBnt2Click._$bind(this)); function _onBnt2Click(event){ _ac._$play(); }; }; define(['{lib}util/animation/bounce.js'],f); </script>

代码解释：
NEJ使用动画效果，需要相应的util控件的支持，本Demo中使用了弹簧效果，所以在文件定义中依赖了动画中的弹簧效果控件。

打包和发布

为了优化项目前端的代码和提高发布效率，NEJ提供了一套打包策略和发布工具，方便发布。下面以本文包含Demo的页面为例，介绍下如何进行打包发布。
环境配置
发布工具使用nodejs编写，因此需要使用者先安装nodejs环境，nodejs在各个平台下的安装配置请参阅官方说明。http://nodesjs.org/
获取工具
下载页面有打包工具下载。解压，解压后目录结构如下：

添加打包标记
打包工具通过打包标记对内容进行打包配置。打包标记是基于html的注释标记扩展，不会影响到页面的实际呈现效果。详情请参阅打包工具说明书。本Demo的打包标记如下：

使用

  1. 将项目文件复制到nej_publisher/release下面。复制后项目文件如下nej_publisher/release/quickstart。目录结构为：
  2. 修改nej_publisher/release.conf配置文件。将第10行，DIR_WEBROOT修改为../quickstart/；将12行 DIR_SOURCE修改为./html，将14行DIR_OUTPUT修改为./out/pub/；将16行DIR_OUTPUT_STATIC修改 为./out/s/；
  3. 运行release.bat或者release.sh
  4. 查看结果。新生成的文件在/quickstart/out/文件夹中。./pub/中为index.html文件，./s/中为pp_index.css和pp_index.js文件。

新生成的压缩的index.html文件：

pp_index.css文件

pp_index.js文件

其他

本页面打包后Demo（四合一）下载
(责任编辑：CIT信息网)

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Grow your business fast with

Suku

Subscribe Now