手把手教你搭建 vue-cli

 发表于 December 28, 2018  |  1 分钟  |  31 个字  |  svtter

vuejs 这东西，实不相瞒，学习了很长时间，从看文档到使用，大概有一年的时间。当然，其实上手没有那么难，<script src="vue.js"></script>这样就搞定了。只是想要用的比较优雅，存在一定的难度。

但是硬核玩家肯定不能止步于此。于是就开始了vue-cli的探究。没想到这个探究如此之长，以至于我在很长一段时间内，都没有正儿八经的写过前端。

[阅读全文]
javascript  vue 

Javascript中变量的作用域

 发表于 July 20, 2017  |  1 分钟  |  13 个字  |  svtter

问题引出

方才阅读es6的时候遇到一个问题：

问题解决

这就想了，如果没有let关键字，我们如何处理这个问题呢？

此时就涉及到一个概念，闭包 clojure。

不要被这个复杂的名词欺骗了，就是函数套函数，函数返回函数而已。解决这个问题关键在于

块级作用域和函数作用域的理解；在Javascript中，并不支持块级作用域，它只支持函数作用域，

而且在一个函数中的任何位置定义的变量在该函数中的任何地方都是可见的。

因此，我们在Js这个特性的基础上，使用闭包，然后就可以解决这个问题了：

为什么要解决这个问题？因为有时候在for循环中使用回调可能与参数i有所联系，可能会遭遇到

问题；

当然，如果使用es6这种问题就不会发生了。es6大法好。

Javascript  Engineering 

CallBackHell

 发表于 June 8, 2017  |  1 分钟  |  25 个字  |  svtter

这两天做微信小程序赶个潮流，体验了一下回调——之前一直听人讲“回调地狱”，这次终于

亲身感受了一下。的确是“地狱”。

不过既然能够出现“回调地狱”，也必然有人可以避免，甚至在一定程度上解决这个问题。

回调地狱解决方法

一般情况下，我不怎么写回调的代码；一方面是因为没有这个习惯，之前写算法题目，基

本上不写回调——不过行文至此，突然想起许多题目都有用回调从而更加优雅解决的方案，囧。

再贴一篇c++的函数传递

本以为Java不存在回调地狱，也就不存在回调——询问之后，才意识到Java之所以不存在回调

地狱，是因为Java本身要用回调，需要传类作为参数；一方面，如果使用回调，会使得代码

变长；另一方面，尽管代码变长，但是相比较简短的代码，问题描述的更加清晰明确。

这可能就是为什么Js被称为玩具语言的原因之一吧。

回调函数的优势：

当程序跑起来时，一般情况下，应用程序（application program）会时常通过API调用库里所预先备好的函数。但是有些库函数（library function）却要求应用先传给它一个函数，好在合适的时候调用，以完成目标任务。这个被传入的、后又被调用的函数就称为回调函数（callback function）。
作者：no.body
链接：https://www.zhihu.com/question/19801131/answer/27459821
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

然后讲讲Python：

最后一个才是最酷的。

Javascript 

WebRTC的照镜子

 发表于 February 3, 2017  |  1 分钟  |  76 个字  |  svtter

利用WebRTC照镜子，源代码见下方SourceCode

这篇博文是在我之前使用ananote？主题发布的，在next主题上，会导致打开这个文章所在的pages，自动调用摄像头——然而没有多少影响，因为不是https「笑，https好贵」，所以对访客而言，没有什么影响。

Source code

<style type="text/css">
body {
  margin: px;
  padding: px;
}
#player {
  width: 100%;
  height: 100%;
}
 </style>
 <script>
(function(){
  var mediaOptions = { audio: false, video: true };
  if (!navigator.getUserMedia) {
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  }
  if (!navigator.getUserMedia){
    return alert('getUserMedia not supported in this browser.');
  }
  navigator.getUserMedia(mediaOptions, success, function(e) {
    console.log(e);
  });
  function success(stream){
    var video = document.querySelector("#player");
    video.src = window.URL.createObjectURL(stream);
  }
})();
 </script>
<video id="player" autoplay="true"></video>
webrtc  javascript 

JS-变量相关-jQuery调用

 发表于 December 1, 2014  |  1 分钟  |  43 个字  |  svtter

  • 本文出自<svtter.github.io>

在javascript函数外部定义的变量均为全局变量。

调用jQuery, 需要把jQuery放在<script>最前。

调用本地jQuery的代码

jQuery 目录: ../js/jquery-1.11.1.min.js/

其他的script文件放在jquery后即可

HTML

依据w3cschool修改

<html>
<head>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    alert("debug!")
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Javascript 

JS-优化上传文件的样式

 发表于 December 1, 2014  |  1 分钟  |  85 个字  |  svtter

上传文件type=file真心丑，所以采用方法解决一下。

中心思想是隐藏input，然后利用css定位，使其仍然可以被点击（有点欺骗的性质）

text需要禁止点击（使用diabled='disabled')

源代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>定义input type="file" 的样式</title>
        <style type="text/css">
body{ font-size:14px;}
input{ vertical-align:middle; margin:; padding:}
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:; right:85px; height:24px; filter:alpha(opacity:);opacity: ;width:70px }
        </style>
    </head>
    <body>
        <div class="file-box">
            <form action="" method="post" enctype="multipart/form-data">
                <input type='text' name='textfield' id='textfield' class='txt' disabled='disabled'/>
                <input type='button' class='btn' value='浏览...' />
                <input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
                <input type="submit" name="submit" class="btn" value="上传" />
            </form>
        </div>
    </body>
</html>
Javascript