devbox
爱喝兽奶帝天荒
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

一款简单、好用的跨平台WEB前端开发框架_跨平台web框架

作者：爱喝兽奶帝天荒 | 2024-06-24 18:49:32

赞

踩

跨平台web框架

NEJ（即 Nice Easy Javascript）是一个轻量级的JavaScript框架，它提供了一套丰富的API和工具，以便于开发者构建Web应用。NEJ旨在提高前端开发效率，支持模块化开发，并且兼容多种浏览器。

这个框架的特点包括：

  • 依赖管理系统支持

  • 平台适配系统支持（浏览器、移动APP、桌面APP等）

  • 丰富可灵活扩展的控件系统（可验证表单、列表、拖拽、滑块、日历、富文本编辑器等）

  • 多方案集成（模板系统、可组合的模块化开发、单页系统按需载入、基于配置的跨域异步请求等）

  • 可自由定制的产品发布（按平台定制、按功能定制）

  • 工具支持（NEJ工具集、NEI工具集等）

  • 新技术整合（对于高端目标平台自动应用新技术）

NEJ通过提供一系列的基础设施和工具，使得开发复杂的Web应用变得更加容易。它强调的是开发效率和兼容性，适用于需要运行在多种浏览器上的企业级应用开发。

使用

页面引入define.js，可以下载到本地也可以使用NEJ服务器上的define.js，通过切换define.js的路径切换使用的NEJ库

