Table of contents
2. Next I want to talk about the event loop
3. Some shortcut keys for cmd window
4. The difference between components and plug-ins
5. Call the app method after the vue project is embedded in the app
7. Short polling and long polling
9. Mobile terminal - bottoming out and refreshing to realize core ideas
12.git common operation instructions
1. What is a sass product?
For example, Youdao Cloud Notes Feishu and other enterprise-oriented projects, these projects are SaaS products. Software and services are also responsible for after-sales product upgrades and server deployment such as installation. Train services.
Creative Assistant says:
Sass products refer to products based on the software-as-a-service model based on cloud technology. They can typically be accessed and used over the network without requiring users to install or have complex IT infrastructure. Such products are typically managed and maintained by the provider to ensure data security and availability. Users only need to subscribe to the corresponding services as needed, and then can use related functions and tools to meet their business needs. For example, Youdao Cloud Notes, DingTalk, Tencent Conference, etc. are all Sass products.
2. Next I want to talk about the event loop
We all know that js is a single-threaded language. When we execute tasks, we will put them into the task queue from top to bottom. Tasks are divided into synchronous tasks and asynchronous tasks. During the execution process, synchronous tasks will be executed first, and asynchronous tasks are divided into Macro tasks and micro tasks. Macro tasks are timers and timers. Micro tasks are promises. When executing an asynchronous task, the micro tasks in the queue will be executed first in order from top to bottom, and then the macro tasks will be executed. The macro tasks will be prioritized. Synchronize the task in the task, then execute the microtask in the macrotask, and then execute the next macrotask after the execution is completed.
Macro tasks: script, asynchronous request Ajax, setTimeOut, setInterval, dom events, other macro tasks
Microtask Promise(.then, .catch, .finally), process.nextTick, other microtasks,
3. Some shortcut keys for cmd window
shortcut key
alt+f4 close window
alt+shift+esc to open task manager
alt+space brings up menu
Enter exit on the command line to exit
4. The difference between components and plug-ins
Component is the business module used to constitute your App, and its target is App.vue. Plugins are functional modules used to enhance your technology stack, and their target is Vue itself.
Plug-ins directly provide services. Plug-ins do not need to be developed and can be directly introduced and used. Components are just wheels that constitute functions.
Components can be large or small. The entire vue project is composed of .vue components. Each component can run independently.
5. Call the app method after the vue project is embedded in the app
First determine the environment, and then call the method provided by the corresponding end
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
window.webkit.messageHandlers.js_month_report_change_id.postMessage(id)
} else if (navigator.userAgent.match(/(android|Android);?/i)) {
window.Android.monthChange(id);
}6. Click the edit button to return directly to the top, and the input box cursor will flash and focus.
<van-field
ref="input"
v-model="text"
rows="2"
autosize
type="textarea"
maxlength="800"
placeholder="请输入内容"
show-word-limit
/>
test(){
window.scrollTo(0,0);
this.$refs.input.focus();
},7. Short polling and long polling
short polling
Short polling is easy to understand. At a specified time interval, the browser sends an HTTP request to the server. The server returns unread message data to the client in real time, and the browser renders and displays it.
A simple JS timer can be used to request the unread message count interface once every second.
Since the push data does not change frequently, the client will make a request regardless of whether there are new messages generated in the backend at this time, which will inevitably put a lot of pressure on the server and waste bandwidth and server resources.
long polling
It is common to use WebSocket. After a TCP handshake, the client and the server establish a persistent connection. As long as the client does not actively disconnect, communication will continue. As long as there are new messages, the client will receive them in time.
8. Front-end moment library
Many people ask why so many people used the moment library before
If you only need to convert the time format, you can really find a way online to encapsulate it into a public method.
The reason is that the moment library can not only convert the time format back and forth, but also compare the current time and the specified time by how many days there are. There are corresponding methods, so it is very practical in many projects.
var at = this.$moment(time).format('YYYY-MM-DD')
var to = this.$moment(new Date()).format('YYYY-MM-DD')
if(this.$moment(to).diff(at, 'day')<7){
//
}9. Mobile terminal - bottoming out and refreshing to realize core ideas
获取滚动条高度，页面可视区域高度，页面滚动高度
如果页面可视区域高度加页面滚动高度大于等于滚动条高度，执行刷新
如果页面可视区域只有一屏或小于一屏，获取手势滑动事件，上滑即刷新
10.jsx syntax
It combines the flexibility of js and the semantics of xml, and renders through the render method of the vue instance. It is similar to the template syntax, but some are different, such as { {}} becomes {}, jsx syntax You can directly use the es6 loop syntax. Vue is generally only used when encapsulating public components, such as the real-time message pop-up window in the lower right corner of the page. React pages are basically written in jsx syntax.
11. The child component monitors the value of the parent component and updates the value in real time.
watch: {
"$parent.childCompanyName": function () {
console.log('1 :>> ', this.$parent.childCompanyName);
this.$set(this.valueObj,"companyName", this.$parent.childCompanyName);
},
},12.git common operation instructions
When we use git add. We accidentally add files that we don’t want to submit or want to update them and then submit them together, then we need to undo them.
git reset HEAD
Return to the last operation as a whole
git reset HEAD filename
Roll back a file to the last operation
1. Not using git add cache code
1) Abandon a certain local file command: git checkout -- filename
2) Discard all file modification commands: git checkout.
2. git add has been used to cache the code, but git commit has not been used.
1) Abandon a certain local file command and return to git add. Before: git reset HEAD filename
2) Abandon all file modification commands and return to git add. Before: git reset HEAD
3. The code has been submitted using git commit. Please note that using rollback at this time will not retain our code modifications.
1) Roll back to the state of the last commit: git reset --hard HEAD^
2) Or roll back to any version git reset --hard commit id, use the git log command to view the git commit history and commit id: git reset --hard commit id