当前位置:首页 » 网页前端 » 前端公用组件
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端公用组件

发布时间: 2022-08-22 05:24:39

1. 前端框架都有哪些,企业常用的是哪些

在做web开发的时候经常会遇到一个问题,那就是,选择什么样的框架来做前端开发。下面我把目前常用的一些前端的框架简单的给你介绍一下.
就目前来说,比较流行且常用的Web前端框架有Angular、React和Vue。AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发,它主要考虑的是构建CRUD应用,而至少90%的Web应用都是CRUD应用。React是一个用于构建用户界面的JavaScript库,也是Web应用程序的视图层。React拥有较高的性能,代码逻辑非常简单,已经有越来越多的人开始关注和使用它。Vue.js是一套构建数据驱动的Web界面的渐进式框架。Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。
除了这几个,还有一些,我给你介绍
1. Bootstrap
Boostrap绝对是目前最流行用得最广泛的一款框架如上图。它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JavaScript插件。
2、flex
Apache基金会发布了Flex 4.8版本,这是Adobe将Flex捐献给Apache基金会后发布的第一个版本
3、extjs
ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。
4、easyui
easyui帮助你构建你的web应用更加容易。
它是一个基于jquery的插件,开发出来的一套轻量级的ui框架,非常小巧而且功能丰富。
5、MiniUI
又一个基于jquery的框架,开发的界面功能都很丰富。
6、jQuery UI
jQuery UI 是一套 jQuery 的页面 UI 插件,包含很多种常用的页面空间,例如 Tabs(如本站首页右上角部分) 、拉帘效果(本站首页左上角)、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。
7、DWZ
DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.
8、GWT
Google 网页工具包——GWT 提供了一组基于Java语言的开发包,这个开发包的设计参考Java AWT包设计,类命名规则、接口设计、事件监听等都和AWT非常类似。熟悉Java AWT的开发者不需要花费多大的力气就能够快速的理解GWT开发工具包,将更多地时间投入到GWT应用的开发过程中。
9、YUI
Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证,基本上没怎么研究过!
10、Sencha
Sencha 是由 ExtJS、jQTouch 以及 Raphael 三个项目合并而成的一个新项目。
11、Dojo
在国内应用好像不是很广,不过性能上应该没问题。
Dojo是一个用javascript语言实现的开源DHTML工具包。
12、ZK
ZK是 一套以 AJAX/XUL/Java 为基础的网页应用程式开发框架,用于丰富网页应用程式的使用接口。最大的好处是,在设计AJAX网络应用程式时,轻松简便的操作就像设计桌面程式一样。 ZK包含了一个以AJAX为基础、事件驱动(event-driven)、高互动性的引擎,同时还提供了多样丰富、可重复使用的XUL与HTML组件,以 及以 XML 为基础的使用接口设计语言 ZK User-interfaces Markup Language (ZUML)。
13、OperaMasks-UI
OperaMasks- UI是OperaMasks团队 2011下半年打造的一款轻量级前端JS组件库,旨在提供一款学习曲线低、定制性灵活、样式统一,且多浏览器支持、覆盖企业业务场景的前端 JavaScript UI组件库。目前,该团队已将这一产品以LGPL 开源协议开放给社区。
14、JavaFX
Sun 公司(已于2009年被Oracle公司收购)在2008年12月05日发布了JavaFX技术的正式版,它使您能利用 JavaFX 编程语言开发富互联网应用程序(RIA)。JavaFX Script 编程语言(以下称为JavaFX)是Sun微系统公司开发的一种declarative, statically typed(声明性的、静态类型)脚本语言。
以上的回答希望对你有所帮助

2. web前端组件怎么实现

模块化更一种开发规范,比如cmd amd 是为了更好的解藕,比如一个网站,按照不同的模块来开发,比如你有个评论区,a 项目有,b 项目有,如果仅是单纯的模块开发,这个js 文件你就可以单独来回引用,
更比如 ,一个页面 分好多个功能, 这时候你要是都写在一个js 中 会越来越大,
而你把他分成不同的模块,
比如评论是一块
分页又是一块,
已经上线,或你不做了,后期别人拉手,或你接手别人的项目, 这时候来个需求让你把分页去掉,或修改 你可以清楚的找到对应模块文件 进行修改 或去掉
模块是自定义的,

组件,更想当于一个通用的东西,有的分功能组件,有的分业务组件
大图切换,这种就是单纯的一个效果展示,只要调用就ok
一个分页,也是只单纯的调用,
组件更是一个多处都可以使用 ,不需要再单独开发的

3. 前端组件和插件的区别