<!DOCTYPE html><html>  <head>    <title>use nej</title>    <meta charset="utf-8"/>  </head>  <body>    <textarea id="txt-0"></textarea>    <input type="text" id="input-id-0" maxlength="100"/>        <script src="/path/to/nej/define.js"></script>    <script>      NEJ.define([        'util/counter/counter'      ],function(_e){          _e._$counter('txt-0');          _e._$counter('input-id-0');                    // TODO      });</script>    <script>      // 习惯链式的同学也可以这样使用      NEJ.define([        'util/chain/chainable',        'util/counter/counter'      ],function($){          $('#txt-0')._$counter();          $('#input-id-0')._$counter();                    // TODO      });</script>  </body></html>

依赖管理

页面引入依赖库文件，配置参数通过define.js的查询参数输入

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

脚本文件定义，为防止与其他加载器命名冲突，NEJ使用NEJ.define接口定义文件执行函数

NEJ.define([
    'base/element',
    'pro/extend/util',
    '/path/to/file.js',
    '{platform}patch.js',
    'text!/path/to/file.css',
    'text!/path/to/file.html'
],function(e,u,t,h,css,html,p,o,f,r){

    // TODO something

    // 返回结果可注入给其他文件
    return p;
});

配置

NEJ的依赖管理系统配置信息通过define.js的查询参数输入，打包时也会根据这些参数配置做相应处理

系统保留单字母命名的参数配置，预置的配置参数如：g、c、d、p

预置配置

g=[true|false]

配置项目中是否存在全局的define函数，默认为false，如果配置为true则项目中必须使用NEJ.define来使用本依赖管理系统，否则如果项目没有定义额外的define函数则可以使用define函数来使用此依赖系统

<script src="/path/to/nej/define.js?g=true"></script>
c=[gbk|utf-8|…]

配置项 编码格式 主要影响项目中的文件编码和脚本加载的编码方式。默认情况下，这个配置被设置为 utf-8，它是最常用的字符编码格式，兼容性和普及度都很高。如果你需要将编码格式改为其他类型（比如 gbk 或 iso-8859-1 等），你必须确保项目中所有相关文件的编码都统一为这个配置的编码格式。

<script src="/path/to/nej/define.js?c=gbk"></script>
d=/patch/to/dep.js

配置第三方库或者遗留项目文件的依赖关系，具体使用可参看NEJ.deps接口的说明

<script src="/path/to/nej/define.js?d=./dep.js"></script>
p=td|gk|wk

平台配置参数，见以下平台配置章节说明

路径配置

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

<script src="/path/to/nej/define.js?A=../web/js/"></script>
NEJ.define([
    'A/extend/util',
    '{A}extend/util.js'
],function(u1,u2){

    // 这里需要注意的是如果使用{A}形式需要加后缀.js
    // 这里两种方式引入的为同一个文件都是 ../web/js/extend/util.js 文件

});

系统默认预置了lib、pro、platform的路径配置，具体的配置方法，在文末获取。

自定义路径

其他自定义路径可以通过引入define.js文件时作为查询参数输入进行配置，如自定义com路径，则可以通过以下方式进行配置（配置路径中以”./”、”../”起始的相对路径相对于当前地址栏路径）

<script src="/path/to/nej/define.js?com=../js/"></script>
NEJ.define([
    'com/api/util',
    '{com}api/util.js'
],function(u1,u2){

    // 这里两种方式引入的为同一个文件都是 ../js/api/util.js 文件

});

平台配置

平台参数在开发及打包过程中都会使用，框架支持平台参数的配置通过define.js路径上查询串中的p参数输入。

平台配置信息，此配置又分两类基本配置：补丁配置和混合配置，因为混合模式下使用的浏览器引擎固定，因此当配置中出现混合类型的配置时忽略补丁配置的值。

如果在引入依赖定义库时未指定平台信息则表示系统需对全平台浏览器支持。

关于平台配置相关的详细内容可参阅文末资料中的《PLATFORM》文件

补丁配置

主要用来修正浏览器平台对接口及控件的支持，按照目前浏览器引擎划分，参数值由一个或者多个平台标识组成，标识支持如下所示：

标识说明
gk以gecko为核心的浏览器平台，如firefox等
wk以webkit为核心的浏览器平台，如chrome、safari等
td以trident为核心的浏览器平台，如IE、360、maxthon等
td-0以trident为核心的浏览器平台，且引擎内核版本大于等于3.0，即IE>=7
td-1以trident为核心的浏览器平台，且引擎内核版本大于等于7.0，即IE>=10
<script src="/path/to/nej/define.js?p=wk|gk|td"></script>
混合配置

主要用于混合开发模式下对native接口的适配，按照native平台划分，参数值由一个标识组成，多个标识则以识别的第一个标识为准，标识支持如下所示：

标识说明
cef基于cef框架混合应用，主要针对桌面应用
iosios平台混合应用，如iphone应用、ipod应用、ipad应用等
winwindows phone平台混合应用
androidandroid平台混合应用
<script src="/path/to/nej/define.js?p=cef"></script>

接口

以下所有接口均使用NEJ作为名字空间，如define接口使用时用NEJ.define

define

文件定义接口，并指定当前脚本执行所需的其他依赖文件，文件路径规则

  • 完整的文件路径

  • 使用{}标识配置参数，如{root}file.js

  • 直接使用非{}标识配置参数，此时不能加.js后缀，系统自动加.js后缀，如 root/file

  • NEJ库文件可以省略lib标识，如base/element，等价于 lib/base/element，等价于 {lib}base/element.js

  • 其他文本资源采用text!前缀标识，如text!/path/to/file.css，注意开发时如果资源是跨域的请设置好浏览器XHR的跨域支持

  • JSON资源采用json!前缀标识，如json!/path/to/data.json，注意开发时如果资源是跨域的请设置好浏览器XHR的跨域支持

  • Regular模板资源采用regular!前缀标识，如regular!/path/to/file.html，注意开发时如果资源是跨域的请设置好浏览器XHR的跨域支持

  • 路径以 ./ 或者 ../ 开始的相对路径则相对于当前脚本文件的路径，如 ./util.js

执行函数注入参数说明

  • 注入依赖列表中各文件对应的返回结果

  • 注入额外四个参数，依次为p、o、f、r，其中

    • p为输出结果集空间，用于注入到其他执行函数中的内容

    • o为对象实例，即{}，用于处理对象默认值，如 var x = options||o;

    • f为函数实例，返回false，用于处理方法默认值，如 var func = x.onready||f;

    • r为数组实例，即[]，用于处理数组默认值，如 var arr = options.list||r;

接口说明

类型描述
输入String可选，当前文件路径
Array可选，依赖的其他文件路径
Function可选，当前文件需要执行的脚本，依赖文件的返回结果依次注入到该函数中
输出Object对外开放的接口，可注入到依赖该文件的其他文件执行函数中
NEJ.define([
    'util/ajax/tag',
    'util/template/jst'
],function(j,e,p,o,f,r){

    // j 为 util/ajax/tag 文件导出的接口集合
    // e 为 util/template/jst 文件导出的接口集合

    // 用于注入到其他文件执行函数中的接口
    p.api = function(){

    };

    // TODO something

    return p;
});

 4

控件系统

控件系统主要用来解决系统复杂性的问题，使得系统不会因为变得复杂而不可控，同时保证其维护性和扩展性

NEJ框架提供了基于常规面向对象的思想构建的控件系统，主要用于：

* 提供通用解决方案的封装支持

* 提供核心功能、分析设计的重用

* 提供跨平台控件及API的支持

类模型

在NEJ框架中，由于JavaScript原生不支持类（class）的概念，框架提供了一个类模型解决方案来模拟传统面向对象语言中的类行为。这一类模型的实现可以在NEJ的base/klass模块中找到。这使得开发者能够以类似于传统面向对象编程的方式来构建JavaScript应用，利用类的概念进行更结构化和模块化的代码设计。

类定义

控件提供使用统一的类定义接口 _$klass 来定义一个类，通过此接口定义的类才具备以下的继承、初始化等特性

NEJ.define([
    'base/klass'
],function(_k,_p){
    // 定义一个类
    _p._$$Klass = _k._$klass();

    // TODO
    
    return _p;
});

类继承

使用 _klass 定义的类可以使用 \_extend 接口来继承其他父类

NEJ.define([
    'base/klass'
],function(_k,_p){
    // 定义一个类
    _p._$$Klass = _k._$klass();
    // 继承其他类
    var pro = _p._$$Klass._$extend(Super);

    // TODO
    
    return _p;
});

类构造

使用 _$klass 定义的类统一使用 __init 接口来初始化类，所有子类的接口均可以使用 this.__super 方式调用父类同名接口

NEJ.define([
    'base/klass'
],function(_k,_p){
    // 定义一个类
    _p._$$Klass = _k._$klass();
    // 继承其他类
    var pro = _p._$$Klass._$extend(Super);
    // 初始化
    pro.__init = function(){
        // 调用父类的__init
        this.__super();
        // TODO something
    };
    
    // TODO
    
    return _p;
});

类扩展

类的所有方法均定义在类函数的 prototype 对象上

NEJ.define([
    'base/klass'
],function(_k,_p){
    // 定义一个类
    _p._$$Klass = _k._$klass();
    // 继承其他类
    var pro = _p._$$Klass._$extend(Super);
    // 初始化
    pro.__init = function(){
        // 调用父类的__init
        this.__super();
        // TODO something
    };

    // private 方法
    pro._privateMethod = function(){

    };
    // protected 方法
    pro.__protectedMethod = function(){
        // TODO
    };
    // public 方法
    pro._$publicMethod = function(){
        // TODO
    };

    // TODO
    
    return _p;
});

类规范

  1. 类命名

    类命名使用前缀_标识，首字母大写，驼峰式，如\_Klass，_$$OneKlass

  2. 类方法

    方法分为私有、保护、公共方法三类，各类方法的前缀标识如下

    方法的命名首字母小写，驼峰式，如_$myApi，__myApi，_myApi

    • 私有方法使用_(单个下划线)作为前缀，如_privateMethod

    • 受保护的方法使用__(两个下划线)作为前缀，如__protectedMethod

    • 公共的方法使用_(下划线+美元符)作为前缀，如\_publicMethod

控件模型

控件模型使用类模型来实现，基于类模型的基础做扩展，主要在util/event模块中实现；控件采用分配回收机制，因此控件的生命周期包括以下三个阶段：

  1. 控件创建：首次使用时控件创建阶段，主要用于构建控件相关结构、数据等

  2. 控件重置：重复使用时控件重置阶段，主要用于处理外部输入数据、事件侦测等

  3. 控件回收：回收不用时控件销毁阶段，主要用于销毁重置阶段产生的结构、数据等

控件定义

所有的控件均继承自 util/event 模块的 _$$EventTarget 类

NEJ.define([
    'base/klass',
    'util/event'
],function(_k,_t,_p){
    var _pro;
    // 定义控件
    _p._$$Widget = _k._$klass();
    // 继承_$$EventTarget
    _pro = _p._$$Widget._$extend(_t._$$EventTarget);

    // TODO

    return _p;
});

接口重写

控件采用分配回收重用机制，因此控件需实现__init、__reset、__destroy接口

NEJ.define([
    'base/klass',
    'util/event'
],function(_k,_t,_p){
    var _pro;
    // 定义控件
    _p._$$Widget = _k._$klass();
    // 继承_$$EventTarget
    _pro = _p._$$Widget._$extend(_t._$$EventTarget);
    // 控件首次创建构造过程
    _pro.__init = function(){
        this.__super();
        // TODO
    };
    // 控件重复使用重置过程
    _pro.__reset = function(_options){
        this.__super(_options);
        // TODO
    };
    // 控件回收销毁过程
    _pro.__destroy = function(){
        this.__super();
        // TODO
    };

    // TODO

    return _p;
});

扩展实现

其他扩展的业务逻辑根据控件实际需求实现

NEJ.define([
    'base/klass',
    'util/event'
],function(_k,_t,_p){
    var _pro;
    // 定义控件
    _p._$$Widget = _k._$klass();
    // 继承_$$EventTarget
    _pro = _p._$$Widget._$extend(_t._$$EventTarget);
    // 控件首次创建构造过程
    _pro.__init = function(){
        this.__super();
        // TODO
    };
    // 控件重复使用重置过程
    // 重置过程可以接受到分配控件时输入的配置信息
    _pro.__reset = function(_options){
        this.__super(_options);
        // TODO
    };
    // 控件回收销毁过程
    _pro.__destroy = function(){
        this.__super();
        // TODO
    };

    // 扩展私有接口
    _pro._myPrivateMethod = function(){
        // TODO
    };
    // 扩展保护接口
    _pro.__myProtectedMethod = function(){
        // TODO
    };
    // 扩展对外接口
    _pro._$myPublicMethod = function(){
        // TODO
    };

    // TODO

    return _p;
});

图片

图片

如果对这个框架感兴趣的，可以关注下方公众号！在公众号中扣“nej”即可获得源码和教程！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/爱喝兽奶帝天荒/article/detail/753676
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号