码迷,mamicode.com
首页 > 其他好文 > 详细

流行框架阶段·概览

时间:2016-12-09 19:16:01      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:安全   dom   boot   type   js框架   存储   组件   操作   select   

1. 现在有什么东西在流行,我们要学什么?

流行框架阶段的学习,大部分经历会花在AngularJs的框架的学习上。

不过,在真正开始学习AngularJs框架之前,还可以花一点小时间,带领大家认识一下现在都有什么框架在流行着,它们的功能都是什么。虽然不会真正学习它们的用法,但是至少能够了解还有这些东西存在,对于扩展视野和面试有一些帮助。
2. 从NodeJs谈起

在NodeJs出现之前,JavaScript一直以来被视作一种浏览器脚本,它的应用范围更多是在浏览器之中,操作一下各种浏览器对象(BOM)或者文档对象(DOM)。由于浏览器的安全性限制,JavaScript这门语言,一直缺乏一种读写本地文件、进行跨域访问甚至于调用操作系统自带API的能力。

而NodeJs的出现改变了这一点。NodeJs做了什么呢?它提供了一种不同于浏览器的、功能更加强大的JavaScript运行环境,运行在NodeJs中的JavaScript有着和运行在浏览器中JavaScript不同的API,拥有更高的权限,可以访问本地文件、访问网络数据。于是,这就催生出了许多基于JavaScript来书写的前端工具。帮助我们更好的进行开发。

比如说,我们大家都很熟悉的LESS。它是读取LESS文件然后生成出CSS文件,想要达到这个功能,如果没有NodeJs的话,就只能借助于其他语言了。而在有NodeJs之后,就可以用JavaScript来读取本地的LESS文件,然后生成出CSS文件。

[注意:NodeJs的课程应该是在流行框架阶段之后。]3. 还有什么流行框架呢?

    包管理工具
        所谓的包管理工具,其实就是把各种前端的库(类似于jquery、bootstrap这种的)打包存储在一个专门的服务器上,然后程序员开发时可以使用工具从服务器上下载这些包,放到自己的文件夹下。这样就不需要到处找各种框架的官方网站来下载了。
        通常来说,包管理工具还允许你生成一个配置文件,配置文件记录了这个项目中用到了哪些包。有些时候,把这个配置文件共享给朋友,他就可以下载你所指定的那些第三方库了。这在共享项目时很常见。
        常见的包管理工具
            NodeJs本身的npm工具。
            bower。(随着npm功能越来越强大,逐渐被淘汰中)
    项目自动化工具
        在开发过程中,我们经常会遇到移动文件、合并文件、对JavaScript文件进行压缩、把LESS翻译成CSS放到指定的位置上之类的工作。如果每次修改源代码都把这些工作重新做一遍的话,会非常的浪费时间。所以,就有了将这些工序自动化的工具。
        常见的项目自动化工具
            gulp。
            grunt。(逐渐变得不流行,被gulp以及其他替代。)
            webpack。(webpack不仅仅是一个自动化工具,但它也有自动化的能力,最近最流行。)
    CSS预编译工具
        解决一些CSS存在的问题,比如LESS。总之就是一种被强化过的CSS语言,提供一些新的语法来完成一些更方便的功能。
        常见的CSS预编译语言:
            LESS
            SASS
            Stylus
        还有一种工具,虽然不是预处理,但也是对CSS文件做处理的:
            postCSS(将CSS文件输入,然后输出被处理过的CSS文件。比如说,输入的CSS不带-webkit-之类的浏览器前缀,但是输出时却带上了)
    JavaScript预编译工具
        类似于CSS预编译语言,JavaScript预编译语言也是用于解决JavaScript现有版本中存在的一些问题的。
        常见的JavaScript预编译工具:
            babel。(把ES6代码编译成ES5或者ES3代码,虽然都是JavaScript,但是ES6在语法特性上要更加的强大,解决了先前版本的不少问题)
            Typescript。(类型化的JavaScript,如果有时间我们可以提一下。另外,AngularJs2就是使用Typescript做开发的。)
            coffeescript
            dart
    UI库
        bootstrap大法好。总之就是类似于bootstrap的各种UI框架,通常都会包括CSS部分和JS组件部分。
        这类库太多太杂,就不多提了。
    模块化与模块加载
        模块化的问题在现阶段很难讲解,总的来说就是一套组织JavaScript代码结构的思路。举个小例子:我们想要封装一个类似于jquery的库,可以先封装一个模块叫做core,用于管理代码整体结构;然后再封装一个模块selector,里面写的全都是选择器的功能;然后在封装一个模块ajax,里面全都是XHR、jsonp之类的功能;然后整体的结构就是,当我们需要ajax时就用ajax,当我需要selector时就用selector,然后这两个模块都需要core,core就会被自动加载……
        好吧,看不懂就算了。关于模块化的内容,在NodeJs阶段的课程中会用大概一整天的时间来讲。这已经算是一种开发的思维方式了,需要一定时间来体会的。
        现在常见的模块化框架有requirejs、seajs、webpack、browserfy等等,其中后两者比前两者功能更多。
    网页应用框架
        专门研究当页面局部刷新越来越多,单一页面的功能越来越复杂时,如何更好的组织代码、更方便地改变页面显示状态的框架。
        常见的有AngularJs,React,VueJs,Backbone,Ember,KnockOut,Avalon……
        它们的思路大部分都是“当需要显示的数据和页面状态频繁变化时,如何更加方便的更新页面上的显示”

流行框架阶段·概览

标签:安全   dom   boot   type   js框架   存储   组件   操作   select   

原文地址:http://www.cnblogs.com/ahu666/p/6150672.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!