组件:组件这个词通常是现在描述产品的时候出现,一个大的产品会有很多小的部分组成,而小的部分除了是一个大的组件的部分以外,自己可能还包含更小的组件,所以组件是递归的,那么组件到底是什么呢?最常见的组件就是我们已经写好的程序代码,任何一小段代码都可以是一个组件,它可以和其它代码段连接起来组成更大的一段程序代码,一个更大的组件,然后可能是一个函数,或者一个类程序单元,或者数个类单元文件的集成,当不同的组件的组装形成更大的组件时候,我们实际就是在做我们通常提到的一件事情:集成,软件中有很多集成工作要做,每日集成,重要版本集成等等。
插件:根据对组件和模块的分析,插件属于组件,而且还是一个程序模块,也是一个功能模块。插件是一种电脑程序,通过和应用程序的互动,来替应用程式增加一些特定的功能。
插件必须依赖于应用程序才能发挥自身功能,仅靠插件是无法正常运行的。

4. 前端开发中有哪些插件或组件,值得自己去实现一次

基础:图片懒加载,滚动到底部加载,tab选项卡,幻灯片轮播
高级:富文本编辑器

5. 前端ui框架有哪些

以下是几个精致的Web UI框架:
1、Aliceui
Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式。
gitHub地址:https://github.com/aliceui/aliceui.github.io
2、Amazeui
Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。
地址:http://amazeui.org/
3、sui
SUI是一套基于bootstrap开发的前端组件库,同时她也是一套设计规范。 通过SUI,可以非常方便的设计和实现精美的页面。
地址:http://sui.taobao.org/
同时sui还有移动端版本msui,msui是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库,减少重复工作。
地址:http://m.sui.taobao.org/
4、FrozeUI
Frozen UI是一个开源的简单易用,轻量快捷的移动端UI框架。基于手Q样式规范,选取最常用的组件,做成手Q公用离线包减少请求,升级方式友好,文档完善,目前全面应用在腾讯手Q增值业务中。
地址:http://frozenui.github.io/
5、uiKit
uiKit是一款轻量级、模块化的前端框架,可快速构建强大的web前端界面。
地址:http://www.getuikit.net/
6、H-ui
H-ui是轻量级前端框架,简单免费,兼容性好,适用于中国网站。
地址:http://www.h-ui.net/
7、Weui
weUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
地址:https://github.com/weui/weui
8、layui
Layui 诞生于2016年金秋,是一款带着浓烈情怀的国产前端UI框架,她追求极简,又不失丰盈的内在,说她是史上最轻量的结晶,似乎并不为过。一切都源自于她对原生态的执着,对前端社区的那些噪杂声音的过滤,以及她本身的精心雕琢。
地址:http://www.layui.com/
9、YDUI Touch
YDUI Touch 专为移动端打造,在技术实现、交互设计上兼容主流移动设备,保证代码轻、性能高;使用 Flex 技术,灵活自如地对齐、收缩、扩展元素,轻松搞定移动页面布局;实现强大的屏幕适配布局,等比例适配所有屏幕。什么?用得不开心?轻松切换 px;自定义Javascript组件、Less文件、Less变量,定制一份属于自己的YDUI;
地址:http://www.yi.org/
10、后台UI开发框架 MuseUI
一款基于bootstrap风格,兼容于主流浏览器(包括IE6)的后端UI开发组件。
网站:http://git.oschina.net/muse/museui

6. 前端开发者面试必备的3个点

最近是招聘旺季,我也在负责我们公司的招聘,但是面试过程大部分前端面试者给我的感觉思维比较窄,以及陈述问题时候比较乱,整体给人感觉不是理想。下面是我作为一个面试官从三个维度给面试者建议和思考吧。


一.自我介绍


1.自我介绍,可以简单介绍你毕业什么学校,什么专业


2.出来负责的项目,每个项目自己充当的角色


3.每个项目使用前端技术+后端技术


简单大概的说出来就可以了,不要详细到你哪年进入公司,哪年离开公司,负责项目做什么的,说一大通。这个对我们面试官来说,想让你自我简单介绍,其实考察点有两方面:


A.面试者的表达能力和概括能力


B.面试者目前掌握什么技术,做过什么项目,在项目中的角色来初步判定这个人的能力


二.问题回答


在本人问他们做过项目中,自己感觉挑战最大的项目是什么,你在这个项目中做了什么,遇到什么问题,怎么解决这些问题的


1.有些面试者给我的答案直接说没有比较大的挑战;这个让我感觉这个人可能没有听懂我的问题,工作那么多年,难道没有一个项目可以拿来说的,那我拿什么来判定你的能力呢?难道凭你几句话,说我很牛逼的,没有什么困难难得到我?我就信任你了,伯乐寻找千里马都要知道几个千里马的特征吧。所以没有你也要在面试前准备好自己做过的项目和总结,在项目中自己做了什么,充当什么觉得。


