November 2019 issue front-end summary of the fourth week

2019-11-18

IE / edge to the digital automatic underline

iview configure meta?

When the input [type = 'file'] select the file, a file name when consistent, the default file unmodified.

When the file is selected, replacing the old with the new input input

2019-11-19

js achieve Top - small rocket style

Click to call window.scroll () event, the position of the rocket from the bottom up, page location scrollTop (): 0

$('html,body').animate({ scrollTop: '0px' }, 800);

2019-11-20

Get the current browser information

function myBroswer() {
            var userAgent = navigator.userAgent;
            var isOpera = userAgent.indexOf("Opera") > -1;
            var isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 && !isOpera;
            var isEdge = userAgent.indexOf("Edge") > -1;
            var isFireFox = userAgent.indexOf("FireFox") > -1;
            var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1;
            var isChrome = userAgent.indexOf('Chrome') > -1 && userAgent.indexOf("Safari") > -1;

            if (isIE) {
                var reIE = new RegExp("MSIE(\\d+\\.\\d+);");
                reIE.test(userAgent);
                var fIEVersion = parseFloat(RegExp["$1"]);
                if (fIEVersion == 7) {
                    return "IE7"
                } else if (fIEVersion == 8) {
                    return "IE8"
                } else if (fIEVersion == 9) {
                    return "IE9"
                } else if (fIEVersion == 10) {
                    return "IE10"
                } else if (fIEVersion == 11) {
                    return "IE11"
                } else {
                    return "0"
                }
                return "IE"
            }

            if (isOpera) {
                return "Opera"
            }
            if (isEdge) {
                return "Edge"
            }
            if (isFireFox) {
                return "FireFox"
            }
            if (isSafari) {
                return "Safari"
            }
            if (isChrome) {
                return "Chrome"
            }
        }

js achieve click Copy

<head>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/clipboard.min.js"></script>
</head>
<body>
    <div id="copyText">我是复制文本</div>
    <button id="copyBtn">点我复制</button>
    <input type="text" id="copyContent" style="z-index: -10;opacity: 0;position: absolute;top: -10;">
<script>
    if (myBroswer() != 'Chrome') {
     //非Chrome
      $('#copyBtn').on('click', function () {
         var text = document.getElementById('copyText').innerText;
         clipboardData.setData("text", text) 
         //第一个参数为要复制内容的格式,第二个参数为要复制的内容

         //clipboardData.clearData(sDataFormat)  删除剪贴板中指定格式的数据
         //clipboardData.getData(sDataFormat)  获取剪贴板中指定格式的数据

         //不支持Chrome
    })
     } else {
      //Chrome
       $('#copyBtn').on('click', function () {
         var text = document.getElementById('copyText')
         var content = document.getElementById('copyContent')
         content.value = text.innerText
         content.select();   //select()只支持input 和textarea
         document.execCommand('copy')
         console.log('复制成功');
     })
}
</script>
    
</body>

vue-router page jump successfully, but not the contents of the display component, not an error

//new VueRouter时, routes 不小心写成 routers
//正确写法
var routerOBj = new VueRouter({
    routes: [
    { path: '/login', component: login },
    { path: '/register', component: register }
    ]
})

2019-11-22

Silent changes to the current page URL address
- history.pushState(state,title,url)
- This method does not trigger a page refresh, just send changes result in the history object, the address bar will react
  - statue: adding a record associated with the state of objects, mainly for popState event. When the event is triggered, the object will pass the callback function. In other words, the browser will be the object after serialization retained locally, reload the page, they can get this object. If no object, where you can fill null.
  - title: title of the new page. But now all browsers ignore this parameter, so here you can fill in the blank strings.
  - url: new URL, the page must be in the same domain as the current. The address bar of the browser displays the URL.
```
history.pushState({page: 1}, "title 1", "?page=1");
```
- After using this method, it is possible to use the read attribute state object history.state
```
console.log(history.state)  //{page:1}
```
- If the pushStateURL parameter sets a new anchor value (that is hash), and will not trigger hashchangeevents. Conversely, if the anchor value of the URL has changed, it will create a history in the History object.
- If the pushState()method is set up a cross-domain URL, it will error. The purpose of this design is to prevent malicious code to let users thought they were on another website, because this method does not cause the page jump.
```
// 报错
// 当前网址为 http://example.com
history.pushState(null, '', 'https://twitter.com/hello');
```
- History.replaceState()
- This method is used to modify the current record History object, with the remainder to pushState () method identical
- History.popState()
- The event will trigger history.popState only for switching the same internal document operations, such as the browser forward and backward buttons, or JavaScript call history.back (), history.forward (), history.go () method when ()event.
- Just call pushState () and replaceState () does not trigger.
```
//使用的时候，可以为popstate事件指定回调函数。
window.onpopstate = function (e) {
    console.log('location:' + document.location)
    console.log('state:' + JSON.stringify(e.state));
}

//或者
window.addEventListener('popstate', function (e) {
    console.log('location:' + document.location)
    console.log('state:' + JSON.stringify(e.state));
})
```
- Parameter is a callback function eventevent object, its stateattribute points pushStateand replaceStatemethods for the state object (that is, the first parameter of these two methods) currently provided URL. The code above event.state, is through pushStateand replaceStatemethods for the current URL binding stateobject.
- The stateobjects can also be directly through the historyobject to be read.
```
var currentState = history.state;
```
- Note that when the page is first loaded, the browser does not trigger popstateevents.
js acquisition parameters in the URL of the current

function getUrlParam() {
   var name = window.location.search;
   var obj = new Object;
   if (name.indexOf('?') > -1) {
      var strs = name.substr(1).split('&');
      for (let i in strs) {
         obj[strs[i].split('=')[0]] = decodeURIComponent(strs[i].split('=')[1])
      }
   }
    return obj;
}

//调用
//getUrlParam().page

Location object is a part of the Window object, it can be accessed by window.location property.
hash set or return URL (anchor) from the pound sign (#) began.
host Sets or returns the host name and port number of the current URL.
hostname Sets or returns the current URL's hostname.
href Sets or returns the full URL.
Set pathname part of the current return path or URL.
port Sets or returns the port number of the current URL.
protocol agreement to set or return the current URL.
search Sets or returns from a question mark (?) URL (query part) began.
webpack 打包时报错 ERROR in multi ./src/main.js ./dist/bundle.js
Module not found: Error: Can't resolve '.\dist\bundle.js' in 'E:\webpack'
@ multi ./src/main.js ./dist/bundle.js main[1]

The reason: webpack version is too high, the original installation command NA

Original installation command
```
webpack .\src\main.js .\dist\bundle.js
```
change to
```
webpack .\src\main.js -o .\dist\bundle.js
```

2019-11-23

require.js been an error when referencing jQuery: Uncaught TypeError: $ is not a function

requirejs.config({
    paths: {
        jquery: "../js/jquery-3.4.1"
    }
})

require(['jquery'], function ($) {
  //jQuery版本过旧，旧版本使用live方法而不是on
  //jquery.js更新到新版本即可
    $(document).on('click', '#btn', function () {
        $('#msg').html('I am coming~')
    })
})