Arrangement of knowledge points encountered in February 2020

Time:2020-3-23

*Note: This article is to sort out the knowledge points contacted in the process of work. The price comparison between the things involved is disorderly. If there is any mistake, you are welcome to correct and guide

1: Iframe session lost

Arrangement of knowledge points encountered in February 2020

2: The part of Vue exceeding the number is displayed with Ellipsis

1. Use filter in Vue
Display effect
123456···123456
HTML code

<span>{{hashName | ellipsis}}</span>

JS code

filters: {
    ellipsis (value) {
        let len=value.length;
        if (!value) return ''
        if (value.length > 12) {
            return value.substring(0,6) + '···' +value.substring(len-6,len)
        }
        return value
    }
}

2. Write tools in tool.js
Display effect
···123456123456
JS code

//If the name is more than 12 digits, the last 12 digits will be displayed, with an ellipsis in front of it
const ellipsis = (value) => {
   if(!value) return ''
   let len = value.length;
   if(value.length > 12) {
     return '...'+value.substring(len-12)
   }
   return value
}
export {
   ellipsis
}

3: Notes on params parameter transfer of Vue router

When using Vue, it is required that the route jump and then no specific parameters are displayed on the route. I will use params and path together. After the result page jumps, this. $route.params cannot be obtained.
Points to note:
1. If path is used, thenparamsWill be ignored
2. Params is generally used with name instead of path
3. When params is used to pass values, it is not used/test/:idIt is shown on the route that the value of params will be lost when the user refreshes. All need to cache this value

4: The problem of Boolean value as (CACHE + route parameter) value passing

When the Boolean value is stored in the cache or routing parameters (passed in the address bar), it will become a string when it is retrieved again. When it is used, it needs to be processed to convert the string into a Boolean value
The solution is 1. Judge that this string = = = ‘true’ is a Boolean value of true, otherwise it is a Boolean value of false. 2. Directly use JSON. Parse ()
2. When using the method of judging this string = = = ‘true’ as Boolean value true or Boolean value false, it is quite inconvenient. Every value needs to be judged once, and the code is not intelligent and redundant.
Six cases in JS are false
They are: 0, “, null, undefined, Nan and false, and others (including {}, [], infinity) are true
I think that the Boolean value of the number 0 is false, so I use 0 and 1 to store, so it is more convenient to operate the extracted data. We put in the numbers 0 and 1. When we get them out, they are ‘0’ and ‘1’. We can convert them into numerical type. Number () is a mandatory type conversion

this.home = Number(this.$store.state.home)
this.inventory = Number(this.$store.state.inventory)

5: HTTP protocol network request status code

HTTP protocol network request status code

6: JS distinguishes different browsers and devices

1. Judge whether the current page is opened in wechat browser
Method 1:

var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
if (isWeixin) {
    return true;
}else{
    return false;
}

Method two:

function is_weixn(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
    } else {
        return false;
    }
}

Judge browser.Including IE browser, opera browser, apple browser, Google browser, Firefox browser, etc.

