一个PHPer的前端学习日记

Booi
294 阅读4分钟

前言

我是一名PHPer，虽然已经写了三年的PHP代码但是觉得自己仍然是个菜鸟，因为纵深不够，其实这个问题我自己也反思过，我狠狠的鼓励了自己一下：

  1. 如果你因为菜无法向纵深方向发展（我指的是更深层次的学习），那么换个角度想你可以进行横向的发展，比如多掌握一门编程语言
  1. 如果你也有自己感兴趣的语言（我其实是最近发现我喜欢上了前端的尤其是JavaScript），那么你千万不要听别人说什么你一个后端学什么前端，因为在你学习的路上或者想学习的路上一定会出现很多障碍，他们甚至有可能是同事、朋友，他们有一个共同的心理，不甘落后，又没有决心勤奋努力学习，在漩涡中不停的挣扎最后无动于衷浪费了大好时光

这就是我决心，耐心，静下心去开始学习JS之前的心路历程，然后开启了自己的JS学习之旅，因为已经学习一个星期过去了，尽管进度慢一点，但是还是很享受这个学习的过程。

晒晒自己学了啥？

写下这篇日志的时候想了一下才感觉就只学了那么一点点东西，学习中就有一种感觉，其实你已经有了一门语言的基础，按照常理来讲学习新的一门语言也应该是进展神速，其实不然，每个语言肯定都有每个语言的道儿道儿，比如按钮的排他性这都属于一种正常的“坑”，因为在不熟悉的情况下没有任何人引导的情况，第一次你是不知道如何实现一个很简单的效果的——就像上大学时来自五湖四海的同学和你讲家乡的方言，需要多解释一下你才能明白其中意思。

  1. 声明变量
    var num = 10
    let num = 10

每个语言的开始都是从定义变量开始的，经过一个前端同事的指点他告诉我，学着习惯使用“let”而不是“var”定义变量，我说为啥，他说请自行百度。 我已经帮你百度啦，我觉得这是一个最快能让你明白的描述了。

  1. 数据类型

数值、字符串值、布尔值、数组、对象，还会有特殊的类型：undefind，null，每个语言的处理可能有所不同，除了我们很熟悉的那些类型，其他特殊的类型可作判断依据的类型，熟知这些类型之间的关系可以让你在业务逻辑的编写中快速写出业务走向（说白了if可能比以前会写了）

  1. 函数

函数的定义倒是没有什么，只不过在JS中要特别注意作用域这个问题

  1. 对象的遍历和数组的遍历

可能是PHP语言太强大了，宽容度很高，我曾在JS中妄想这样写代码：

    let arr = [1,2,3,4,5,6]
    let tmp = []
    for(let i = 0; i < arr.length; i++){
        tmp[] = arr[i]
    }
    console.log(tmp)

现在想想我真是天真，小朋友，是否有很多问号？显而易见，花式报错。后来我知道，在JS中对象类型的数据集和数组类型的数据集从遍历上有区别，从写入值也有区别：

    let obj = {}
    obj.name = 'booi'

虽然我可能研究的不深，但是在学习过程中，我会把它看作是PHP中的这样的操作：

    $arr = [];
    $arr['name'] = 'booi';

我总是在尝试去翻译成我熟知的语言，这可能是对的也可能是错的。

  1. DOM操作

学习这个东西的时候我兴趣大涨，这玩意儿真的好玩儿，我可以用JS控制挖掘机编程的感觉有木有？

DOM树中，元素即对象，标签即节点，最后再补一句万物皆对象！常用获取文档对象的语法：

    <body>
        <input type="button" id="btn"/>
        
        <p></p>
        <p></p>
        <p></p>
    </body>
    <script>
        //通过表单标签上的ID属性值获取该元素
        document.getElementsById("btn") 
        
        //通过标签名称获取 此方式获取之后通常是一个数组的形式，我不知道为什么有人称这种形式为“伪数组”
        document.getElementsByTagName("p") 
        
        //通过name属性获取，里面保存多个DOM对象
        document.getElementsByName("name属性的值")
        
        //通过类样式的名字获取，里面保存多个DOM对象
        document.getElementsByClassName("类样式的名字")
        
        //通过选择器获取
        document.querySelector("#btn")
        
        //通过选择器获取,里面保存多个DOM对象
        document.querySelectorAll(".class")
    </script>

DOM操作中有些在部分古董浏览器版本中不支持，如遇这种情况解决问题就要费一些力。

总结

以上纯属个人学习经历，也没有什么可圈可点的重点知识，全是自己学习的一些小地方还记得知识，记录一下自己的历程，想必以后拿起来看看，也能让自己问心无愧，毕竟自己努力过！

avatar
文章
阅读
粉丝