基础学习:
前端最基础的就是 HTML , CSS 和 JavaScript 。
网页设计:HTML和CSS基础知识的学习
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
动态交互:JavaScript基础的学习
JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
2.3 WebSocket服务器URL示例
ws://example.com:80/some/path
-
因为 HTTP 协议有一个缺陷:通信只能由客户端发起
-
这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦。我们只能使用"轮询":每隔一段时候,就发出一个询问,了解服务器有没有新的信息。最典型的场景就是聊天室
-
轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开)
4.1 wx.connectSocket(Object object)
创建一个 WebSocket 连接
wx.connectSocket({
url: ‘wss://example.qq.com’,
header:{
‘content-type’: ‘application/json’
},
protocols: [‘protocol1’]
})
参数说明
| 参数 | 类型 | 说明 |
| :-: | :-: | :-: |
| url | string | 开发者服务器 wss 接口地址 |
| header | Object | HTTP Header,Header 中不能设置 Referer |
| protocols | Array. | 子协议数组 |
| tcpNoDelay | boolean | 建立 TCP 连接的时候的 TCP_NODELAY 设置 |
| perMessageDeflate | boolean | 是否开启压缩扩展 |
| timeout | number | 超时时间,单位为毫秒 |
| success | function | 接口调用成功的回调函数 |
| fail | function | 接口调用失败的回调函数 |
| complete | function | 接口调用结束的回调函数(调用成功、失败都会执行) |
4.2 wx.onSocketOpen(function callback)
接口说明
-
监听 WebSocket 连接打开事件
-
可在wx.onSocketOpen监听连接打开事件,在该事件中执行关闭操作
示例
wx.onSocketOpen(function(){
wx.closeSocket()
})
wx.onSocketClose(function(res){
console.log(‘WebSocket已关闭’)
})
4.3 wx.sendSocketMessage
接口说明
-
通过 WebSocket 连接发送数据
-
需要先 wx.connectSocket,并在 wx.onSocketOpen 回调之后才能发送
示例
let socketOpen = false
let socketMsgQueue = []
wx.connectSocket({
url: ‘test.php’
})
wx.onSocketOpen(function(res) {
socketOpen = true
for (let i = 0; i < socketMsgQueue.length; i++){
sendSocketMessage(socketMsgQueue[i])
}
socketMsgQueue = []
})
function sendSocketMessage(msg) {
if (socketOpen) {
wx.sendSocketMessage({
data:msg
})
} else {
socketMsgQueue.push(msg)
}
}
4.4 wx.onSocketMessage
接口说明
-
监听 WebSocket 接受到服务器的消息事件
-
在回调函数中接收msg参数,通过msg.data可以获取服务器返回的消息
示例
//监听服务器端发送给客服端的消息
wx.onSocketMessage(msg=>{
var data=JSON.parse(msg,data)
console.log(data)
})
五 WebSocket示例-WebSocket-Node
5.1 Server Example——socket.js
下面是我在学习HTML和CSS的时候整理的一些笔记,有兴趣的可以看下:
进阶阶段
进阶阶段,开始攻 JS,对于刚接触 JS 的初学者,确实比学习 HTML 和 CSS 有难度,但是只要肯下功夫,这部分对于你来说,也不是什么大问题。
JS 内容涉及到的知识点较多,看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学,我是不建议的,毕竟刚接触 JS 谁能看得下去,当时我也不能,也没那样做。
我这部分的学习技巧是,增加次数,减少单次看的内容。就是说,第一遍学习 JS 走马观花的看,看个大概,去找视频以及网站学习,不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。
然后通过一些网站的小例子,开始动手敲代码,一定要去实践、实践、实践,这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点,眼高手低可不是个好习惯,我在这吃过亏,你懂的。
1、JavaScript 和 ES6
在这个过程你会发现,有很多 JS 知识点你并不能更好的理解为什么这么设计,以及这样设计的好处是什么,这就逼着让你去学习这单个知识点的来龙去脉,去哪学?第一,书籍,我知道你不喜欢看,我最近通过刷大厂面试题整理了一份前端核心知识笔记,比较书籍更精简,一句废话都没有,这份笔记也让我通过跳槽从8k涨成20k。
2、前端框架
前端框架太多了,真的学不动了,别慌,其实对于前端的三大马车,Angular、React、Vue 只要把其中一种框架学明白,底层原理实现,其他两个学起来不会很吃力,这也取决于你以后就职的公司要求你会哪一个框架了,当然,会的越多越好,但是往往每个人的时间是有限的,对于自学的学生,或者即将面试找工作的人,当然要选择一门框架深挖原理。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
以 Vue 为例,我整理了如下的面试题。
取决于你以后就职的公司要求你会哪一个框架了,当然,会的越多越好,但是往往每个人的时间是有限的,对于自学的学生,或者即将面试找工作的人,当然要选择一门框架深挖原理。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
以 Vue 为例,我整理了如下的面试题。