本发明涉及前端开发
技术领域：
：，具体涉及一种基于视觉、组件、图标的前端开发系统。
背景技术：
：：随着公司业务发展，需要自有一套公共视觉、组件、图标库，旨在统一网站项目的前端ui(用户界面)设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。现有的bootstrap是一个用于快速开发web应用程序和网站的前端框架。bootstrap基于html、css、javascript。bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。bootstrap自带以下特性：全局的css设置、定义基本的html元素样式、可扩展的class，以及一个先进的网格系统。另外，bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。bootstrap包含了十几个自定义的jquery插件，用户可以直接包含所有的插件，也可以逐个包含这些插件。其中，html、css、javascript解释如下：html：超文本标记语言(hypertextmarkuplanguage)，是一种用于创建网页的标准标记语言css：层叠样式表(cascadingstylesheets)是一种用来表现html(标准通用标记语言的一个应用)或xml(标准通用标记语言的一个子集)等文件样式的计算机语言。css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。javascript：javascript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为javascript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在html(标准通用标记语言下的一个应用)网页上使用，用来给html网页增加动态功能。此外，pure.css也是一套可用于web项目的小型响应式css模块，包含多个模块：base(基本样式)、grids(网格系统)、forms(表单)、buttons(按钮)、tables(表格)、menus(菜单)。foundation的网格流式布局跟bootstrap差不多，默认不带图标集，它推荐使用开源字体图标来实现icon，好处是可以通过字体大小来调节图片大小。但是上述现有技术基本上都是面向开源，各套件较通用，存在无法满足公司定制化需求的问题。技术实现要素：本发明主要为前端开发时客户端ui层面提供通用解决方案，解决了以下技术问题：1、抽象与业务无关的通用视觉ui及组件，为各个业务线对应的前端工程提供服务。2、把有一些与具体业务强相关的模块抽象成业务组件，比如页面母版、页头导航、页脚导航等等，为各个业务线对应的前端工程提供服务，方便复用。3、在前端开发过程中，会需要各种各样的图标。提供通用的字体图标服务，为各个业务线对应的前端工程提供服务，同时还提供图标颜色变换、大小变换、动画特效、版本化管理，免发布更新图标库等特性。本发明采用的技术方案是：一种基于视觉、组件、图标的前端开发系统，其特征在于，所述前端开发系统包括样式视觉库、组件库和图标库，前端开发系统与n个业务线连接，n至少为1；样式视觉库为n个业务线对应的前端提供样式和视觉服务；组件库将通用的模块化组件抽象成业务组件，为n个业务线对应的前端提供组件服务；图标库为n个业务线对应的前端提供图标服务。进一步地，所述样式包括以下任意一种及以上：按钮、文字、链接，所述视觉包括颜色。进一步地，所述组件库包括以下任意一种及以上：表单组件、切换组件。进一步地，所述图标库提供通用的字体图标服务，同时还提供图标颜色变换、大小变换、动画特效、版本化管理。进一步地，所述图标库将事先准备好的svg文件生成字体文件，然后再通过webfont技术在页面中使用字体，使用图标确定的css样式名来展示图标。本发明的有益效果在于，糅合了前端开发过程中需要的视觉、组件、图标等服务，满足公司定制化需求，方便复用，提供企业级的定制化一站式服务。附图说明图1是本发明一种基于视觉、组件、图标的前端开发系统原理框图。图2是按钮样式图。图3是链接和文字样式图。图4是表单组件。图5是切换组件。图6是图标库。具体实施方式本发明提供一整套通用的客户端ui层解决方案，包括视觉样式、组件、图标等内容，方便线上业务线引用和复用。下文中，结合附图和实施例对本发明作进一步阐述。图1是本发明一种基于视觉、组件、图标的前端开发系统原理框图，包括样式视觉库、组件库和图标库。样式视觉库主要提供样式和视觉服务，抽象与业务无关的通用视觉ui及组件，比如按钮、文字、链接的样式(如图2和图3所示)，颜色的分类等等一切跟视觉相关的元素，为各个业务线对应的前端工程提供服务。在具体实施过程中，前端直接引用样式视觉库提供的服务即可。组件库主要是将一些通用的模块化组件抽象提供统一出口服务。比如表单组件、切换组件等等(如图4和图5所示)，为各个业务线对应的前端工程提供服务，方便复用。在具体实施过程中，前端直接引用组件库提供的服务即可。在前端开发过程中，会需要各种各样的图标。图标库提供通用的字体图标服务，为各个业务线对应的前端工程提供服务，同时还提供图标颜色变换、大小变换、动画特效、版本化管理，免发布更新图标库等特性。图标库将事先准备好的svg文件通用技术手段生成字体文件，然后再通过webfont技术在页面中使用字体，使用图标确定的css样式名来展示某一个图标，如图6所示。svg(可缩放矢量图形)是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。webfont，称之为在线字体或者网络字体，是css3中的一个模块，主要是把自定义的特殊字体嵌入到网页中。无需安装，无需下载，直接在线使用。本发明优选使用javascript、html、css三种语言实现。涉及周边技术包括：node.js、svg、webfont等。node.js是一个基于chromejavascript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。node.js使用事件驱动，非阻塞i/o模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。本发明虽然已以较佳实施例公开如上，但其并不是用来限定本发明，任何本领域技术人员在不脱离本发明的精神和范围内，都可以利用上述揭示的方法和技术内容对本发明技术方案做出可能的变动和修改，因此，凡是未脱离本发明技术方案的内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化及修饰，均属于本发明技术方案的保护范围。当前第1页12当前第1页12