2.有些面试者回答这个问题,在介绍项目的时候,很大概的说,还有就是一句话前端都是我做的,这些都是我设计的;这个让我感觉这个人也没有听懂我的意思,我在问你这个问题的时候,肯定是希望你详细介绍你的项目,这个项目使用者是谁,让我知道谁在使用这个项目;你负责哪些模块,哪些组件,那些模块实现什么业务逻辑,用到什么技术,这个能让我更加知道你项目的业务,才能从你描述中我知道这类的业务会遇到什么问题,以及你使用的技术是否合理,能让我更加判定你的能力,才能更好的提出问题,才能更好的面试下去。


3.回答问题的时候不要想到什么就答什么,要有陈述性,比如1,xxx;2.yyyyy;3.wwww的陈述,这样能让我知道你总结过,表达和陈述上比较清晰,思维好;想到什么答什么的,让我感觉思维可能比较乱,有可能我听懂了你的表述,但是让我感觉表达能力有些欠缺。


4.以及在你项目中遇到的问题,你要陈述问题,你是怎么思考的,而不是针对问题就直接说网络,google就解决了。我们大家都知道,遇到问题都会去网络,google.但在这问题的前提条件是问题是,架构上的问题,还是代码的bug问题,还是方案上的问题。你至少陈述清楚,是不是还有其他方案,在其他方案中,你为什么选择这个方案。这个能让知道你在面对问题的时候,你是否思考了其他的问题,想得越多,知道能体现出的思维比较发散,遇到问题可以有其他方式解决,而不是死磕一棵树上。


三.前端技能


前端技能在问到很多面试者的时候感觉自己都懂前端,其实他们只是懂使用js敲代码而已,很多前端知识,以及前端原理都不懂,只会使用的话,那么永远只会走来人家的后面。就那一个比喻来说吧,如果你只是一个会开车的司机,不会修车或者造车,那么如果哪天车出了毛病,你都不知道,到时候才去学习车的构造原理。或者你会说我直接给维修厂不就可以了,如果维修厂关门了呢怎么办。所以我们前端开发人员还是要脚踏实地,不要说我会使用vuejs,react前端框架,问你一个mvvm模式是什么,你都说不知道,怎么实现mvvm框架,在不使用别人开发mvvm框架,自己可以开发一个简单的mvvm框架?前端的开发者问问自己?以我个人的要求,前端开发者必须掌握


1.HTTP协议


2.前端安全


3.常用前端框架的三驾马车react,vuejs,angularjs目前比较流行的以及jquery(工具库)的使用


4.前端基础知识,跨域,es6新语法


5.Nodejs的开发,express,koa等常用框架


6.了解一些数据库知识


7.能理解封装业务组件和公用组件


8.前端性能优化


9.前后端分离


如果可以,能掌握更加深层次的知识点:


1.前端架构,设计模式


2.前端工程化开发,测试,打包,发布


3.自己实现前端架构代码以及开发工具


这些是我近期的一些总结,也希望能给最近正在找工作,最近准备开始转行前端的小伙伴们一个方向。


在面试前做好准备,找好自己的定位,成功收获高薪!

7. 前端框架都有哪些,最主流的是哪个

推荐几个精致的web UI框架及常用前端UI框架!

1.Aliceui

Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式。

2.Amazeui

Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。

3.sui

SUI是一套基于bootstrap开发的前端组件库,同时她也是一套设计规范。

通过SUI,可以非常方便的设计和实现精美的页面。

同时sui还有移动端版本msui,msui是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库,减少重复工作。

9.YDUI Touch

YDUI Touch 专为移动端打造,在技术实现、交互设计上兼容主流移动设备,保证代码轻、性能高;使用 Flex 技术,灵活自如地对齐、收缩、扩展元素,轻松搞定移动页面布局;实现强大的屏幕适配布局,等比例适配所有屏幕。什么?用得不开心?轻松切换 px;自定义Javascript组件、Less文件、Less变量,定制一份属于自己的YDUI;

10、后台UI开发框架 MuseUI

一款基于bootstrap风格,兼容于主流浏览器(包括IE6)的后端UI开发组件。

8. 怎样提高前端工程师开发效率,都在这里

前端工程师其实是一个工作很杂的职位,除了要负责切图、写html/css/js外,还要解决一系列的浏览器兼容性、网页性能优化等问题,所以提高前端工程师的开发效率是势在必行的,也是前端工程化的体现。

对于开发效率,我个人理解是

开发效率 = 新增代码的效率 + 修改代码的效率 + 维护代码的效率

那么如何提高前端开发效率便可以按照前端工程化的理念来进行划分。下面我就介绍下7个提高前端开发效率的方法。

