首页 > 代码库 > JS基础：（一）

JS基础：（一）

2024-08-12 12:44:21   220人阅读

       开发了很多项目，感觉javascript脚本语言用处太大了，所以，把一些新的写出来，尤其是调试的技巧。

     本次开发工具：Webstorm

 1.  官网：http://www.jetbrains.com/webstorm/index.html

 2. 优点：

WebStorm功能
JavaScript
· 基于DOM，特定浏览器完成
· 编码导航和用法查询
· 支持ECMAScript
· 支持CoffeeScript
· 支持结点
· JavaScript重构
· JavaScript单元测试
· 代码检测和快速修复
· JSLint/JSHint
· 基于 Mozilla的JavaScript调试器
其他用途
· 批量代码分析
· 编码语言混合或内混
· 拼写检查器
· 重复代码检测器
编辑语言
· 支持HTML5
· css/js
· 检验和快速修复
· Zen编码
· 显示内容
· 显示应用的风格
便捷的环境
· HTML5样本文件和其他Web应用程序模板
· FTP和远程文件同步
· 集成了版本控制系统
· 本地记录

3.特色：

WebStorm特色
智能的代码补全
支持不同浏览器的提示，还包括所有用户自定义的函数(项目中)
代码补全包含了所有流行的库，比如：JQuery, YUI, Dojo, Prototype, Mootools and Bindows。
代码格式化
代码不仅可以格式化，而且所有规则都可以自己来定义
html提示
大家经常在js代码中编写html代码，一般来说十分痛苦，不过有了智能提示，就爽多了。而且html里面还能有js提示。
联想查询
只需要按着Ctrl键点击函数或者变量等，就能直接跳转到定义；可以全项目查找函数或者变量，还可以查找使用并高亮。
代码重构
这个操作有些像Resharper，熟悉Resharper的用户应该上手很快，支持的有重命名、提取变量/函数、内联变量/函数、移动/复制、安全删除等等。
代码检查和快速修复
可以快速找到代码中的错误或者需要优化的地方，并给出修改意见，快速修复。
代码调试
支持代码调试，界面和IDEA相似，非常方便。

4.使用技巧：

http://www.cnblogs.com/jikey/archive/2010/12/25/1916938.html

5.快捷键：

常用快捷键：

Alt+回车 导入包,自动修正
Ctrl+N   查找类
Ctrl+Shift+N 查找文件
Ctrl+Alt+L  格式化代码
Ctrl+Alt+O 优化导入的类和包
Alt+Insert 生成代码(如get,set方法,构造函数等)
Ctrl+E或者Alt+Shift+C  最近更改的代码
Ctrl+R 替换文本
Ctrl+F 查找文本
Ctrl+Shift+Space 自动补全代码
Ctrl+空格 代码提示
Ctrl+Alt+Space 类名或接口名提示
Ctrl+P 方法参数提示
Ctrl+Shift+Alt+N 查找类中的方法或变量
Alt+Shift+C 对比最近修改的代码
 
Shift+F6  重构-重命名
Ctrl+Shift+先上键
Ctrl+X 删除行
Ctrl+D 复制行
Ctrl+/ 或 Ctrl+Shift+/  注释（// 或者/*...*/ ）
Ctrl+J  自动代码
Ctrl+E 最近打开的文件
Ctrl+H 显示类结构图
Ctrl+Q 显示注释文档
Alt+F1 查找代码所在位置
Alt+1 快速打开或隐藏工程面板
Ctrl+Alt+ left/right 返回至上次浏览的位置
Alt+ left/right 切换代码视图
Alt+ Up/Down 在方法间快速移动定位
Ctrl+Shift+Up/Down 代码向上/下移动。
F2 或Shift+F2 高亮错误或警告快速定位
 
代码标签输入完成后，按Tab，生成代码。
选中文本，按Ctrl+Shift+F7 ，高亮显示所有该文本，按Esc高亮消失。
Ctrl+W 选中代码，连续按会有其他效果
选中文本，按Alt+F3 ，逐个往下查找相同文本，并高亮显示。
Ctrl+Up/Down 光标跳转到第一行或最后一行下
Ctrl+B 快速打开光标处的类或方法

 具体用法：
自动导航到文件夹

技术分享

会生成一个默认的文件：

技术分享

创建一个js文件：

技术分享

查看js 的源码：

var doc=document.getElementsByName("")；
按住Ctrl点击  就相当于VS中的F12

测试代码：
HTML页：
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script type="text/javascript" src="http://www.mamicode.com/js/demo01.js"></script></head><body><button value="http://www.mamicode.com/test" onclick="Add(1,2)"></button></body></html>
 js页：
function Add(a,b){    var sun=a+b;   alert(sun);}
 运行；点开HTML页面，右上角：
技术分享
直接选中浏览器出来效果：
技术分享
 
调试：
 Firefox：
1.添加：
技术分享
点击：
技术分享
2.最原始的调试方法   多加几个：aler
3.console.info()    级别：info，debug，error，log，dir(内部信息全部输出)，warn
区别：
只是显示的地方不一样：
技术分享
断点调试：
技术分享
点击后的效果：

技术分享

这儿有调试的按钮：
技术分享
有几个重要的地方，不妨试试。
技术分享

点击这：
技术分享
输入你的表达式：就会出来如下的结果
技术分享


二：在谷歌浏览器中调试：
右键检查：或者F12
点击Sources：选择要调试的脚本
技术分享
技术分享
下断点，点击按钮。
技术分享




Webstorm+火狐：
1.要求安装 JetBrains Firefox extension 0.6.0

webstorm+谷歌：
1.要求安装并配置：扩展程序JetBrains IDE Support   Chrome插件
2.参见文章：http://hi.baidu.com/shaw_cd/item/8af86aa0e6c098a029ce9d1e
技术分享

我的谷歌浏览器有问题，自己安装吧
技术分享
JS基础：（一）






























        

            
                
                  
                
                

                    联系

                    我们