Twitter 按钮和 IIFE答案

【问题标题】：Twitter button and IIFETwitter 按钮和 IIFE
【发布时间】：2017-07-10 01:25:54
【问题描述】：

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

  "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>

【问题讨论】：

请为您的 Twitter 问题创建一个单独的问题。

标签： javascript html api twitter iife

【解决方案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>

【讨论】：

非常感谢朋友！