前端学习的心路历程-阿里云开发者社区

开发者社区> 武汉-吴昆来> 正文

前端学习的心路历程

简介: 在我刚接触前端时,就被他的灵活自由度深深吸引。可以说在学校并没有前端这些知识,只能靠查阅W3school进行简单的Html标签学习。看别人的文章,看一些官方文档来进行学习,在这里我将我从零学习前端的经历进行慢慢的阐述。
+关注继续查看

可以说学习前端都是从

这个标签开始学习起来的,认识的第一个css属性一般都是width。什么事情都有

     第一步。

     .box{

           width: 100px;

           height: 200px;

       }

     

       Hello World!

     

   在这里我想吐槽一下为什么我不论是学习前端还是后端第一次打印出来都是习惯性的写Hello World!


HTML的全称为超文本标记语言,和他的搭档CSS层叠样式表,可以说是每个前端学习人员的第一步,当然HTML的标签没什么好介绍的,这里主要介绍CSS。CSS可以说只要你想要的样子他都能满足你,height、width、color、font...各种各样的样式。[W3school](https://www.w3school.com.cn/css/index.asp) 是学习css的手册你也可以翻阅文章书籍不断的强化自己的前端基础知识。只有基础好了才能胜任任何任务,Html、Css可以说是勾引我入门的原因。当然前端学习不止有这些搭建样式的语言,还有被我和小伙伴戏称的农夫三拳之一的JavaScript。


JavaScript

JavaScript有七种数据类型(到ES6):number、string、Boolean、undefined、null、symbol、object。前六种为基本类型、object为引用类型。


 var、let、const

虽然都是用来定义一个属性但是,既然有三个可定会有不同的,要不创造出来干嘛。

   

var定义的变量,没有块的概念,可以跨块访问,不能跨函数访问

let定义的变量只能在块作用域里访问,不能跨块访问,也不能跨函数访问

const用来定义常量,使用时必须初始化,只能在块作用域访问,不能修改


<script type="text/javascript">
    // 块作用域
    {
        var a = 1;
        let b = 2;
        const c = 3;
        // c = 4; // 报错
        var aa;
        let bb;
        // const cc; // 报错
        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3
        console.log(aa); // undefined
        console.log(bb); // undefined
    }
    console.log(a); // 1
    // console.log(b); // 报错
    // console.log(c); // 报错
 
    // 函数作用域
    (function A() {
        var d = 5;
        let e = 6;
        const f = 7;
        console.log(d); // 5
        console.log(e); // 6  
        console.log(f); // 7 
 
    })();
    // console.log(d); // 报错
    // console.log(e); // 报错
    // console.log(f); // 报错
</script>
```


<script>
        console.log(a)//打印出undefined
        var a=3
        console.log(b)//报错
        let b=3



        //实际上var可以理解为
        var a
        console.log(a)
        a=3
      
    </script>
var与其他相比存在变量提升,在同一个代码块中,在let后声明之前引用了变量,则会报错。let则会打印出来undefined

const定义的值是不可变的吗?当然不是,大家可以试一试用const定义一个对象,改变对象里面的属性值看看是否会报错。

JavaScript的语法太多了,可以说他作为农夫三拳之中可以是最疼的一拳直接给你打拉了。在这里我不知道具体介绍什么,因为都很重要,之后的文章我会挑一个问题系统的讲解。

react

对于很多萌新来说js的框架不知道学习那个好,前端三大框架React、Vue、Angular,

Angular

AngularJS是一个客户端的JavaScript MVC开源框架,特别为使用MVC架构模式的单页面web应用而设计,可用于开发动态Web应用程序。它不是一个完整的堆栈,而是一个处理web页面的前端框架。

AngularJS完全基于HTML和JavaScript,因此无需学习其他语法或语言。

AngularJS将静态HTML更改为动态HTML。它通过添加内置属性和组件扩展了HTML的功能,还提供了使用简单JavaScript创建自定义属性的功能。

AngularJS最为核心的是:MVC(Model–view–controller)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。Angular通过指令扩展了HTML,以一个 JavaScript文件形式发布,通过script标签添加到网页中。Angular的优势在于:零配置、深度整合设计模式、约定才是框架的本质。


React


React是一个开源的JavaScript库,由Facebook和一个大型开发者社区共同维护。此库(也可转换为web开发框架)广泛用于开发web应用程序的用户界面。这个特殊的框架是为了构建大型应用程序而设计的,这些应用程序的数据会随着时间的推移不断变化。

React的主要功能是对DOM操作,声明式设计,更快的开发出Web应用系统。借助React,你可以非常轻松地创建用户交互界面,为你应用的每一个状态设计简洁的视图。在数据改变时,React也可以高效地更新渲染界面。


Vue


Vue是一个开源JavaScript框架,能够开发单页面应用程序。它还可以用作Web应用程序框架,目的在于简化Web开发。它的流行有很多原因,其中一个关键原因是它能够在没有任何动作的情况下重新渲染,它允许构建可重用,是一个小巧但功能强大的组件而且允许我们在需要时随时添加组件。

Vue提供了MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的 API。从技术上讲,Vue集中在MVVM模式上的视图模型层,并通过双向数据绑定连接视图和模型。实际的DOM操作和输出格式被抽象出来成指令和过滤器,相比其它的MVVM框架,Vue更容易上手。

```

前端三大框架并没有什么太多先学习和后学习的分别,因为学习哪一个都是基于你JavaScript的功底。作者学过Vue和React并且都写过项目,对于给我的感觉,Vue更好上手,所以我推荐React。别问为什么,就是喜欢React。

state 状态

```js

React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。

React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。

class Clock extends React.Component {

   constructor(props) {

     super(props);

     this.state = {date: new Date()};

   }

   

   render() {

     return (

       

         

Hello, world!

         

现在是 {this.state.date.toLocaleTimeString()}.

       

     );

   }

 }

   

 ReactDOM.render(

   ,

   document.getElementById('example')

 );

```

props  

```

state 和 props 主要的区别在于props是不可变的,而 state 可以根据与用户交互来改变。这就

是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

function HelloMessage(props) {

   return

Hello {props.name}!

;

}

 

const element = ;

 

ReactDOM.render(

   element,

   document.getElementById('example')

);

```

生命周期

React的生命周期从广义上分为三个阶段:挂载、渲染、卸载

-   Mounting:已插入真实 DOM

-   Updating:正在被重新渲染

-   Unmounting:已移出真实 DOM

因此可以把React的生命周期分为两类:挂载卸载过程和更新过程。

-   **componentWillMount** 在渲染前调用,在客户端也在服务端。

-   **componentDidMount** : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

-   **componentWillReceiveProps** 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

-   **shouldComponentUpdate** 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。\

   可以在你确认不需要更新组件时使用。

-   **componentWillUpdate**在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

-   **componentDidUpdate** 在组件完成更新后立即调用。在初始化时不会被调用。

-   **componentWillUnmount**在组件从 DOM 中移除之前立刻被调用。

学习前端已经过去了一年,我也渐渐慢慢适应了各种工作,但还要学习的还有很多,就让我在这里一边学习一边和大家分享吧。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端走进机器学习生态,在 Node.js 中使用 Python
从今天开始,你就可以开始看着 Python 的文档,使用 JavaScript 来“学习和使用”机器学习和深度学习了!
1696 0
前端工程师的mysql笔记
背景 最近常参与后台php项目,虽说刚毕业时自学过一阵子php和mysql,不过长时间没用也忘差不多了,于是把mysql再温习一遍,前端同学也可以一起学习下! mysql安装以及操作 安装 brew install mysql 启动 $: mysql.
830 0
算法学习之路|部分A+B
正整数A的“DA(为1位整数)部分”定义为由A中所有DA组成的新整数PA。例如:给定A = 3862767,DA = 6,则A的“6部分”PA是66,因为A中有2个6。
880 0
一直想做前端工程师的后端程序员
前端CSS框架: bootstrap 前端mvc框架: angular.js 前端javascript类库: jquery 服务器平台: node.js web服务器框架: express 数据库: mongodb 数据库驱动: mongoose 移动前端框架: jquery mobl...
740 0
前端学习 -- Css -- 定义列表
定义列表用来对一些词汇或内容进行定义 使用dl来创建一个定义列表 dl中有两个子标签 dt : 被定义的内容 dd : 对定义内容的描述 同样dl和ul和ol之间都可以互相嵌套 DOCTYPE html> ...
631 0
前端学习 -- 长度单位
长度单位  像素 px  - 像素是我们在网页中使用的最多的一个单位, 一个像素就相当于我们屏幕中的一个小点,我们的屏幕实际上就是由这些像素点构成的但是这些像素点,是不能直接看见。 - 不同显示器一个像素的大小也不相同,显示效果越好越清晰,像素就越小,反之像素越大。
598 0
前端学习 -- Css -- 选择器的优先级
当使用不同的选择器,选中同一个元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定优先级高的优先显示。 优先级的规则 内联样式 , 优先级 1000 id选择器,优先级 100 类和伪类, 优先级 10 元素选择器,优先级 1 通配* , 优先级 0 继承的样式,没有优先级 当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较,但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,则使用靠后的样式。
863 0
前端学习 -- Css -- 文本标签
em和strong - 这两个标签都表示一个强调的内容, em主要表示语气上的强调,em在浏览器中默认使用斜体显示 strong表示强调的内容,比em更强烈,默认使用粗体显示 DOCTYPE html> 今夕何夕兮,搴舟中流。
754 0
前端学习 -- Css -- 字体的几个属性学习
font-style可以用来设置文字的斜体 - 可选值: normal,默认值,文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 - 大部分浏览器都不会对倾斜和斜体做区分,也就是说我们设置italic和oblique它们的效果往往是一样的 - 一...
790 0
前端学习 -- Css -- 否定伪类
语法::not(.选择器) 作用:可以从已选中的元素中剔除出某些元素。 DOCTYPE html> p:not(.
683 0
3
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载