后端程序员开发页面一点心得

刺骨的言语ヽ痛彻心扉 2023-03-02 13:19 13阅读 0赞

好久写前端，最近一个项目要写点界面，使用vue写了下，10多年前写过，多年前还是看javascript高级编程那本绿书，非常好，不知道现在还有没有新版本。简单使用后和以前比较了下，希望对别人有一定用途

要成为前端大师，请将github相关的问题都给懂了，这个项目非常全

[https://github.com/haizlin/fe-interview][https_github.com_haizlin_fe-interview]

# 1、前端知识 #

## 1.1 基础知识 ##

我认为前端的知识包括： html  css   js

其中

html中主要是dom和事件怎么响应，冒泡的这些原理；另外一个就是布局

css并没有特别多的难度，但是各种属性也很繁琐

js中重要的是是：面向对象、闭包、基本的数据类型，还有一些新的特性比如:Promise。js面向对象，分析下axios封装XMLHttpRequet基本上就会有不小的长进，js在整个开发中尤其重要，新的结构都基于js上进行的处理

## 1.2 框架关系 ##

**JavaScript：**

JavaScript是一种(最好的)编程语言, 主要作为前端开发中用来增加网页的动态功能,比如操作DOM, 读取用户输入, 动画效果等

新标准，主要ECMAScript6。。。，为什么叫这个名称，主要因为java是oracle的商标，避免商标上的纠纷

**JavaScript后端化**

NodeJs 是基于JavaScript的,可以做为后台开发的语言. 提供了很多系统级的API，如文件操作、网络编程等. 用事件驱动, 异步编程,主要是为后台网络服务设计

现在很多项目使用项目也可以用webpack模块化，低层都是基于node.js，还有es6转码babel， less，jade这些，都是用node实现的编译。

**Bootstrap、layui 、Jquery和vue angular react 关系**

Bootstrap和layui 是开源工具包。Jquery是js的库  
vue angular react 才是框架为什么是框架呢，因为受到了后台的OOP AOC的思想的影响。

区别：工具包（库）和框架的关系，当然一些框架的设计中也有库设计的思想

**JavaScript view层库、框架和平台**

ReactJS为Facebook开发的,更多的像一个JS的库.主要是在前端Web开发中, 对MVC中的V进行操作.

React Native它基于开源框架ReacJS，并可用来开发iOS和Android原生应用, 主要为移动端服务.

vue.js 开源的View层的框架

angular系类，不同的版本的需求设计理念比较大

**view层设计，是设计成一个framework，还是一个library，还是一个platform，设计上的一个取舍。其中会引进一些概念，比如：virtual dom，主要是为了抽象。**

## **1.3 其他特性和标准** ##

HTML5相关的一些标准

其实前端相关的技术还是非常多的，IOS和andriod开发还出来了flutter

## 1.4 Node.js与javascript的区别 ##

node.js是javascript的后端化，可以使用js做后端开发，后来在支撑前端上也做了很好的支持。可以说，Node.js 是前端工程化的重要支柱之一，本质上是为了使用js可以开发后端系统，最后js开发打包都使用它了。目前NodeJS大多被用于前端开发的开发环境，它的包生态系统，npm，是目前世界上最大的开源库生态系统。  
node.js也有自己的后端服务开发框架

## 1.5、总体评价 ##

现在的调试工具和开发环境真好，前端开发有福了。

现在的框架也比较nice，以前jquery，自己在document查找节点，设置innerHtml太难了

**学习前端一个不错的网站**

[https://segmentfault.com/][https_segmentfault.com]

# 2、运行环境 #

html的话chrome运行环境+vscode非常不错

js的话，单纯的一个可运行的环境极好，当前直接在node.js下熟悉js是非常棒

# 3、相关可参考资源 #

VUE的事件监听处理： https://www.cnblogs.com/mrsdong/p/12144375.html  
avaScript 运行机制详解：再谈Event Loop     
 http://www.ruanyifeng.com/blog/2014/10/event-loop.html  
Vue.nextTick 的原理和用途  
 https://segmentfault.com/a/1190000012861862   
Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel 方法，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。

vue中的computed和watch  
https://segmentfault.com/a/1190000012948175?utm\_source=tag-newest

Vue的组件为什么要export default  
https://www.cnblogs.com/win-and-coffee/p/10186649.html

axios链式处理：  
https://blog.csdn.net/weixin\_39703839/article/details/102839078  
https://blog.csdn.net/weixin\_42448623/article/details/104773280?utm\_medium=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu\_weight&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu\_weight

axios封装XMLHttpRequest  
https://segmentfault.com/a/1190000021944305  
js原型链相关处理  
https://github.com/maxzhang/maxzhang.github.com/issues/5

node解释js文件：  
https://www.jianshu.com/p/802cdf66bebb

js中难点的专栏：  
https://blog.csdn.net/cc18868876837/article/details/96303296

[https_github.com_haizlin_fe-interview]: https://github.com/haizlin/fe-interview
[https_segmentfault.com]: https://segmentfault.com/