44 |
44 | 本作品采用知识共享署名-非商业性使用 3.0 中国大陆许可协议进行许可。
45 |
--------------------------------------------------------------------------------
/html/css/prettify.css:
--------------------------------------------------------------------------------
1 | .pln{color:#000}
2 | @media screen{.str{color:#080}
3 | .kwd{color:#008}
4 | .com{color:#800}
5 | .typ{color:#606}
6 | .lit{color:#066}
7 | .pun,.opn,.clo{color:#660}
8 | .prettyprint .tag{color:#008}
9 | .atn{color:#606}
10 | .atv{color:#080}
11 | .dec,.var{color:#606}
12 | .fun{color:red}
13 | }
14 | @media print,projection{
15 | .str{color:#060}
16 | .kwd{color:#006;font-weight:bold}
17 | .com{color:#600;font-style:italic}
18 | .typ{color:#404;font-weight:bold}
19 | .lit{color:#044}
20 | .pun,.opn,.clo{color:#440}
21 | .prettyprint .tag{color:#006;font-weight:bold}
22 | .atn{color:#404}
23 | .atv{color:#060}
24 | }
25 | pre.prettyprint{padding:2px;border:1px solid #888}
26 | ol.linenums{margin-top:0;margin-bottom:0}
27 | li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}
28 | li.L1,li.L3,li.L5,li.L7,li.L9{background:none;}
29 | .prettyprint,
30 | pre.prettyprint {
31 | background-color: #272822;
32 | border: none;
33 | overflow: hidden;
34 | padding: 10px 15px;
35 | }
36 | .prettyprint.linenums,
37 | pre.prettyprint.linenums {
38 | -webkit-box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741;
39 | -moz-box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741;
40 | box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741;
41 | }
42 | .prettyprint.linenums ol,
43 | pre.prettyprint.linenums ol {
44 | margin: 0 0 0 30px;
45 | padding:0;
46 | }
47 | .prettyprint.linenums ol li,
48 | pre.prettyprint.linenums ol li {
49 | text-indent:0;
50 | padding-left: 12px;
51 | color: #bebec5;
52 | line-height: 20px;
53 | margin-left: 0;
54 | list-style: decimal;
55 | margin-bottom: 0;
56 | word-wrap:break-word;
57 | }
58 | .prettyprint *{font-family:'courier new',monospace;}
59 | .prettyprint .com { color: #93a1a1; }
60 | .prettyprint .lit { color: #AE81FF; }
61 | .prettyprint .pun,
62 | .prettyprint .opn,
63 | .prettyprint .clo { color: #F8F8F2; }
64 | .prettyprint .fun { color: #dc322f; }
65 | .prettyprint .str,
66 | .prettyprint .atv { color: #E6DB74; }
67 | .prettyprint .kwd,
68 | .prettyprint .tag { color: #F92659; }
69 | .prettyprint .typ,
70 | .prettyprint .atn,
71 | .prettyprint .dec,
72 | .prettyprint .var { color: #A6E22E; }
73 | .prettyprint .pln { color: #66D9EF; }
74 |
--------------------------------------------------------------------------------
/html/README.html:
--------------------------------------------------------------------------------
1 | 开发一套大型系统社交+电商系统，涉及前端（ios、安卓、pc、微信）、后台、接口、数据库、缓存、负载均衡、集群等方方面面的知识和技能。
3 | 我们将开发中所涉及的技能、知识、思想记录并整理出来，将其中承载的价值分享、传播给更多人。
如果你想成为一名全栈或某一方面的编程高手，请跟着我们一起探索、前进。
5 |15 |6 |
14 |- 如果你是研发高手，请跟我们一起完善笔记，让更多的人掌握这些技能
7 |- 如果你是研发小白，请跟着我们前进，成为全栈高手
8 |- 无论你是初中、高中、大专、本科毕业，只要对编程有强烈兴趣，请跟着我们前进，成为全栈高手
9 |- 我们的CEO14岁时创建诺亚大陆，研发团队有初中、高中、大专毕、本科毕业生，我们对学历没有偏见
10 |- 相信自己，就能创造奇迹，请跟着我们前进，做更好的自己
11 |- 本笔记是各种技术简要记录，内容来源于网络及研发人员个人观点，仅供参考
12 |- 如果你觉得对你有用，请使用微信关注 “诺亚大陆” 公众号，参与诺亚大陆的建设
13 |
44 |
45 | 本作品采用知识共享署名-非商业性使用 3.0 中国大陆许可协议进行许可。
一款功能强大的js编译（转换）器，能将ES7、ES6编译（转换）为ES5、ES6。
13 |14 |16 | 18 |babel 6 将功能分拆为很多插件，可以自由组合。如果嫌麻烦，可以直接使用预设（presets）好的插件包。比如：es2015、react。刚开始可能被 babel 晃得不明所以，本质上就是一个转码工具，类似编译器。复杂就是插件化，很多插件让你不知所措。
15 |
插件化虽然增加了选择成本，但使得babel发展更快，功能跟强大！
babel 实在太强大了，强大得令 type script 失色！coffee script、dark 彻底退出历史舞台。
将需要的babel包加入到项目配置文件 21 | package.json
22 |"devDependencies": {
23 | "babel-cli": "^6.5.1",
24 | "babel-plugin-syntax-async-functions": "^6.5.0",
25 | "babel-plugin-syntax-object-rest-spread": "^6.5.0",
26 | "babel-plugin-transform-async-to-generator": "^6.3.13",
27 | "babel-plugin-transform-es2015-arrow-functions": "^6.5.2",
28 | "babel-plugin-transform-es2015-destructuring": "^6.3.15",
29 | "babel-plugin-transform-es2015-modules-commonjs": "^6.3.16",
30 | "babel-plugin-transform-es2015-parameters": "^6.5.0",
31 | "babel-plugin-transform-es2015-spread": "^6.5.2",
32 | "babel-plugin-transform-object-rest-spread": "^6.5.0",
33 | "babel-plugin-transform-strict-mode": "^6.5.2",
34 | "babel-register": "^6.3.13",
35 | "babel-eslint": "^4.1.6",
36 | }
37 | 创建 .babelrc 文件，确定需要转换哪些语法，可自己组合搭配
44 |{
45 | "plugins": [
46 | "syntax-object-rest-spread",
47 | "syntax-async-functions",
48 | "transform-es2015-arrow-functions",
49 | "transform-async-to-generator",
50 | "transform-es2015-modules-commonjs",
51 | "transform-es2015-destructuring",
52 | "transform-es2015-spread",
53 | "transform-object-rest-spread",
54 | "transform-es2015-parameters",
55 | "transform-strict-mode"
56 | ]
57 | }
58 | 箭头函数，babel不绑定参数，而ES6绑定
83 |// test babel bug
84 | function a(){
85 | return ()=>{
86 | console.log(...arguments);
87 | }
88 | }
89 |
90 | a(1)();
91 | 最好用的跨平台文本编辑器，推荐使用。
13 |Create tasks.json
F1 and type in 'Configure Task Runner', press Enter to select it.
25 | Select Others.
26 | tasks.json :
{
28 | // See http://go.microsoft.com/fwlink/?LinkId=733558
29 | // for the documentation about the tasks.json format
30 | "version": "0.1.0",
31 | "command": "echo",
32 | "isShellCommand": true,
33 | "args": ["Hello World"],
34 | "showOutput": "always"
35 | }
36 |
37 | we change the contents as follows:
38 | {
39 | // See http://go.microsoft.com/fwlink/?LinkId=733558
40 | // for the documentation about the tasks.json format
41 | "version": "0.1.0",
42 | "command": "marked",
43 | "isShellCommand": true,
44 | "args": ["sample.md", "-o", "sample.html"],
45 | "showOutput": "always"
46 | }
47 | Use ⌃Space to see the available settings.
49 |安装任务执行环境
55 | npm i -g gulp-cli
56 | npm i gulp -D
57 | npm i gulp-markdown -D
58 | 创建 Gulp 任务 gulpfile.js，也就是用js编写的类似 bat、cmd一样的批量处理执行脚本
61 | var gulp = require('gulp');
62 | var markdown = require('gulp-markdown');
63 |
64 | // 执行转换任务
65 | gulp.task('markdown', function() {
66 | return gulp.src('**/*.md')
67 | .pipe(markdown())
68 | // 统一转换到 html 目录
69 | .pipe(gulp.dest('html'));
70 | // 原目录转换
71 | // .pipe(gulp.dest(function(f) {
72 | // return f.base;
73 | // }));
74 | });
75 |
76 | // 缺省任务
77 | gulp.task('default', function() {
78 | // 对所有 md 文件进行监视，发现修改自动执行 转换任务！
79 | gulp.watch('**/*.md', ['markdown']);
80 | });
81 | 运行 gulp markdown，所有md文件被批量转换到html目录！
83 |修改 tasks.json 文件，对 md 文件进行监视 85 | set a watch on the default Gulp task we just created.
86 | {
87 | "version": "0.1.0",
88 | "command": "gulp",
89 | "isShellCommand": true,
90 | "tasks": [{
91 | "taskName": "default",
92 | "isBuildCommand": true,
93 | "showOutput": "always",
94 | "isWatching": true
95 | }]
96 | }
97 | 最好用的跨平台文本编辑器，推荐使用。
13 |Create tasks.json
F1 and type in 'Configure Task Runner', press Enter to select it.
25 | Select Others.
26 | tasks.json :
{
28 | // See http://go.microsoft.com/fwlink/?LinkId=733558
29 | // for the documentation about the tasks.json format
30 | "version": "0.1.0",
31 | "command": "echo",
32 | "isShellCommand": true,
33 | "args": ["Hello World"],
34 | "showOutput": "always"
35 | }
36 |
37 | we change the contents as follows:
38 | {
39 | // See http://go.microsoft.com/fwlink/?LinkId=733558
40 | // for the documentation about the tasks.json format
41 | "version": "0.1.0",
42 | "command": "marked",
43 | "isShellCommand": true,
44 | "args": ["sample.md", "-o", "sample.html"],
45 | "showOutput": "always"
46 | }
47 | Use ⌃Space to see the available settings.
49 |安装任务执行环境
55 | npm i -g gulp-cli
56 | npm i gulp -D
57 | npm i gulp-markdown -D
58 | 创建 Gulp 任务 gulpfile.js，也就是用js编写的类似 bat、cmd一样的批量处理执行脚本
61 | var gulp = require('gulp');
62 | var markdown = require('gulp-markdown');
63 |
64 | // 执行转换任务
65 | gulp.task('markdown', function() {
66 | return gulp.src('**/*.md')
67 | .pipe(markdown())
68 | // 统一转换到 html 目录
69 | .pipe(gulp.dest('html'));
70 | // 原目录转换
71 | // .pipe(gulp.dest(function(f) {
72 | // return f.base;
73 | // }));
74 | });
75 |
76 | // 缺省任务
77 | gulp.task('default', function() {
78 | // 对所有 md 文件进行监视，发现修改自动执行 转换任务！
79 | gulp.watch('**/*.md', ['markdown']);
80 | });
81 | 运行 gulp markdown，所有md文件被批量转换到html目录！
83 |修改 tasks.json 文件，对 md 文件进行监视 85 | set a watch on the default Gulp task we just created.
86 | {
87 | "version": "0.1.0",
88 | "command": "gulp",
89 | "isShellCommand": true,
90 | "tasks": [{
91 | "taskName": "default",
92 | "isBuildCommand": true,
93 | "showOutput": "always",
94 | "isWatching": true
95 | }]
96 | }
97 | 13 |15 |本文由gaohailang翻译自State of the Art JavaScript in 2016，加上了部分译者的观点。就像是隧道终点前的光明，JS生态的最佳实践不再剧烈变更着，现在关于需要学什么越来越明确了。本文就关于核心类库，状态管理，语言特性，构建工具，CSS预处理，API & HTTP 类库，测试工具，依赖管理等等前端开发的方方面面进行了展望和梳理，为你挑出这些最佳实践和面向未来的设计~
14 |
那么，你要开始一个崭新的Javascript前端项目了，或者被之前老项目折腾半死，你也许并没有和改变进化步伐极快的社区生态保持技术实践的同步，或者你开始了，但是有大量的可选项不知道怎么选。React，Flux，Angular，Aurelia，Mocha，Jasmine，Jasmine，Babel，TypeScript，Flow。哦我的天呐这么多~ 为了让事件变得更简单，我们很多人正陷入一个陷阱：被我喜欢的XKCD漫画描述的很好：
16 |
是的，好消息是现在JS生态开始慢下来了，好项目开始冒出。最佳实践慢慢开始变得清晰了。工程师开始在现有项目上构建自己的工程还是重新创造轮子。
18 |作为起点，下面是我对现代化Web应用各个部分的个人选择。一些选择看起来会有些争议，我会在每个选择后附上我的基本推理判断。要注意的是，这些选择通常是我建立在我目前对社区的观察和我个人的经历。你的看法当然会有不同~
19 |
目前胜者很显然就是React（译者：你确定？！）
22 |现在不少全能的大型框架如Ember，Angular，它们承诺说帮你处理所有的事。但是在React生态中，尽管需要对组件做一些决定（哈这就是你为什么要阅读本文的原因啦），但是这方案更强壮。很多其他框架，譬如Angular2.0正在快速追赶React。
32 |『选择React不仅是个技术上的选择，更多是个商业决定！』
33 |
PS: 以上不是它最终的logo
40 |现在我们有了我们的视图和组件层，应用程序还需要管理数据状态和应用的生命周期。Redux也是毋容置疑的优胜者。
41 |除了React，Facebook展示了名叫Flux的单向数据流的设计模式。Flux最早用来解决和简化应用的状态管理，但是随之而来，很多开发者提出了不少新的问题如如何存储数据状态和从哪发送Ajax请求。
42 |为了解决这些问题，不少基于Flux模式之上的框架诞生了：Fluxible, Reflux, Alt, Flummox, Lux, Nuclear, Fluxxor 还有很多。
43 |不过，这其中的类Flux的优雅实现最终赢得了社区的关注，它就是Redux。
44 |最重要的是，学习Redux小菜一碟。它的作者，Dan Abranmov是一位非常棒的老师（他的教学视频非常易懂好学）。通过那些视频你很容易成为Redux的专家。我见见识到一组几乎没有任何React开发经验的工程师通过学习他的视频，在几周内就开发好能上线的React项目（代码质量也是顶级的）
45 |Redux的生态系统和Redux本身一样优秀。从神乎其神的开发者工具到令人记忆深刻的reselect，Redux的社区是你最好的后盾。
46 |不过有一点需要注意的是不要轻易的去尝试抽象Redux的项目模板。那些模板背后都是有意义有原因的。所以你尝试盲目修改前确保你已经使用过它和理解这样组织代码背后的原因。
47 |
不用再用CoffeeScript了（译者哭了出来，公司13年大规模的使用它，至今后端JS项目80%都是它的身影）。因为它的大部分好的特性在ES6都有了（它是JavaScript的标准语言规范），而且CoffeeScript的工具很弱（如CoffeeLint），它的社区也在快速的衰落。
50 |ES6是语言的标准。它的大部分特性在最新的主流浏览器中已经被实现，Babel是个可插拔ES6编译器。把它配置到使用合适的预设目标（preset target，如es2015浏览器，es2015-node5），就可以开动了。
51 |那么关于类型呢，TypeScript和Flow都给JavaScript提供了加上静态类型的功能，来配合编辑器提供更好的IDE支持和不需要测试就能捕获一些bug。不过我还是建议，先等等看，看看社区的进展和动向。
52 |TypeScript做了很多工作让JavaScript写起来看起来非常像Java/C#，但它缺乏完善的现代化的类型系统特性如代数数据类型（它对你真正开始实操静态类型时是很重要的）。它也不像Flow那样很好的处理 nulls。
53 |更新：TypeScript有union types也能覆盖很多用户开发场景。
54 |Flow比起来似乎更强大，能捕获到更大范围的bug异常，但是比较难设置。在语言特性上，它比起Babel落后不少，在Windows上的支持也不好。
55 |我要说些有争议性的话了：类型在前端开发中并没有我们想的那么重要（可能需要写一篇长文来讲述了）。所以就先等着类型系统变得更强健，目前先只使用Babel，同时关注下Flow~
56 |
关于ESLint异议也不大。使用它的React插件和良好的es6的支持，几乎非常完美完成lint的工作。JSLint是过时了，ESLint这个软件可以单独完成原本需要 JSHint 和 JSCS 联合起来做的事。
59 |你需要配置他用你的风格约定。我强烈建议你使用 Airbnb的风格指南，大部分可以被 ESLint airbnb config 来严格约束实现。如果你们团队会在代码风格上产生分歧和争超，那么拿出这份指南来终结所有的不服！它也不是完美的（因为完美的风格不存在），但保持统一一致的代码风格是要高度推荐的。
60 |一旦你开始熟悉它，我建议你开启更多的规则。在编辑撰写代码时候越多的捕获不规范（配置你的编辑器IDE使用上这个ESLint插件），就会避免分歧和在决定费神，从而让你和团队更加高效！
61 |
这一点很明确 - 就用NPM。所有东西，忘记之前的bower。类似与 Browserify 和 Webpack 的构建工具把npm的强大功能引到了web上。版本处理变得很简单，你也获得了node生态的大部分模块提供的功能。不过CSS的相关处理还是不够完美。
64 |你可能会考虑的一件事：如何在开发服务器构建应用。不想Ruby社区的Bundler，npm 常使用通配符来指定版本号，导致你开始书写代码到最后部署时候版本号很可能已经变化了。使用 shrinkwrap 文件来锁定你的依赖（我建议使用 Uber的shrinkwrap 来获得更见一致性的输入）。同时考虑使用利用类似于 Sinopia 来构建自己的私有npm服务器。
65 |Babel可以把 ES6 模块语法编译到CommonJS。意味着你可面向未来的语法，和在使用构建工具（如Webpack 2.0）时获得它支持的一些静态代码分析工具如 tree shaking 的优势
66 |构建工具：Webpack
67 |
不想在你的页面文件中加入非常多的外链Script引用，那你就需要一个构建工具来打包你的依赖。如果你也需要允许npm包在浏览器运行工作的工具，那么Webpack就是你需要的。
69 |一年前，关于这块还有不少选择。根据你的开发环境，你可以利用Rails的sprockets来解决类似问题。RequireJS，Browserify和Webpack都是以JavaScript基础的工具，现在RollupJS声称自己在ES6模块上处理的更好。
70 |在一个个尝试使用后，我最终还是高度推荐Webpack：
71 |Webpack目前也是处理大型SPA应用项目的最好方案，利用它的代码切割（code splitting）和懒加载特性。
82 |不过它的学习曲线很陡峭，但是一点你掌握了，你还是会认为非常值得因为它的强大功能。
83 |那么Gulp或Grunt呢？ Webpack比起来最适合处理静态资源。所以他们开始可以用来跑一些其他的任务（但是也不推荐），现在更简单的方法是直接用上 npm scripts
84 |

目前在 JavaScript 单元测试上，我们有众多选择，你选择任何一个都不会错太多。因为你开始做单元测试，你就走对一大步了。
87 |一些选择包括了 Jasmine，Mocha，Tape，AVA 和 Jest。我知道我漏掉来一些，它们都有一些比其他做的好的地方。
88 |我对一个测试框架的的选择标准是：
89 |第一个指标让AVA脱颖而出（因为它的确做的非常棒）和Jest（自动Mocking并不像它说的那么好，因为它太慢了）
97 |选择Jasmine，Mocha或Tape都不会差太多。我倾向于 Chai 断言因为它拥有很多插件，Sinon's mocks to Jasmine's built in construct。Mocha的异步测试支持很棒（你不用在写类似于 done callback之类的）。Chai as Promised 也是很屌。我强烈建议你使用 Dirty Chai 来避免一些让人头疼的问题。Webpack的 mocha loader 让你编码时自动执行测试。
98 |对于React而言，Airbnb的Enzyme和Teaspoon（不是Rails那个！）是不错的相关工具选择。
99 |我非常喜欢Mocha的特性和支持情况。如果你喜欢一些最小主义的，读读这篇关于tape的文章
100 |PS： 101 | Facebook在最近的文章中说，它们是如何扩展Jest的。可能对大部分人来说过于复杂了，如果你有那些资源，不关心是否在浏览器中跑测试，那么它就很适合你。
102 |另外，很多人认为我对AVA太武断了。不要误会我，AVA的确很棒。但我有个标准：全浏览器支持。这样我们可以直接从任何浏览器去执行（来测试跨浏览器兼容性）同时要方便调试。如果你不介意那些，你可以使用非常棒的iron-node来debugging。
103 |JavaScript不像Java或.NET上有很多强大的内置工具集。所以你可能需要引入一个。
105 |Lodash，目前来说应该是杂七杂八都有的首选。同时它类似注入懒求值这样的特性让它成为性能最高的选择之一。如果你不想用你就不要把它全部都导入，同时：lodash能让你仅仅引入哪些你需要的函数（这点尤其重要考虑到它现在变得越来越大）。随着4.x版本带来，它原生支持可选的函数式模式给那些函数式编程的极客们使用。来看看怎么使用它
106 |如果你真的很喜欢函数式编程，那么不管怎么样，留意下优秀的Ramda。如果你决定用它，你可能还是需要引入一些lodash函数（Ramda目前专注于数据处理和函数式构建），但这样你能在JavaScript中以非常友好方式获得函数式编程的强大功能
107 |许多React应用再也不需要jQuery了。除非你需要使用一些遗留的老旧的第三方组件（它依赖于jQuery），因为根本没必要。同时，意味着你需要一个类似于$.ajax的替代品。
109 |为了保持简单，仅仅使用fetch，它在Firefox和Chrome中内建支持。对于其他浏览器，你可能需要引入polyfill。我推荐使用isomorphic-fetch 来在服务器端在内覆盖了基础组件选择。
110 |还有一些其他好的类库选择如Axios，但目前在fetch之上没有多余需求。
111 |为了更多关于为什么Promise是重要的讨论，请看我们博客异步代码
112 |这是个我觉得相对发展较慢的领域。Sass就是目前的选择，使用node-sass是你JavaScript项目的不错开始、。我仍然觉得离最终最好的方案还是有很多不足。缺乏引用导入（如仅仅是从文件导入变量和mixin，而不用重新定义选择器和它的样式规则）和原生的URL重写（使它在保持线上代码足够精简就很困难）。node-sass是一个C写的类库，所以要对应好你的Node版本。
114 |LESS并不受此影响，不过它缺了很多Sass的特性功能。
115 |PostCSS 看起来更有生命力，它允许你构建自己的CSS预处理器。我推荐你使用它，即使你已经有了你喜欢的预处理器如SASS，它类似于AutoPrefixer使得你不需要要导入类似于Bourbon这样的大型依赖。
116 |有一点需要特殊注意的是，CSS Modules。它限制了CSS的层叠部分，使得我们可以定义更加明确的依赖，来避免冲突。你再也不用担心Class名称一致导致的覆盖，也不用特意为了避免它而添加额外的前缀。它和React也配合的很好。有个不足：css-loader和css modules一起使用会导致非常缓慢，如果你的样式数量不少，那么在它优化之前还是避免使用它吧。
117 |如果要我现在从头开始一个新项目，那么我大概会使用PostCSS配合一些我喜欢的预编译的CSS类库。
118 |不管你选择什么，我还是推荐你看下我这篇文章CSS performance with Webpack，尤其你也在配套使用SASS。
119 |Universal或Isometric的JavaScript代表着JavaScript写的代码可以被同时运行在客户端和服务器上。这需要用来在服务器端预先渲染页面来提升性能或SEO友好。感谢React，之前只有类似于Ebay或Facebook这样的巨型科技公司才能实施的方案，现在很多小的开发团队都能做到。不过它并不那么容易，它显著的加大了复杂性，限制了你类库和工具选择。
121 |如果你在构建B2C的网站，类似于电商网站，那么你可能必须使用这个方案。但如果你是在做内部网站或者是B2B应用站点，那么这样的性能提升和SEO其实并不需要。所以和你的项目经理讨论下，看看是否有必要~
122 |看起来每个开发者最后都会疑问那么关于API接口呢？很多人会直接想到RESTful API（因为太流行了），同时SOAP真的成为过去式了。同时现在也有不少其他标准如：HATEOAS, JSON API,HAL,GraphQL 等
124 |GraphQL 赋予客户端强大的能力（也是职责），允许它来实施任意的查询接口。结合Relay，它能为你处理客户端状态和缓存。在服务器端实施GraphQL看起来比较困难而且现有的文档大部分是针对Node.js的
125 |网飞(NetFlix）的Falcor 看起来它也能提供那些Relay和GraphQL提供的功能，但是对于服务器端的实现要求很低。但现在它仅仅是开发者预览版没有正式发布。
126 |所有这些有名的标准规范有他们各种的奇怪之处。一些是过于复杂，一些只能处理读取没有覆盖到更新接口。一些又严重和REST走失。许多人选择构建它们自己的，但是最终也要解决它们设计上带来的问题。
127 |我不认为现在有什么方案是个大满贯（完美的），但是下面是我对API应该有的功能的一些思考：
128 |我没有找到能覆盖这些需求的方案。如果有，务必让我知道。 136 | 同事考虑，如果你实施一个标准化的RESTful资源路径时，使用Swagger来文档化我们的API。
137 |Electron 是Atom这个优秀编辑器的背后基石。你可以用它来构建自己的应用程序。它的核心，就是一个特殊版本的Node可以来打开Chrome窗口来渲染GUI页面，并且能够获取到操作系统底层的API（不用借助浏览器的安全沙箱等措施）。你可以打包你的应用程序像其他的桌面客户端软件那样分发安装包，并且辅以自动更新机制。
139 |这就是用来构建横跨OSX，WIndows和Linux这多个桌面环境的应用软件的最简单的方式，利用起上面提到的所有好用的工具。它也有不错的文档和活跃的社区支持。
140 |你也许也听过nw.js（之前叫node-webkit）它年事已高，Electron比它更稳健，更容易上手使用。
141 |来使用这个模板项目来开搞自己的Electron，React和热更新项目吧，你可以看看这些东西是怎么相互配合工作的~
142 |社区有一些大牛，你可以在Twitter，Weibo，掘金上关注他们。 144 | 还有不少好的文章和链接。
145 |如 Removing user interface complexity, or why React is awesome 就是对了解React背后实现原理和原因的不错讲述。
146 |JavaScript生态区发展很快，欣欣向荣，在快速前进着。但是就像是隧道终点前的光明，最佳实践不在剧烈变更着。现在关于需要学什么越来越明确了。
148 |最重要的是记住要保持简单，如无必要，勿增实体。
149 |如果你的应用就是两三个页面，那你不需要用到 Router。如果就一个页面，那么你也不用Redux，只需要用React自己管理状态就好。你的应用就是简单的 CRUD 程序，那么不需要用到 Relay。你在学习 ES6 的语法，那么先别急着弄 Async/Await 或者装饰器。你准备开始学习 React 了，你不必要立马就去了解 Hot Reload 热更新和服务器端渲染。如果你刚刚使用上 Webpack，那么也别急着就来用代码切割（code splitting）和多代码块（multiple chunks）。如果你才开始 Redux，那么也不用匆忙用 Redux-Form 或 Redux-Sagas。
150 |保持简单，一次学一样，你就不会像其他人一样抱怨JavaScript的破碎（Fatigue
151 |这就是我对目前JavaScript生态现状的看法和观点。如果你觉得我遗漏了那些类别的讨论，或者你认为我在一些选型上的决定不正确，你有更好的可以推荐。那么留言吧~
153 | -------------------------------------------------------------------------------- /eslint.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | eslint 13 | ====== 14 | 15 | 最好的js 静态风格、语法、错误检查及在线提示。 16 | 17 | >ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写， 2013 年发布第一个版本。 NCZ 的初衷不是重复造一个轮子，而是在际需求得不到 JSHint 团队响应 的情况下做出的选择：以可扩展、每条规则独立、不内置编码风格为理念编写一个 lint 工具。 18 | 19 | ## ESLint 主要有以下特点： 20 | 21 | - 默认规则包含所有 JSLint、JSHint 中存在的规则，易迁移 22 | - 规则可配置性高：可设置「警告」、「错误」两个 error 等级，或者直接禁用 23 | - 包含代码风格检测的规则（可以丢掉 JSCS 了） 24 | - 支持插件扩展、自定义规则 25 | - 支持JSX语法，而JSHint 不支持 JSX 语法 26 | 27 | ## 配置 28 | 29 | - 可以通过以下三种方式配置 ESLint: 30 | - 使用 .eslintrc 文件（支持 JSON 和 YAML 两种语法）； 31 | - 在 package.json 中添加 eslintConfig 配置块； 32 | - 直接在代码文件中定义。 33 | 34 | ## 资源 35 | 36 | [官网](http://eslint.org) | 37 | [配置](http://eslint.org/docs/user-guide/configuring) | 38 | [规则](http://eslint.org/docs/rules/) | 39 | [贡献](http://eslint.org/docs/developer-guide/contributing) | 40 | [缺陷](http://eslint.org/docs/developer-guide/contributing/reporting-bugs) | 41 | [Code of Conduct](https://jquery.org/conduct/) | 42 | [Twitter](https://twitter.com/geteslint) | 43 | [邮件列表](https://groups.google.com/group/eslint) | 44 | [聊天室](https://gitter.im/eslint/eslint) 45 | 46 | ## 安装 47 | npm install -g eslint 48 | 49 | ## 使用 50 | 51 | - 创建 .eslintrc文件 52 | eslint --init 53 | - 检查js文件 54 | eslint test.js test2.js 55 | - js 版本：JSX Harmoney，最大限度支持新语法 56 | - ESLint：Java Script 的 代码质量工具中开启 ESLint,提供代码编写规范检查 57 | eslint 库路径设置，如：/Users/way/prj/koa/koastart/node_modules/eslint 58 | 59 | ## 配置 60 | 61 | 修改 `.eslintrc` 文件，定义规则 62 | 63 | ```json 64 | { 65 | "rules": { 66 | "semi": ["error", "always"], 67 | "quotes": ["error", "double"] 68 | } 69 | } 70 | ``` 71 | 72 | `"semi"` 和 `"quotes"` 预定义的规则名称[rules](http://eslint.org/docs/rules) 73 | 第一个值是提示级别 74 | * `"off"` or `0` - 关闭 75 | * `"warn"` or `1` - 警告 76 | * `"error"` or `2` - 错误 77 | 78 | 详细说明请参见[配置说明](http://eslint.org/docs/user-guide/configuring))。 79 | 80 | ## 本项目使用的 .eslintrc 文件 81 | 82 | - 继承 eslint-config-airbnb/base 83 | - 需安装以下插件 84 | ```js 85 | "eslint": "^2.9.0", 86 | "eslint-config-airbnb": "^9.0.1", 87 | "eslint-plugin-import": "^1.8.0", 88 | "eslint-plugin-jsx-a11y": "^1.2.0", 89 | "eslint-plugin-react": "^5.1.1", 90 | 91 | ``` 92 | - 文件内容 93 | ```js 94 | { 95 | "extends": "eslint-config-airbnb/base", 96 | "parser": "babel-eslint", 97 | "env": { 98 | "browser": true, 99 | "node": true, 100 | "mocha": true 101 | }, 102 | "rules": { 103 | // Disable for console/alert 104 | "no-console": 0, 105 | "no-alert": 0, 106 | 107 | "indent": [2, 2, {"SwitchCase": 1}], 108 | "object-curly-spacing": 0 109 | }, 110 | "plugins": [ 111 | "import" 112 | ], 113 | "settings": { 114 | "import/parser": "babel-eslint", 115 | "import/resolve": { 116 | "moduleDirectory": ["node_modules", "src"] 117 | } 118 | }, 119 | "globals": { 120 | "__DEV__": true, 121 | "__OPTION__": true 122 | } 123 | } 124 | ``` 125 | 126 | ## 以下是详细 .eslintrc 文件示例和解释： 127 | 128 | ```js 129 | { 130 | "env": { 131 | "browser": true, 132 | "node": true, 133 | "commonjs": true 134 | }, 135 | "ecmaFeatures": { 136 | // lambda表达式 137 | "arrowFunctions": true, 138 | // 解构赋值 139 | "destructuring": true, 140 | // class 141 | "classes": true, 142 | // http://es6.ruanyifeng.com/#docs/function#函数参数的默认值 143 | "defaultParams": true, 144 | // 块级作用域，允许使用let const 145 | "blockBindings": true, 146 | // 允许使用模块，模块内默认严格模式 147 | "modules": true, 148 | // 允许字面量定义对象时，用表达式做属性名 149 | // http://es6.ruanyifeng.com/#docs/object#属性名表达式 150 | "objectLiteralComputedProperties": true, 151 | // 允许对象字面量方法名简写 152 | /*var o = { 153 | method() { 154 | return "Hello!"; 155 | } 156 | }; 157 | 158 | 等同于 159 | 160 | var o = { 161 | method: function() { 162 | return "Hello!"; 163 | } 164 | }; 165 | */ 166 | "objectLiteralShorthandMethods": true, 167 | /* 168 | 对象字面量属性名简写 169 | var foo = 'bar'; 170 | var baz = {foo}; 171 | baz // {foo: "bar"} 172 | 173 | // 等同于 174 | var baz = {foo: foo}; 175 | */ 176 | "objectLiteralShorthandProperties": true, 177 | // http://es6.ruanyifeng.com/#docs/function#rest参数 178 | "restParams": true, 179 | // http://es6.ruanyifeng.com/#docs/function#扩展运算符 180 | "spread": true, 181 | // http://es6.ruanyifeng.com/#docs/iterator#for---of循环 182 | "forOf": true, 183 | // http://es6.ruanyifeng.com/#docs/generator 184 | "generators": true, 185 | // http://es6.ruanyifeng.com/#docs/string#模板字符串 186 | "templateStrings": true, 187 | "superInFunctions": true, 188 | // http://es6.ruanyifeng.com/#docs/object#对象的扩展运算符 189 | "experimentalObjectRestSpread": true 190 | }, 191 | 192 | "rules": { 193 | // 定义对象的set存取器属性时，强制定义get 194 | "accessor-pairs": 2, 195 | // 指定数组的元素之间要以空格隔开(,后面)， never参数：[ 之前和 ] 之后不能带空格，always参数：[ 之前和 ] 之后必须带空格 196 | "array-bracket-spacing": [2, "never"], 197 | // 在块级作用域外访问块内定义的变量是否报错提示 198 | "block-scoped-var": 0, 199 | // if while function 后面的{必须与if在同一行，java风格。 200 | "brace-style": [2, "1tbs", { "allowSingleLine": true }], 201 | // 双峰驼命名格式 202 | "camelcase": 2, 203 | // 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号， 204 | // always-multiline：多行模式必须带逗号，单行模式不能带逗号 205 | "comma-dangle": [2, "never"], 206 | // 控制逗号前后的空格 207 | "comma-spacing": [2, { "before": false, "after": true }], 208 | // 控制逗号在行尾出现还是在行首出现 209 | // http://eslint.org/docs/rules/comma-style 210 | "comma-style": [2, "last"], 211 | // 圈复杂度 212 | "complexity": [2,9], 213 | // 以方括号取对象属性时，[ 后面和 ] 前面是否需要空格, 可选参数 never, always 214 | "computed-property-spacing": [2,"never"], 215 | // 强制方法必须返回值，TypeScript强类型，不配置 216 | "consistent-return": 0, 217 | // 用于指统一在回调函数中指向this的变量名，箭头函数中的this已经可以指向外层调用者，应该没卵用了 218 | // e.g [0,"that"] 指定只能 var that = this. that不能指向其他任何值，this也不能赋值给that以外的其他值 219 | "consistent-this": 0, 220 | // 强制在子类构造函数中用super()调用父类构造函数，TypeScrip的编译器也会提示 221 | "constructor-super": 0, 222 | // if else while for do后面的代码块是否需要{ }包围，参数： 223 | // multi 只有块中有多行语句时才需要{ }包围 224 | // multi-line 只有块中有多行语句时才需要{ }包围, 但是块中的执行语句只有一行时， 225 | // 块中的语句只能跟和if语句在同一行。if (foo) foo++; else doSomething(); 226 | // multi-or-nest 只有块中有多行语句时才需要{ }包围, 如果块中的执行语句只有一行，执行语句可以零另起一行也可以跟在if语句后面 227 | // [2, "multi", "consistent"] 保持前后语句的{ }一致 228 | // default: [2, "all"] 全都需要{ }包围 229 | "curly": [2, "all"], 230 | // switch语句强制default分支，也可添加 // no default 注释取消此次警告 231 | "default-case": 2, 232 | // 强制object.key 中 . 的位置，参数: 233 | // property，'.'号应与属性在同一行 234 | // object, '.' 号应与对象名在同一行 235 | "dot-location": [2, "property"], 236 | // 强制使用.号取属性 237 | // 参数： allowKeywords：true 使用保留字做属性名时，只能使用.方式取属性 238 | // false 使用保留字做属性名时, 只能使用[]方式取属性 e.g [2, {"allowKeywords": false}] 239 | // allowPattern: 当属性名匹配提供的正则表达式时，允许使用[]方式取值,否则只能用.号取值 e.g [2, {"allowPattern": "^[a-z]+(_[a-z]+)+$"}] 240 | "dot-notation": [2, {"allowKeywords": true}], 241 | // 文件末尾强制换行 242 | "eol-last": 2, 243 | // 使用 === 替代 == 244 | "eqeqeq": [2, "allow-null"], 245 | // 方法表达式是否需要命名 246 | "func-names": 0, 247 | // 方法定义风格，参数： 248 | // declaration: 强制使用方法声明的方式，function f(){} e.g [2, "declaration"] 249 | // expression：强制使用方法表达式的方式，var f = function() {} e.g [2, "expression"] 250 | // allowArrowFunctions: declaration风格中允许箭头函数。 e.g [2, "declaration", { "allowArrowFunctions": true }] 251 | "func-style": 0, 252 | "generator-star-spacing": [2, { "before": true, "after": true }], 253 | "guard-for-in": 0, 254 | "handle-callback-err": [2, "^(err|error)$" ], 255 | "indent": [2, 2, { "SwitchCase": 1 }], 256 | "key-spacing": [2, { "beforeColon": false, "afterColon": true }], 257 | "linebreak-style": 0, 258 | "lines-around-comment": 0, 259 | "max-nested-callbacks": 0, 260 | "new-cap": [2, { "newIsCap": true, "capIsNew": false }], 261 | "new-parens": 2, 262 | "newline-after-var": 0, 263 | "no-alert": 0, 264 | "no-array-constructor": 2, 265 | "no-caller": 2, 266 | "no-catch-shadow": 0, 267 | "no-cond-assign": 2, 268 | "no-console": 0, 269 | "no-constant-condition": 0, 270 | "no-continue": 0, 271 | "no-control-regex": 2, 272 | "no-debugger": 2, 273 | "no-delete-var": 2, 274 | "no-div-regex": 0, 275 | "no-dupe-args": 2, 276 | "no-dupe-keys": 2, 277 | "no-duplicate-case": 2, 278 | "no-else-return": 0, 279 | "no-empty": 0, 280 | "no-empty-character-class": 2, 281 | "no-empty-label": 2, 282 | "no-eq-null": 0, 283 | "no-eval": 2, 284 | "no-ex-assign": 2, 285 | "no-extend-native": 2, 286 | "no-extra-bind": 2, 287 | "no-extra-boolean-cast": 2, 288 | "no-extra-parens": 0, 289 | "no-extra-semi": 0, 290 | "no-fallthrough": 2, 291 | "no-floating-decimal": 2, 292 | "no-func-assign": 2, 293 | "no-implied-eval": 2, 294 | "no-inline-comments": 0, 295 | "no-inner-declarations": [2, "functions"], 296 | "no-invalid-regexp": 2, 297 | "no-irregular-whitespace": 2, 298 | "no-iterator": 2, 299 | "no-label-var": 2, 300 | "no-labels": 2, 301 | "no-lone-blocks": 2, 302 | "no-lonely-if": 0, 303 | "no-loop-func": 0, 304 | "no-mixed-requires": 0, 305 | "no-mixed-spaces-and-tabs": 2, 306 | "no-multi-spaces": 2, 307 | "no-multi-str": 2, 308 | "no-multiple-empty-lines": [2, { "max": 1 }], 309 | "no-native-reassign": 2, 310 | "no-negated-in-lhs": 2, 311 | "no-nested-ternary": 0, 312 | "no-new": 2, 313 | "no-new-func": 0, 314 | "no-new-object": 2, 315 | "no-new-require": 2, 316 | "no-new-wrappers": 2, 317 | "no-obj-calls": 2, 318 | "no-octal": 2, 319 | "no-octal-escape": 2, 320 | "no-param-reassign": 0, 321 | "no-path-concat": 0, 322 | "no-process-env": 0, 323 | "no-process-exit": 0, 324 | "no-proto": 0, 325 | "no-redeclare": 2, 326 | "no-regex-spaces": 2, 327 | "no-restricted-modules": 0, 328 | "no-return-assign": 2, 329 | "no-script-url": 0, 330 | "no-self-compare": 2, 331 | "no-sequences": 2, 332 | "no-shadow": 0, 333 | "no-shadow-restricted-names": 2, 334 | "no-spaced-func": 2, 335 | "no-sparse-arrays": 2, 336 | "no-sync": 0, 337 | "no-ternary": 0, 338 | "no-this-before-super": 2, 339 | "no-throw-literal": 2, 340 | "no-trailing-spaces": 2, 341 | "no-undef": 2, 342 | "no-undef-init": 2, 343 | "no-undefined": 0, 344 | "no-underscore-dangle": 0, 345 | "no-unexpected-multiline": 2, 346 | "no-unneeded-ternary": 2, 347 | "no-unreachable": 2, 348 | "no-unused-expressions": 0, 349 | "no-unused-vars": [2, { "vars": "all", "args": "none" }], 350 | "no-use-before-define": 0, 351 | "no-var": 0, 352 | "no-void": 0, 353 | "no-warning-comments": 0, 354 | "no-with": 2, 355 | "object-curly-spacing": 0, 356 | "object-shorthand": 0, 357 | "one-var": [2, { "initialized": "never" }], 358 | "operator-assignment": 0, 359 | "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }], 360 | "padded-blocks": 0, 361 | "prefer-const": 0, 362 | "quote-props": 0, 363 | "quotes": [2, "single", "avoid-escape"], 364 | "radix": 2, 365 | "semi": [2, "never"], 366 | "semi-spacing": 0, 367 | "sort-vars": 0, 368 | "space-after-keywords": [2, "always"], 369 | "space-before-blocks": [2, "always"], 370 | "space-before-function-paren": [2, "always"], 371 | "space-in-parens": [2, "never"], 372 | "space-infix-ops": 2, 373 | "space-return-throw-case": 2, 374 | "space-unary-ops": [2, { "words": true, "nonwords": false }], 375 | "spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!"] }], 376 | "strict": 0, 377 | "use-isnan": 2, 378 | "valid-jsdoc": 0, 379 | "valid-typeof": 2, 380 | "vars-on-top": 0, 381 | "wrap-iife": [2, "any"], 382 | "wrap-regex": 0, 383 | "yoda": [2, "never"] 384 | } 385 | } 386 | ``` -------------------------------------------------------------------------------- /npm.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | - [NPM是什么](#npm) 14 | - [我们需要了解什么](#) 15 | - [本地安装 vs 全局安装](#-vs-) 16 | - [本地安装](#) 17 | - [全局安装](#) 18 | - [本地路径安装](#) 19 | - [依赖项自动安装](#) 20 | - [指定版本号安装](#) 21 | - [安装其它指令](#) 22 | - [卸载](#) 23 | - [npm包管理](#npm) 24 | - [查看](#) 25 | - [npm发布](#npm) 26 | - [NPM配置](#npm) 27 | - [设置proxy](#proxy) 28 | - [查看proxy](#proxy) 29 | - [删除proxy](#proxy) 30 | - [查看所有配置](#) 31 | - [关于package.json](#packagejson) 32 | - [package版本](#package) 33 | - [常见版本声明形式](#) 34 | - [版本书写要求](#) 35 | - [npm 自动化](#npm-) 36 | - [script](#script) 37 | - [构建javascript](#javascript) 38 | - [监视 javascript](#-javascript) 39 | - [构建CSS](#css) 40 | - [监视CSS](#css) 41 | - [序列化子任务](#) 42 | - [并行子任务](#) 43 | - [完整的package.json例子](#packagejson) 44 | - [当事情变得非常复杂的时候](#) 45 | - [!/bin/bash](#binbash) 46 | - [Windows](#windows) 47 | - [总结](#) 48 | 49 |  50 | 51 | npm 52 | === 53 | 54 | NPM是什么 55 | --------- 56 | 57 | NPM（node package manager），通常称为node包管理器。顾名思义，它的主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等。 58 | 59 | npm的背后，是基于couchdb的一个数据库，详细记录了每个包的信息，包括作者、版本、依赖、授权信息等。它的一个很重要的作用就是：将开发者从繁琐的包管理工作（版本、依赖等）中解放出来，更加专注于功能的开发。 60 | 61 | npm官网：https://npmjs.org/ 62 | 63 | npm官方文档：https://npmjs.org/doc/README.html 64 | 65 | 我们需要了解什么 66 | ---------------- 67 | 68 | - npm的安装、卸载、升级、配置 69 | - npm的使用：package的安装、卸载、升级、查看、搜索、发布 70 | - npm包的安装模式：本地 vs 全局 71 | - package.json：包描述信息 72 | - package版本：常见版本声明形式 73 | - npm包安装模式 74 | 75 | 本地安装 vs 全局安装 76 | -------------------- 77 | 78 | 在具体介绍npm包的管理之前，我们首先得来了解一下npm包的两种安装模式。 79 | 80 | node包的安装分两种：本地安装、全局安装。两者的区别如下，后面会通过简单例子说明 81 | 82 | ###本地安装 指令：npm install|i pkg package会被下载到当前所在目录，也只能在当前目录下使用。 运行如下命令，就会在当前目录下安装grunt-cli（grunt命令行工具） 83 | 84 | npm install grunt-cli 安装结束后，当前目录下回多出一个node_modules目录，grunt-cli就安装在里面。同时注意控制台输出的信息：`js 85 | grunt-cli@0.1.9 node_modules/grunt-cli 86 | ├── resolve@0.3.1 87 | ├── nopt@1.0.10 (abbrev@1.0.4) 88 | └── findup-sync@0.1.2 (lodash@1.0.1, glob@3.1.21) 89 | ` 简单说明一下：* grunt-cli@0.1.9：当前安装的package为grunt-cli，版本为0.19* node_modules/grunt-cli：安装目录* resolve@0.3.1：依赖的包有resolve、nopt、findup-sync，它们各自的版本、依赖在后面的括号里列出来 90 | 91 | ###全局安装 指令：npm install|i -g pkg package会被下载到到特定的系统目录下，安装的package能够在所有目录下使用。 上面已经安装了grunt-cli，然后你跑到其他目录下面运行如下命令 92 | 93 | grunt 果断提示你grunt命令不存在，为什么呢？因为上面只是进行了本地安装，grunt命令只能在对应安装目录下使用。 94 | 95 | -bash: grunt: command not found 如果为了使用grunt命令，每到一个目录下都得重新安装一次，那不抓狂才怪。肿么办呢？ 96 | 97 | 很简单，采用全局安装就行了，很简单，加上参数-g就可以了 98 | 99 | npm install -g grunt-cli 于是，在所有目录下都可以无压力使用grunt命令了。这个时候，你会注意到控制台输入的信息有点不同。主要的区别在于安装目录，现在变成了`/usr/local/lib/node_modules/grunt-cli` 100 | `/usr/local/lib/node_modules/` 也就是之前所说的全局安装目录啦。` 101 | grunt-cli@0.1.9 /usr/local/lib/node_modules/grunt-cli 102 | ├── resolve@0.3.1 103 | ├── nopt@1.0.10 (abbrev@1.0.4) 104 | └── findup-sync@0.1.2 (lodash@1.0.1, glob@3.1.21) 105 | ` 106 | 107 | ### 本地路径安装 108 | 109 | 指令：npm install|i 路径或zip包 110 | 将包下载到本地后，指定路径即可安装 111 | 112 | ### 依赖项自动安装 113 | 114 | 指令：npm install|i 115 | 在局部 package.json的路径，直接运行上述指令，则按package.json中指定的依赖项自动安装。 116 | 117 | ### 指定版本号安装 118 | 119 | 指令：npm install grunt-cli@"0.1.9" 120 | 安装最新版本的grunt-cli 121 | 不带版本号，安装最新版本 122 | 123 | ### 安装其它指令 124 | 125 | npm install --help 126 | 输出如下，有兴趣的童鞋可以了解下 127 | 128 | - npm install"+a+"";b=b.firstChild;g&&J(b,g,!0);K({h:d,j:g,c:b,i:1}); 30 | return b.innerHTML},prettyPrint:D.prettyPrint=function(a,d){function g(){for(var b=D.PR_SHOULD_USE_CONTINUATION?c.now()+250:Infinity;i
最好的js书写风格、语法、错误检查及在线提示。
13 |14 |16 |ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写， 2013 年发布第一个版本。 NCZ 的初衷不是重复造一个轮子，而是在际需求得不到 JSHint 团队响应 的情况下做出的选择：以可扩展、每条规则独立、不内置编码风格为理念编写一个 lint 工具。
15 |
需安装以下插件
34 |"eslint": "^2.9.0",
35 | "eslint-config-airbnb": "^9.0.1",
36 | "eslint-plugin-import": "^1.8.0",
37 | "eslint-plugin-jsx-a11y": "^1.2.0",
38 | "eslint-plugin-react": "^5.1.1",
39 | 文件内容
42 | {
43 | "extends": "eslint-config-airbnb/base",
44 | "parser": "babel-eslint",
45 | "env": {
46 | "browser": true,
47 | "node": true,
48 | "mocha": true
49 | },
50 | "rules": {
51 | // Disable for console/alert
52 | "no-console": 0,
53 | "no-alert": 0,
54 |
55 | "indent": [2, 2, {"SwitchCase": 1}],
56 | "object-curly-spacing": 0
57 | },
58 | "plugins": [
59 | "import"
60 | ],
61 | "settings": {
62 | "import/parser": "babel-eslint",
63 | "import/resolve": {
64 | "moduleDirectory": ["node_modules", "src"]
65 | }
66 | },
67 | "globals": {
68 | "__DEV__": true,
69 | "__OPTION__": true
70 | }
71 | }
72 | {
76 | "env": {
77 | "browser": true,
78 | "node": true,
79 | "commonjs": true
80 | },
81 | "ecmaFeatures": {
82 | // lambda表达式
83 | "arrowFunctions": true,
84 | // 解构赋值
85 | "destructuring": true,
86 | // class
87 | "classes": true,
88 | // http://es6.ruanyifeng.com/#docs/function#函数参数的默认值
89 | "defaultParams": true,
90 | // 块级作用域，允许使用let const
91 | "blockBindings": true,
92 | // 允许使用模块，模块内默认严格模式
93 | "modules": true,
94 | // 允许字面量定义对象时，用表达式做属性名
95 | // http://es6.ruanyifeng.com/#docs/object#属性名表达式
96 | "objectLiteralComputedProperties": true,
97 | // 允许对象字面量方法名简写
98 | /*var o = {
99 | method() {
100 | return "Hello!";
101 | }
102 | };
103 |
104 | 等同于
105 |
106 | var o = {
107 | method: function() {
108 | return "Hello!";
109 | }
110 | };
111 | */
112 | "objectLiteralShorthandMethods": true,
113 | /*
114 | 对象字面量属性名简写
115 | var foo = 'bar';
116 | var baz = {foo};
117 | baz // {foo: "bar"}
118 |
119 | // 等同于
120 | var baz = {foo: foo};
121 | */
122 | "objectLiteralShorthandProperties": true,
123 | // http://es6.ruanyifeng.com/#docs/function#rest参数
124 | "restParams": true,
125 | // http://es6.ruanyifeng.com/#docs/function#扩展运算符
126 | "spread": true,
127 | // http://es6.ruanyifeng.com/#docs/iterator#for---of循环
128 | "forOf": true,
129 | // http://es6.ruanyifeng.com/#docs/generator
130 | "generators": true,
131 | // http://es6.ruanyifeng.com/#docs/string#模板字符串
132 | "templateStrings": true,
133 | "superInFunctions": true,
134 | // http://es6.ruanyifeng.com/#docs/object#对象的扩展运算符
135 | "experimentalObjectRestSpread": true
136 | },
137 |
138 | "rules": {
139 | // 定义对象的set存取器属性时，强制定义get
140 | "accessor-pairs": 2,
141 | // 指定数组的元素之间要以空格隔开(,后面)， never参数：[ 之前和 ] 之后不能带空格，always参数：[ 之前和 ] 之后必须带空格
142 | "array-bracket-spacing": [2, "never"],
143 | // 在块级作用域外访问块内定义的变量是否报错提示
144 | "block-scoped-var": 0,
145 | // if while function 后面的{必须与if在同一行，java风格。
146 | "brace-style": [2, "1tbs", { "allowSingleLine": true }],
147 | // 双峰驼命名格式
148 | "camelcase": 2,
149 | // 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号，
150 | // always-multiline：多行模式必须带逗号，单行模式不能带逗号
151 | "comma-dangle": [2, "never"],
152 | // 控制逗号前后的空格
153 | "comma-spacing": [2, { "before": false, "after": true }],
154 | // 控制逗号在行尾出现还是在行首出现
155 | // http://eslint.org/docs/rules/comma-style
156 | "comma-style": [2, "last"],
157 | // 圈复杂度
158 | "complexity": [2,9],
159 | // 以方括号取对象属性时，[ 后面和 ] 前面是否需要空格, 可选参数 never, always
160 | "computed-property-spacing": [2,"never"],
161 | // 强制方法必须返回值，TypeScript强类型，不配置
162 | "consistent-return": 0,
163 | // 用于指统一在回调函数中指向this的变量名，箭头函数中的this已经可以指向外层调用者，应该没卵用了
164 | // e.g [0,"that"] 指定只能 var that = this. that不能指向其他任何值，this也不能赋值给that以外的其他值
165 | "consistent-this": 0,
166 | // 强制在子类构造函数中用super()调用父类构造函数，TypeScrip的编译器也会提示
167 | "constructor-super": 0,
168 | // if else while for do后面的代码块是否需要{ }包围，参数：
169 | // multi 只有块中有多行语句时才需要{ }包围
170 | // multi-line 只有块中有多行语句时才需要{ }包围, 但是块中的执行语句只有一行时，
171 | // 块中的语句只能跟和if语句在同一行。if (foo) foo++; else doSomething();
172 | // multi-or-nest 只有块中有多行语句时才需要{ }包围, 如果块中的执行语句只有一行，执行语句可以零另起一行也可以跟在if语句后面
173 | // [2, "multi", "consistent"] 保持前后语句的{ }一致
174 | // default: [2, "all"] 全都需要{ }包围
175 | "curly": [2, "all"],
176 | // switch语句强制default分支，也可添加 // no default 注释取消此次警告
177 | "default-case": 2,
178 | // 强制object.key 中 . 的位置，参数:
179 | // property，'.'号应与属性在同一行
180 | // object, '.' 号应与对象名在同一行
181 | "dot-location": [2, "property"],
182 | // 强制使用.号取属性
183 | // 参数： allowKeywords：true 使用保留字做属性名时，只能使用.方式取属性
184 | // false 使用保留字做属性名时, 只能使用[]方式取属性 e.g [2, {"allowKeywords": false}]
185 | // allowPattern: 当属性名匹配提供的正则表达式时，允许使用[]方式取值,否则只能用.号取值 e.g [2, {"allowPattern": "^[a-z]+(_[a-z]+)+$"}]
186 | "dot-notation": [2, {"allowKeywords": true}],
187 | // 文件末尾强制换行
188 | "eol-last": 2,
189 | // 使用 === 替代 ==
190 | "eqeqeq": [2, "allow-null"],
191 | // 方法表达式是否需要命名
192 | "func-names": 0,
193 | // 方法定义风格，参数：
194 | // declaration: 强制使用方法声明的方式，function f(){} e.g [2, "declaration"]
195 | // expression：强制使用方法表达式的方式，var f = function() {} e.g [2, "expression"]
196 | // allowArrowFunctions: declaration风格中允许箭头函数。 e.g [2, "declaration", { "allowArrowFunctions": true }]
197 | "func-style": 0,
198 | "generator-star-spacing": [2, { "before": true, "after": true }],
199 | "guard-for-in": 0,
200 | "handle-callback-err": [2, "^(err|error)$" ],
201 | "indent": [2, 2, { "SwitchCase": 1 }],
202 | "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
203 | "linebreak-style": 0,
204 | "lines-around-comment": 0,
205 | "max-nested-callbacks": 0,
206 | "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
207 | "new-parens": 2,
208 | "newline-after-var": 0,
209 | "no-alert": 0,
210 | "no-array-constructor": 2,
211 | "no-caller": 2,
212 | "no-catch-shadow": 0,
213 | "no-cond-assign": 2,
214 | "no-console": 0,
215 | "no-constant-condition": 0,
216 | "no-continue": 0,
217 | "no-control-regex": 2,
218 | "no-debugger": 2,
219 | "no-delete-var": 2,
220 | "no-div-regex": 0,
221 | "no-dupe-args": 2,
222 | "no-dupe-keys": 2,
223 | "no-duplicate-case": 2,
224 | "no-else-return": 0,
225 | "no-empty": 0,
226 | "no-empty-character-class": 2,
227 | "no-empty-label": 2,
228 | "no-eq-null": 0,
229 | "no-eval": 2,
230 | "no-ex-assign": 2,
231 | "no-extend-native": 2,
232 | "no-extra-bind": 2,
233 | "no-extra-boolean-cast": 2,
234 | "no-extra-parens": 0,
235 | "no-extra-semi": 0,
236 | "no-fallthrough": 2,
237 | "no-floating-decimal": 2,
238 | "no-func-assign": 2,
239 | "no-implied-eval": 2,
240 | "no-inline-comments": 0,
241 | "no-inner-declarations": [2, "functions"],
242 | "no-invalid-regexp": 2,
243 | "no-irregular-whitespace": 2,
244 | "no-iterator": 2,
245 | "no-label-var": 2,
246 | "no-labels": 2,
247 | "no-lone-blocks": 2,
248 | "no-lonely-if": 0,
249 | "no-loop-func": 0,
250 | "no-mixed-requires": 0,
251 | "no-mixed-spaces-and-tabs": 2,
252 | "no-multi-spaces": 2,
253 | "no-multi-str": 2,
254 | "no-multiple-empty-lines": [2, { "max": 1 }],
255 | "no-native-reassign": 2,
256 | "no-negated-in-lhs": 2,
257 | "no-nested-ternary": 0,
258 | "no-new": 2,
259 | "no-new-func": 0,
260 | "no-new-object": 2,
261 | "no-new-require": 2,
262 | "no-new-wrappers": 2,
263 | "no-obj-calls": 2,
264 | "no-octal": 2,
265 | "no-octal-escape": 2,
266 | "no-param-reassign": 0,
267 | "no-path-concat": 0,
268 | "no-process-env": 0,
269 | "no-process-exit": 0,
270 | "no-proto": 0,
271 | "no-redeclare": 2,
272 | "no-regex-spaces": 2,
273 | "no-restricted-modules": 0,
274 | "no-return-assign": 2,
275 | "no-script-url": 0,
276 | "no-self-compare": 2,
277 | "no-sequences": 2,
278 | "no-shadow": 0,
279 | "no-shadow-restricted-names": 2,
280 | "no-spaced-func": 2,
281 | "no-sparse-arrays": 2,
282 | "no-sync": 0,
283 | "no-ternary": 0,
284 | "no-this-before-super": 2,
285 | "no-throw-literal": 2,
286 | "no-trailing-spaces": 2,
287 | "no-undef": 2,
288 | "no-undef-init": 2,
289 | "no-undefined": 0,
290 | "no-underscore-dangle": 0,
291 | "no-unexpected-multiline": 2,
292 | "no-unneeded-ternary": 2,
293 | "no-unreachable": 2,
294 | "no-unused-expressions": 0,
295 | "no-unused-vars": [2, { "vars": "all", "args": "none" }],
296 | "no-use-before-define": 0,
297 | "no-var": 0,
298 | "no-void": 0,
299 | "no-warning-comments": 0,
300 | "no-with": 2,
301 | "object-curly-spacing": 0,
302 | "object-shorthand": 0,
303 | "one-var": [2, { "initialized": "never" }],
304 | "operator-assignment": 0,
305 | "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }],
306 | "padded-blocks": 0,
307 | "prefer-const": 0,
308 | "quote-props": 0,
309 | "quotes": [2, "single", "avoid-escape"],
310 | "radix": 2,
311 | "semi": [2, "never"],
312 | "semi-spacing": 0,
313 | "sort-vars": 0,
314 | "space-after-keywords": [2, "always"],
315 | "space-before-blocks": [2, "always"],
316 | "space-before-function-paren": [2, "always"],
317 | "space-in-parens": [2, "never"],
318 | "space-infix-ops": 2,
319 | "space-return-throw-case": 2,
320 | "space-unary-ops": [2, { "words": true, "nonwords": false }],
321 | "spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!"] }],
322 | "strict": 0,
323 | "use-isnan": 2,
324 | "valid-jsdoc": 0,
325 | "valid-typeof": 2,
326 | "vars-on-top": 0,
327 | "wrap-iife": [2, "any"],
328 | "wrap-regex": 0,
329 | "yoda": [2, "never"]
330 | }
331 | }
332 | node.js 开发最好的IDE系统！
13 |网址：http://www.jetbrains.com/webstorm/
插件：http://plugins.jetbrains.com/webStorm
WebStorm是作为JS开发IDE存在的，并且支持流行的Node.js以及JQuery等js框架。 毫无疑问非他莫属，跨平台，强大的代码提示，支持Nodejs调试，此外还支持vi编辑模式，这点我很喜欢。 而Node.js简单说就是一个JS类库并且配备有Google的V8 js引擎来解析和执行js脚本。 那WebStorm+Node.js这样一个组合，用来开发基于Node.js平台的应用是最方便不过的了，并且可以知道WebStorm这个IDE环境对js的支持是灰常强大的，有智能提示、断点调试、查看源码等等功能。
15 |由于最新jetbrains发布了IntelliJ IDEA 15. PyCharm 5.PhpStorm10.WebStorm 11等各个版本，但是改变了注册方法。原先的注册码包括注册机都已经不能使用了。
47 |现在有个比较简单的注册方法.注册时选择“License server”输入“http://15.idea.lanyus.com/”点击“OK”即可快速激活JetBrains系列产品
48 |npm install -g jadejade --watch --out public jadec:\Users\Walter\AppData\Roaming\npm\jade.cmd$FileName$ --out $ProjectFileDir$\public\$FileDirPathFromParent(jade)$$FileDir$请参见： https://www.jetbrains.com/webstorm/features/
116 |You can now enjoy TypeScript syntax highlighting, on-the-fly error detection, and code completion. WebStorm 6 provides streamlined experience for the full development cycle with new languages such as TypeScript,
118 |The editor also supports inlining Dart script blocks into HTML files. For older versions of the IDE you can use this Dart plugin.
131 |support now includes code insight for mixins and many other improvements.
133 | now has its own code formatter options and in the editor support for deconstructed parameters and parameters with @ prefix is added.
135 |Live Edit, introduced in the previous release, is now easier to get started with and it also supports HTML5 live editing.
137 |WebStorm 6 also introduces improvements for HTML and CSS coding: a re-designed HTML structure view, with special support for HTML5, and Emmet snippets in the editor. If you're looking to level-up your HTML and CSS coding speed, WebStorm's got your back.
138 |
We’ve also revised our approach to handling JavaScript libraries, allowing JS developers to work transparently with minimized and compiled files stored in the project tree. The IDE smartly uses them for code completion and navigation only when needed and ignores them the rest of the time.
143 |
WebStorm equips you with the most powerful code validation tools. You can now validate your JS against Google Closure Linter (new to WebStorm 6), JSHint, JSLint, and our own custom inspections. WebStorm can also automatically pick up the latest version of JSHint for you and, now it understands .jshintrc files if your project has them.
146 |WebStorm 6 includes a built-in HTTP server for static files. You can view your code in a browser instantly or debug it without setting up your own server.
148 |WebStorm now integrates REST Client to let you test RESTful web services right from the IDE. Simply invoke different requests over HTTP (e.g. GET, POST, PUT and others) to RESTful APIs with various parameters and get response and response headers.
150 |WebStorm 6 has been re-designed with a fresh IDE look and feel. To explore the darker side of coding, turn your lights down and try out our new native dark UI theme, Darcula.
152 |Last but not least, if you're a happy owner of a new MacBook, feast your eyes on a set of new Retina-adapted icons.
153 |
During project creation, WebStorm can generate a project stub for developing Web applications. The project structure is set up and some sources are generated based on external templates and frameworks downloaded upon your request.
156 |WebStorm generates project stubs based on the following templates:
157 |2013-02-12 Node 后端开发指引 http://vistaswx.com/blog/article/nodejs-dev
166 |快捷键 作用
169 | command + / 或 + Shift + / 注释（// 或者/*…*/ ）
170 | /\*\* 回车自动添加函数注释，带函数参数
171 | command + d 副本当前行或选中的区块
172 | command + f 查找当前文档
173 | command + g 跳转到文档的某一行某一列
174 | command + p 显示参数信息
175 | command + r 替换当前文档
176 | command + w 选中当前单词、行、区块等
177 | command + y 删除整行
178 | command + mouseover 显示主要信息
179 | command + [ 移动光标到代码块前
180 | command + ] 移动光标到代码块尾
181 | command + + 折叠区块
182 | command + - 展开区块
183 | command + -> 光标移到行尾
184 | command + <- 光标移到行头
185 | 快捷键 作用
186 | command + option + t 将代码以某种格式包括起来
187 | command + option + l 将代码格式化
188 | 快捷键 作用
189 | command + shift + u 切换大小写
190 | command + shift + [ 选中到代码块前
191 | command + shift + ] 选中到代码块尾
192 | command + shift + + 折叠所有区块
193 | command + shift + - 展开所有区块
194 | 快捷键 作用
195 | shift + return 在任意位置换行
196 | shift + F6 高级修改，可快速修改光标所在的标签、变量、函数等
197 | control + shift + f find in path
198 | control + shift + j 合并行
199 | control + shift + r replace in path
200 | 快捷键 作用
201 | option + delete delete to word start
202 | option + fn + delete delete to word end
203 | option + -> 以单词为单位移动光标
204 | option + <- 以单词为单位移动光标
205 | Ctrl+/ 或 Ctrl+Shift+/ 注释（// 或者/*…*/ ）
208 | Shift+F6 重构-重命名
209 | Ctrl+X 删除行
210 | Ctrl+D 复制行
211 | Ctrl+G
212 |
213 | 查找行
214 | Ctrl+Shift+Up/Down 代码向上/下移动。
215 | F2 或Shift+F2 高亮错误或警告快速定位
216 | 写代码，按Tab 生成代码
217 | 选中文本，按Ctrl+Shift+F7 高亮显示所有该文本，按Esc高亮消失。
218 | Ctrl+B 快速打开光标处的类或方法
219 | Ctrl+E 最近打开的文件
220 | Alt+F1 查找代码所在位置
221 | Ctrl+Alt+L 格式化代码
222 | Ctrl+R 替换文本
223 | Ctrl+F 查找文本
224 | Ctrl+P 方法参数提示
225 |
226 | Webstorm默认配置下的常用快捷键
227 | 查找/代替
228 | 快捷键
229 | 说明
230 | ctrl+shift+N 通过文件名快速查找工程内的文件（必记）
231 | ctrl+shift+alt+N 通过一个字符快速查找位置（必记）
232 | ctrl+F 在文件内快速查找代码
233 | F3 查找下一个
234 | shift+F3 查找上一个
235 | ctrl+R 文件内代码替换
236 | ctrl+shift+R 指定目录内代码批量替换
237 | ctrl+shift+F 指定目录内代码批量查找
238 | ctrl+R 文件内代码替换
239 | 界面操作
240 | 快捷键
241 | 说明
242 | ctrl+shift+A 快速查找并使用编辑器所有功能（必记）
243 | alt+[0-9] 快速拆合功能界面模块
244 | ctrl+shift+F12 最大区域显示代码（会隐藏其他的功能界面模块）
245 | alt+shift+F 将当前文件加入收藏夹
246 | ctrl+alt+s 打开配置窗口
247 | ctrl+tab 切换代码选项卡（还要进行此选择，效率差些）
248 | alt+<-或-> 切换代码选项卡
249 | 快捷键
250 | 说明
251 | ctrl+shift+N 通过文件名快速查找工程内的文件（必记）
252 | ctrl+shift+alt+N 通过一个字符快速查找位置（必记）
253 | ctrl+F 在文件内快速查找代码
254 | F3 查找下一个
255 | shift+F3 查找上一个
256 | ctrl+R 文件内代码替换
257 | ctrl+shift+R 指定目录内代码批量替换
258 | ctrl+shift+F 指定目录内代码批量查找
259 | ctrl+R 文件内代码替换
260 | 界面操作
261 | 快捷键
262 | 说明
263 | ctrl+shift+A 快速查找并使用编辑器所有功能（必记）
264 | alt+[0-9] 快速拆合功能界面模块
265 | ctrl+shift+F12 最大区域显示代码（会隐藏其他的功能界面模块）
266 | alt+shift+F 将当前文件加入收藏夹
267 | ctrl+alt+s 打开配置窗口
268 | ctrl+tab 切换代码选项卡（还要进行此选择，效率差些）
269 | alt+<-或-> 切换代码选项卡
270 | ctrl+F4 关闭当前代码选项卡
271 | 代码编辑
272 | 快捷键
273 | 说明
274 | ctrl+D 复制当前行
275 | ctrl+W 选中单词
276 | ctrl+<-或-> 以单词作为边界跳光标位置
277 | alt+Insert 新建一个文件或其他
278 | ctrl+alt+L 格式化代码
279 | shift+tab/tab 减少/扩大缩进（可以在代码中减少行缩进）
280 | ctrl+Y 删除一行
281 | shift+enter 重新开始一行（无论光标在哪个位置）
282 | 导航
283 | 快捷键
284 | 说明
285 | esc 进入代码编辑区域
286 | alt+F1 查找代码在其他界面模块的位置，颇为有用
287 | ctrl+G 到指定行的代码
288 | ctrl+]/ 光标到代码块的前面或后面
289 | alt+up/down 上一个/下一个方法
290 | 建议配置版本控制快捷键
291 | 快捷键
292 | 说明
293 | ctrl+C 提交代码
294 | ctrl+p 向远程版本库推送更新
295 | ctrl+G 到指定行的代码
296 | ctrl+]/ 光标到代码块的前面或后面
297 | alt+up/down 上一个/下一个方法
298 | foo bar baz
161 | ``` 162 | 或者： 163 | ``` 164 | html 165 | body. 166 |foo bar baz
168 | ``` 169 | 注意，点前面不能有空格！ 170 | 171 | jade 空格 172 | |男 173 | 174 | 175 | ## 变量 176 | 177 | jade变量属于 js 代码的一种，jade 模版 不通过 代码标记-，也能智能识别 js 代码， 178 | 因此，代码中的变量，能自动转换为字符串！ 179 | 180 | 任何模版都支持变量，一般都通过 = 来实现，jade则支持好几种： 181 | 182 | - = 或 != 183 | \- var foo = 'bar' 184 | = foo 185 | h1= foo 186 | 注意 =前面不能有空格！！！ 187 | 188 | = 对 <> 会自动转码，确保一些html标记按原文输出， 189 | != 则 不会转码，内嵌的 html 标记将 按标记输出，相当于 能获得 标记效果！ 190 | {"name": "Hello World"} 191 | li= nameWoah! jade and markdown, very cool we can even link to stuff
373 | ``` 374 | 375 | ## 继承 376 | 一般模版没有继承。继承通过 `block` and `extends` 关键字实现。 377 | express 支持 jade 继承功能！ 378 | 一般 内容模块会从 母版继承！ 379 | 380 | block 缺省时覆盖, 也可 prepend, or append blocks. 381 | 382 | ## 包含 include 383 | 一个jade 文件可包含另外一个文件，包括 js、css、jade，缺省为 jade后缀！ 384 | 385 | ``` 386 | html 387 | include includes/head 388 | body 389 | h1 My Site 390 | p Welcome to my super amazing site. 391 | include includes/foot 392 | ``` 393 | 394 | ## 混入 mixin 395 | 插入 片段，类似 ejs 的 partials 功能，如果跨文件，则 需通过 include将独立文件包含进来！ 396 | ejs 则 不需要 包含，通过 名称约定完成，jade 更加灵活！ 397 | 398 | 399 | ``` 400 | mixin book(name, price) 401 | li #{name} for #{price} € 402 | 403 | ul#books 404 | +book("Book A", 12.99) 405 | +book("Book B", 5.99) 406 | ``` 407 | 408 | 输出： 409 | ``` 410 |Charting is included
429 | <% } %> 430 |locals:<%- JSON.stringify(locals) %>
431 | ``` 432 | 433 | Functions cannot be passed down via the response object. That means there is no replacement for the template-initiated processing that dynamic helpers provided. 434 | Another trick is to use middleware to add properties or methods to the request object then, on render, pass derived properties to the render method. This is how the connect-flash modules operates. 435 | Passing Variables to Your Templates via the App Object 436 | You can pass app-level variables to your templates by attaching properties or functions to app.settings. Although this is referred to as app.locals in the documentation, you can’t actually set app.locals.myvar to a value and see this in your template. I presume this is another case of documentation written for people who already understand the application, meaning it wasn’t written for me. 437 | To set an app-level variable or function you either call app.set() or set a property of app.settings as shown below. 438 | In app.js 439 | ``` 440 | app.set('tLaunch',new Date()); 441 | app.settings.appName = 'MyApp'; // Equivalent to using app.set(appName,'MyApp'); 442 | app.set('appVersion',function() { config.getAppVersion() }); 443 | ``` 444 | To read the app-level variable in your template you reference settings.myvar. To call the function you call settings.myfunc(). Remember, you can’t pass any parameters to the function, so you can’t get request-specific data using this function. 445 | Template File 446 | ``` 447 |The time my app was launched:<%- settings.tLaunch.toString() %>
448 |App Name:<%- settings.appName %>
449 |App Version:<%- settings.appVersion() %>
450 | ``` 451 | 452 | app.locals 453 | Application local variables are provided to all templates rendered within the application. This is useful for providing helper functions to templates, as well as app-level data. 454 | 455 | app.locals.title = 'My App'; 456 | app.locals.strftime = require('strftime'); 457 | The app.locals object is a JavaScript Function, which when invoked with an object will merge properties into itself, providing a simple way to expose existing objects as local variables. 458 | 459 | app.locals({ 460 | title: 'My App', 461 | phone: '1-250-858-9990', 462 | email: 'me@myapp.com' 463 | }); 464 | 465 | app.locals.title 466 | // => 'My App' 467 | 468 | app.locals.email 469 | // => 'me@myapp.com' 470 | By default Express exposes only a single app-level local variable, settings. 471 | 472 | app.set('title', 'My App'); 473 | // use settings.title in a view 474 | 475 | 476 | ## radio select 477 | 478 | .control-group 479 | label.control-label(for="txSex") 性别 480 | .controls 481 | label.radio.inline 482 | input#txSex1.inline(type="radio", name="txSex", value="男", checked=sex=="男") 483 | | 男 484 | label.radio.inline 485 | input#txSex2.inline(type="radio", name="txSex", value="女", checked=sex=="女") 486 | 女 487 | .control-group 488 | label.control-label(for="txType") 类别 489 | .controls 490 | select#txType(name="txType") 491 | option(value=1,selected=type==1) 个人 492 | option(value=2,selected=type==2) 企业 493 | option(value=3,selected=type==3) 群组 494 | option(value=4,selected=type==4) 公众 495 | 496 | Boolean Attributes 497 | 498 | Boolean attributes are mirrored by Jade, and accept bools, aka true or false. When no value is specified true is assumed. 499 | 500 | input(type='checkbox', checked) 501 | input(type='checkbox', checked=true) 502 | input(type='checkbox', checked=false) 503 | input(type='checkbox', checked=true.toString()) 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | ## undefined 处理 512 | 后台 render对象 与 jade模版引用的变量不一致，导致缺失的字段全部显示 undefined 字符串！ 513 | input#txNick.input-xlarge(type="text", name="txNick", value=nick) 514 | undefined 会输出空 515 | input#txShowName.input-xlarge(type="text", name="txAlias", value="#{alias}") 516 | undefined 会输出 undefined字符串！ 517 | 518 | -------------------------------------------------------------------------------- /html/eslint.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |最好的js 静态风格、语法、错误检查及在线提示。
13 |14 |16 |ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写， 2013 年发布第一个版本。 NCZ 的初衷不是重复造一个轮子，而是在际需求得不到 JSHint 团队响应 的情况下做出的选择：以可扩展、每条规则独立、不内置编码风格为理念编写一个 lint 工具。
15 |
官网 | 33 | 配置 | 34 | 规则 | 35 | 贡献 | 36 | 缺陷 | 37 | Code of Conduct | 38 | Twitter | 39 | 邮件列表 | 40 | 聊天室
41 |npm install -g eslint
43 |修改 .eslintrc 文件，定义规则
{
53 | "rules": {
54 | "semi": ["error", "always"],
55 | "quotes": ["error", "double"]
56 | }
57 | }
58 | "semi" 和 "quotes" 预定义的规则名称rules
第一个值是提示级别
"off" or 0 - 关闭"warn" or 1 - 警告"error" or 2 - 错误详细说明请参见配置说明)。
66 |需安装以下插件
70 |"eslint": "^2.9.0",
71 | "eslint-config-airbnb": "^9.0.1",
72 | "eslint-plugin-import": "^1.8.0",
73 | "eslint-plugin-jsx-a11y": "^1.2.0",
74 | "eslint-plugin-react": "^5.1.1",
75 | 文件内容
78 |{
79 | "extends": "eslint-config-airbnb/base",
80 | "parser": "babel-eslint",
81 | "env": {
82 | "browser": true,
83 | "node": true,
84 | "mocha": true
85 | },
86 | "rules": {
87 | // Disable for console/alert
88 | "no-console": 0,
89 | "no-alert": 0,
90 |
91 | "indent": [2, 2, {"SwitchCase": 1}],
92 | "object-curly-spacing": 0
93 | },
94 | "plugins": [
95 | "import"
96 | ],
97 | "settings": {
98 | "import/parser": "babel-eslint",
99 | "import/resolve": {
100 | "moduleDirectory": ["node_modules", "src"]
101 | }
102 | },
103 | "globals": {
104 | "__DEV__": true,
105 | "__OPTION__": true
106 | }
107 | }
108 | {
113 | "env": {
114 | "browser": true,
115 | "node": true,
116 | "commonjs": true
117 | },
118 | "ecmaFeatures": {
119 | // lambda表达式
120 | "arrowFunctions": true,
121 | // 解构赋值
122 | "destructuring": true,
123 | // class
124 | "classes": true,
125 | // http://es6.ruanyifeng.com/#docs/function#函数参数的默认值
126 | "defaultParams": true,
127 | // 块级作用域，允许使用let const
128 | "blockBindings": true,
129 | // 允许使用模块，模块内默认严格模式
130 | "modules": true,
131 | // 允许字面量定义对象时，用表达式做属性名
132 | // http://es6.ruanyifeng.com/#docs/object#属性名表达式
133 | "objectLiteralComputedProperties": true,
134 | // 允许对象字面量方法名简写
135 | /*var o = {
136 | method() {
137 | return "Hello!";
138 | }
139 | };
140 |
141 | 等同于
142 |
143 | var o = {
144 | method: function() {
145 | return "Hello!";
146 | }
147 | };
148 | */
149 | "objectLiteralShorthandMethods": true,
150 | /*
151 | 对象字面量属性名简写
152 | var foo = 'bar';
153 | var baz = {foo};
154 | baz // {foo: "bar"}
155 |
156 | // 等同于
157 | var baz = {foo: foo};
158 | */
159 | "objectLiteralShorthandProperties": true,
160 | // http://es6.ruanyifeng.com/#docs/function#rest参数
161 | "restParams": true,
162 | // http://es6.ruanyifeng.com/#docs/function#扩展运算符
163 | "spread": true,
164 | // http://es6.ruanyifeng.com/#docs/iterator#for---of循环
165 | "forOf": true,
166 | // http://es6.ruanyifeng.com/#docs/generator
167 | "generators": true,
168 | // http://es6.ruanyifeng.com/#docs/string#模板字符串
169 | "templateStrings": true,
170 | "superInFunctions": true,
171 | // http://es6.ruanyifeng.com/#docs/object#对象的扩展运算符
172 | "experimentalObjectRestSpread": true
173 | },
174 |
175 | "rules": {
176 | // 定义对象的set存取器属性时，强制定义get
177 | "accessor-pairs": 2,
178 | // 指定数组的元素之间要以空格隔开(,后面)， never参数：[ 之前和 ] 之后不能带空格，always参数：[ 之前和 ] 之后必须带空格
179 | "array-bracket-spacing": [2, "never"],
180 | // 在块级作用域外访问块内定义的变量是否报错提示
181 | "block-scoped-var": 0,
182 | // if while function 后面的{必须与if在同一行，java风格。
183 | "brace-style": [2, "1tbs", { "allowSingleLine": true }],
184 | // 双峰驼命名格式
185 | "camelcase": 2,
186 | // 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号，
187 | // always-multiline：多行模式必须带逗号，单行模式不能带逗号
188 | "comma-dangle": [2, "never"],
189 | // 控制逗号前后的空格
190 | "comma-spacing": [2, { "before": false, "after": true }],
191 | // 控制逗号在行尾出现还是在行首出现
192 | // http://eslint.org/docs/rules/comma-style
193 | "comma-style": [2, "last"],
194 | // 圈复杂度
195 | "complexity": [2,9],
196 | // 以方括号取对象属性时，[ 后面和 ] 前面是否需要空格, 可选参数 never, always
197 | "computed-property-spacing": [2,"never"],
198 | // 强制方法必须返回值，TypeScript强类型，不配置
199 | "consistent-return": 0,
200 | // 用于指统一在回调函数中指向this的变量名，箭头函数中的this已经可以指向外层调用者，应该没卵用了
201 | // e.g [0,"that"] 指定只能 var that = this. that不能指向其他任何值，this也不能赋值给that以外的其他值
202 | "consistent-this": 0,
203 | // 强制在子类构造函数中用super()调用父类构造函数，TypeScrip的编译器也会提示
204 | "constructor-super": 0,
205 | // if else while for do后面的代码块是否需要{ }包围，参数：
206 | // multi 只有块中有多行语句时才需要{ }包围
207 | // multi-line 只有块中有多行语句时才需要{ }包围, 但是块中的执行语句只有一行时，
208 | // 块中的语句只能跟和if语句在同一行。if (foo) foo++; else doSomething();
209 | // multi-or-nest 只有块中有多行语句时才需要{ }包围, 如果块中的执行语句只有一行，执行语句可以零另起一行也可以跟在if语句后面
210 | // [2, "multi", "consistent"] 保持前后语句的{ }一致
211 | // default: [2, "all"] 全都需要{ }包围
212 | "curly": [2, "all"],
213 | // switch语句强制default分支，也可添加 // no default 注释取消此次警告
214 | "default-case": 2,
215 | // 强制object.key 中 . 的位置，参数:
216 | // property，'.'号应与属性在同一行
217 | // object, '.' 号应与对象名在同一行
218 | "dot-location": [2, "property"],
219 | // 强制使用.号取属性
220 | // 参数： allowKeywords：true 使用保留字做属性名时，只能使用.方式取属性
221 | // false 使用保留字做属性名时, 只能使用[]方式取属性 e.g [2, {"allowKeywords": false}]
222 | // allowPattern: 当属性名匹配提供的正则表达式时，允许使用[]方式取值,否则只能用.号取值 e.g [2, {"allowPattern": "^[a-z]+(_[a-z]+)+$"}]
223 | "dot-notation": [2, {"allowKeywords": true}],
224 | // 文件末尾强制换行
225 | "eol-last": 2,
226 | // 使用 === 替代 ==
227 | "eqeqeq": [2, "allow-null"],
228 | // 方法表达式是否需要命名
229 | "func-names": 0,
230 | // 方法定义风格，参数：
231 | // declaration: 强制使用方法声明的方式，function f(){} e.g [2, "declaration"]
232 | // expression：强制使用方法表达式的方式，var f = function() {} e.g [2, "expression"]
233 | // allowArrowFunctions: declaration风格中允许箭头函数。 e.g [2, "declaration", { "allowArrowFunctions": true }]
234 | "func-style": 0,
235 | "generator-star-spacing": [2, { "before": true, "after": true }],
236 | "guard-for-in": 0,
237 | "handle-callback-err": [2, "^(err|error)$" ],
238 | "indent": [2, 2, { "SwitchCase": 1 }],
239 | "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
240 | "linebreak-style": 0,
241 | "lines-around-comment": 0,
242 | "max-nested-callbacks": 0,
243 | "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
244 | "new-parens": 2,
245 | "newline-after-var": 0,
246 | "no-alert": 0,
247 | "no-array-constructor": 2,
248 | "no-caller": 2,
249 | "no-catch-shadow": 0,
250 | "no-cond-assign": 2,
251 | "no-console": 0,
252 | "no-constant-condition": 0,
253 | "no-continue": 0,
254 | "no-control-regex": 2,
255 | "no-debugger": 2,
256 | "no-delete-var": 2,
257 | "no-div-regex": 0,
258 | "no-dupe-args": 2,
259 | "no-dupe-keys": 2,
260 | "no-duplicate-case": 2,
261 | "no-else-return": 0,
262 | "no-empty": 0,
263 | "no-empty-character-class": 2,
264 | "no-empty-label": 2,
265 | "no-eq-null": 0,
266 | "no-eval": 2,
267 | "no-ex-assign": 2,
268 | "no-extend-native": 2,
269 | "no-extra-bind": 2,
270 | "no-extra-boolean-cast": 2,
271 | "no-extra-parens": 0,
272 | "no-extra-semi": 0,
273 | "no-fallthrough": 2,
274 | "no-floating-decimal": 2,
275 | "no-func-assign": 2,
276 | "no-implied-eval": 2,
277 | "no-inline-comments": 0,
278 | "no-inner-declarations": [2, "functions"],
279 | "no-invalid-regexp": 2,
280 | "no-irregular-whitespace": 2,
281 | "no-iterator": 2,
282 | "no-label-var": 2,
283 | "no-labels": 2,
284 | "no-lone-blocks": 2,
285 | "no-lonely-if": 0,
286 | "no-loop-func": 0,
287 | "no-mixed-requires": 0,
288 | "no-mixed-spaces-and-tabs": 2,
289 | "no-multi-spaces": 2,
290 | "no-multi-str": 2,
291 | "no-multiple-empty-lines": [2, { "max": 1 }],
292 | "no-native-reassign": 2,
293 | "no-negated-in-lhs": 2,
294 | "no-nested-ternary": 0,
295 | "no-new": 2,
296 | "no-new-func": 0,
297 | "no-new-object": 2,
298 | "no-new-require": 2,
299 | "no-new-wrappers": 2,
300 | "no-obj-calls": 2,
301 | "no-octal": 2,
302 | "no-octal-escape": 2,
303 | "no-param-reassign": 0,
304 | "no-path-concat": 0,
305 | "no-process-env": 0,
306 | "no-process-exit": 0,
307 | "no-proto": 0,
308 | "no-redeclare": 2,
309 | "no-regex-spaces": 2,
310 | "no-restricted-modules": 0,
311 | "no-return-assign": 2,
312 | "no-script-url": 0,
313 | "no-self-compare": 2,
314 | "no-sequences": 2,
315 | "no-shadow": 0,
316 | "no-shadow-restricted-names": 2,
317 | "no-spaced-func": 2,
318 | "no-sparse-arrays": 2,
319 | "no-sync": 0,
320 | "no-ternary": 0,
321 | "no-this-before-super": 2,
322 | "no-throw-literal": 2,
323 | "no-trailing-spaces": 2,
324 | "no-undef": 2,
325 | "no-undef-init": 2,
326 | "no-undefined": 0,
327 | "no-underscore-dangle": 0,
328 | "no-unexpected-multiline": 2,
329 | "no-unneeded-ternary": 2,
330 | "no-unreachable": 2,
331 | "no-unused-expressions": 0,
332 | "no-unused-vars": [2, { "vars": "all", "args": "none" }],
333 | "no-use-before-define": 0,
334 | "no-var": 0,
335 | "no-void": 0,
336 | "no-warning-comments": 0,
337 | "no-with": 2,
338 | "object-curly-spacing": 0,
339 | "object-shorthand": 0,
340 | "one-var": [2, { "initialized": "never" }],
341 | "operator-assignment": 0,
342 | "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }],
343 | "padded-blocks": 0,
344 | "prefer-const": 0,
345 | "quote-props": 0,
346 | "quotes": [2, "single", "avoid-escape"],
347 | "radix": 2,
348 | "semi": [2, "never"],
349 | "semi-spacing": 0,
350 | "sort-vars": 0,
351 | "space-after-keywords": [2, "always"],
352 | "space-before-blocks": [2, "always"],
353 | "space-before-function-paren": [2, "always"],
354 | "space-in-parens": [2, "never"],
355 | "space-infix-ops": 2,
356 | "space-return-throw-case": 2,
357 | "space-unary-ops": [2, { "words": true, "nonwords": false }],
358 | "spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!"] }],
359 | "strict": 0,
360 | "use-isnan": 2,
361 | "valid-jsdoc": 0,
362 | "valid-typeof": 2,
363 | "vars-on-top": 0,
364 | "wrap-iife": [2, "any"],
365 | "wrap-regex": 0,
366 | "yoda": [2, "never"]
367 | }
368 | }
369 |