1.切图

切图是一个前端最基础的技能,一般我们使用Photoshop或者FireWorks基本都能搞定设计师交付给我们的设计图,但是要提高切图效率的话就得使用一些诀窍了,比如利用PS里的动作来实现“一键切图”功能,这里除了切图外还介绍了其他的实用方法和工具。

2.编码

对于编写代码部分我们首先要找到一款合适自己的IDE工具,建议不要使用Notepad++或者Dreamweaver,这些工具已经不符合前端潮流了,无法让自己优雅地敲代码。这里我主要推荐Sublime Text、Atom或者Webstrom,因为它们除了人性化的界面和支持大多数语法的高亮外,还可以安装各种各样的插件来拓展你的IDE工具,下面我主要介绍几款Sublime Text提高开发效率的插件:

其中Element是用于快速编写html/CSS的,比如输入 ul>li 后按下tab键便可以生成一个ul标签里面包含一个li标签

JSFormat用于格式化JS;CSScomb用于对样式属性进行一键排序;HTML-CSS-JS Prettify可以一键规范我们的HTML/CSS/JS,甚至JSON格式;SublimeTmpl可以快速新建HTML/CSS/JS文件; ColorPicker用于调用本地调色板功能。这些工具都非常实用,一定程度上可以提高我们的编码效率。

3.自动化

说到提高开发效率,这里不得不提一些前端的自动化工具,毕竟前端自动化是目前及未来的趋势,能够很大程度上缩减前端不必要的工作量,使我们能够专注前端本身。

这里我们可以使用NPM来管理我们的项目包文件;利用webpack来打包压缩我们的代码;利用Node.js来实现构建本地服务器;利用Karma、Jasmine来测试我们的前端代码。

用好前端自动化工具可以帮助我们处理很多琐碎的事情,比如一键压缩代码、图片,一键合并JS,检测文件更新等。

4.模块化

随着web2.0时代的到来,Ajax技术得到广泛应用,前端代码日益膨胀,而前端模块化能够方便我们对项目代码的维护,进行按需加载,从长远角度来看对我们提高项目的开发效率同样大有益处。

在ES6出来之前应该说前端代码本身不具备实现模块的功能,我们必须要使用一些模块化加载器来实现,比如RequireJS、SeaJs等。而随着ES6的普及,目前像RequireJS、SeaJs这样的工具已经没有存在的必要了。所以在基于ES6的开发环境下我建议使用ES6的模块化功能来实现我们的前端模块化。

5.组件化

前端组件化的概念也是由来已久,我们可以通过将我们的代码划分成不同组件来实现功能公用,一个同样的功能我们可能不用再次编写相同的代码,同时也可以提高前端代码的可维护性和清晰度。以下是目前流行的前端框架Vue的单文件组件的概念图:

我们可以将公用的组件抽离,将大组件拆分成小组件的形式实现前端组件化,组件与组件之间可以存在父子关系,也可以存在兄弟关系。在Vue的单文件组件中,一个组件包含了其HTML、CSS、JS的代码片段。

6.前后端分离

前后端分离的项目对提升前端开发效率非常有帮助,因为前端不再需要后台配置路由、搭建服务器环境、编写模板等,这样一来前端的生产力就会得到很大程度的解放,但是前后端分离的项目有利也有弊,如下图所示:


最终我们需要根据项目需求衡量利弊来决定是否使用前后端分离的模式。

7.规范与模式

团队协作离不开编码规范和开发模式的帮助。遵循编码规范文档可以帮助我们在团队开发时提高合作开发的效率。一个团队遵循一套编码规范可以使每个人的代码写出一个人的风格,这样团队间相互审查、测试、完善功能时会非常高效。下方是一些开源的前端编码规范文档:

  • 网页链接

  • 首页-TGuide

  • 网页链接

  • 网页链接

  • 除了编码规范我们在开发时经常会沿袭了一些已经存在的模式来解决问题,比如当用JS编写弹框时我们往往会用到单例模式,用CSS编写动画时直接套用动画的常用属性等,我们不再需要从头开始思考某一个功能的实现,这就是模式带来的意义。

    结语

    当然除了以上7点,对于前端来说需要提高开发效率的地方还有很多,可谓任重而道远。只有将前端无序、繁杂的操作组织起来,利用工具简化、规范前端流程,才能实现项目构建、开发、维护的一体化。希望本文能够给初识前端的同学带来启发并付诸实践。

9. 前端如何提升开发效率

来具体聊一聊提高前端工程师开发效率的那些方法!

当然除了以上5点,对于前端来说需要提高开发效率的地方还有很多,可谓任重而道远。希望以上几点能够给初识前端的同学带来启发并能够亲自实践。