❶ 如何搭建web前端框架
搭建web前端框架步骤如下:
1、确定项目使用的技术
根据项目的需求等来选择使用的技术(这里以angular4 + typsescript + nodejs+mongodb举例)
2、新建一个项目的工作文件夹
使用npm init初始化项目,根据问题配置,一般是直接回车使用默认配置,生成package.json文件
3、新建一个index.html页面
4、新建配置文件system.config.js
5、新建ts的配置文件tsconfig.json
npm install typescript
6、新建webApp目录,这里面放的是所有html页面和js代码,首先得有个入口文件,与system.config.js配置文件中的入口文件名一样,app.mole.ts,里面引入了所有js文件,不被引入的在加载时都不会被加载
7、打包(将代码压缩,使程序运行速度更快)
❷ AngularJS于前端开发有什么作用对比其它框架有何优点
未来的发展趋势是前端后端只靠json数据来进行通信:后端只处理和发送一段json数据到前端,然后计算和模板渲染都在前端进行。而前端的改动后,形成json数据然后传回到后端。未来趋势就是:后台程序再也不做模板的任何处理x0dx0ax0dx0aAngularJS x0dx0a的作用简单说就是就是把后台的json值直接用html进行渲染,然后html的操作又直接在形成json传回后台。x0dx0ax0dx0a未来的后台MVC,试图不再是模板了,而是一段结构整齐标准的JSON,而这个JSON作为前台的model直接在AngularJS直接使用。x0dx0ax0dx0a或者说后台的试图是前台的模型,而整个前台就是后台的视图。后台程序再也不做模板的任何处理了。x0dx0ax0dx0aAngular是框架的一种,不学也能开发前端。学backbone或者ember也能开发前端。没有js的mvc,就光弄个jquery,也能开发前端。x0dx0ax0dx0a那到底要不要学?个人觉得就是要看发展趋势。angular是否简化的前端开发,是否符合未来前端的开发趋势。以现在的js的发展程度来看,angular x0dx0a是符合发展趋势的,第一,解耦前端,第二,可以模块化,第三可测试,第四天生支持json,第五依赖注入等等等,还有一些其他特性使得angular跟随甚至是推动了前端的开发趋势。x0dx0ax0dx0a所以说angular学习是有好处的:x0dx0a1.了解前端的开发趋势x0dx0a2.学习MV*的设计方法x0dx0a3.学习模块化编程x0dx0a4.学习如何测试模块x0dx0a5.使用angular简化开发流程x0dx0a6.随着google的大力支持和逐渐流行,公司开始使用angular,有些岗位需要有angular的知识才能工作。
❸ 前端常用的框架有哪些
前端三大框架,是Angular、React、Vue,这三个框架现在是最为流行也是最多人用的框架。
React:
1.声明式设计:React采用声明范式,可以轻松描述应用。
2.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
3.灵活:React可以与已知的库或框架很好地配合。
优点:
1.速度快:在UI渲染过程中,React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
2.跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。
3.模块化:为你程序编写独立的模块化UI组件,这样当某个或某些组件出现问题是,可以方便地进行隔离。
4.单向数据流:Flux是一个用于在JavaScript应用中创建单向数据层的架构5.同构、纯粹的javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。6.兼容性好:比如使用RequireJS来加载和打包,而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。缺点:React本身只是一个V而已,并不是一个完整的框架,所以如果是大型项目想要一套完整的框架的话,基本都需要加上ReactRouter和Flux才能写大型应用。
Vue:
Vue是尤雨溪编写的一个构建数据驱动的Web界面的库,准确来说不是一个框架,它聚焦在V(view)视图层。
它有以下的特性:
1.轻量级的框架
2.双向数据绑定
3.指令
4.插件化
优点:
1.简单:官方文档很清晰,比Angular简单易学。
2.快速:异步批处理方式更新DOM。
3.组合:用解耦的、可复用的组件组合你的应用程序。
4.紧凑:~18kbmin+gzip,且无依赖。
5.强大:表达式无需声明依赖的可推导属性(computedproperties)。
6.对模块友好:可以通过NPM、Bower或Duo安装,不强迫你所有的代码都遵循Angular的各种规定,使用场景更加灵活。
缺点:
1.新生儿:Vue.js是一个新的项目,没有angular那么成熟。
2.影响度不是很大:google了一下,有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
3.不支持IE8。
Angular:
Angular是一款优秀的前端JS框架,已经被用于Google的多款产品当中。
它有以下的特性:
1.良好的应用程序结构
2.双向数据绑定
3.指令
4.HTML模板
5.可嵌入、注入和测试
优点:
1.模板功能强大丰富,自带了极其丰富的angular指令。
2.是一个比较完善的前端框架,包含服务,模板,数据双向绑定,模块化,路由,过滤器,依赖注入等所有功能;3.自定义指令,自定义指令后可以在项目中多次使用。
4.ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助。
5.angularjs是互联网巨人谷歌开发,这也意味着他有一个坚实的基础和社区支持。
缺点:
1.angular入门很容易但深入后概念很多,学习中较难理解。
2.文档例子非常少,官方的文档基本只写了api,一个例子都没有,很多时候具体怎么用都是google来的,或直接问misko,angular的作者。
3.对IE6/7兼容不算特别好,就是可以用jQuery自己手写代码解决一些。
4.指令的应用的最佳实践教程少,angular其实很灵活,如果不看一些作者的使用原则,很容易写出四不像的代码,例如js中还是像jQuery的思想有很多dom操作。
5.DI依赖注入如果代码压缩需要显示声明。
❹ 常用的前端框架有哪些
1. Twitter BootStrap (Apache v2.0;响应式)
时髦、直观并且强大的前端框架,让Web开发变得更加容易。
2. Foundation (MIT;响应式)
最先进的响应式前端框架。
3. 960gs(GPL&MIT;响应式)
960gs提供了一个简单的网格系统,适合快速开发。
4. Skeleton(MIT;响应式)
非常漂亮的Web模板,适合响应式、移动友好的开发。
5. 99lime HTML KickStart(Free)
适合网站快速开发的极简HTML构建模块。
6. Kube(Free;响应式)
面向专业人员的CSS框架。
7. Less Framework(MIT;响应式)
自适应的CSS网格系统。
8. Flameinwork(Free)
适合懒人开发者的前端微框架。
9. G5 Framework(Free)
(x)HTML5、CSS、PHP前端开发框架。
10. Easy Framework(Free)
Easy Framework是一个一体化前端解决方案,分structural、 presentational、interactive三层。
11. Blueprint(Free)
一个旨在减少开发时间的前端框架。
12. YAML(Creative Commons)
(x)HTML+CSS框架,适合开发现代化浮动布局。
13. BlueTrip(Free)
一个功能全面、并且美丽的CSS框架,适合于Blueprint搭配使用。
14. YUI3:Grids CSS(BSD)
YUI Grids CSS是最着名的CSS框架之一,是由Yahoo开发小组开发而成。 YUI Grids CSS为开发者提供了预先设置的四种不同页面宽度,六种不同的模板。
15. 52framework(Creative Commons)
对HTML5支持非常好,简单易用。
16. elastiCSS(MIT)
一个基于Web接口和印刷布局的简单CSS框架。
17. Emastic(Free)
一个与众不同的CSS框架。
18. Fluid 960 Gride System(GPL/MIT)
Fluid 960 Grid System的模版是根据Nathan Smith之前的作品而创建的。即960 Grid System:传承了MooTools和jQuery JavaScript libraries的效果。
19. xCSS(MIT)
一个面向对象的CSS框架,能让你的工作流更加简洁。xCSS基于CSS,可以在开发复杂样式时,提供面向对象的工作流。
20. EM CSS Framework(MIT/GPL)
EM CSS Framework提供了一个960px宽 + 12 列网格系统 + CSS的通用样式。