企业级Web UI控件库:
- 通过src/core.js来对事件与状态进行统一管理;
- 通过src/esr.js来统一管理路由;
- 通过src/etpl.js 来实现模板渲染;
- 通过src/adapter.js 来兼容第三方库;
- 通过src/control 来扩展原生 DOM 节点的标准事件;
- 并提供了 pc 和 移动端 开发 常用的控件(自带默认样式);
- 支持 单页应用 开发,支持 ES6+ 语法。(打包工具已采用 uglify-es )
这里 只介绍 在公司内部 在mac环境下 如何快速 从0搭建一个 ecui 项目,并着手进行日常的开发,这里只接受 最常用 使用nginx进行开发的过程:
注意:构建服务器上采用的 node/v9.3.0 npm/6.1.0 如希望尽量减少和构建服务器的差异,可尽量安装同样的版本 以消除不确定性
>>> ## 打包工具 build.sh 不再使用 webpack.jar ;现在用 uglify-es 打包压缩;构建服务器上版本是 [email protected]
>>> uglifyjs --version
uglify-es 3.3.9 ## 请注意这里是输出的是 uglify-es 表明是 UglifyJS2 ( harmony 分支)
如果输出的是 uglify-js 3.3.x 表示安装不正确
; uglify-js 和 uglify-es 不一样, uglify-es 支持ES6+, 目前应采用的是 uglify-es
build.sh 里使用了几项常见的linux 程序(还依赖于jdk - 像 smarty4j.jar ),包括 awk、sed、python (构建服务器上 Python 2.6.6 一般 Python 2.7.x 也可以) 另外 需要一些node js里常用的工具。参见 内网说明文件 开发环境安装node、jslint
前置假定 node 已安装好,从环境中可以找到node (无论是位于 /usr/local/bin/node 还是PATH中能找到)
>>> ## npm/6.1.0 node/v9.3.0
>>> npm install [email protected] -g ### js 代码检测器 node-jslint version: 0.12.0 JSLint edition 2013-08-26; 稍后需用欧阳改造后的 lib/jslint.js
>>> npm install [email protected] -g ### css 检测器
>>> npm install [email protected] -g ### css 语法高亮
>>> npm install [email protected] -g ### 高效率压缩 js 文件 参见 https://github.com/mishoo/UglifyJS2/tree/harmony
安装完jslint后,找到安装路径(mac下默认安装路径:/usr/local/lib/node_modules),使用ECUI项目下的ECUI/tools/jslint.js替换掉安装的jslint中lib目录下的jslint.js文件( /usr/local/lib/node_modules/jslint/lib/jslint.js)
建议先创建一个工作目录,把框架源码和项目代码 都放在该目录下:
// 创建并进入该目录
mkdir work && cd work
// 下载源码
git clone https://github.com/allskystar/ECUI.git
cd ECUI 在ECUI项目目录下执行 java -jar ecui-doc.jar
可以使用 ECUI下的 generator-ecui 脚本创建项目,也可以自己手动按照框架对目录和文件命名的要求一一创建:
打开终端,在 work目录下执行以下命令:
// 初始化项目并且创建路由 demo.list 和 demo.detail,并且在index中添加路由的链接
./ECUI/generator-ecui.sh -i -r demo.list,demo.detail
在 work 按照以下目录层次创建对应文件,并按照实例 引入 ecui 相关文件:
demo(项目目录)
|
|_ _ _
|_ _ _ _ helloworld
| |
| |_ _ _ _ helloworld.js
| |
| |_ _ _ _ route.helloworld.demo.html
| |
| |_ _ _ _ route.helloworld.demo.js
| |
| |_ _ _ _ route.helloworld.demo.css
|
|_ _ _ _ index.html
|
|_ _ _ _ index.js
|
|_ _ _ _ index.css
安装 请直接去问百度,安装成功以后,然后在 mac 中打开终端, 执行以下命令:
// 打开 nginx.conf 配置文件后,参照 附录 中的 nginx配置示例, 修改 框架和项目 root 路径和文件名即可。
open /usr/local/etc/nginx/nginx.conf
// 第一次启动,需要root 权限,输入密码
sudo nginx
// 若是启动不成功,则需要多次需改nginx.conf,使用如下命令 重启
sudo nginx -s reload
根据 nginx.conf 配置的端口号和项目名称,然后在浏览器中输入,如:
http://localhost:9006/demo/index.html
使用您喜欢的编辑器 去打开 项目和框架目录即可,有时需要去 看一下框架 源码,这样避免在 业务代码中 做 重复的实现。对于pc和移动端开发的不同,请查看有关教程实例或者联系框架开发者!
<link rel="stylesheet/less" type="text/css" href="ecui.css" />
<link rel="stylesheet/less" type="text/css" href="common.css">
<link rel="stylesheet/less" type="text/css" href="index.css">
<script type="text/javascript" src="options.js"></script>
<script type="text/javascript" src="ecui.js"></script>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="index.js"></script>
请注意,不要把 filepath 、root 之类的目录位置原封不动的照抄! 根据你实际情况来填写
该配置示例要求 框架和业务项目的目录 在同一目录下,主要更改以下 两方面 的地方:
- 一是将 root 后面的路径 改为 您电脑上 ecui 框架或业务项目 的对应目录;
- 二是 添加类似 市场ERP 的匹配规则,将market 替换成您 项目所在的目录名;
请各位同事在研发态 给本机 nginx 静态资源的 location 段加一下 Cache-Control 控制,研发时,一些 css html jpg 废不了太多流量
location ~ /你的路径规则 {
add_header Cache-Control 'no-store,no-cache,must-revalidate';
add_header xx-via 'developer-你的名' ; ## 这样可以明确的从http响应头 感知到 静态资源来自你机器
……
}
下方是一个简易的配置文件(貌似已落后实际很多,并不完全这样配的)
#控制工作进程数
worker_processes 1;
error_log /tmp/nginx_error.log notice;
#包含nginx中所有处理连接的设置
events {
#工作进程的最大连接数量
worker_connections 1024;
}
#控制 nginx http处理的所有核心特性
http {
#该文件内定义指定文件头所对应的文件格式
include mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
#指定 nginx 是否调用sendfile 函数(zero copy 方式)来输出文件,对于普通应用,必须设为on。
#如果用来进行下载等应用磁盘IO重负载应用,可设置为off,以平衡磁盘与网络IO处理速度,降低系统负载
sendfile on;
#keepalive_timeout 参数是一个请求完成之后还要保持连接多久,不是请求时间多久,
#目的是保持长连接,减少创建连接过程给系统带来的性能损耗,类似于线程池,数据库连接池。
keepalive_timeout 65;
#upstream使nginx跨越单机的限制,完成网络数据的接收、处理和转发。
#他不产生自己的内容,而是通过请求后端服务器得到内容
upstream upstream_dev {
#用于跨域请求 后端的数据
server 192.168.155.26:80;
}
#本地开发时用于请求项目的静态文件,需要在hosts中配置 127.0.0.1 为localhost(Mac一般默认配置)
#否则通过127.0.0.1加 文件路径进行访问
server {
listen 9006; # 一般习惯设置80,但很多开发者 本机80端口常被占
server_name localhost; # 请确认是本机,最好解析为127 以免走入 ipv6型回路
#配置 demo 后台管理系统的静态资源请求规则
location ~ ^/demo/[/\w-]+$ {
proxy_pass http://upstream_dev;
}
location ~ /demo/ {
if (!-f $request_filename) {
#意思是当请求 ecui 框架相关的文件时,当下目录下不存在;
#所以去掉 demo 目录名,去匹配后面的规则,$1取得是demo后面的所有内容
#比如ecui.js,匹配到后面的规则后转到http://127.0.0.1:8000,nignx启的另一个server
#来获取ECUI,也就是ecui相关的文件,所以这个示例 要求框架和项目在同一层级目录
rewrite '^/demo(.*)' $1;
}
root /Users/kongwu/yxwork/;
index index.html index.htm;
}
#配置默认请求为 default 后台管理系统的静态资源
root /Users/kongwu/yxwork/default; #项目所在的路径
index index.html index.htm;#默认请求的文件
location = / {
root /Users/kongwu/yxwork/default;
index login.html index.htm;
}
location ~ ^[/\w-]+$ {
proxy_pass http://upstream_dev;
}
#配置项目中用到的所有ecui相关文件
location ~ ^/(ecui\.|options\.|ie-es5\.|common\.|common/|tools/|css/|src/|images/ecui/).*$ {
proxy_pass http://127.0.0.1:8000;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
#控制开发环境中用于请求的ecui有关文件
server {
listen 8000;
location / {
# 引入文件所在的路径
root /Users/kongwu/yxwork/ECUI;
}
}
}