intellijidea js-intellj怎么idea 格式化代码js代码

来源：蜘蛛抓取(WebSpider) 时间：2016-05-30 03:44 标签： idea 格式化代码风格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&leizhimin 的BLOG
用户名：leizhimin
文章数：716
评论数：2655
注册日期：
阅读量：3416
阅读量：280513
阅读量：1008622
阅读量：154764
51CTO推荐博文
IntelliJ Idea 常用快捷键列表
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&快速打开光标处的类或方法&
&本文出自 “” 博客，请务必保留此出处
了这篇文章
类别：┆阅读(0)┆评论(0)
23:01:34 13:56:31 15:25:58 17:32:18使用Intellij IDEA搭建Ext JsMVC web项目
由于自己从android开发转来学习web开发，最近在学习Jsp，之前接触过一点Extjs，所以用jsp来配合ext试试。
Ext JS介绍
extjs是一个javascript框架，它的好处就是有它自己的界面和事件处理。我们根据它的语法就可以实现我们想要的功能，具体我就不介绍了，自己百度。
Ext MVC结构介绍
不管任何时候，做一个大项目总是很烦的。因为大，所以开发的时候很难去组织，维护的时候就更别说了。随着业务增长肯定更头疼了。Ext的MVC和你在其它地方了解到的所以MVC的功能一样，它的目的就是：
1、组织你的代码，让它易于维护
2、减少你的代码量
Ext MVC结构组成
Model 就是字段和数据，类似于java当中的实体bean View 看名字你就爱猜到了，对，没错，用来显示的组件。 Controllers Controllers一般就是做一些操作的地方。
MVC文件结构
先来看一下官方文档给出的一张图
好了，先有个大概的认识，接下来开始实际操作。
本例演示用的开发工具是Intellij idea
无论用什么工具，最开始的一步当然是创建一个web项目了
1、创建一个web项目
1、打开intellij创建一个新项目，之后勾选JavaEE下的Web application，选择自己的项目目录一个项目就创建完毕了。
2、创建完毕后，项目目录如下
src里放的就是java代码，web就是我们的项目根目录。此时还需要配置你的Tomcat容器，指定你的项目web路径。具体如下
3、点击IDE右上角的三角形editConfigurations，之后在左边点击+,寻找Tomcat Server,然后点击Local。这样一个Tomcat配置项就出现了
4、Tomcat配置项添加之后还需要指定Tomcat的目录，和web项目的目录，只需要选定你的Tomcat目录和你项目的web文件夹。
这样一个web项目就可以运行了，点击右上角run,在浏览器里输入localhost:8080可以访问就到下一步。
2、集成Ext Js
1、ext作为一个javascript框架，我们只需要在页面简单的通过引入javascript的方式就可以使用了。
在web文件夹新建一个js文件夹，把extjs的sdk放入，然后在首页引入
index.jsp代码如下
&%@ page contentType=&text/charset=UTF-8& language=&java& %&
&script type="text/javascript" src="js/extjs/ext-all.js"&&/script&&script type="text/javascript" src="js/extjs/locale/ext-lang-zh_CN.js"&&/script&&script type="text/javascript" src="app/appjs/app.js"&&/script&
这样index.jsp就能够使用ext了，注意最后一行script饮用了app.js，这是ext应用的开始的地方。
在文章开始说到ext官网给出的MVC文件结构都是在app文件夹之后的，所以在web下新建一个app文件夹
3、使用Ext Js的MVC结构
在app.js里创建应用
没个ext js 4应用都以一个Application类开始。Application包含了应用文件夹的设置，以及一个启动函数，在Application启动之后会调用。所以我们在app文件夹创建app.js，当然名字你可以随便取，我们在里面写一个Application
Ext.application({
requires: [&#39;Ext.container.Viewport&#39;],
name: &#39;AM&#39;,
appFolder: &#39;app&#39;,
launch: function() {
Ext.create(&#39;Ext.container.Viewport&#39;, {
layout: &#39;fit&#39;,
xtype: &#39;panel&#39;,
title: &#39;Users&#39;,
html : &#39;List of users will go here&#39;
上面的代码通过Ext.application创建了一个名叫AM 的Application类，并且指定了应用的文件夹为app，launch函数，在加载完毕之前会调用，这里可以看到创建了一个Viewport类，items就是它包含的内容，包含了一个panel，里面简单的设置了一段文字。
此时你再刷新index.jsp，效果是这样了,完全没写什么样式，是不是很酷，而且你可以根据皮肤换效果
定义一个Controller
ext中的Controllers一般都和application一起使用，用来监听处理事件。下面代码创建了一个简单的控制器，记得创建在controller文件夹下。
Ext.define(&#39;AM.controller.Users&#39;, {
extend: &#39;Ext.app.Controller&#39;,
init: function() {
console.log(&#39;Initialized Users! This happens before the Application launch function is called&#39;);
创建之后还要在application中引用
Ext.application({
controllers: [
&#39;Users&#39;
当在中访问index.的时候，由于在applicaton在指定了controller,所以controller会自动加载，controller中的 init函数会在Application类的lauch函数之前调用。
打开浏览器打开console 控制台会发现输出了Initialized Users! This happens before the Application launch function is called
Controller的init函数通常会调用－control()来设置事件监听。
Ext.define(&#39;AM.controller.Users&#39;, {
extend: &#39;Ext.app.Controller&#39;,
init: function() {
this.control({
&#39;viewport & panel&#39;: {
render: this.onPanelRendered
onPanelRendered: function() {
console.log(&#39;The panel was rendered&#39;);
在init函数中调用了control，查找viewport类下的任何panel类， render表示显示事件，即当panel显示是输出The panel was rendered
修改为上面代码，再刷新，console控制台就打印了。
看到这里，基本的事件处理就演示了，在深入了解之后就可以做更多事件了，哈哈。好了，下面来看view
定义一个Controller
ext含有很多view组件，下面是一个简单的例子，我们在view文件夹下建立List.js代表用户列表，代码
Ext.define(&#39;AM.view.user.List&#39; ,{
extend: &#39;Ext.grid.Panel&#39;,
alias: &#39;widget.userlist&#39;,//别名，在其他地方引用可以直接用userlist
title: &#39;All Users&#39;,
initComponent: function() {
this.store = {
fields: [&#39;name&#39;, &#39;email&#39;],
{name: &#39;Ed&#39;,
email: &#39;&#39;},
{name: &#39;Tommy&#39;, email: &#39;&#39;}
}; //做演示，这是指定了数据
this.columns = [
{header: &#39;Name&#39;,
dataIndex: &#39;name&#39;,
{header: &#39;Email&#39;, dataIndex: &#39;email&#39;, flex: 1}
];//用来grid显示的列，会将store中name相同的数据显示
this.callParent(arguments);
注意这里define之后的名字，&AM.view.user.List&,AM是我们创建application时指定的 name，view对呀m的view,也就是view文件夹下user文件夹下的 List，其他所有文件都是按照这个模式的，就是mvc。
view创建好之后，需要在Controller里引用，由于用了weight.userlist来作为alias别名，所以在Controller中可以直接使用别名引用
Ext.define(&#39;AM.controller.Users&#39;, {
extend: &#39;Ext.app.Controller&#39;,
&#39;user.List&#39;
onPanelRendered: ...
还记得之前在application中在launch之后直接显示了一个 panel吗，现在有了自己的view,我们就不用panel了，直接将view添加到application
Ext.application({
launch: function() {
Ext.create(&#39;Ext.container.Viewport&#39;, {
layout: &#39;fit&#39;,
xtype: &#39;userlist&#39;
这样在启动之后就会加载view了，重新刷新浏览器，效果如图：
简单的设置了数据源指定grid的columns就可以显示了是不是很酷，可惜现在的数据不是真实数据。
之前在controller中监听了panel的render事件，不过由于是显示事件所以可能感觉不爽。结下来我们操作grid。
Controller中操作grid
通过双击在console控制台输出一条信息,看controller代码
Ext.define(&#39;AM.controller.Users&#39;, {
extend: &#39;Ext.app.Controller&#39;,
&#39;user.List&#39;
init: function() {
this.control({
&#39;userlist&#39;: {
itemdblclick: this.editUser
editUser: function(grid, record) {
console.log(&#39;Double clicked on &#39; + record.get(&#39;name&#39;));
只是简单的修改了control中的代码，监听userlist，itemdbclick代表的是双击事件，指向了editUser,监听的输入了Double clicked on & + record.get(&name&)
再次刷新，双击
那我们要是想直接编辑gird呢
编辑的时候肯定需要一个form，来看代码
Ext.define(&#39;AM.view.user.Edit&#39;, {
extend: &#39;Ext.window.Window&#39;,
alias: &#39;widget.useredit&#39;,
title: &#39;Edit User&#39;,
layout: &#39;fit&#39;,
autoShow: true,
initComponent: function() {
this.items = [
xtype: &#39;form&#39;,// form表单
xtype: &#39;textfield&#39;,
name : &#39;name&#39;,
fieldLabel: &#39;Name&#39;
xtype: &#39;textfield&#39;,
name : &#39;email&#39;,
fieldLabel: &#39;Email&#39;
this.buttons = [
text: &#39;Save&#39;,
action: &#39;save&#39;
text: &#39;Cancel&#39;,
scope: this,
handler: this.close
this.callParent(arguments);
上面代码定义了一个用来显示的window，其中包含了一个form表单和两个按钮。
那么我们要contoller里肯定需要在双击的时候显示window，将原始数据填入 form。
好了，上代码
Ext.define(&#39;AM.controller.Users&#39;, {
extend: &#39;Ext.app.Controller&#39;,
&#39;user.List&#39;,
&#39;user.Edit&#39;
editUser: function(grid, record) {
var view = Ext.widget(&#39;useredit&#39;);//找到window
view.down(&#39;form&#39;).loadRecord(record);window下的 form，回填数据。
创建Model和Store
之前我们在创建view的时候直接将数据写在了view里，其实可以在 view中引用Store，store是封装数据的地方，可以从服务器加载也可以本地配置。
Ext.define(&#39;AM.store.Users&#39;, {
extend: &#39;Ext.data.Store&#39;,
fields: [&#39;name&#39;, &#39;email&#39;],
{name: &#39;Ed&#39;,
email: &#39;&#39;},
{name: &#39;Tommy&#39;, email: &#39;&#39;}
//简单的指定了本地数据
需要在Controller中引用stores
Ext.define(&#39;AM.controller.Users&#39;, {
extend: &#39;Ext.app.Controller&#39;,
&#39;Users&#39;
这样在view里我们就可以直接使用store
Ext.define(&#39;AM.view.user.List&#39; ,{
extend: &#39;Ext.grid.Panel&#39;,
alias: &#39;widget.userlist&#39;,
title: &#39;All Users&#39;,
// we no longer define the Users store in the `initComponent` method
store: &#39;Users&#39;,
initComponent: function() {
this.columns = [
接下来到model
Ext.define(&#39;AM.model.User&#39;, {
extend: &#39;Ext.data.Model&#39;,
fields: [&#39;name&#39;, &#39;email&#39;]
store和controller里需要引用model，
Ext.define(&#39;AM.store.Users&#39;, {
extend: &#39;Ext.data.Store&#39;,
model: &#39;AM.model.User&#39;,
{name: &#39;Ed&#39;,
email: &#39;&#39;},
{name: &#39;Tommy&#39;, email: &#39;&#39;}
Ext.define(&#39;AM.controller.Users&#39;, {
extend: &#39;Ext.app.Controller&#39;,
stores: [&#39;Users&#39;],
models: [&#39;User&#39;],
这样和之前的效果一样。
store能够从服务端加载数据用来显示在view中。由于篇幅有限就暂时不做介绍了。这里主要讲解Ext js的MVC。
其实就是以Ext.application为开始，指定了项目名之后,
命名就以 项目名.view或controller或store或model.文件名。
中间你可以加根据功能区分的文件夹，这样就很好管理和维护了。
最后附上一下demo的文件结构
哈哈，extjs的mvc是不是很好理解了，如何在src也用上MVC就更好了。点个赞呗。
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'IntelliJ IDEA 中开发Jade如何在内嵌的css和js中加入代码高亮 - CNode技术社区
这家伙很懒，什么个性签名都没有留下。
如果在Jade中插入大段script或者css，只能以“纯文本”的方式被IDE高亮。。不知道有啥方法能让IntelliJ IDEA支持内联的script和css的高亮？？
放弃jade吧
我觉得jade有点浪费青春！
求推荐个好的模板？？ejs？
idea有插件的吧…
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的

我要回帖

更多关于 idea 格式化代码风格 的文章

 

随机推荐