您好,欢迎来到12图资源库!分享精神,快乐你我!我们只是素材的搬运工!!
  • 首 页
  • 当前位置:首页 > 网站教程 > AJAX教程 >
    JS框架 NEJ快速入门教程
    时间:2017-04-28 21:57 来源: 作者: 浏览:收藏 挑错 推荐 打印

    快速入门

    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指定的路径前缀。
    JS框架 NEJ快速入门教程
    前面代码中的pro也是路径配置的变量,代表项目的脚本根路径,是NEJ保留变量名。像这样具有特殊意义的保留变量名,还包括有代表框架路径的lib,代表框架补丁路径的patch,代表框架混合模式路径的native和为平台配置保留的特殊字母p。

    平台配置

    NEJ是真正的跨平台的JS框架, 但是也提供按需的平台配置。你可以选择只支持某类,也可以额选择只支持哪种平台。例如你可以只支持和,你也可以只支持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}的路径。
    JS框架 NEJ快速入门教程
    在混合配置中,NEJ支持的平台按照native平台划分,其支持的平台标识如下:
    标示 说明
    cef 基于cef框架混合应用,主要针对桌面应用
    ios ios平台混合应用,如iphone应用、ipod应用、ipad应用等
    win windows phone平台混合应用
    android android平台混合应用
    对于此类值的配置自动生成的patch路径值为{lib}patched/目录下对应的引擎目录,native值为{lib}native/目录下的具体配置目录。
    JS框架 NEJ快速入门教程
    默认情况下,在引入依赖库时没有指定平台信息,则支持全部浏览器平台。

    使用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在各个平台下的安装配置请参阅官方说明。
    获取工具
    下载页面有打包工具下载。解压,解压后目录结构如下:
    JS框架 NEJ快速入门教程
    添加打包标记
    打包工具通过打包标记对内容进行打包配置。打包标记是基于html的注释标记扩展,不会影响到页面的实际呈现效果。详情请参阅打包工具说明书。本Demo的打包标记如下:
    JS框架 NEJ快速入门教程
    使用
    1. 将项目文件复制到nej_publisher/release下面。复制后项目文件如下nej_publisher/release/quickstart。目录结构为:
      JS框架 NEJ快速入门教程
    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文件:
    JS框架 NEJ快速入门教程
    pp_index.css文件
    JS框架 NEJ快速入门教程
    pp_index.js文件
    JS框架 NEJ快速入门教程

    其他

    本页面打包后下载
    (责任编辑:CIT信息网)

    (责任编辑:12图资源库)