var browser = {
    versions: function () {
        Var u = navigator.user agent, // returns the value of the user agent header sent by the client to the server
        App = navigator. AppVersion; // returns the platform and version information of the browser
        Return {// mobile terminal browser version information
            Trident: u.indexof ('trident ') > 1, // IE kernel
            Presto: u.indexof ('presto ') > 1, // Opera kernel
            WebKit: u.indexof ('applewebkit ') > - 1, // apple, Google kernel
            Gecko: u.indexof ('gecko ') > - 1 & & u.indexof ('khtml') = = - 1, // Firefox kernel
            Mobile:!! u.match (/ applewebkit. * mobile. * /), // mobile terminal or not
            IOS:!! u.match (/ \ (I [^;] +; (U;)? CPU. + Mac OS X /), // IOS terminal
            Android: u.indexof ('android ') > - 1 | u.indexof ('linux') > - 1, // Android terminal or UC browser
            IPhone: u.indexof ('iPhone ') > 1, // whether it is iPhone or qqhd browser
            IPad: u.indexof ('ipad ') > 1, // iPad or not
            Webapp: u.indexof ('safari ') = = - 1 // whether the web should be a program, with no head and bottom
            Phoneapp: u.indexof ('vpiao'app ')! = - 1, // judge whether the app is used
            Weixin: u.tolowercase(). Match (/ micro messenger / I) = 'micro messenger' // wechat browser kernel
        };
    }(),
    Language: (navigator. BrowserLanguage | navigator. Language). Tolowercase() // returns the current browser language
}

Use:

//Document. Writeln ("language version:" + browser. Language);
//Document. Writeln ("mobile terminal or not:" + browser. Versions. Mobile);

How to judge whether to open in wechat browser, QQ space browser and Sina Weibo through JS

If (browser. Versions. Mobile) {// determine whether the mobile device is enabled. The browser code is as follows
        Var UA = navigator. Useragent. Tolowercase(); // get the object for judgment
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
                //Open in wechat
        }
        if (ua.match(/WeiBo/i) == "weibo") {
                //Open in Sina Weibo client
        }
        if (ua.match(/QQ/i) == "qq") {
                //Open in QQ space
        }
} else {
        //Otherwise, the PC browser will be opened
}

7: A little bit of GIT related operation

1. Delete local branch + remote branch

Git branch // view the local branch list
Git branch - D branch name // delete local branch
Git branch - A // view the list of remote branches
Git push origin -- Delete remote branch name // Delete remote branch

2. When may I use git tag
In some critical periods of development, tags are used to record these critical moments, such as releases, major changes, and upgrades, to permanently mark the critical historical moments in the project. Tag will record the commit number of the version for later backtracking
Label

Git tag // list the existing tags plus the - L command to use wildcards to filter tags. For example: git tag - L "v3.3. *"
Git tag tagName // git tag v1.0 create a tag named v1.0
Git tag - a tagName - M "my tag" // add the ` - a 'parameter to create a tag with comments. The comment information is specified by ` - M'. If you don't enter '- M', the creation process system will automatically open an editor for you to fill in the notes
Git tag - a 0.1.3 - M "release version 0.1.3" // git tag is the command. -A 0.1.3 is to add a tag named 0.1.3. -M followed by a comment on the label
Git show tagName // view the tag details, including commit, etc

Related operations

// submit
git add .
git commit -m “fixed some bugs”
git tag -a 0.1.3 -m “Release version 0.1.3″
//Share submit tag to remote server
git push origin master
git push origin --tags
Git tag -- List // view the existing tag list
Git checkout [tag / branch / commit] // switch to the specified tag / branch / commit command
Git tag - D 0.1.3 // delete tag
Git push origin: refs / tags / 0.1.3 // delete the label of the remote server

3. Pull remote branch to local

Git fetch origin dev (DEV is the branch name of the remote warehouse) // pull the remote branch to the local.
Git checkout - B dev (local branch name) origin / dev (remote branch name) // create the branch dev locally and switch to it

4. Code rollback

Git log - 3 // view the first three commit log records \ - 3 and so on to get any commit log records
Git reset -- hard head ^ // back to the previous version  
Git reset -- hard head ~ 3 // back to before the first three commits, and so on, and back to before n commits
`Fallback step (command below)`
Git reset -- hard commit? ID // back to / into the Sha code of the specified commit
Git reset -- hard e377f60e28c8b84158 // e377f60e28c8b84158 is commit_idto back to the specified version without retaining the original change code
Git revert e377f60e28c8b84158 // go back to the specified version, keep the original change code, and generate a new commit
Git push - f origin master // force commit (the code has been backed off at this time, and your current branch status is the version you pointed to in the previous step)

If you just mention the code by mistake and want to keep the code changes, it’sRollback stepWhen using the revert command instead of reset, the differences are as follows:
revertIt is to discard the specified submitted modification, but a new submission will be generated. You need to fill in the submission comments. The previous history records are all in;
resetRefers to the head pointer to the specified submission, and there will be no abandoned submission record in the history.

8: Vue pop-up box with corresponding mask layer components

9: Vue loading component

10: H5 of mobile terminal realizes picture upload

11: H5 development Android model click input box to start input method, input box is blocked by keyboard solution

12: H5 page long press copy function

Long press copy is disabled by default. To add this function, you need to add CSS declaration
-webkit-user-select: auto;
Make the entire page long press to copy:
*{-webkit-user-select: auto;}

user-select: none|auto|text|contain|all;
Attribute values:
None: the text of the element and child elements will not be selected
Text: text can be selected
Auto: text will be selected according to the browser’s default properties
All: when all content as a whole can be selected. If you double-click or click on a child element in the context, the selected part will be the highest ancestor element that is backtracked with that child element
Contain, element: you can select text, but the selection range is constrained by the element boundary, that is, the selected text will be included in the scope of the element. Internet Explorer only
Compatibility:
Firefox browser
-moz-user-select: none|text|all;
Safari, Chrome browser
-WebKit user select: none|text|all; this attribute value is not supported in Safari, only none or text can be used, or in the tag attribute of HTML
IE browser
-ms-user-select: none|text|element;

Recommended Today

Large scale distributed storage system: Principle Analysis and architecture practice.pdf

Focus on “Java back end technology stack” Reply to “interview” for full interview information Distributed storage system, which stores data in multiple independent devices. Traditional network storage system uses centralized storage server to store all data. Storage server becomes the bottleneck of system performance and the focus of reliability and security, which can not meet […]