JavaScript 编写基本环境搭建

JavaScript

JavaScript编写自己使用的是Sublime Text 2,但你可以在官网去下载最新版本的Sublime Text 3来用，要不去官网直接是百度找的话就只能看到Mac版本最新的是Sublime Text 2。下面是官网的下载链接：Sublime Text

写JS的基本配置

说说用Sublime Text写JavaScript的时候需要做的一些基本的配置。先从这个配置PageControl开始，因为这个很多的插件等等的全都是用PageControl管理的，这个也是最基本的，所以先说说这个的设置。

先说说自动设置的方法，View > Show Console 然后输入下面的内容即可：

Sublime Text 3：

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Sublime Text 2：

import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

但上面的办法有时候是不行的，然后下面再说说我们手动配置的方法：

现在下面的连接去下载Package Control.sublime-package文件

然后按照下面图片的提示点击：你会看到一个User文件，这时候你需要做的就是查看它的“显示简介”找到它的路径，方便你找到它的上层文件的路径，你通过进入它上层路劲。你就可以看到这个文件夹：Installed Packages ，然后把你下载的Package Control.sublime-package文件拖进去就行了。

“显示简介”能让你扎看到的路径内容如下：

接下来就是让Sublime Text支持JavaScript：

首先得去下载Node，点击下载Node 这个网友的网盘有我们需要的东西，下载之后再去按照下面图片的提示位置去创建支持JavaScript运行的文件：

在这里添加如下代码再保存文件：

1 2	`"cmd": ["/usr/local/bin/node","$file"],` `"selector":"*.js"`

这样就可以了：需要注意的是你保存这个文件时候的名称，这个名称就是你在如上图所示的你能看到的像Ant,C++Single File 一样，所以你可以名称起的直观一点，就像我直接保存的JavaScript一样。

网页快速打开运行效果

通过上面的处理，就让我们的Sublime Text支持JavaScript，现在需要的就是我们快速的通过启动网页随时的查看运行的结果：

步骤一：点击菜单Tools -> New Plugin...，创建py文档，在py文档中输入下面的内容：

import sublime, sublime_plugin
import webbrowser
 
url_map = {
 
    '/Users/skotc/Desktop/workspac/JSObject' : 'file:///Users/skotc/Desktop/workspac/JSObject',
    #这里需要根据个人的电脑进行配置, 配置你项目的路径
}
 
class OpenBrowserCommand(sublime_plugin.TextCommand):
    def run(self, edit) :
        window = sublime.active_window()
        window.run_command('save')
        url = self.view.file_name()
        flag = False
        for path, domain in url_map.items():
            if url.startswith(path):
                url = url.replace(path, domain).replace('\\', '\/')
                flag = True
                break
        if not flag:
            url = 'file://' + url
        webbrowser.open_new(url) #这里使用默认的浏览器调试

将文件保存到Packages/User目录（Packages可通过菜单里的Browser Packages...打开），文件名随意，如open_browser.py。

二、接下来，为刚才的插件分配快捷键。点菜单Tools -> Command Palette...，或者shift+cmd+p，打开命令集，选择“key Bindings - User”打开个人快捷键配置，输入下列内容：

1	`[{` `"keys": ["ctrl+shift+b"],` `"command":` `"open_browser"` `}]`

这就是要做的全部工作，可以测试下了。打开一个html文件，ctrl+shift+b试试，没意外的话文件会在默认浏览器打开了。url_map里配置的站点目录到URL的映射应该也是可用的。

三：下面是一个展示一个时间效果的H5代码部分，可以用来测试，记得文件格式保存是.html格式。

<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title> 时间显示器 </title>
<!-- 一个计时器 -->
<script>
// 定义函数，获取时分秒
function startTime(){
 
    // 获取到目前的时间
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
 
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('tex').innerHTML = h+":"+m+":"+s;
     
    // 这了重点需要理解的是 setTimeout 这个函数，它的意义是500秒重复执行前面的方法
    // 在这里定义的这个函数是执行startTime这个函数
    t=setTimeout(function(){startTime()},500);
   }
// 这个函数是用来检查分和秒当中有没有小于10的
// 要是有小于10的则在前面显示中加0
function checkTime(i){
 
  if (i<10) {
    i="0"+i;
  }
  return i;
}
</script>
</head>
<body onload="startTime()" >
        <div id="tex"></div>
</body>
</html>