常见的前端框架有哪些

这篇具有很好参考价值的文章主要介绍了常见的前端框架有哪些。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.  EasyUI

EasyUI是一种基于jQuery的用户界面插件集合。easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。优势还说去。 

easyUI入门: 

页面引入必要的js和css样式文件,文件引入顺序为: 

1. <!-- 引入JQuery -->

2. <script type="text/javascript" src="../jquery-easyui-1.4.1/jquery.min.js"></script>

3.     <!-- 引入EasyUI -->

4. <script type="text/javascript" src="../jquery-easyui-1.4.1/jquery.easyui.min.js"></script>

5.    <!-- 引入EasyUI的中文国际化js,让EasyUI支持中文 --> 

6. <script type="text/javascript" src="../jquery-easyui-1.4.1/locale/easyui-lang-

zh_CN.js"></script>

7.     <!-- 引入EasyUI的样式文件-->

8. <link rel="stylesheet" href="../jquery-easyui-1.4.1/themes/default/easyui.css"

type="text/css"/>

9.     <!-- 引入EasyUI的图标样式文件-->

10. <link rel="stylesheet" href="../jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>

然后在页面写easyUI代码就行,easyUI提供了很多样式: 

实现代码如下: 

1. <!DOCTYPE html> 

2. <html> 

3. <head> 

4.   <meta charset="UTF-8"> 

5.   <title>Basic Dialog - jQuery EasyUI Demo</title>

6.   <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

7.   <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> 

8.   <link rel="stylesheet" type="text/css" href="../demo.css"> 

9.   <script type="text/javascript" src="../../jquery.min.js"></script> 

10.  <script type="text/javascript" src="../../jquery.easyui.min.js"></script>

11. </head>

12. <body>

13.  <h2>Basic Dialog</h2>

14.  <p>Click below button to open or close dialog.</p> 

15.  <div style="margin:20px 0;"> 

16.   <a href="javascript:void(0)" class="easyui-linkbutton"

οnclick="$('#dlg').dialog('open')">Open</a> 

17.   <a href="javascript:void(0)" class="easyui-linkbutton"

οnclick="$('#dlg').dialog('close')">Close</a> 

18.  </div>

19.  <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px"> 

20.   The dialog content. 

21.  </div>

22. </body>

23. </html>

24.  

2.  MiniUI

基于  jquery 的框架,开发的界面功能都很丰富。jQuery MiniUI - 快速开发  WebUI。它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验。使用  MiniUI,开发者可以快速创建  Ajax 无刷新、  B/S 快速录入数据、  CRUD、  Master-Detail、菜单工具栏、弹出面板、布局导航、数据验证、分页表格、树、树形表格等典型  WEB 应用系统界面。:收费没有码,基这个开如果对功能就需要 

提供 

表格控件 

树形控件 
布局控件:标题面板、弹出面板、折叠分割器、布局器、表单布局器等 导航控件:分页导航器、导航菜单、选项卡、菜单、工具栏等。 

表单控件:多选输入框、弹出选择框、文本输入框、数字输入框、日期选择框、下拉选择框、下拉树形选择框、下拉表格选择框、文件上传控件、多选框、列表框、多选框组、单选框组、按钮等 
富文本编辑器 

图表控件:柱状图、饼图、线形图、双轴图等。 

技术 

快速开发:使用Html配置界面,减少80%界面代码量。 

易学易用:简单的API设计,可以独立、组合使用控件。 

性能优化:内置数据懒加载、低内存开销、快速界面布局等机制。 

丰富控件:包含表格、树、数据验证、布局导航等超过50个控件。 

超强表格:提供锁定列、多表头、分页排序、行过滤、数据汇总、单元格编辑、详细行、Excel导出等功能。 

第三方兼容:与ExtJS、jQuery、YUI、Dojo等任意第三方控件无缝集成。 浏览器兼容:支持IE6+、FireFox、Chrome等。 

跨平台支持:支持Java、.NET、PHP等。 

实现代码如下: 

1.  <ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:200px;padding:5px;"

