在前端开发的过程中，很多相同的代码会写很多遍。如：开始新项目的时候，要写和旧项目类似脚手架代码；新建一个组件的时候，要按约定写组件结构。如果这些重复代码能用工具来生成，能提升前端的开发效率。
生成代码的工具分为两类：基于命令的和基于图像界面的。
基于命令的工具的优点是，可配置高，效率快。缺点是，可发现性差。适合配置项目很多，配置可以组合的情况。
基于图像界面的优点是，可发现性强，操作简单。缺点是如果配置项很多，容易变得很难用。
罗嗦了一堆，下面开始介绍正题。
项目脚手架代码生成工具
项目脚手架主要做的项目的构建流程，环境的配置等。做到开箱即用。
基于命令的
yo 曾经流行过的一个脚手架生成工具。支持定义脚手架内容。基于 yo 的第三方脚手架也很多。
vue-cli 。 Vue 项目脚手架。支持自定义脚手架内容，感兴趣的可以读读 从vue-cli源码学习如何写模板。
create react app React 脚手架。比较轻量级，只是整合 webpack 和 react-router。
react boilerplate React 脚手架。比较重量级，整合了webpack 和 react router, redux, redux suga, reselect 等。
基于图形界面的
定制 Bootstrap 3
组件代码生成工具
基于命令的
react boilerplate 的 nam run generate 可生成组件的脚手架代码。
页面代码生成工具
基于命令的
代码编辑器的代码片段(Code Snippent)功能。主流的代码编辑器(Sublime,Atom,VS Code，Web Strom等) 都支持代码片段。也有写好的代码片段的编辑器插件。主流的框架基本都有对应的代码片段工具。
Emmet 提供 HTML，CSS，JS 的自动补全功能。
Bootstrap 3 Snippets
Vuejs Snippets
基于图形界面的
H5营销页面生成工具。有一大堆。
Maka
初夜
兔展
GrapesJS 强大的网页生成器。开源。
LayoutIt 托拽 Bootstrap 组件，生成页面。
YUIDoc 是一个基于 Node.js 的应用程序。新建个文档写着javascript写入过程并保存操作如下：
（1）YUIDoc 是一个基于 Node.js 的应用程序，用来根据 JavaScript 的注释中生成 API 文档，类似 JavaDoc，这也是当前 YUI 用来生成文档的工具。生成的文档效果：
（2）如果操作系统是windows的用户，需要配置perl环境，推荐安装ActivePerl ，Linux/Unix用户则不用配置了。
（3）解压缩JsDoc，在命令提示窗口中进入JsDoc所在目录，使用如下命令即可生成Javascript代码的文档。
perl jsdoc.pl test.js
其中test.js是用于测试的js文件，如果成功则在该目录下生成js_docs_out目录，里面包含生成的文档。
（4）如果生成失败，产生如下错误信息：
Can't locate HTML/Template.pm in @INC ......
需要配置HTML::Template模块，配置方法为：
进入perl的Package Manager，可以使用命令ppm，也可以点击开始菜单——ActivePerl 5.8.8 Build 817——Perl Package Manager。然后使用install命令安装HTML::Template模块，代码如下：
C:\>ppm
PPM>install HTML-Template
PPM>quit
具体的参数及用法可以查看JsDoc的官方网站。
总结：最终采用作用域的分析方式。即 函数调用 或 函数定义 被作为一个作用域。它们之前的 @class 将被理解为这个作用域内成员的父成员。
<!doctype html><html>
<head>
<title>计算器</title>
<meta charset="utf-8"/>
<style type="text/css">
.panel{
border:4px solid #ddd
width:192px
margin:100px auto
}
.panel p,.panel input{
font-family:"微软雅黑"
font-size:20px
margin:4px
float:left
}
.panel p{
width:122px
height:26px
border:1px solid #ddd
padding:6px
overflow:hidden
}
.panel input{
width:40px
height:40px
border:1px solid #ddd
}
</style>
<script type="text/javascript">
//参数e用来接收传入的event对象
function cal(e){
//1.获取事件源，处理button的事件
var obj=e.srcElement||e.target
if(obj.nodeName !="INPUT"){
return
}
var value=obj.value
var p=document.getElementById("screen")
if(value=="C"){
//2.如果是[C]，则清空p
p.innerText=""
}else if(value=="="){
//3.如果是[=]，则运算
var exp=p.innerText
try{
var result=eval("("+exp+")")
//如果正确执行，将结果写入p
p.innerText=result
}catch(e){
//发生错误，给予错误提示
p.innerText="Error."
}
}else{
//4.如果是其它按钮，则将value追加到p中
p.innerText+=value
}
}
</script>
</head>
<body>
<!--在最外层的div上注册单击事件，传入event对象，然后在函数中通过event判断出事件来源于哪一个button，
进而做出应有的处理。这样的好处是，避免在button上大量的注册事件。-->
<div class="panel" onClick="cal(event)">
<div>
<p id="screen"></p>
<input type="button" value="C">
<div style="clear:both"></div>
</div>
<div>
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="/">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="*">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="-">
<input type="button" value="0">
<input type="button" value=".">
<input type="button" value="=">
<input type="button" value="+">
<div style="clear:both"></div>
</div>
</body>
</html>
这是我自学时候写的计算器
