【推荐】jquery开发的大型web应用—H5编辑器工具

redswan 发布于2年前
0 条问题

H5编辑器介绍

  • H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面,界面如下

制作流程

注册 -> 登录 -> 新建H5 -> 编辑H5 (添加页面,添加图层,拖动设置参数) -> 预览/保存/发布 -> end

开源地址

官方网址

功能模块:

  • 1、首页,登录,注册
  • 2、 新建H5,删除H5,修改H5
  • 3、 页面布局之四大模块(顶部,页面列表,图层列表,操作区域,视图区域,快捷菜单)
  • 4、 基本参数(主图,名字,描述,背景,翻页动画,背景音乐,加载动画)
  • 5、 上传图片,删除图片
  • 6、 新建页面(选择模板,新建空白模板)
  • 7、 设置页面参数 (背景,锁定翻页,自动翻页,修改名称,复制,删除)
  • 8、 添加图片图层(选择图片,裁剪图片,设置坐标,拖动,旋转,缩放,透明度,圆角,阴影,边框)
  • 9、 给图层添加动画效果,动画列队,排序,删除,设置参数
  • 10、 添加触发交互效果
  • 11、 添加文本图层,设置文本
  • 12、 图层列表的操作,复制,删除,排序
  • 13、 快捷菜单
  • 14、 保存,发布,手机预览

技术选型

  • Jquery 2x:DOM和事件的操作,目前是无任何框架能及
  • ES6:这个不多说,很强大,自带模板引擎,语法简洁,支持类,继承,各种新的api,构建前端大型web应用的语言不是typescript 就选 ES6了
  • Webpack:当前流行的不要不要的,执行效率高(最初是gulp,后来效率太低,换成webpack了)~
  • git:代码管理,大家都在用,都说好,不多说~
  • Eslint:前端代码校验,结合vscode真的好用,不黑不吹~
  • Node + express: 因为对其他技术不熟,我只是个前端~
  • Mysql: 关系型数据库比较适合当前的业务逻辑,也利于后期的多语言开发

代码规范

JS规范:

  • 1、命名规范:变量名均以驼峰命名
  • 2、this 做为变量的时候,统一采用 self(优先),that
  • 3、jquery对象命名统一采用 $** 命名 (eg: $box)
  • 4、其他遵循Eslint 规范
  • 5、有详细的注释规范

CSS规范:

  • 1、UI组件库,CSS class 名字以 mt-** 定义,避免和其他命名冲突
  • 2、id统一使用驼峰命名
  • 3、CSS归属命名规范: “.模块名-功能名“ 子模块继承父模块的CSS名字,再往后面加 “父模块 – 子模块名字“

文件夹命名规范:

  • 1、文件夹统一采用驼峰命名
  • 2、大模块/子模块/孙子模块

作者say:

该编辑器拥有强大的拓展性,CSS3动画,canvas特效,页面种类,图层类型,交互事件等均可以后期进行拓展,可以应付各种复杂的需求,所有交互数据均在本地做了缓存,保存操作对用户来说是无感知的,图片也做了本地缓存,大大节约了性能开销!

查看原文: 【推荐】jquery开发的大型web应用—H5编辑器工具

  • brownbear
  • crazyostrich
  • organiccat
  • blueduck
  • lazyfrog
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。