2.   showTreeIcon="true" textField="text" idField="id"  

3.   allowDrag="true" allowDrop="true"  

4.   > 

5.  </ul>

1.  jQueryUI(2017-11-23-lyq) 

jQuery UI 是一套  jQuery 的页面  UI 插件,包含很多种常用的页面空间,例如  Tabs(如本站首页右上角部分) 、拉帘效果(本站首页左上角)、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。 

技术 
简单易用:继承  jQuery 简易使用特性,提供高度抽象接口,短期改善网站易用性。 

开源免费:采用  MIT & GPL 双协议授权,轻松满足自由产品至企业产品各种授权需求。 

广泛兼容:兼容各主流桌面浏览器。包括IE 6+、Firefox 2+、Safari 3+、Opera 9+、Chrome 1+。 轻便快捷:组件间相对独立,可按需加载,避免浪费带宽拖慢网页打开速度。 

标准先进:支持  WAI-ARIA,通过标准  XHTML 代码提供渐进增强,保证低端环境可访问性。 

美观多变:提供近  20 种预设主题,并可自定义多达  60 项可配置样式规则,提供  24 种背景纹理选择。 度娘上搜jQueryUI的api,其用法与easyUI、MiniUI都大同小异,此处将不再举例。 

2.  Vue.js

Vue.js (读音  /vjuː/,类似于  view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和  Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。 

Vue.js 

引入相应文件: 

1.  <script src="https://unpkg.com/vue"></script>

声明式渲染: 
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进  DOM 的系统: 

1.  <!-- html文件中 -->

2.  <div id="app">

3.   {{ message }} 

4.  </div>

 <!--  js 文件中 --> 

5.  var app = new Vue({

6.   el: '#app', 

7.   data: { 

8.   message: 'Hello Vue!'

9.   } 

10.  })

vue例: 
每个  Vue 应用都是通过  Vue 函数创建一个新的  Vue 实例开始的,当创建一个  Vue 实例时,你可以传入一个选项对象。可以使用这些选项来创建你想要的行为。 

1.  <!--  js 文件中  --> 

2.  var vm = new Vue({

3.   // 选项 

4.  })

实例 
每个  Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到  DOM、在数据变化时更新  DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。比如 created 钩子可以用来在一个实例被创建之后执行代码: 

1.  <!--  js文件中  --> 

2.  new Vue({

3.   data: { 

4.   a: 1 

5.   }, 

6.   created: function () {

7.   // `this` 指向 vm 实例 

8.   console.log('a is: ' + this.a)

9.   } 

10.  })

11.  // => "a is: 1"

3.  AngularJS (2017-11-23-lyq) 

AngularJS 是google 开发者设计的一个前端开发框架,它是由是由JavaScript 编写的一个JS框架。通常它是

用来在静态网页构建动态应用不足而设计的。 

AngularJS 特点如下: 

  1、 数据绑定:  AngularJS是数据双向绑定。 

  2、  MVVM(Model-View-ViewModel)模式:    Model 简单数据对象,View 视图(如HTML,JSP等),

ViewModel是用来提供数据和方法,和View 进行交互。这种设计模式使得代码解耦合。 

  3、依赖注入:AngularJS支持注入方式把需要的对象,方法等注入到指定的对象中。 

  4、 指令:  AngularJS内部自带各种常用指令,同时也支持开发者自定义指令。 

  5、HTML模板和扩展HTML:  AngularJS可以定义与HTML兼容的自定义模板。 

AngularJS 的Api: 
AngularJS 提供了很多功能丰富的组件,处理核心的 ng 组件外,还扩展了很多常用的功能组件,如ngRoute(路由),ngAnimate(动画),ngTouch(移动端操作)等,只需要引入相应的头文件,并依赖注入你的工作模块,则可使用。 

ng (core module):AngularJS的默认模块,包含AngularJS的所有核心组件。 

指令(directive) 

这是指令的核心集合,你可以在你的模板代码中使用它们来构建一个AngularJS应用。 

一些例子包括:ngClick,ngInclude, ngRepeat,等等 

服务(service) 

这是服务的核心集合,依赖注入后可在你的应用中使用。 

一些例子包括: $compile,$http, $location,等等 

过滤器(filter) 

在组件模块中的核心过滤器是用来转换模板数据。 

一些例子包括: filter, date, currency,lowercase, uppercase 等等 

全局函数

(function) 

核心的全局函数作为angularjs对象。这些核心功能在您的应用程序的原生的JavaScript操作有用。 

一些例子包括: angular.copy(), angular.equals(), angular.element()等等 

ngRoute:AgularJS的路由模块,你能使用ngRoute结合"#"定义你的地址访问。引入angular-route.js文件,然后在你当前的工作模块依赖注入ngRoute模块。 

服务(service) 

下面这些服务用作AngularJS的路由管理。 

$routeParams - 解析返回路由中带有的参数 
$route - 用于构建各个路由的url、view、controller这三者的关系 $routeProvider - 提供路由配置 

指令(Directive) 

指令ngView 提供不同路由模板插入的视图层 

ngAnimate:AngularJS的动画模块,使用ngAnimate各种核心指令能为你的应用程序提供动画效果。

动画可使用css或者JavaScript回调函数。引入angular-animate.js文件,然后在你当前的工作模块依赖注

入ngAnimate模块。 

服务(service) 

使用$animate 来在你的指令代码中触发动画操作。 

CSS-based animations 

按照nganimate的CSS命名结构参考CSS转换/关键帧动画在AngularJS。 

一旦定义,动画可以通过引用CSS在HTML模板代码触发。 

JS-based animations 

使用module.animation() 来注册一个  JavaScript动画。 

一旦注册,动画可以通过引用CSS在HTML模板代码触发。 

ngAria:帮助制作  AngularJS 自定义组件的新模块。引入angular-aria.js 文件,然后在你当前的工

作模块依赖注入ngAria模块。 

服务(service) 

这是服务的核心集合,依赖注入后可在你的应用中使用。 

一些例子包括: ngClick, ngInclude, ngRepeat等等 

ngResource:AngularJS的动画模块,使用ngAnimate各种核心指令能为你的应用程序提供动画效

果。动画可使用css或者JavaScript回调函数。引入angular-resource.js 文件,然后在你当前的工作模块

依赖注入ngResource模块。 

服务(service) 

这是服务的核心集合,依赖注入后可在你的应用中使用。 

一些例子包括: ngClick, ngInclude, ngRepeat等等 

ngCookies:ngCookies模块提供了一个方便的包用于读取和写入浏览器的cookies。 

引入angular-cookies.js 文件,然后在你当前的工作模块依赖注入ngCookies模块。 

服务(service) 

这是服务的核心集合,依赖注入后可在你的应用中使用。 

一些例子包括: ngClick, ngInclude, ngRepeat等等 

ngTouch:AngularJS的动画模块,使用ngAnimate各种核心指令能为你的应用程序提供动画效果。动画可使用 css 或者 JavaScript 回调函数。引入 angular-touch.js 文件,然后在你当前的工作模块依赖注入ngTouch模块。 

服务(service) 

这是服务的核心集合,依赖注入后可在你的应用中使用。 

一些例子包括: ngClick, ngInclude, ngRepeat等等 

ngSanitize:使用ngSanitize可安全地解析和在你的应用程序中操作HTML数据。 引入angular-sanitize.js 文件,然后在你当前的工作模块依赖注入ngSanitize模块。 

服务(service) 

这是服务的核心集合,依赖注入后可在你的应用中使用。 

一些例子包括: ngClick, ngInclude, ngRepeat等等 文章来源地址https://www.toymoban.com/news/detail-476743.html

ngMock:AngularJS的动画模块,使用ngAnimate各种核心指令能为你的应用程序提供动画效果。动画可使用css或者JavaScript回调函数。引入angular-animate.js 文件,然后在你当前的工作模块依赖注入ngMock模块。 

服务(service) 

这是服务的核心集合,依赖注入后可在你的应用中使用。 

一些例子包括: ngClick, ngInclude, ngRepeat等等 

到了这里,关于常见的前端框架有哪些的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • EasyUI Jquery 学习笔记 —— Window(窗口)详细版

    通过 $.messager.defaults 重写默认的 defaults。 消息框(messager)提供不同样式的消息框,包括警示(alert)、确认(confirm)、提示(prompt)、进展(progress)等等。所有的消息框都是异步的。用户可以在与消息框交互后使用回调函数来完成一些动作。 依赖 window linkbutton progressbar

    2024年04月15日
    浏览(41)
  • 【开源三方库】Easyui:基于OpenAtom OpenHarmony ArkUI深度定制的组件框架

    万冬阳 公司:中国科学院软件所 小组:知识体系工作组 Easyui是一套基于ArkTS语言开发的轻量、可靠的移动端组件库,它是对OpenAtom OpenHarmony(以下简称“OpenHarmony”) ArkUI进行深度定制的组件框架。Easyui可扩展性较强,可以基于源码进行二次开发,修改原有组件以及新增部

    2024年02月03日
    浏览(44)
  • jQuery EasyUI datagrid 无记录时,增加“暂无数据“提示

    1、在onLoadSuccess中添加如下代码: 完整代码: 如下图所示: 2、设置emptyMsg 属性,emptyMsg 属性是 EasyUI 的 DataGrid 组件从版本 1.5.4 开始引入的。这个属性用于设置在 DataGrid 没有数据时显示的提示信息。

    2024年02月12日
    浏览(39)
  • 大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html+jquery+bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页

    2024年02月11日
    浏览(79)
  • 前端UI框架有哪些|20个优秀免费开源的WEB前端UI框架提高网站开发效率

    最近准备学习一下前端UI我也是在网上找了很久最终整理出来了20个不错的前端UI框架网站,大家都知道很多成熟的前端框架可以直接引,学习框架可以提升我们网站的开发速度。有些大型公司的前端或者后端框架都是用自己开发的,对于大部分用户和公司来讲,我们可以用开

    2024年02月06日
    浏览(67)
  • 你在项目中做过哪些安全防范措施?,解密前端开发常见误区

    XSS 攻击 按照之前说的思路,先讲概念,说用途 什么是XSS攻击 XSS即 Cross Site Scripting (跨站脚本攻击),指的是攻击者想尽一切办法将一些可执行的代码注入到网页中,利用这些恶意脚本,攻击者可获取用户的敏感信息如 Cookie、SessionID 等,进而危害数据安全。 为了不和层叠样

    2024年04月10日
    浏览(84)
  • 一种基于闭包函数实现自动化框架断言组件的设计实践

    目前测试组同学基本具备自动化脚本编写能力,为了提高效率,如何灵活运用这些维护的脚本去替代部分手工的重复工作?为了达到测试过程中更多的去使用自动化方式,如何能够保证通过脚本覆盖更多的校验点,提高自动化测试的精度和力度?那么一定是不断的丰富断言,

    2024年02月08日
    浏览(64)
  • 基于SSM框架实现的在线心理评测与咨询系统(技术栈 spring+springmvc+mybatis+jsp+jquery+css)

    本项目是一套基于SSM框架实现的在线心理评测与咨询系统,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含:项目源码、数据库脚本等,该项目附带全部源码可作为毕设使用。 项目都经过严格调试,eclipse或者idea 确保可以运行! 该系统功

    2024年04月12日
    浏览(56)
  • 常见的web前端开发框架:Vue.js

            常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势,开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时,随着技术的不断发展,新的框架和工具也会不断涌现,为Web前端开发带来更多的选择和可能性。

    2024年02月20日
    浏览(49)
  • 嵌入式_一种非常简单实用的基于GD32的裸机程序框架

    搜索了一下关于GD或ST裸机程序的问题,网上有非常多也非常的例子,但是针对裸机开发的程序框架却比较少,这里简单整理了一下在项目中使用过的一种比较小巧便携的裸机程序框架(确切点说算不上框架,只能说一种写法)。 之前常见的裸机程序框架就是流水账框架,比

    2024年02月13日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包