编写前台心得

文章目錄

1. 1. google chrome && WebStorm
   1. 1.1. ubuntu与webstorm快捷键冲突
2. 2. 合理利用console.log()
3. 3. 断点
4. 4. 输出JSON原始格式数据
5. 5. 参考文章

我这里想说的前台调是的心得并不是指的html和css,而是说的javascript。而且有一定的局限性。

google chrome && WebStorm

能够合理利用开发工具会让自己的效率事半功倍。我推荐的使用google chrome，当然我们说firefox也很优秀。对于初学者来时写程序的时候最好用IDE，因为它可以帮我们检查语法错误。所以我推荐初学者不要用sublime or vim而是用WebStorm。而且WebStorm会让我们写的javascript代码走上更规范的道路。

ubuntu与webstorm快捷键冲突

由于ubuntu定义的快捷键webstorm的快捷键有较多的冲突，请参考这篇文章:
ubuntu和idea快捷键冲突的解决

合理利用console.log()

打印到控制台是最常用的查看自己所想看数据的手段之一。但是，最开始的时候我是每次用到的时候都会自己写console.log()，而且经常用刷新页面的方法来重新调用console.log()来查看不同的结果。这种方法显然是很不方便的。

那么，我们说如何来避免呢？不是很简单的方法就是自己写一个函数。例如，我举的例子是依托于angularJS的。

controller

$scope.printData = function () {
            console.log($scope.data);
        };

view

<button ng-click="printData()">print</button>

然后我们点击页面的Print按钮控制台就会出现我们想要打印的数据。然后适时的时候清理一下控制台就可以了。

断点

一个程序员对程序调试的最基本操作就是打断点，看数据在哪儿与自己的逻辑不符或者数据有问题。对于打断点的技巧我感觉是和自己的经验成正比的。对于基本的讲解，请参考下面文章：
js断点调试心得

输出JSON原始格式数据

例如，在angularJS中有的时候我们在V层输出JSON格式的data，这样写往往会让数据打印的很乱，让我们无法看清到底是什么东西。所以我们需要这样子写,

<pre>{{data | json}}</pre>

详细请参考下面文章:

在angularJs中进行json数据的格式化

参考文章

在angularJs中进行json数据的格式化

js断点调试心得

ubuntu和idea快捷键冲突的解决