Twitter 按钮和 IIFE

Question

虽然我正在玩我的这个快速创作。我遇到了两个疑惑。
第一个问题是，如何用 IIFE 包装所有 JS 代码而不破坏它。
第二个是如何完成 twitter 的按钮以将活动报价发送到推文中。

  "use strict";

  var quotes = [
    'Expose yourself to your deepest fear; after that, fear has no power, and the fear of freedom shrinks and vanishes. You are free.',
    'There are things known and things unknown and in between are the doors.',
    'I think of myself as an intelligent, sensitive human being with the soul of a clown which always forces me to blow it at the most important moments.',
    'A friend is someone who gives you total freedom to be yourself.',
    'Where\'s your will to be weird?',
    'Death makes angels of us all and gives us wings where we had shoulders smooth as ravens claws.',
    'I like people who shake other people up and make them feel uncomfortable.',
    'This is the strangest life I\'ve ever known.',
    'I believe in a long, prolonged, derangement of the senses in order to obtain the unknown.',
    'Whoever controls the media, controls the mind.'
  ];

  function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));

    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
  }

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: 'Barrio', cursive;
  font-size: 62.5%;
  background: url('http://cdn.wallpapersafari.com/11/52/eQLxD8.jpg');
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  text-align: center;
  width: 90%;
}

.title {
  font-size: 4.5em;
}

.image {
   max-width: 100%;
  height: auto;
  border-radius: 20px;
}
.quo {
  background: #fff;
  font-family: 'Comfortaa', cursive;
  font-size: 2.5em;
}

.button {
  background: black;
  color: white;
  padding: 20px;
  border: 5px solid black;
  font-size: 1.2em;
  border-radius: 100px;
}
.button:active {
  background: red;
}

<link href="https://fonts.googleapis.com/css?family=Barrio" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<body class="container">
  <div class="wrapper">
    
    <h3 class="title">
      Jim Morrison's<br> Quote Machine
    </h3>
    <div>
      <img class="image" src="http://www.thefashionisto.com/wp-content/uploads/2016/04/Jim-Morrison-Style-Picture-Leather-Pants-Suede-Jackets-800x1093.jpg">
    </div>
    <button class="button" onclick="newQuote()">
      Touch me 
    </button>
          <a href="https://twitter.com/intent/tweet?text=yoyo"><button><i class ="fa fa-twitter"></i></button></a>
    <div class="quo" id="quoteDisplay">

    </div>
  </div>
</body>

Answer 1

您应该在 JavaScript 中使用事件侦听器，而不是内联事件处理程序，如下所示：

(function(d,M){
  var quotes=["Expose yourself to your deepest fear; after that, fear has no power, and the fear of freedom shrinks and vanishes. You are free.","There are things known and things unknown and in between are the doors.","I think of myself as an intelligent, sensitive human being with the soul of a clown which always forces me to blow it at the most important moments.","A friend is someone who gives you total freedom to be yourself.","Where's your will to be weird?","Death makes angels of us all and gives us wings where we had shoulders smooth as ravens claws.","I like people who shake other people up and make them feel uncomfortable.","This is the strangest life I've ever known.","I believe in a long, prolonged, derangement of the senses in order to obtain the unknown.","Whoever controls the media, controls the mind."],
      len=quotes.length,
      p=d.querySelector("p");
  p.appendChild(d.createTextNode(""));
  d.querySelector("button").addEventListener("click",function(){
    p.firstChild.nodeValue=quotes[M.floor(M.random()*(len))];
  },0);
 })(document,Math);

*{font-family:sans-serif;}

<p></p>
<button>New Quote</button>

ES6 版本：

{
  let quotes=["Expose yourself to your deepest fear; after that, fear has no power, and the fear of freedom shrinks and vanishes. You are free.","There are things known and things unknown and in between are the doors.","I think of myself as an intelligent, sensitive human being with the soul of a clown which always forces me to blow it at the most important moments.","A friend is someone who gives you total freedom to be yourself.","Where's your will to be weird?","Death makes angels of us all and gives us wings where we had shoulders smooth as ravens claws.","I like people who shake other people up and make them feel uncomfortable.","This is the strangest life I've ever known.","I believe in a long, prolonged, derangement of the senses in order to obtain the unknown.","Whoever controls the media, controls the mind."],
      len=quotes.length,
      d=document,
      M=Math,
      p=d.querySelector("p");
  p.append(d.createTextNode(""));
  d.querySelector("button").addEventListener("click",()=>p.firstChild.nodeValue=quotes[M.floor(M.random()*(len))],0);
 }

*{font-family:sans-serif;}

<p></p>
<button>New Quote</button>

Twitter 按钮和 IIFE

Twitter button and IIFE

html

javascript

api

twitter

iife