├── .editorconfig ├── .gitignore ├── .prettierignore ├── .travis.yml ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── part-01 ├── module-01 │ ├── 01-01-es2015-spec │ │ ├── 00-prepare.js │ │ ├── 01-let-block-scoped.js │ │ ├── 02-const.js │ │ ├── 03-array-destructuring.js │ │ ├── 04-object-destructuring.js │ │ ├── 05-template-strings.js │ │ ├── 06-tagged-templates.js │ │ ├── 07-strings-ext-methods.js │ │ ├── 08-parmeter-defaults.js │ │ ├── 09-rest-parameter.js │ │ ├── 10-spread-parameter.js │ │ ├── 11-arrow-functions.js │ │ ├── 12-arrow-func-this.js │ │ ├── 13-object-literal.js │ │ ├── 14-object-assign.js │ │ ├── 15-object-is.js │ │ ├── 16-proxy.js │ │ ├── 16-reflect.js │ │ ├── 17-class.js │ │ ├── 18-static-method.js │ │ ├── 19-class-extends.js │ │ ├── 20-set.js │ │ ├── 21-map.js │ │ ├── 22-symbol.js │ │ ├── 23-symbol-more.js │ │ ├── 24-for-of.js │ │ ├── 25-iterator.js │ │ ├── 26-iterable.js │ │ ├── 27-iterator-pattern.js │ │ ├── 28-generator.js │ │ ├── 29-generator-usage.js │ │ ├── package-lock.json │ │ ├── package.json │ │ └── yarn.lock │ ├── 01-02-es2016-spec │ │ ├── index.js │ │ ├── package.json │ │ └── yarn.lock │ ├── 01-03-es2017-spec │ │ ├── index.js │ │ ├── package.json │ │ └── yarn.lock │ ├── 02-01-asynchronous │ │ ├── 01-sync-mode.js │ │ ├── 02-async-mode.js │ │ ├── 03-callback-hell.js │ │ ├── 04-promise-sample.js │ │ ├── 05-promise-ajax.js │ │ ├── 06-promise-nesting.js │ │ ├── 07-promise-chaining.js │ │ ├── 08-promise-catch.js │ │ ├── 09-promise-static.js │ │ ├── 10-promise-parallel.js │ │ ├── 11-microtasks.js │ │ ├── 12-promise-vs-callback.js │ │ ├── 13-generator.js │ │ ├── 14-generator-promise.js │ │ ├── 15-async-await.js │ │ ├── README.md │ │ ├── api │ │ │ ├── posts.json │ │ │ ├── urls.json │ │ │ └── users.json │ │ ├── package.json │ │ ├── webpack.config.js │ │ └── yarn.lock │ ├── 03-01-type-system │ │ ├── 01-weakly-typed.js │ │ ├── 02-strongly-typed.js │ │ └── package.json │ ├── 03-02-flow │ │ ├── .babelrc │ │ ├── .flowconfig │ │ ├── package.json │ │ ├── src │ │ │ ├── 01-getting-started.js │ │ │ ├── 02-type-inference.js │ │ │ ├── 03-type-annotations.js │ │ │ ├── 04-primitive-types.js │ │ │ ├── 05-array-types.js │ │ │ ├── 06-object-types.js │ │ │ ├── 07-function-types.js │ │ │ ├── 08-more-types.js │ │ │ ├── 09-mixed-any.js │ │ │ └── 10-runtime-apis.js │ │ └── yarn.lock │ └── 03-03-typescript │ │ ├── dist │ │ ├── 01-getting-started.js │ │ ├── 01-getting-started.js.map │ │ ├── 02-primitive-types.js │ │ ├── 02-primitive-types.js.map │ │ ├── 03-module-scope.js │ │ ├── 03-module-scope.js.map │ │ ├── 04-object-types.js │ │ ├── 04-object-types.js.map │ │ ├── 05-array-types.js │ │ ├── 05-array-types.js.map │ │ ├── 06-tuple-types.js │ │ ├── 06-tuple-types.js.map │ │ ├── 07-enum-types.js │ │ ├── 07-enum-types.js.map │ │ ├── 08-function-types.js │ │ ├── 08-function-types.js.map │ │ ├── 09-any-types.js │ │ ├── 09-any-types.js.map │ │ ├── 10-type-inference.js │ │ ├── 10-type-inference.js.map │ │ ├── 11-type-assertion.js │ │ ├── 11-type-assertion.js.map │ │ ├── 12-interface-basic.js │ │ ├── 12-interface-basic.js.map │ │ ├── 13-interface-more.js │ │ ├── 13-interface-more.js.map │ │ ├── 14-class-basic.js │ │ ├── 14-class-basic.js.map │ │ ├── 15-class-modifiers.js │ │ ├── 15-class-modifiers.js.map │ │ ├── 16-class-readonly.js │ │ ├── 16-class-readonly.js.map │ │ ├── 17-class-and-interface.js │ │ ├── 17-class-and-interface.js.map │ │ ├── 18-abstract-class.js │ │ ├── 18-abstract-class.js.map │ │ ├── 19-generics.js │ │ ├── 19-generics.js.map │ │ ├── 20-definitely-typed.js │ │ └── 20-definitely-typed.js.map │ │ ├── package.json │ │ ├── src │ │ ├── 01-getting-started.ts │ │ ├── 02-primitive-types.ts │ │ ├── 03-module-scope.ts │ │ ├── 04-object-types.ts │ │ ├── 05-array-types.ts │ │ ├── 06-tuple-types.ts │ │ ├── 07-enum-types.ts │ │ ├── 08-function-types.ts │ │ ├── 09-any-types.ts │ │ ├── 10-type-inference.ts │ │ ├── 11-type-assertion.ts │ │ ├── 12-interface-basic.ts │ │ ├── 13-interface-more.ts │ │ ├── 14-class-basic.ts │ │ ├── 15-class-modifiers.ts │ │ ├── 16-class-readonly.ts │ │ ├── 17-class-and-interface.ts │ │ ├── 18-abstract-class.ts │ │ ├── 19-generics.ts │ │ └── 20-definitely-typed.ts │ │ ├── tsconfig.json │ │ └── yarn.lock └── module-02 │ ├── 01-01-functional-programming │ ├── 01-higher-order-functon.js │ ├── 02-higher-order-functon.js │ ├── 03-array-method.js │ ├── 04-closure.html │ ├── 05-closure.html │ ├── 06-purefunction.js │ ├── 07-lodash.js │ ├── 08-memoize.js │ ├── 09-curry.js │ ├── 10-curry-lodash.js │ ├── 11-curry-demo.js │ ├── 12-curry.js │ ├── 13-compose.js │ ├── 14-compose-lodash.js │ ├── 15-compose.js │ ├── 16-compose-associativity.js │ ├── 17-compose-debug.js │ ├── 18-compose-lodash-fp.js │ ├── 19-compose-lodash-fp.js │ ├── 20-pointfree.js │ ├── 21-pointfree.js │ ├── package-lock.json │ └── package.json │ ├── 01-02-fp-functor │ ├── 01-functor.js │ ├── 02-maybe.js │ ├── 03-either.js │ ├── 04-io.js │ ├── 05-folktale.js │ ├── 06-task.js │ ├── 07-monad-pre.js │ ├── 08-monad.js │ ├── package-lock.json │ └── package.json │ ├── 01-讲义 │ ├── 01-函数式编程.pdf │ └── 02-函数式编程.png │ ├── 02-01-js-performance │ ├── 01-keyword-variable.js │ ├── 02-global-variable.js │ ├── 03-variable-cache.html │ ├── 04-func-constructor.js │ ├── 05-closure.js │ ├── 06-property-access.js │ ├── 07-for.js │ ├── 08-for-forin-froEach.js │ ├── 09-append-node.html │ ├── 10-node-clone.html │ └── 11-object.js │ └── 02-讲义 │ └── JavaScript性能优化.pdf └── part-02 ├── module-01 ├── 02-01-generator-sample │ ├── generators │ │ └── app │ │ │ ├── index.js │ │ │ └── templates │ │ │ ├── bar.html │ │ │ └── foo.txt │ ├── package.json │ └── yarn.lock ├── 02-02-my-vue-project │ ├── .browserslistrc │ ├── .editorconfig │ ├── .env.development │ ├── .env.production │ ├── .eslintrc.js │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ └── logo.png │ │ ├── components │ │ └── HelloWorld.vue │ │ ├── main.js │ │ ├── router.js │ │ ├── store │ │ ├── actions.js │ │ ├── getters.js │ │ ├── index.js │ │ ├── mutations.js │ │ └── state.js │ │ ├── utils │ │ └── request.js │ │ └── views │ │ ├── About.vue │ │ └── Home.vue ├── 02-03-generator-zce-vue │ ├── .gitignore │ ├── generators │ │ └── app │ │ │ ├── index.js │ │ │ └── templates │ │ │ ├── .browserslistrc │ │ │ ├── .editorconfig │ │ │ ├── .env.development │ │ │ ├── .env.production │ │ │ ├── .eslintrc.js │ │ │ ├── .gitignore │ │ │ ├── README.md │ │ │ ├── babel.config.js │ │ │ ├── package.json │ │ │ ├── postcss.config.js │ │ │ ├── public │ │ │ ├── favicon.ico │ │ │ └── index.html │ │ │ └── src │ │ │ ├── App.vue │ │ │ ├── assets │ │ │ └── logo.png │ │ │ ├── components │ │ │ └── HelloWorld.vue │ │ │ ├── main.js │ │ │ ├── router.js │ │ │ ├── store │ │ │ ├── actions.js │ │ │ ├── getters.js │ │ │ ├── index.js │ │ │ ├── mutations.js │ │ │ └── state.js │ │ │ ├── utils │ │ │ └── request.js │ │ │ └── views │ │ │ ├── About.vue │ │ │ └── Home.vue │ ├── package.json │ └── yarn.lock ├── 02-04-plop-sample │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── plop-templates │ │ ├── component.css.hbs │ │ ├── component.hbs │ │ └── component.test.hbs │ ├── plopfile.js │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── assets │ │ │ └── logo.svg │ │ ├── components │ │ │ ├── Footer │ │ │ │ └── Footer.js │ │ │ ├── Header │ │ │ │ ├── Header.css │ │ │ │ ├── Header.js │ │ │ │ └── Header.test.js │ │ │ └── MyComponent │ │ │ │ ├── MyComponent.css │ │ │ │ ├── MyComponent.js │ │ │ │ └── MyComponent.test.js │ │ ├── index.css │ │ └── index.js │ └── yarn.lock ├── 02-05-react-app │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── assets │ │ │ └── logo.svg │ │ ├── components │ │ │ └── Header │ │ │ │ ├── Header.css │ │ │ │ ├── Header.js │ │ │ │ └── Header.test.js │ │ ├── index.css │ │ └── index.js │ └── yarn.lock ├── 02-06-plop-react-app │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── plop-templates │ │ ├── component.css.hbs │ │ ├── component.js.hbs │ │ └── component.test.js.hbs │ ├── plopfile.js │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── assets │ │ │ └── logo.svg │ │ ├── components │ │ │ └── Header │ │ │ │ ├── Header.css │ │ │ │ ├── Header.js │ │ │ │ └── Header.test.js │ │ ├── index.css │ │ └── index.js │ └── yarn.lock ├── 02-07-sample-scaffolding │ ├── cli.js │ ├── package.json │ ├── templates │ │ ├── index.html │ │ └── style.css │ └── yarn.lock ├── 03-01-my-web-app │ ├── css │ │ ├── style.css │ │ └── style.css.map │ ├── index.html │ ├── package.json │ ├── scss │ │ └── main.scss │ └── yarn.lock ├── 03-02-grunt-config │ ├── gruntfile.js │ ├── package.json │ └── yarn.lock ├── 03-02-grunt-sample │ ├── gruntfile.js │ ├── package.json │ └── yarn.lock ├── 03-03-grunt-failed │ ├── gruntfile.js │ ├── package.json │ └── yarn.lock ├── 03-04-grunt-multi-task │ ├── gruntfile.js │ ├── package.json │ └── yarn.lock ├── 03-05-grunt-use-plugin │ ├── gruntfile.js │ ├── package.json │ └── yarn.lock ├── 03-06-grunt-plugins │ ├── dist │ │ ├── css │ │ │ ├── main.css │ │ │ └── main.css.map │ │ └── js │ │ │ ├── app.js │ │ │ └── app.js.map │ ├── gruntfile.js │ ├── package.json │ ├── src │ │ ├── js │ │ │ └── app.js │ │ └── scss │ │ │ └── main.scss │ └── yarn.lock ├── 03-07-gulp-sample │ ├── gulpfile.js │ ├── package.json │ └── yarn.lock ├── 03-08-gulp-compose-tasks │ ├── gulpfile.js │ ├── package.json │ └── yarn.lock ├── 03-09-gulp-async-task │ ├── gulpfile.js │ ├── package.json │ └── yarn.lock ├── 03-10-gulp-build-process │ ├── gulpfile.js │ ├── normalize.css │ ├── normalize.min.css │ ├── package.json │ └── yarn.lock ├── 03-11-gulp-files-api │ ├── dist │ │ ├── bootstrap.min.css │ │ ├── normalize.css │ │ └── normalize.min.css │ ├── gulpfile.js │ ├── package.json │ ├── src │ │ ├── bootstrap.css │ │ └── normalize.css │ └── yarn.lock ├── 03-12-zce-gulp-demo │ ├── .gitignore │ ├── LICENSE │ ├── README.md │ ├── gulpfile.js │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── about.html │ │ ├── assets │ │ │ ├── fonts │ │ │ │ ├── pages.eot │ │ │ │ ├── pages.svg │ │ │ │ ├── pages.ttf │ │ │ │ └── pages.woff │ │ │ ├── images │ │ │ │ ├── brands.svg │ │ │ │ └── logo.png │ │ │ ├── scripts │ │ │ │ └── main.js │ │ │ └── styles │ │ │ │ ├── _icons.scss │ │ │ │ ├── _variables.scss │ │ │ │ ├── demo.scss │ │ │ │ └── main.scss │ │ ├── features.html │ │ ├── index.html │ │ ├── layouts │ │ │ └── basic.html │ │ └── partials │ │ │ ├── footer.html │ │ │ ├── header.html │ │ │ └── tags.html │ └── yarn.lock ├── 03-13-zce-gulp-extract │ ├── .gitignore │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── pages.config.js │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── about.html │ │ ├── assets │ │ │ ├── fonts │ │ │ │ ├── pages.eot │ │ │ │ ├── pages.svg │ │ │ │ ├── pages.ttf │ │ │ │ └── pages.woff │ │ │ ├── images │ │ │ │ ├── brands.svg │ │ │ │ └── logo.png │ │ │ ├── scripts │ │ │ │ └── main.js │ │ │ └── styles │ │ │ │ ├── _icons.scss │ │ │ │ ├── _variables.scss │ │ │ │ ├── demo.scss │ │ │ │ └── main.scss │ │ ├── features.html │ │ ├── index.html │ │ ├── layouts │ │ │ └── basic.html │ │ └── partials │ │ │ ├── footer.html │ │ │ ├── header.html │ │ │ └── tags.html │ └── yarn.lock ├── 03-14-zce-pages │ ├── .editorconfig │ ├── .gitignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── bin │ │ └── zce-pages.js │ ├── lib │ │ └── index.js │ ├── package.json │ └── yarn.lock ├── 03-15-zce-pages-demo │ ├── package.json │ ├── pages.config.js │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── about.html │ │ ├── assets │ │ │ ├── fonts │ │ │ │ ├── pages.eot │ │ │ │ ├── pages.svg │ │ │ │ ├── pages.ttf │ │ │ │ └── pages.woff │ │ │ ├── images │ │ │ │ ├── brands.svg │ │ │ │ └── logo.png │ │ │ ├── scripts │ │ │ │ └── main.js │ │ │ └── styles │ │ │ │ ├── _icons.scss │ │ │ │ ├── _variables.scss │ │ │ │ ├── demo.scss │ │ │ │ └── main.scss │ │ ├── features.html │ │ ├── index.html │ │ ├── layouts │ │ │ └── basic.html │ │ └── partials │ │ │ ├── footer.html │ │ │ ├── header.html │ │ │ └── tags.html │ └── yarn.lock ├── 03-16-fis-sample │ ├── css │ │ └── style.scss │ ├── fis-conf.js │ ├── img │ │ └── icon.png │ ├── index.html │ ├── js │ │ └── app.js │ └── output │ │ ├── assets │ │ ├── css │ │ │ ├── style.css │ │ │ └── style.scss │ │ ├── img │ │ │ └── icon.png │ │ └── js │ │ │ └── app.js │ │ └── index.html └── 作业案例基础代码.zip └── module-02 └── 编程题基础代码.zip /.editorconfig: -------------------------------------------------------------------------------- 1 | # For more information about the properties used in this file 2 | # please see the EditorConfig documentation: 3 | # https://editorconfig.org/ 4 | 5 | root = true 6 | 7 | [*] 8 | charset = utf-8 9 | end_of_line = lf 10 | indent_size = 2 11 | indent_style = space 12 | insert_final_newline = true 13 | max_line_length = 80 14 | trim_trailing_whitespace = true 15 | 16 | [*.md] 17 | max_line_length = 0 18 | trim_trailing_whitespace = false 19 | 20 | [COMMIT_EDITMSG] 21 | max_line_length = 0 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | 3 | language: node_js 4 | 5 | node_js: 6 | - lts/* 7 | 8 | notifications: 9 | email: 10 | on_success: never 11 | on_failure: change 12 | 13 | script: 14 | - npm run format 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 汪磊 (https://zce.me) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # fed-e-code 2 | 3 | 训练营一期资料整合至：https://github.com/lagoufed/fed-e-code 4 | 5 | > 大前端高薪进阶训练营录播部分代码 6 | 7 | ## 目录结构说明 8 | 9 | ```diff 10 | . 11 | ├── part-01 ·········································· 第一阶段 12 | │ ├── module-01 ···································· 模块一 13 | │ │ ├── 01-01-es2015-spec ························ 任务一第一部分 14 | │ │ ├── 01-02-es2016-spec ························ 任务一第二部分 15 | │ │ ├── 01-03-es2017-spec ························ 任务一第三部分 16 | │ │ ├── 02-01-asynchronous ······················· 任务二 17 | │ │ ├── 03-01-type-system ························ 任务三第一部分 18 | │ │ ├── 03-02-flow ······························· 任务三第二部分 19 | │ │ └── 03-03-typescript ························· 任务三第三部分 20 | │ └── module-02 21 | └── README.md 22 | ``` 23 | 24 | 其他部分，以此类推 😀 25 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/00-prepare.js: -------------------------------------------------------------------------------- 1 | console.log('准备工作') 2 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/02-const.js: -------------------------------------------------------------------------------- 1 | // const name = 'zce' 2 | // 恒量声明过后不允许重新赋值 3 | // name = 'jack' 4 | 5 | // 恒量要求声明同时赋值 6 | // const name 7 | // name = 'zce' 8 | 9 | // 恒量只是要求内层指向不允许被修改 10 | // const obj = {} 11 | // 对于数据成员的修改是没有问题的 12 | // obj.name = 'zce' 13 | 14 | // obj = {} 15 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/03-array-destructuring.js: -------------------------------------------------------------------------------- 1 | // 数组的解构 2 | 3 | const arr = [100, 200, 300] 4 | 5 | // const foo = arr[0] 6 | // const bar = arr[1] 7 | // const baz = arr[2] 8 | // console.log(foo, bar, baz) 9 | 10 | // const [foo, bar, baz] = arr 11 | // console.log(foo, bar, baz) 12 | 13 | // const [, , baz] = arr 14 | // console.log(baz) 15 | 16 | // const [foo, ...rest] = arr 17 | // console.log(rest) 18 | 19 | // const [foo, bar, baz, more] = arr 20 | // console.log(more) 21 | 22 | // const [foo, bar, baz = 123, more = 'default value'] = arr 23 | // console.log(bar, more) 24 | 25 | const path = '/foo/bar/baz' 26 | // const tmp = path.split('/') 27 | // const rootdir = tmp[1] 28 | 29 | const [, rootdir] = path.split('/') 30 | console.log(rootdir) 31 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/04-object-destructuring.js: -------------------------------------------------------------------------------- 1 | // 对象的解构 2 | 3 | const obj = { name: 'zce', age: 18 } 4 | 5 | // const { name } = obj 6 | // console.log(name) 7 | 8 | // const name = 'tom' 9 | // const { name: objName } = obj 10 | // console.log(objName) 11 | 12 | // const name = 'tom' 13 | // const { name: objName = 'jack' } = obj 14 | // console.log(objName) 15 | 16 | const { log } = console 17 | log('foo') 18 | log('bar') 19 | log('123') 20 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/05-template-strings.js: -------------------------------------------------------------------------------- 1 | // 模板字符串 2 | 3 | // 反引号包裹 4 | // const str = `hello es2015, this is a string` 5 | 6 | // 允许换行 7 | // const str = `hello es2015, 8 | 9 | // this is a \`string\`` 10 | 11 | // console.log(str) 12 | 13 | const name = 'tom' 14 | // 可以通过 ${} 插入表达式，表达式的执行结果将会输出到对应位置 15 | const msg = `hey, ${name} --- ${1 + 2} ---- ${Math.random()}` 16 | console.log(msg) 17 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/06-tagged-templates.js: -------------------------------------------------------------------------------- 1 | // 带标签的模板字符串 2 | 3 | // 模板字符串的标签就是一个特殊的函数， 4 | // 使用这个标签就是调用这个函数 5 | // const str = console.log`hello world` 6 | 7 | const name = 'tom' 8 | const gender = false 9 | 10 | function myTagFunc (strings, name, gender) { 11 | // console.log(strings, name, gender) 12 | // return '123' 13 | const sex = gender ? 'man' : 'woman' 14 | return strings[0] + name + strings[1] + sex + strings[2] 15 | } 16 | 17 | const result = myTagFunc`hey, ${name} is a ${gender}.` 18 | 19 | console.log(result) 20 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/07-strings-ext-methods.js: -------------------------------------------------------------------------------- 1 | // 字符串的扩展方法 2 | 3 | const message = 'Error: foo is not defined.' 4 | 5 | console.log( 6 | // message.startsWith('Error') 7 | // message.endsWith('.') 8 | message.includes('foo') 9 | ) 10 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/08-parmeter-defaults.js: -------------------------------------------------------------------------------- 1 | // 函数参数的默认值 2 | 3 | // function foo (enable) { 4 | // // 短路运算很多情况下是不适合判断默认参数的，例如 0 '' false null 5 | // // enable = enable || true 6 | // enable = enable === undefined ? true : enable 7 | // console.log('foo invoked - enable: ') 8 | // console.log(enable) 9 | // } 10 | 11 | // 默认参数一定是在形参列表的最后 12 | function foo (enable = true) { 13 | console.log('foo invoked - enable: ') 14 | console.log(enable) 15 | } 16 | 17 | foo(false) 18 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/09-rest-parameter.js: -------------------------------------------------------------------------------- 1 | // 剩余参数 2 | 3 | // function foo () { 4 | // console.log(arguments) 5 | // } 6 | 7 | function foo (first, ...args) { 8 | console.log(args) 9 | } 10 | 11 | foo(1, 2, 3, 4) 12 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/10-spread-parameter.js: -------------------------------------------------------------------------------- 1 | // 展开数组参数 2 | 3 | const arr = ['foo', 'bar', 'baz'] 4 | 5 | // console.log( 6 | // arr[0], 7 | // arr[1], 8 | // arr[2], 9 | // ) 10 | 11 | // console.log.apply(console, arr) 12 | 13 | console.log(...arr) 14 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/11-arrow-functions.js: -------------------------------------------------------------------------------- 1 | // 箭头函数 2 | 3 | // function inc (number) { 4 | // return number + 1 5 | // } 6 | 7 | // 最简方式 8 | // const inc = n => n + 1 9 | 10 | // 完整参数列表，函数体多条语句，返回值仍需 return 11 | const inc = (n, m) => { 12 | console.log('inc invoked') 13 | return n + 1 14 | } 15 | 16 | console.log(inc(100)) 17 | 18 | const arr = [1, 2, 3, 4, 5, 6, 7] 19 | 20 | // arr.filter(function (item) { 21 | // return item % 2 22 | // }) 23 | 24 | // 常用场景，回调函数 25 | arr.filter(i => i % 2) 26 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/12-arrow-func-this.js: -------------------------------------------------------------------------------- 1 | // 箭头函数与 this 2 | // 箭头函数不会改变 this 指向 3 | 4 | const person = { 5 | name: 'tom', 6 | // sayHi: function () { 7 | // console.log(`hi, my name is ${this.name}`) 8 | // } 9 | sayHi: () => { 10 | console.log(`hi, my name is ${this.name}`) 11 | }, 12 | sayHiAsync: function () { 13 | // const _this = this 14 | // setTimeout(function () { 15 | // console.log(_this.name) 16 | // }, 1000) 17 | 18 | console.log(this) 19 | setTimeout(() => { 20 | // console.log(this.name) 21 | console.log(this) 22 | }, 1000) 23 | } 24 | } 25 | 26 | person.sayHiAsync() 27 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/13-object-literal.js: -------------------------------------------------------------------------------- 1 | // 对象字面量 2 | 3 | const bar = '345' 4 | 5 | const obj = { 6 | foo: 123, 7 | // bar: bar 8 | // 属性名与变量名相同，可以省略 : bar 9 | bar, 10 | // method1: function () { 11 | // console.log('method111') 12 | // } 13 | // 方法可以省略 : function 14 | method1 () { 15 | console.log('method111') 16 | // 这种方法就是普通的函数，同样影响 this 指向。 17 | console.log(this) 18 | }, 19 | // Math.random(): 123 // 不允许 20 | // 通过 [] 让表达式的结果作为属性名 21 | [bar]: 123 22 | } 23 | 24 | // obj[Math.random()] = 123 25 | 26 | console.log(obj) 27 | obj.method1() 28 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/14-object-assign.js: -------------------------------------------------------------------------------- 1 | // Object.assign 方法 2 | 3 | // const source1 = { 4 | // a: 123, 5 | // b: 123 6 | // } 7 | 8 | // const source2 = { 9 | // b: 789, 10 | // d: 789 11 | // } 12 | 13 | // const target = { 14 | // a: 456, 15 | // c: 456 16 | // } 17 | 18 | // const result = Object.assign(target, source1, source2) 19 | 20 | // console.log(target) 21 | // console.log(result === target) 22 | 23 | // 应用场景 24 | 25 | function func (obj) { 26 | // obj.name = 'func obj' 27 | // console.log(obj) 28 | 29 | const funcObj = Object.assign({}, obj) 30 | funcObj.name = 'func obj' 31 | console.log(funcObj) 32 | } 33 | 34 | const obj = { name: 'global obj' } 35 | 36 | func(obj) 37 | console.log(obj) 38 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/15-object-is.js: -------------------------------------------------------------------------------- 1 | // Object.is 2 | 3 | console.log( 4 | // 0 == false // => true 5 | // 0 === false // => false 6 | // +0 === -0 // => true 7 | // NaN === NaN // => false 8 | // Object.is(+0, -0) // => false 9 | // Object.is(NaN, NaN) // => true 10 | ) 11 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/16-reflect.js: -------------------------------------------------------------------------------- 1 | // Reflect 对象 2 | 3 | // const obj = { 4 | // foo: '123', 5 | // bar: '456' 6 | // } 7 | 8 | // const proxy = new Proxy(obj, { 9 | // get (target, property) { 10 | // console.log('watch logic~') 11 | 12 | // return Reflect.get(target, property) 13 | // } 14 | // }) 15 | 16 | // console.log(proxy.foo) 17 | 18 | const obj = { 19 | name: 'zce', 20 | age: 18 21 | } 22 | 23 | // console.log('name' in obj) 24 | // console.log(delete obj['age']) 25 | // console.log(Object.keys(obj)) 26 | 27 | console.log(Reflect.has(obj, 'name')) 28 | console.log(Reflect.deleteProperty(obj, 'age')) 29 | console.log(Reflect.ownKeys(obj)) -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/17-class.js: -------------------------------------------------------------------------------- 1 | // class 关键词 2 | 3 | // function Person (name) { 4 | // this.name = name 5 | // } 6 | 7 | // Person.prototype.say = function () { 8 | // console.log(`hi, my name is ${this.name}`) 9 | // } 10 | 11 | class Person { 12 | constructor (name) { 13 | this.name = name 14 | } 15 | 16 | say () { 17 | console.log(`hi, my name is ${this.name}`) 18 | } 19 | } 20 | 21 | const p = new Person('tom') 22 | p.say() 23 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/18-static-method.js: -------------------------------------------------------------------------------- 1 | // static 方法 2 | 3 | class Person { 4 | constructor (name) { 5 | this.name = name 6 | } 7 | 8 | say () { 9 | console.log(`hi, my name is ${this.name}`) 10 | } 11 | 12 | static create (name) { 13 | return new Person(name) 14 | } 15 | } 16 | 17 | const tom = Person.create('tom') 18 | tom.say() 19 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/19-class-extends.js: -------------------------------------------------------------------------------- 1 | // extends 继承 2 | 3 | class Person { 4 | constructor (name) { 5 | this.name = name 6 | } 7 | 8 | say () { 9 | console.log(`hi, my name is ${this.name}`) 10 | } 11 | } 12 | 13 | class Student extends Person { 14 | constructor (name, number) { 15 | super(name) // 父类构造函数 16 | this.number = number 17 | } 18 | 19 | hello () { 20 | super.say() // 调用父类成员 21 | console.log(`my school number is ${this.number}`) 22 | } 23 | } 24 | 25 | const s = new Student('jack', '100') 26 | s.hello() 27 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/20-set.js: -------------------------------------------------------------------------------- 1 | // Set 数据结构 2 | 3 | const s = new Set() 4 | 5 | s.add(1).add(2).add(3).add(4).add(2) 6 | 7 | // console.log(s) 8 | 9 | // s.forEach(i => console.log(i)) 10 | 11 | // for (let i of s) { 12 | // console.log(i) 13 | // } 14 | 15 | // console.log(s.size) 16 | 17 | // console.log(s.has(100)) 18 | 19 | // console.log(s.delete(3)) 20 | // console.log(s) 21 | 22 | // s.clear() 23 | // console.log(s) 24 | 25 | // 应用场景：数组去重 26 | 27 | const arr = [1, 2, 1, 3, 4, 1] 28 | 29 | // const result = Array.from(new Set(arr)) 30 | const result = [...new Set(arr)] 31 | 32 | console.log(result) 33 | 34 | // 弱引用版本 WeakSet 35 | // 差异就是 Set 中会对所使用到的数据产生引用 36 | // 即便这个数据在外面被消耗，但是由于 Set 引用了这个数据，所以依然不会回收 37 | // 而 WeakSet 的特点就是不会产生引用， 38 | // 一旦数据销毁，就可以被回收，所以不会产生内存泄漏问题。 39 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/21-map.js: -------------------------------------------------------------------------------- 1 | // Map 数据结构 2 | 3 | // const obj = {} 4 | // obj[true] = 'value' 5 | // obj[123] = 'value' 6 | // obj[{ a: 1 }] = 'value' 7 | 8 | // console.log(Object.keys(obj)) 9 | // console.log(obj['[object Object]']) 10 | 11 | const m = new Map() 12 | 13 | const tom = { name: 'tom' } 14 | 15 | m.set(tom, 90) 16 | 17 | console.log(m) 18 | 19 | console.log(m.get(tom)) 20 | 21 | // m.has() 22 | // m.delete() 23 | // m.clear() 24 | 25 | m.forEach((value, key) => { 26 | console.log(value, key) 27 | }) 28 | 29 | // 弱引用版本 WeakMap 30 | // 差异就是 Map 中会对所使用到的数据产生引用 31 | // 即便这个数据在外面被消耗，但是由于 Map 引用了这个数据，所以依然不会回收 32 | // 而 WeakMap 的特点就是不会产生引用， 33 | // 一旦数据销毁，就可以被回收，所以不会产生内存泄漏问题。 34 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/23-symbol-more.js: -------------------------------------------------------------------------------- 1 | // Symbol 补充 2 | 3 | // console.log( 4 | // // Symbol() === Symbol() 5 | // Symbol('foo') === Symbol('foo') 6 | // ) 7 | 8 | // Symbol 全局注册表 ---------------------------------------------------- 9 | 10 | // const s1 = Symbol.for('foo') 11 | // const s2 = Symbol.for('foo') 12 | // console.log(s1 === s2) 13 | 14 | // console.log( 15 | // Symbol.for(true) === Symbol.for('true') 16 | // ) 17 | 18 | // 内置 Symbol 常量 --------------------------------------------------- 19 | 20 | // console.log(Symbol.iterator) 21 | // console.log(Symbol.hasInstance) 22 | 23 | // const obj = { 24 | // [Symbol.toStringTag]: 'XObject' 25 | // } 26 | // console.log(obj.toString()) 27 | 28 | // Symbol 属性名获取 --------------------------------------------------- 29 | 30 | const obj = { 31 | [Symbol()]: 'symbol value', 32 | foo: 'normal value' 33 | } 34 | 35 | // for (var key in obj) { 36 | // console.log(key) 37 | // } 38 | // console.log(Object.keys(obj)) 39 | // console.log(JSON.stringify(obj)) 40 | 41 | console.log(Object.getOwnPropertySymbols(obj)) 42 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/24-for-of.js: -------------------------------------------------------------------------------- 1 | // for...of 循环 2 | 3 | const arr = [100, 200, 300, 400] 4 | 5 | // for (const item of arr) { 6 | // console.log(item) 7 | // } 8 | 9 | // for...of 循环可以替代 数组对象的 forEach 方法 10 | 11 | // arr.forEach(item => { 12 | // console.log(item) 13 | // }) 14 | 15 | // for (const item of arr) { 16 | // console.log(item) 17 | // if (item > 100) { 18 | // break 19 | // } 20 | // } 21 | 22 | // forEach 无法跳出循环，必须使用 some 或者 every 方法 23 | 24 | // arr.forEach() // 不能跳出循环 25 | // arr.some() 26 | // arr.every() 27 | 28 | // 遍历 Set 与遍历数组相同 29 | 30 | // const s = new Set(['foo', 'bar']) 31 | 32 | // for (const item of s) { 33 | // console.log(item) 34 | // } 35 | 36 | // 遍历 Map 可以配合数组结构语法，直接获取键值 37 | 38 | // const m = new Map() 39 | // m.set('foo', '123') 40 | // m.set('bar', '345') 41 | 42 | // for (const [key, value] of m) { 43 | // console.log(key, value) 44 | // } 45 | 46 | // 普通对象不能被直接 for...of 遍历 47 | 48 | // const obj = { foo: 123, bar: 456 } 49 | 50 | // for (const item of obj) { 51 | // console.log(item) 52 | // } 53 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/25-iterator.js: -------------------------------------------------------------------------------- 1 | // 迭代器（Iterator） 2 | 3 | const set = new Set(['foo', 'bar', 'baz']) 4 | 5 | const iterator = set[Symbol.iterator]() 6 | 7 | // console.log(iterator.next()) 8 | // console.log(iterator.next()) 9 | // console.log(iterator.next()) 10 | // console.log(iterator.next()) 11 | // console.log(iterator.next()) 12 | 13 | while (true) { 14 | const current = iterator.next() 15 | if (current.done) { 16 | break // 迭代已经结束了，没必要继续了 17 | } 18 | console.log(current.value) 19 | } 20 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/26-iterable.js: -------------------------------------------------------------------------------- 1 | // 实现可迭代接口（Iterable） 2 | 3 | // const obj = { 4 | // [Symbol.iterator]: function () { 5 | // return { 6 | // next: function () { 7 | // return { 8 | // value: 'zce', 9 | // done: true 10 | // } 11 | // } 12 | // } 13 | // } 14 | // } 15 | 16 | const obj = { 17 | store: ['foo', 'bar', 'baz'], 18 | 19 | [Symbol.iterator]: function () { 20 | let index = 0 21 | const self = this 22 | 23 | return { 24 | next: function () { 25 | const result = { 26 | value: self.store[index], 27 | done: index >= self.store.length 28 | } 29 | index++ 30 | return result 31 | } 32 | } 33 | } 34 | } 35 | 36 | for (const item of obj) { 37 | console.log('循环体', item) 38 | } 39 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/28-generator.js: -------------------------------------------------------------------------------- 1 | // Generator 函数 2 | 3 | // function * foo () { 4 | // console.log('zce') 5 | // return 100 6 | // } 7 | 8 | // const result = foo() 9 | // console.log(result.next()) 10 | 11 | function * foo () { 12 | console.log('1111') 13 | yield 100 14 | console.log('2222') 15 | yield 200 16 | console.log('3333') 17 | yield 300 18 | } 19 | 20 | const generator = foo() 21 | 22 | console.log(generator.next()) // 第一次调用，函数体开始执行，遇到第一个 yield 暂停 23 | console.log(generator.next()) // 第二次调用，从暂停位置继续，直到遇到下一个 yield 再次暂停 24 | console.log(generator.next()) // 。。。 25 | console.log(generator.next()) // 第四次调用，已经没有需要执行的内容了，所以直接得到 undefined 26 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/29-generator-usage.js: -------------------------------------------------------------------------------- 1 | // Generator 应用 2 | 3 | // 案例1：发号器 4 | 5 | function * createIdMaker () { 6 | let id = 1 7 | while (true) { 8 | yield id++ 9 | } 10 | } 11 | 12 | const idMaker = createIdMaker() 13 | 14 | console.log(idMaker.next().value) 15 | console.log(idMaker.next().value) 16 | console.log(idMaker.next().value) 17 | console.log(idMaker.next().value) 18 | 19 | // 案例2：使用 Generator 函数实现 iterator 方法 20 | 21 | const todos = { 22 | life: ['吃饭', '睡觉', '打豆豆'], 23 | learn: ['语文', '数学', '外语'], 24 | work: ['喝茶'], 25 | [Symbol.iterator]: function * () { 26 | const all = [...this.life, ...this.learn, ...this.work] 27 | for (const item of all) { 28 | yield item 29 | } 30 | } 31 | } 32 | 33 | for (const item of todos) { 34 | console.log(item) 35 | } 36 | -------------------------------------------------------------------------------- /part-01/module-01/01-01-es2015-spec/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "es2015-spec", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "devDependencies": { 8 | "nodemon": "^1.19.4" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /part-01/module-01/01-02-es2016-spec/index.js: -------------------------------------------------------------------------------- 1 | // ECMAScript 2016 2 | 3 | // Array.prototype.includes ----------------------------------- 4 | 5 | // const arr = ['foo', 1, NaN, false] 6 | 7 | // 找到返回元素下标 8 | // console.log(arr.indexOf('foo')) 9 | // 找不到返回 -1 10 | // console.log(arr.indexOf('bar')) 11 | // 无法找到数组中的 NaN 12 | // console.log(arr.indexOf(NaN)) 13 | 14 | // 直接返回是否存在指定元素 15 | // console.log(arr.includes('foo')) 16 | // 能够查找 NaN 17 | // console.log(arr.includes(NaN)) 18 | 19 | // 指数运算符 --------------------------------------------------- 20 | 21 | // console.log(Math.pow(2, 10)) 22 | 23 | console.log(2 ** 10) 24 | -------------------------------------------------------------------------------- /part-01/module-01/01-02-es2016-spec/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "es2016-spec", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "devDependencies": { 8 | "nodemon": "^2.0.1" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /part-01/module-01/01-03-es2017-spec/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "es2017-spec", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "devDependencies": { 8 | "nodemon": "^2.0.1" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /part-01/module-01/02-01-asynchronous/01-sync-mode.js: -------------------------------------------------------------------------------- 1 | console.log('global begin') 2 | 3 | function bar () { 4 |   console.log('bar task') 5 | } 6 | 7 | function foo () { 8 |   console.log('foo task') 9 |   bar() 10 | } 11 | 12 | foo() 13 | 14 | console.log('global end') 15 | -------------------------------------------------------------------------------- /part-01/module-01/02-01-asynchronous/02-async-mode.js: -------------------------------------------------------------------------------- 1 | console.log('global begin') 2 | 3 | setTimeout(function timer1 () { 4 |   console.log('timer1 invoke') 5 | }, 1800) 6 | 7 | setTimeout(function timer2 () { 8 |   console.log('timer2 invoke') 9 | 10 |   setTimeout(function inner () { 11 |     console.log('inner invoke') 12 |   }, 1000) 13 | }, 1000) 14 | 15 | console.log('global end') 16 | -------------------------------------------------------------------------------- /part-01/module-01/02-01-asynchronous/03-callback-hell.js: -------------------------------------------------------------------------------- 1 | // 回调函数 2 | 3 | function foo (callback) { 4 | setTimeout(function () { 5 | callback() 6 | }, 3000) 7 | } 8 | 9 | foo(function () { 10 | console.log('这就是一个回调函数') 11 | console.log('调用者定义这个函数，执行者执行这个函数') 12 | console.log('其实就是调用者告诉执行者异步任务结束后应该做什么') 13 | }) 14 | 15 | // 回调地狱，只是示例，不能运行 16 | 17 | $.get('/url1', function (data1) { 18 | $.get('/url2', data1, function (data2) { 19 | $.get('/url3', data2, function (data3) { 20 | $.get('/url4', data3, function (data4) { 21 | $.get('/url5', data4, function (data5) { 22 | $.get('/url6', data5, function (data6) { 23 | $.get('/url7', data6, function (data7) { 24 | // 略微夸张了一点点 25 | }) 26 | }) 27 | }) 28 | }) 29 | }) 30 | }) 31 | }) 32 | -------------------------------------------------------------------------------- /part-01/module-01/02-01-asynchronous/04-promise-sample.js: -------------------------------------------------------------------------------- 1 | // Promise 基本示例 2 | 3 | const promise = new Promise(function (resolve, reject) { 4 | // 这里用于“兑现”承诺 5 | 6 | // resolve(100) // 承诺达成 7 | 8 | reject(new Error('promise rejected')) // 承诺失败 9 | }) 10 | 11 | promise.then(function (value) { 12 | // 即便没有异步操作，then 方法中传入的回调仍然会被放入队列，等待下一轮执行 13 | console.log('resolved', value) 14 | }, function (error) { 15 | console.log('rejected', error) 16 | }) 17 | 18 | console.log('end') 19 | -------------------------------------------------------------------------------- /part-01/module-01/02-01-asynchronous/05-promise-ajax.js: -------------------------------------------------------------------------------- 1 | // Promise 方式的 AJAX 2 | 3 | function ajax (url) { 4 | return new Promise(function (resolve, reject) { 5 | var xhr = new XMLHttpRequest() 6 | xhr.open('GET', url) 7 | xhr.responseType = 'json' 8 | xhr.onload = function () { 9 | if (this.status === 200) { 10 | resolve(this.response) 11 | } else { 12 | reject(new Error(this.statusText)) 13 | } 14 | } 15 | xhr.send() 16 | }) 17 | } 18 | 19 | ajax('/api/foo.json').then(function (res) { 20 | console.log(res) 21 | }, function (error) { 22 | console.log(error) 23 | }) 24 | -------------------------------------------------------------------------------- /part-01/module-01/02-01-asynchronous/06-promise-nesting.js: -------------------------------------------------------------------------------- 1 | // Promise 常见误区 2 | 3 | function ajax (url) { 4 | return new Promise(function (resolve, reject) { 5 | var xhr = new XMLHttpRequest() 6 | xhr.open('GET', url) 7 | xhr.responseType = 'json' 8 | xhr.onload = function () { 9 | if (this.status === 200) { 10 | resolve(this.response) 11 | } else { 12 | reject(new Error(this.statusText)) 13 | } 14 | } 15 | xhr.send() 16 | }) 17 | } 18 | 19 | // 嵌套使用 Promise 是最常见的误区 20 | // ajax('/api/urls.json').then(function (urls) { 21 | // ajax(urls.users).then(function (users) { 22 | // ajax(urls.users).then(function (users) { 23 | // ajax(urls.users).then(function (users) { 24 | // ajax(urls.users).then(function (users) { 25 | 26 | // }) 27 | // }) 28 | // }) 29 | // }) 30 | // }) 31 | -------------------------------------------------------------------------------- /part-01/module-01/02-01-asynchronous/11-microtasks.js: -------------------------------------------------------------------------------- 1 | // 微任务 2 | 3 | console.log('global start') 4 | 5 | // setTimeout 的回调是 宏任务，进入回调队列排队 6 | setTimeout(() => { 7 | console.log('setTimeout') 8 | }, 0) 9 | 10 | // Promise 的回调是 微任务，本轮调用末尾直接执行 11 | Promise.resolve() 12 | .then(() => { 13 | console.log('promise') 14 | }) 15 | .then(() => { 16 | console.log('promise 2') 17 | }) 18 | .then(() => { 19 | console.log('promise 3') 20 | }) 21 | 22 | console.log('global end') 23 | -------------------------------------------------------------------------------- /part-01/module-01/02-01-asynchronous/13-generator.js: -------------------------------------------------------------------------------- 1 | // 生成器函数回顾 2 | 3 | function * foo () { 4 | console.log('start') 5 | 6 | try { 7 | const res = yield 'foo' 8 | console.log(res) 9 | } catch (e) { 10 | console.log(e) 11 | } 12 | } 13 | 14 | const generator = foo() 15 | 16 | const result = generator.next() 17 | console.log(result) 18 | 19 | 20 | // generator.next('bar') 21 | 22 | generator.throw(new Error('Generator error')) 23 | -------------------------------------------------------------------------------- /part-01/module-01/02-01-asynchronous/15-async-await.js: -------------------------------------------------------------------------------- 1 | // Async / Await 语法糖 2 | 3 | function ajax (url) { 4 | return new Promise((resolve, reject) => { 5 | var xhr = new XMLHttpRequest() 6 | xhr.open('GET', url) 7 | xhr.responseType = 'json' 8 | xhr.onload = () => { 9 | if (xhr.status === 200) { 10 | resolve(xhr.response) 11 | } else { 12 | reject(new Error(xhr.statusText)) 13 | } 14 | } 15 | xhr.send() 16 | }) 17 | } 18 | 19 | function co (generator) { 20 | const g = generator() 21 | 22 | function handleResult (result) { 23 | if (result.done) return // 生成器函数结束 24 | result.value.then(data => { 25 | handleResult(g.next(data)) 26 | }, error => { 27 | g.throw(error) 28 | }) 29 | } 30 | 31 | handleResult(g.next()) 32 | } 33 | 34 | async function main () { 35 | try { 36 | const users = await ajax('/api/users.json') 37 | console.log(users) 38 | 39 | const posts = await ajax('/api/posts.json') 40 | console.log(posts) 41 | 42 | const urls = await ajax('/api/urls.json') 43 | console.log(urls) 44 | } catch (e) { 45 | console.log(e) 46 | } 47 | } 48 | 49 | // co(main) 50 | const promise = main() 51 | 52 | promise.then(() => { 53 | console.log('all completed') 54 | }) 55 | -------------------------------------------------------------------------------- /part-01/module-01/02-01-asynchronous/README.md: -------------------------------------------------------------------------------- 1 | # javascript-asynchronous 2 | 3 | ## Usage 4 | 5 | ```sh 6 | # install deps 7 | $ yarn # or npm i 8 | 9 | # run every examles 10 | $ yarn webpack-dev-server 11 | # e.g. 12 | $ yarn webpack-dev-server 01-sync-mode.js 13 | ``` 14 | -------------------------------------------------------------------------------- /part-01/module-01/02-01-asynchronous/api/posts.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Hello world", 4 | "body": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 5 | }, 6 | { 7 | "title": "25 forever", 8 | "body": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 9 | } 10 | ] 11 | -------------------------------------------------------------------------------- /part-01/module-01/02-01-asynchronous/api/urls.json: -------------------------------------------------------------------------------- 1 | { 2 | "users": "/api/users.json", 3 | "posts": "/api/posts.json" 4 | } 5 | -------------------------------------------------------------------------------- /part-01/module-01/02-01-asynchronous/api/users.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "zce", 4 | "age": 24 5 | }, 6 | { 7 | "name": "alan", 8 | "age": 25 9 | } 10 | ] 11 | -------------------------------------------------------------------------------- /part-01/module-01/02-01-asynchronous/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "asynchronous", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "devDependencies": { 8 | "html-webpack-plugin": "^3.2.0", 9 | "webpack": "^4.41.2", 10 | "webpack-cli": "^3.3.10", 11 | "webpack-dev-server": "^3.9.0" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /part-01/module-01/02-01-asynchronous/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require('html-webpack-plugin') 2 | module.exports = { 3 | mode: 'none', 4 | stats: 'none', 5 | devtool: 'source-map', 6 | plugins: [ 7 | new HtmlWebpackPlugin() 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /part-01/module-01/03-01-type-system/01-weakly-typed.js: -------------------------------------------------------------------------------- 1 | // JavaScript 弱类型产生的问题 2 | 3 | // 1. 异常需要等到运行时才能发现 4 | 5 | // const obj = {} 6 | 7 | // // obj.foo() 8 | 9 | // setTimeout(() => { 10 | // obj.foo() 11 | // }, 1000000) 12 | 13 | // ========================================= 14 | 15 | // 2. 函数功能可能发生改变 16 | 17 | // function sum (a, b) { 18 | // return a + b 19 | // } 20 | 21 | // console.log(sum(100, 100)) 22 | // console.log(sum(100, '100')) 23 | 24 | // ========================================= 25 | 26 | // 3. 对象索引器的错误用法 27 | 28 | const obj = {} 29 | 30 | obj[true] = 100 // 属性名会自动转换为字符串 31 | 32 | console.log(obj['true']) 33 | -------------------------------------------------------------------------------- /part-01/module-01/03-01-type-system/02-strongly-typed.js: -------------------------------------------------------------------------------- 1 | // 强类型的优势 2 | 3 | // 1. 强类型代码错误更早暴露 4 | 5 | // 2. 强类型代码更智能，编码更准确 6 | 7 | // function render (element) { 8 | // element.className = 'container' 9 | // element.innerHtml = 'hello world' 10 | // } 11 | 12 | // ================================= 13 | 14 | // 3. 重构更可靠 15 | 16 | // const util = { 17 | // aaa: () => { 18 | // console.log('util func') 19 | // } 20 | // } 21 | 22 | // ================================= 23 | 24 | // 4. 减少了代码层面的不必要的类型判断 25 | 26 | function sum (a, b) { 27 | if (typeof a !== 'number' || typeof b !== 'number') { 28 | throw new TypeError('arguments must be a number') 29 | } 30 | 31 | return a + b 32 | } 33 | -------------------------------------------------------------------------------- /part-01/module-01/03-01-type-system/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "type-system", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT" 7 | } 8 | -------------------------------------------------------------------------------- /part-01/module-01/03-02-flow/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-flow"] 3 | } 4 | -------------------------------------------------------------------------------- /part-01/module-01/03-02-flow/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | [include] 4 | 5 | [libs] 6 | 7 | [lints] 8 | 9 | [options] 10 | 11 | [strict] 12 | -------------------------------------------------------------------------------- /part-01/module-01/03-02-flow/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flow", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "devDependencies": { 8 | "@babel/cli": "^7.7.5", 9 | "@babel/core": "^7.7.5", 10 | "@babel/preset-flow": "^7.7.4", 11 | "flow-bin": "^0.114.0", 12 | "flow-remove-types": "^2.114.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /part-01/module-01/03-02-flow/src/01-getting-started.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | function sum (a: number, b: number) { 4 | return a + b 5 | } 6 | 7 | sum(100, 100) 8 | 9 | // sum('100', '100') 10 | 11 | // sum('100', 100) 12 | -------------------------------------------------------------------------------- /part-01/module-01/03-02-flow/src/02-type-inference.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 类型推断 3 | * 4 | * @flow 5 | */ 6 | 7 | function square (n) { 8 | return n * n 9 | } 10 | 11 | // square('100') 12 | 13 | square(100) 14 | -------------------------------------------------------------------------------- /part-01/module-01/03-02-flow/src/03-type-annotations.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 类型注解 3 | * 4 | * @flow 5 | */ 6 | 7 | function square (n: number) { 8 | return n * n 9 | } 10 | 11 | let num: number = 100 12 | 13 | // num = 'string' // error 14 | 15 | function foo (): number { 16 | return 100 // ok 17 | // return 'string' // error 18 | } 19 | 20 | function bar (): void { 21 | // return undefined 22 | } 23 | -------------------------------------------------------------------------------- /part-01/module-01/03-02-flow/src/04-primitive-types.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 原始类型 3 | * 4 | * @flow 5 | */ 6 | 7 | const a: string = 'foobar' 8 | 9 | const b: number = Infinity // NaN // 100 10 | 11 | const c: boolean = false // true 12 | 13 | const d: null = null 14 | 15 | const e: void = undefined 16 | 17 | const f: symbol = Symbol() -------------------------------------------------------------------------------- /part-01/module-01/03-02-flow/src/05-array-types.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 数组类型 3 | * 4 | * @flow 5 | */ 6 | 7 | const arr1: Array = [1, 2, 3] 8 | 9 | const arr2: number[] = [1, 2, 3] 10 | 11 | // 元组 12 | const foo: [string, number] = ['foo', 100] 13 | -------------------------------------------------------------------------------- /part-01/module-01/03-02-flow/src/06-object-types.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 对象类型 3 | * 4 | * @flow 5 | */ 6 | 7 | const obj1: { foo: string, bar: number } = { foo: 'string', bar: 100 } 8 | 9 | const obj2: { foo?: string, bar: number } = { bar: 100 } 10 | 11 | const obj3: { [string]: string } = {} 12 | 13 | obj3.key1 = 'value1' 14 | obj3.key2 = 'value2' 15 | 16 | -------------------------------------------------------------------------------- /part-01/module-01/03-02-flow/src/07-function-types.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 函数类型 3 | * 4 | * @flow 5 | */ 6 | 7 | function foo (callback: (string, number) => void) { 8 | callback('string', 100) 9 | } 10 | 11 | foo(function (str, n) { 12 | // str => string 13 | // n => number 14 | }) -------------------------------------------------------------------------------- /part-01/module-01/03-02-flow/src/08-more-types.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 特殊类型 3 | * 4 | * @flow 5 | */ 6 | 7 | // 字面量类型 8 | 9 | const a: 'foo' = 'foo' 10 | 11 | const type: 'success' | 'warning' | 'danger' = 'success' 12 | 13 | // ------------------------ 14 | 15 | // 声明类型 16 | 17 | type StringOrNumber = string | number 18 | 19 | const b: StringOrNumber = 'string' // 100 20 | 21 | // ------------------------ 22 | 23 | // Maybe 类型 24 | 25 | const gender: ?number = undefined 26 | // 相当于 27 | // const gender: number | null | void = undefined 28 | -------------------------------------------------------------------------------- /part-01/module-01/03-02-flow/src/09-mixed-any.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Mixed Any 3 | * 4 | * @flow 5 | */ 6 | 7 | // string | number | boolean | .... 8 | function passMixed (value: mixed) { 9 | if (typeof value === 'string') { 10 | value.substr(1) 11 | } 12 | 13 | if (typeof value === 'number') { 14 | value * value 15 | } 16 | } 17 | 18 | passMixed('string') 19 | 20 | passMixed(100) 21 | 22 | // --------------------------------- 23 | 24 | function passAny (value: any) { 25 | value.substr(1) 26 | 27 | value * value 28 | } 29 | 30 | passAny('string') 31 | 32 | passAny(100) -------------------------------------------------------------------------------- /part-01/module-01/03-02-flow/src/10-runtime-apis.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 运行环境 API 3 | * 4 | * @flow 5 | */ 6 | 7 | const element: HTMLElement | null = document.getElementById('app') -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/01-getting-started.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 可以完全按照 JavaScript 标准语法编写代码 3 | var hello = function (name) { 4 | console.log("Hello, " + name); 5 | }; 6 | hello('TypeScript'); 7 | //# sourceMappingURL=01-getting-started.js.map -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/01-getting-started.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"01-getting-started.js","sourceRoot":"","sources":["../src/01-getting-started.ts"],"names":[],"mappings":";AAAA,6BAA6B;AAE7B,IAAM,KAAK,GAAG,UAAC,IAAS;IACtB,OAAO,CAAC,GAAG,CAAC,YAAU,IAAM,CAAC,CAAA;AAC/B,CAAC,CAAA;AAED,KAAK,CAAC,YAAY,CAAC,CAAA"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/02-primitive-types.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 原始数据类型 3 | var a = 'foobar'; 4 | var b = 100; // NaN Infinity 5 | var c = true; // false 6 | // 在非严格模式（strictNullChecks）下， 7 | // string, number, boolean 都可以为空 8 | // const d: string = null 9 | // const d: number = null 10 | // const d: boolean = null 11 | var e = undefined; 12 | var f = null; 13 | var g = undefined; 14 | // Symbol 是 ES2015 标准中定义的成员， 15 | // 使用它的前提是必须确保有对应的 ES2015 标准库引用 16 | // 也就是 tsconfig.json 中的 lib 选项必须包含 ES2015 17 | var h = Symbol(); 18 | // Promise 19 | // const error: string = 100 20 | //# sourceMappingURL=02-primitive-types.js.map -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/02-primitive-types.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"02-primitive-types.js","sourceRoot":"","sources":["../src/02-primitive-types.ts"],"names":[],"mappings":";AAAA,SAAS;AAET,IAAM,CAAC,GAAW,QAAQ,CAAA;AAE1B,IAAM,CAAC,GAAW,GAAG,CAAA,CAAC,eAAe;AAErC,IAAM,CAAC,GAAY,IAAI,CAAA,CAAC,QAAQ;AAEhC,6BAA6B;AAC7B,gCAAgC;AAChC,yBAAyB;AACzB,yBAAyB;AACzB,0BAA0B;AAE1B,IAAM,CAAC,GAAS,SAAS,CAAA;AAEzB,IAAM,CAAC,GAAS,IAAI,CAAA;AAEpB,IAAM,CAAC,GAAc,SAAS,CAAA;AAE9B,4BAA4B;AAC5B,+BAA+B;AAC/B,yCAAyC;AACzC,IAAM,CAAC,GAAW,MAAM,EAAE,CAAA;AAE1B,UAAU;AAEV,4BAA4B"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/03-module-scope.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 作用域问题 3 | Object.defineProperty(exports, "__esModule", { value: true }); 4 | // 默认文件中的成员会作为全局成员 5 | // 多个文件中有相同成员就会出现冲突 6 | // const a = 123 7 | // 解决办法1: IIFE 提供独立作用域 8 | // (function () { 9 | // const a = 123 10 | // })() 11 | // 解决办法2: 在当前文件使用 export，也就是把当前文件变成一个模块 12 | // 模块有单独的作用域 13 | var a = 123; 14 | //# sourceMappingURL=03-module-scope.js.map -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/03-module-scope.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"03-module-scope.js","sourceRoot":"","sources":["../src/03-module-scope.ts"],"names":[],"mappings":";AAAA,QAAQ;;AAER,kBAAkB;AAClB,mBAAmB;AACnB,gBAAgB;AAEhB,sBAAsB;AACtB,iBAAiB;AACjB,kBAAkB;AAClB,OAAO;AAEP,uCAAuC;AACvC,YAAY;AACZ,IAAM,CAAC,GAAG,GAAG,CAAA"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/04-object-types.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // Object 类型 3 | Object.defineProperty(exports, "__esModule", { value: true }); 4 | // object 类型是指除了原始类型以外的其它类型 5 | var foo = function () { }; // [] // {} 6 | // 如果需要明确限制对象类型，则应该使用这种类型对象字面量的语法，或者是「接口」 7 | var obj = { foo: 123, bar: 'string' }; 8 | // 接口的概念后续介绍 9 | //# sourceMappingURL=04-object-types.js.map -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/04-object-types.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"04-object-types.js","sourceRoot":"","sources":["../src/04-object-types.ts"],"names":[],"mappings":";AAAA,YAAY;;AAIZ,2BAA2B;AAC3B,IAAM,GAAG,GAAW,cAAa,CAAC,CAAA,CAAC,WAAW;AAE9C,yCAAyC;AACzC,IAAM,GAAG,GAAiC,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAA;AAErE,YAAY"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/05-array-types.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 数组类型 3 | Object.defineProperty(exports, "__esModule", { value: true }); 4 | // 数组类型的两种表示方式 5 | var arr1 = [1, 2, 3]; 6 | var arr2 = [1, 2, 3]; 7 | // 案例 ----------------------- 8 | // 如果是 JS，需要判断是不是每个成员都是数字 9 | // 使用 TS，类型有保障，不用添加类型判断 10 | function sum() { 11 | var args = []; 12 | for (var _i = 0; _i < arguments.length; _i++) { 13 | args[_i] = arguments[_i]; 14 | } 15 | return args.reduce(function (prev, current) { return prev + current; }, 0); 16 | } 17 | sum(1, 2, 3); // => 6 18 | //# sourceMappingURL=05-array-types.js.map -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/05-array-types.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"05-array-types.js","sourceRoot":"","sources":["../src/05-array-types.ts"],"names":[],"mappings":";AAAA,OAAO;;AAIP,cAAc;AAEd,IAAM,IAAI,GAAkB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;AAErC,IAAM,IAAI,GAAa,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;AAEhC,6BAA6B;AAE7B,yBAAyB;AACzB,uBAAuB;AACvB,SAAS,GAAG;IAAE,cAAiB;SAAjB,UAAiB,EAAjB,qBAAiB,EAAjB,IAAiB;QAAjB,yBAAiB;;IAC7B,OAAO,IAAI,CAAC,MAAM,CAAC,UAAC,IAAI,EAAE,OAAO,IAAK,OAAA,IAAI,GAAG,OAAO,EAAd,CAAc,EAAE,CAAC,CAAC,CAAA;AAC1D,CAAC;AAED,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA,CAAC,OAAO"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/06-tuple-types.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 元组（Tuple） 3 | Object.defineProperty(exports, "__esModule", { value: true }); 4 | var tuple = [18, 'zce']; 5 | // const age = tuple[0] 6 | // const name = tuple[1] 7 | var age = tuple[0], name = tuple[1]; 8 | // --------------------- 9 | var entries = Object.entries({ 10 | foo: 123, 11 | bar: 456 12 | }); 13 | var _a = entries[0], key = _a[0], value = _a[1]; 14 | // key => foo, value => 123 15 | //# sourceMappingURL=06-tuple-types.js.map -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/06-tuple-types.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"06-tuple-types.js","sourceRoot":"","sources":["../src/06-tuple-types.ts"],"names":[],"mappings":";AAAA,YAAY;;AAIZ,IAAM,KAAK,GAAqB,CAAC,EAAE,EAAE,KAAK,CAAC,CAAA;AAE3C,uBAAuB;AACvB,wBAAwB;AAEjB,IAAA,cAAG,EAAE,eAAI,CAAS;AAEzB,wBAAwB;AAExB,IAAM,OAAO,GAAuB,MAAM,CAAC,OAAO,CAAC;IACjD,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;CACT,CAAC,CAAA;AAEI,IAAA,eAAyB,EAAxB,WAAG,EAAE,aAAmB,CAAA;AAC/B,2BAA2B"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/07-enum-types.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 枚举（Enum） 3 | Object.defineProperty(exports, "__esModule", { value: true }); 4 | var post = { 5 | title: 'Hello TypeScript', 6 | content: 'TypeScript is a typed superset of JavaScript.', 7 | status: 0 /* Draft */ // 3 // 1 // 0 8 | }; 9 | // PostStatus[0] // => Draft 10 | //# sourceMappingURL=07-enum-types.js.map -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/07-enum-types.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"07-enum-types.js","sourceRoot":"","sources":["../src/07-enum-types.ts"],"names":[],"mappings":";AAAA,WAAW;;AAuCX,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,kBAAkB;IACzB,OAAO,EAAE,+CAA+C;IACxD,MAAM,eAAkB,CAAC,cAAc;CACxC,CAAA;AAED,4BAA4B"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/08-function-types.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 函数类型 3 | Object.defineProperty(exports, "__esModule", { value: true }); 4 | function func1(a, b) { 5 | if (b === void 0) { b = 10; } 6 | var rest = []; 7 | for (var _i = 2; _i < arguments.length; _i++) { 8 | rest[_i - 2] = arguments[_i]; 9 | } 10 | return 'func1'; 11 | } 12 | func1(100, 200); 13 | func1(100); 14 | func1(100, 200, 300); 15 | // ----------------------------------------- 16 | var func2 = function (a, b) { 17 | return 'func2'; 18 | }; 19 | //# sourceMappingURL=08-function-types.js.map -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/08-function-types.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"08-function-types.js","sourceRoot":"","sources":["../src/08-function-types.ts"],"names":[],"mappings":";AAAA,OAAO;;AAIP,SAAS,KAAK,CAAE,CAAS,EAAE,CAAc;IAAd,kBAAA,EAAA,MAAc;IAAE,cAAiB;SAAjB,UAAiB,EAAjB,qBAAiB,EAAjB,IAAiB;QAAjB,6BAAiB;;IAC1D,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA;AAEf,KAAK,CAAC,GAAG,CAAC,CAAA;AAEV,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;AAEpB,4CAA4C;AAE5C,IAAM,KAAK,GAAqC,UAAU,CAAS,EAAE,CAAS;IAC5E,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/09-any-types.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 任意类型（弱类型） 3 | Object.defineProperty(exports, "__esModule", { value: true }); 4 | function stringify(value) { 5 | return JSON.stringify(value); 6 | } 7 | stringify('string'); 8 | stringify(100); 9 | stringify(true); 10 | var foo = 'string'; 11 | foo = 100; 12 | foo.bar(); 13 | // any 类型是不安全的 14 | //# sourceMappingURL=09-any-types.js.map -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/09-any-types.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"09-any-types.js","sourceRoot":"","sources":["../src/09-any-types.ts"],"names":[],"mappings":";AAAA,YAAY;;AAIZ,SAAS,SAAS,CAAE,KAAU;IAC5B,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;AAC9B,CAAC;AAED,SAAS,CAAC,QAAQ,CAAC,CAAA;AAEnB,SAAS,CAAC,GAAG,CAAC,CAAA;AAEd,SAAS,CAAC,IAAI,CAAC,CAAA;AAEf,IAAI,GAAG,GAAQ,QAAQ,CAAA;AAEvB,GAAG,GAAG,GAAG,CAAA;AAET,GAAG,CAAC,GAAG,EAAE,CAAA;AAET,cAAc"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/10-type-inference.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 隐式类型推断 3 | Object.defineProperty(exports, "__esModule", { value: true }); 4 | var age = 18; // number 5 | // age = 'string' 6 | var foo; 7 | foo = 100; 8 | foo = 'string'; 9 | // 建议为每个变量添加明确的类型标准 10 | //# sourceMappingURL=10-type-inference.js.map -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/10-type-inference.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"10-type-inference.js","sourceRoot":"","sources":["../src/10-type-inference.ts"],"names":[],"mappings":";AAAA,SAAS;;AAIT,IAAI,GAAG,GAAG,EAAE,CAAA,CAAC,SAAS;AAEtB,iBAAiB;AAEjB,IAAI,GAAG,CAAA;AAEP,GAAG,GAAG,GAAG,CAAA;AAET,GAAG,GAAG,QAAQ,CAAA;AAEd,mBAAmB"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/11-type-assertion.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 类型断言 3 | Object.defineProperty(exports, "__esModule", { value: true }); 4 | // 假定这个 nums 来自一个明确的接口 5 | var nums = [110, 120, 119, 112]; 6 | var res = nums.find(function (i) { return i > 0; }); 7 | // const square = res * res 8 | var num1 = res; 9 | var num2 = res; // JSX 下不能使用 10 | //# sourceMappingURL=11-type-assertion.js.map -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/11-type-assertion.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"11-type-assertion.js","sourceRoot":"","sources":["../src/11-type-assertion.ts"],"names":[],"mappings":";AAAA,OAAO;;AAIP,sBAAsB;AACtB,IAAM,IAAI,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;AAEjC,IAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,GAAG,CAAC,EAAL,CAAK,CAAC,CAAA;AAEjC,2BAA2B;AAE3B,IAAM,IAAI,GAAG,GAAa,CAAA;AAE1B,IAAM,IAAI,GAAW,GAAG,CAAA,CAAC,YAAY"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/12-interface-basic.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 接口 3 | Object.defineProperty(exports, "__esModule", { value: true }); 4 | function printPost(post) { 5 | console.log(post.title); 6 | console.log(post.content); 7 | } 8 | printPost({ 9 | title: 'Hello TypeScript', 10 | content: 'A javascript superset' 11 | }); 12 | //# sourceMappingURL=12-interface-basic.js.map -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/12-interface-basic.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"12-interface-basic.js","sourceRoot":"","sources":["../src/12-interface-basic.ts"],"names":[],"mappings":";AAAA,KAAK;;AASL,SAAS,SAAS,CAAE,IAAU;IAC5B,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACvB,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;AAC3B,CAAC;AAED,SAAS,CAAC;IACR,KAAK,EAAE,kBAAkB;IACzB,OAAO,EAAE,uBAAuB;CACjC,CAAC,CAAA"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/13-interface-more.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 可选成员、只读成员、动态成员 3 | Object.defineProperty(exports, "__esModule", { value: true }); 4 | var hello = { 5 | title: 'Hello TypeScript', 6 | content: 'A javascript superset', 7 | summary: 'A javascript' 8 | }; 9 | var cache = {}; 10 | cache.foo = 'value1'; 11 | cache.bar = 'value2'; 12 | //# sourceMappingURL=13-interface-more.js.map -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/13-interface-more.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"13-interface-more.js","sourceRoot":"","sources":["../src/13-interface-more.ts"],"names":[],"mappings":";AAAA,iBAAiB;;AAajB,IAAM,KAAK,GAAS;IAClB,KAAK,EAAE,kBAAkB;IACzB,OAAO,EAAE,uBAAuB;IAChC,OAAO,EAAE,cAAc;CACxB,CAAA;AAUD,IAAM,KAAK,GAAU,EAAE,CAAA;AAEvB,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAA;AACpB,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAA"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/14-class-basic.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 类（Class） 3 | Object.defineProperty(exports, "__esModule", { value: true }); 4 | var Person = /** @class */ (function () { 5 | function Person(name, age) { 6 | this.name = name; 7 | this.age = age; 8 | } 9 | Person.prototype.sayHi = function (msg) { 10 | console.log("I am " + this.name + ", " + msg); 11 | }; 12 | return Person; 13 | }()); 14 | //# sourceMappingURL=14-class-basic.js.map -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/14-class-basic.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"14-class-basic.js","sourceRoot":"","sources":["../src/14-class-basic.ts"],"names":[],"mappings":";AAAA,WAAW;;AAIX;IAIE,gBAAa,IAAY,EAAE,GAAW;QACpC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;IAChB,CAAC;IAED,sBAAK,GAAL,UAAO,GAAW;QAChB,OAAO,CAAC,GAAG,CAAC,UAAQ,IAAI,CAAC,IAAI,UAAK,GAAK,CAAC,CAAA;IAC1C,CAAC;IACH,aAAC;AAAD,CAAC,AAZD,IAYC"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/15-class-modifiers.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"15-class-modifiers.js","sourceRoot":"","sources":["../src/15-class-modifiers.ts"],"names":[],"mappings":";AAAA,UAAU;;;;;;;;;;;;;;;AAIV;IAKE,gBAAa,IAAY,EAAE,GAAW;QACpC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;QACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;IACpB,CAAC;IAED,sBAAK,GAAL,UAAO,GAAW;QAChB,OAAO,CAAC,GAAG,CAAC,UAAQ,IAAI,CAAC,IAAI,UAAK,GAAK,CAAC,CAAA;QACxC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACvB,CAAC;IACH,aAAC;AAAD,CAAC,AAfD,IAeC;AAED;IAAsB,2BAAM;IAC1B,iBAAqB,IAAY,EAAE,GAAW;QAA9C,YACE,kBAAM,IAAI,EAAE,GAAG,CAAC,SAEjB;QADC,OAAO,CAAC,GAAG,CAAC,KAAI,CAAC,MAAM,CAAC,CAAA;;IAC1B,CAAC;IAEM,cAAM,GAAb,UAAe,IAAY,EAAE,GAAW;QACtC,OAAO,IAAI,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;IAC/B,CAAC;IACH,cAAC;AAAD,CAAC,AATD,CAAsB,MAAM,GAS3B;AAED,IAAM,GAAG,GAAG,IAAI,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;AACjC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;AACrB,uBAAuB;AACvB,0BAA0B;AAE1B,IAAM,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/16-class-readonly.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 类的只读属性 3 | Object.defineProperty(exports, "__esModule", { value: true }); 4 | var Person = /** @class */ (function () { 5 | function Person(name, age) { 6 | this.name = name; 7 | this.age = age; 8 | this.gender = true; 9 | } 10 | Person.prototype.sayHi = function (msg) { 11 | console.log("I am " + this.name + ", " + msg); 12 | console.log(this.age); 13 | }; 14 | return Person; 15 | }()); 16 | var tom = new Person('tom', 18); 17 | console.log(tom.name); 18 | // tom.gender = false 19 | //# sourceMappingURL=16-class-readonly.js.map -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/16-class-readonly.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"16-class-readonly.js","sourceRoot":"","sources":["../src/16-class-readonly.ts"],"names":[],"mappings":";AAAA,SAAS;;AAIT;IAME,gBAAa,IAAY,EAAE,GAAW;QACpC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;QACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;IACpB,CAAC;IAED,sBAAK,GAAL,UAAO,GAAW;QAChB,OAAO,CAAC,GAAG,CAAC,UAAQ,IAAI,CAAC,IAAI,UAAK,GAAK,CAAC,CAAA;QACxC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACvB,CAAC;IACH,aAAC;AAAD,CAAC,AAhBD,IAgBC;AAED,IAAM,GAAG,GAAG,IAAI,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;AACjC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;AACrB,qBAAqB"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/17-class-and-interface.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 类与接口 3 | Object.defineProperty(exports, "__esModule", { value: true }); 4 | var Person = /** @class */ (function () { 5 | function Person() { 6 | } 7 | Person.prototype.eat = function (food) { 8 | console.log("\u4F18\u96C5\u7684\u8FDB\u9910: " + food); 9 | }; 10 | Person.prototype.run = function (distance) { 11 | console.log("\u76F4\u7ACB\u884C\u8D70: " + distance); 12 | }; 13 | return Person; 14 | }()); 15 | var Animal = /** @class */ (function () { 16 | function Animal() { 17 | } 18 | Animal.prototype.eat = function (food) { 19 | console.log("\u547C\u565C\u547C\u565C\u7684\u5403: " + food); 20 | }; 21 | Animal.prototype.run = function (distance) { 22 | console.log("\u722C\u884C: " + distance); 23 | }; 24 | return Animal; 25 | }()); 26 | //# sourceMappingURL=17-class-and-interface.js.map -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/17-class-and-interface.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"17-class-and-interface.js","sourceRoot":"","sources":["../src/17-class-and-interface.ts"],"names":[],"mappings":";AAAA,OAAO;;AAYP;IAAA;IAQA,CAAC;IAPC,oBAAG,GAAH,UAAK,IAAY;QACf,OAAO,CAAC,GAAG,CAAC,qCAAU,IAAM,CAAC,CAAA;IAC/B,CAAC;IAED,oBAAG,GAAH,UAAK,QAAgB;QACnB,OAAO,CAAC,GAAG,CAAC,+BAAS,QAAU,CAAC,CAAA;IAClC,CAAC;IACH,aAAC;AAAD,CAAC,AARD,IAQC;AAED;IAAA;IAQA,CAAC;IAPC,oBAAG,GAAH,UAAK,IAAY;QACf,OAAO,CAAC,GAAG,CAAC,2CAAW,IAAM,CAAC,CAAA;IAChC,CAAC;IAED,oBAAG,GAAH,UAAK,QAAgB;QACnB,OAAO,CAAC,GAAG,CAAC,mBAAO,QAAU,CAAC,CAAA;IAChC,CAAC;IACH,aAAC;AAAD,CAAC,AARD,IAQC"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/18-abstract-class.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"18-abstract-class.js","sourceRoot":"","sources":["../src/18-abstract-class.ts"],"names":[],"mappings":";AAAA,MAAM;;;;;;;;;;;;;;;AAIN;IAAA;IAMA,CAAC;IALC,oBAAG,GAAH,UAAK,IAAY;QACf,OAAO,CAAC,GAAG,CAAC,2CAAW,IAAM,CAAC,CAAA;IAChC,CAAC;IAGH,aAAC;AAAD,CAAC,AAND,IAMC;AAED;IAAkB,uBAAM;IAAxB;;IAKA,CAAC;IAJC,iBAAG,GAAH,UAAI,QAAgB;QAClB,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAC/B,CAAC;IAEH,UAAC;AAAD,CAAC,AALD,CAAkB,MAAM,GAKvB;AAED,IAAM,CAAC,GAAG,IAAI,GAAG,EAAE,CAAA;AACnB,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;AACZ,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/19-generics.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 泛型 3 | Object.defineProperty(exports, "__esModule", { value: true }); 4 | function createNumberArray(length, value) { 5 | var arr = Array(length).fill(value); 6 | return arr; 7 | } 8 | function createStringArray(length, value) { 9 | var arr = Array(length).fill(value); 10 | return arr; 11 | } 12 | function createArray(length, value) { 13 | var arr = Array(length).fill(value); 14 | return arr; 15 | } 16 | // const res = createNumberArray(3, 100) 17 | // res => [100, 100, 100] 18 | var res = createArray(3, 'foo'); 19 | //# sourceMappingURL=19-generics.js.map -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/19-generics.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"19-generics.js","sourceRoot":"","sources":["../src/19-generics.ts"],"names":[],"mappings":";AAAA,KAAK;;AAIL,SAAS,iBAAiB,CAAE,MAAc,EAAE,KAAa;IACvD,IAAM,GAAG,GAAG,KAAK,CAAS,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC7C,OAAO,GAAG,CAAA;AACZ,CAAC;AAED,SAAS,iBAAiB,CAAE,MAAc,EAAE,KAAa;IACvD,IAAM,GAAG,GAAG,KAAK,CAAS,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC7C,OAAO,GAAG,CAAA;AACZ,CAAC;AAED,SAAS,WAAW,CAAK,MAAc,EAAE,KAAQ;IAC/C,IAAM,GAAG,GAAG,KAAK,CAAI,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACxC,OAAO,GAAG,CAAA;AACZ,CAAC;AAED,wCAAwC;AACxC,yBAAyB;AAEzB,IAAM,GAAG,GAAG,WAAW,CAAS,CAAC,EAAE,KAAK,CAAC,CAAA"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/20-definitely-typed.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // 类型声明 3 | Object.defineProperty(exports, "__esModule", { value: true }); 4 | camelCase('111'); 5 | //# sourceMappingURL=20-definitely-typed.js.map -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/dist/20-definitely-typed.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"20-definitely-typed.js","sourceRoot":"","sources":["../src/20-definitely-typed.ts"],"names":[],"mappings":";AAAA,OAAO;;AAMP,SAAS,CAAC,KAAK,CAAC,CAAA"} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "typescript", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "devDependencies": { 8 | "@types/lodash": "^4.14.149", 9 | "typescript": "^3.7.3" 10 | }, 11 | "dependencies": { 12 | "lodash": "^4.17.15", 13 | "query-string": "^6.9.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/01-getting-started.ts: -------------------------------------------------------------------------------- 1 | // 可以完全按照 JavaScript 标准语法编写代码 2 | 3 | const hello = (name: any) => { 4 | console.log(`Hello, ${name}`) 5 | } 6 | 7 | hello('TypeScript') 8 | -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/02-primitive-types.ts: -------------------------------------------------------------------------------- 1 | // 原始数据类型 2 | 3 | const a: string = 'foobar' 4 | 5 | const b: number = 100 // NaN Infinity 6 | 7 | const c: boolean = true // false 8 | 9 | // 在非严格模式（strictNullChecks）下， 10 | // string, number, boolean 都可以为空 11 | // const d: string = null 12 | // const d: number = null 13 | // const d: boolean = null 14 | 15 | const e: void = undefined 16 | 17 | const f: null = null 18 | 19 | const g: undefined = undefined 20 | 21 | // Symbol 是 ES2015 标准中定义的成员， 22 | // 使用它的前提是必须确保有对应的 ES2015 标准库引用 23 | // 也就是 tsconfig.json 中的 lib 选项必须包含 ES2015 24 | const h: symbol = Symbol() 25 | 26 | // Promise 27 | 28 | // const error: string = 100 29 | -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/03-module-scope.ts: -------------------------------------------------------------------------------- 1 | // 作用域问题 2 | 3 | // 默认文件中的成员会作为全局成员 4 | // 多个文件中有相同成员就会出现冲突 5 | // const a = 123 6 | 7 | // 解决办法1: IIFE 提供独立作用域 8 | // (function () { 9 | // const a = 123 10 | // })() 11 | 12 | // 解决办法2: 在当前文件使用 export，也就是把当前文件变成一个模块 13 | // 模块有单独的作用域 14 | const a = 123 15 | 16 | export {} -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/04-object-types.ts: -------------------------------------------------------------------------------- 1 | // Object 类型 2 | 3 | export {} // 确保跟其它示例没有成员冲突 4 | 5 | // object 类型是指除了原始类型以外的其它类型 6 | const foo: object = function () {} // [] // {} 7 | 8 | // 如果需要明确限制对象类型，则应该使用这种类型对象字面量的语法，或者是「接口」 9 | const obj: { foo: number, bar: string } = { foo: 123, bar: 'string' } 10 | 11 | // 接口的概念后续介绍 -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/05-array-types.ts: -------------------------------------------------------------------------------- 1 | // 数组类型 2 | 3 | export {} // 确保跟其它示例没有成员冲突 4 | 5 | // 数组类型的两种表示方式 6 | 7 | const arr1: Array = [1, 2, 3] 8 | 9 | const arr2: number[] = [1, 2, 3] 10 | 11 | // 案例 ----------------------- 12 | 13 | // 如果是 JS，需要判断是不是每个成员都是数字 14 | // 使用 TS，类型有保障，不用添加类型判断 15 | function sum (...args: number[]) { 16 | return args.reduce((prev, current) => prev + current, 0) 17 | } 18 | 19 | sum(1, 2, 3) // => 6 -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/06-tuple-types.ts: -------------------------------------------------------------------------------- 1 | // 元组（Tuple） 2 | 3 | export {} // 确保跟其它示例没有成员冲突 4 | 5 | const tuple: [number, string] = [18, 'zce'] 6 | 7 | // const age = tuple[0] 8 | // const name = tuple[1] 9 | 10 | const [age, name] = tuple 11 | 12 | // --------------------- 13 | 14 | const entries: [string, number][] = Object.entries({ 15 | foo: 123, 16 | bar: 456 17 | }) 18 | 19 | const [key, value] = entries[0] 20 | // key => foo, value => 123 -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/07-enum-types.ts: -------------------------------------------------------------------------------- 1 | // 枚举（Enum） 2 | 3 | export {} // 确保跟其它示例没有成员冲突 4 | 5 | // 用对象模拟枚举 6 | // const PostStatus = { 7 | // Draft: 0, 8 | // Unpublished: 1, 9 | // Published: 2 10 | // } 11 | 12 | // 标准的数字枚举 13 | // enum PostStatus { 14 | // Draft = 0, 15 | // Unpublished = 1, 16 | // Published = 2 17 | // } 18 | 19 | // 数字枚举，枚举值自动基于前一个值自增 20 | // enum PostStatus { 21 | // Draft = 6, 22 | // Unpublished, // => 7 23 | // Published // => 8 24 | // } 25 | 26 | // 字符串枚举 27 | // enum PostStatus { 28 | // Draft = 'aaa', 29 | // Unpublished = 'bbb', 30 | // Published = 'ccc' 31 | // } 32 | 33 | // 常量枚举，不会侵入编译结果 34 | const enum PostStatus { 35 | Draft, 36 | Unpublished, 37 | Published 38 | } 39 | 40 | const post = { 41 | title: 'Hello TypeScript', 42 | content: 'TypeScript is a typed superset of JavaScript.', 43 | status: PostStatus.Draft // 3 // 1 // 0 44 | } 45 | 46 | // PostStatus[0] // => Draft -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/08-function-types.ts: -------------------------------------------------------------------------------- 1 | // 函数类型 2 | 3 | export {} // 确保跟其它示例没有成员冲突 4 | 5 | function func1 (a: number, b: number = 10, ...rest: number[]): string { 6 | return 'func1' 7 | } 8 | 9 | func1(100, 200) 10 | 11 | func1(100) 12 | 13 | func1(100, 200, 300) 14 | 15 | // ----------------------------------------- 16 | 17 | const func2: (a: number, b: number) => string = function (a: number, b: number): string { 18 | return 'func2' 19 | } 20 | -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/09-any-types.ts: -------------------------------------------------------------------------------- 1 | // 任意类型（弱类型） 2 | 3 | export {} // 确保跟其它示例没有成员冲突 4 | 5 | function stringify (value: any) { 6 | return JSON.stringify(value) 7 | } 8 | 9 | stringify('string') 10 | 11 | stringify(100) 12 | 13 | stringify(true) 14 | 15 | let foo: any = 'string' 16 | 17 | foo = 100 18 | 19 | foo.bar() 20 | 21 | // any 类型是不安全的 -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/10-type-inference.ts: -------------------------------------------------------------------------------- 1 | // 隐式类型推断 2 | 3 | export {} // 确保跟其它示例没有成员冲突 4 | 5 | let age = 18 // number 6 | 7 | // age = 'string' 8 | 9 | let foo 10 | 11 | foo = 100 12 | 13 | foo = 'string' 14 | 15 | // 建议为每个变量添加明确的类型标注 -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/11-type-assertion.ts: -------------------------------------------------------------------------------- 1 | // 类型断言 2 | 3 | export {} // 确保跟其它示例没有成员冲突 4 | 5 | // 假定这个 nums 来自一个明确的接口 6 | const nums = [110, 120, 119, 112] 7 | 8 | const res = nums.find(i => i > 0) 9 | 10 | // const square = res * res 11 | 12 | const num1 = res as number 13 | 14 | const num2 = res // JSX 下不能使用 -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/12-interface-basic.ts: -------------------------------------------------------------------------------- 1 | // 接口 2 | 3 | export {} // 确保跟其它示例没有成员冲突 4 | 5 | interface Post { 6 | title: string 7 | content: string 8 | } 9 | 10 | function printPost (post: Post) { 11 | console.log(post.title) 12 | console.log(post.content) 13 | } 14 | 15 | printPost({ 16 | title: 'Hello TypeScript', 17 | content: 'A javascript superset' 18 | }) -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/13-interface-more.ts: -------------------------------------------------------------------------------- 1 | // 可选成员、只读成员、动态成员 2 | 3 | export {} // 确保跟其它示例没有成员冲突 4 | 5 | // ------------------------------------------- 6 | 7 | interface Post { 8 | title: string 9 | content: string 10 | subtitle?: string 11 | readonly summary: string 12 | } 13 | 14 | const hello: Post = { 15 | title: 'Hello TypeScript', 16 | content: 'A javascript superset', 17 | summary: 'A javascript' 18 | } 19 | 20 | // hello.summary = 'other' 21 | 22 | // ---------------------------------- 23 | 24 | interface Cache { 25 | [prop: string]: string 26 | } 27 | 28 | const cache: Cache = {} 29 | 30 | cache.foo = 'value1' 31 | cache.bar = 'value2' -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/14-class-basic.ts: -------------------------------------------------------------------------------- 1 | // 类（Class） 2 | 3 | export {} // 确保跟其它示例没有成员冲突 4 | 5 | class Person { 6 | name: string // = 'init name' 7 | age: number 8 | 9 | constructor (name: string, age: number) { 10 | this.name = name 11 | this.age = age 12 | } 13 | 14 | sayHi (msg: string): void { 15 | console.log(`I am ${this.name}, ${msg}`) 16 | } 17 | } -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/15-class-modifiers.ts: -------------------------------------------------------------------------------- 1 | // 类的访问修饰符 2 | 3 | export {} // 确保跟其它示例没有成员冲突 4 | 5 | class Person { 6 | public name: string // = 'init name' 7 | private age: number 8 | protected gender: boolean 9 | 10 | constructor (name: string, age: number) { 11 | this.name = name 12 | this.age = age 13 | this.gender = true 14 | } 15 | 16 | sayHi (msg: string): void { 17 | console.log(`I am ${this.name}, ${msg}`) 18 | console.log(this.age) 19 | } 20 | } 21 | 22 | class Student extends Person { 23 | private constructor (name: string, age: number) { 24 | super(name, age) 25 | console.log(this.gender) 26 | } 27 | 28 | static create (name: string, age: number) { 29 | return new Student(name, age) 30 | } 31 | } 32 | 33 | const tom = new Person('tom', 18) 34 | console.log(tom.name) 35 | // console.log(tom.age) 36 | // console.log(tom.gender) 37 | 38 | const jack = Student.create('jack', 18) -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/16-class-readonly.ts: -------------------------------------------------------------------------------- 1 | // 类的只读属性 2 | 3 | export {} // 确保跟其它示例没有成员冲突 4 | 5 | class Person { 6 | public name: string // = 'init name' 7 | private age: number 8 | // 只读成员 9 | protected readonly gender: boolean 10 | 11 | constructor (name: string, age: number) { 12 | this.name = name 13 | this.age = age 14 | this.gender = true 15 | } 16 | 17 | sayHi (msg: string): void { 18 | console.log(`I am ${this.name}, ${msg}`) 19 | console.log(this.age) 20 | } 21 | } 22 | 23 | const tom = new Person('tom', 18) 24 | console.log(tom.name) 25 | // tom.gender = false -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/17-class-and-interface.ts: -------------------------------------------------------------------------------- 1 | // 类与接口 2 | 3 | export {} // 确保跟其它示例没有成员冲突 4 | 5 | interface Eat { 6 | eat (food: string): void 7 | } 8 | 9 | interface Run { 10 | run (distance: number): void 11 | } 12 | 13 | class Person implements Eat, Run { 14 | eat (food: string): void { 15 | console.log(`优雅的进餐: ${food}`) 16 | } 17 | 18 | run (distance: number) { 19 | console.log(`直立行走: ${distance}`) 20 | } 21 | } 22 | 23 | class Animal implements Eat, Run { 24 | eat (food: string): void { 25 | console.log(`呼噜呼噜的吃: ${food}`) 26 | } 27 | 28 | run (distance: number) { 29 | console.log(`爬行: ${distance}`) 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/18-abstract-class.ts: -------------------------------------------------------------------------------- 1 | // 抽线类 2 | 3 | export {} // 确保跟其它示例没有成员冲突 4 | 5 | abstract class Animal { 6 | eat (food: string): void { 7 | console.log(`呼噜呼噜的吃: ${food}`) 8 | } 9 | 10 | abstract run (distance: number): void 11 | } 12 | 13 | class Dog extends Animal { 14 | run(distance: number): void { 15 | console.log('四脚爬行', distance) 16 | } 17 | 18 | } 19 | 20 | const d = new Dog() 21 | d.eat('嗯西马') 22 | d.run(100) -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/19-generics.ts: -------------------------------------------------------------------------------- 1 | // 泛型 2 | 3 | export {} // 确保跟其它示例没有成员冲突 4 | 5 | function createNumberArray (length: number, value: number): number[] { 6 | const arr = Array(length).fill(value) 7 | return arr 8 | } 9 | 10 | function createStringArray (length: number, value: string): string[] { 11 | const arr = Array(length).fill(value) 12 | return arr 13 | } 14 | 15 | function createArray (length: number, value: T): T[] { 16 | const arr = Array(length).fill(value) 17 | return arr 18 | } 19 | 20 | // const res = createNumberArray(3, 100) 21 | // res => [100, 100, 100] 22 | 23 | const res = createArray(3, 'foo') 24 | -------------------------------------------------------------------------------- /part-01/module-01/03-03-typescript/src/20-definitely-typed.ts: -------------------------------------------------------------------------------- 1 | // 类型声明 2 | 3 | import { camelCase } from 'lodash' 4 | import qs from 'query-string' 5 | 6 | qs.parse('?key=value&key2=value2') 7 | 8 | // declare function camelCase (input: string): string 9 | 10 | const res = camelCase('hello typed') 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | export {} // 确保跟其它示例没有成员冲突 34 | -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/01-higher-order-functon.js: -------------------------------------------------------------------------------- 1 | // 高阶函数-函数作为参数 2 | 3 | function forEach (array, fn) { 4 | for (let i = 0; i < array.length; i++) { 5 | fn(array[i]) 6 | } 7 | } 8 | 9 | // 测试 10 | // let arr = [1, 3, 4, 7, 8] 11 | 12 | // forEach(arr, function (item) { 13 | // console.log(item) 14 | // }) 15 | 16 | 17 | // filter 18 | function filter (array, fn) { 19 | let results = [] 20 | for (let i = 0; i < array.length; i++) { 21 | if (fn(array[i])) { 22 | results.push(array[i]) 23 | } 24 | } 25 | return results 26 | } 27 | 28 | // 测试 29 | let arr = [1, 3, 4, 7, 8] 30 | let r = filter(arr, function (item) { 31 | return item % 2 === 0 32 | }) 33 | 34 | console.log(r) -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/02-higher-order-functon.js: -------------------------------------------------------------------------------- 1 | // 高阶函数-函数作为返回值 2 | 3 | // function makeFn () { 4 | // let msg = 'Hello function' 5 | // return function () { 6 | // console.log(msg) 7 | // } 8 | // } 9 | 10 | // // const fn = makeFn() 11 | // // fn() 12 | 13 | // makeFn()() 14 | 15 | 16 | 17 | // once 18 | function once (fn) { 19 | let done = false 20 | return function () { 21 | if (!done) { 22 | done = true 23 | return fn.apply(this, arguments) 24 | } 25 | } 26 | } 27 | 28 | let pay = once(function (money) { 29 | console.log(`支付: ${money} RMB`) 30 | }) 31 | 32 | pay(5) 33 | pay(5) 34 | pay(5) 35 | pay(5) 36 | 37 | -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/03-array-method.js: -------------------------------------------------------------------------------- 1 | // 模拟常用高阶函数：map、every、some 2 | 3 | // map 4 | const map = (array, fn) => { 5 | let results = [] 6 | for (let value of array) { 7 | results.push(fn(value)) 8 | } 9 | return results 10 | } 11 | 12 | // 测试 13 | // let arr = [1, 2, 3, 4] 14 | // arr = map(arr, v => v * v) 15 | // console.log(arr) 16 | 17 | 18 | 19 | // every 20 | const every = (array, fn) => { 21 | let result = true 22 | for (let value of array) { 23 | result = fn(value) 24 | if (!result) { 25 | break 26 | } 27 | } 28 | return result 29 | } 30 | 31 | 32 | // 测试 33 | // let arr = [9, 12, 14] 34 | // let r = every(arr, v => v > 10) 35 | // console.log(r) 36 | 37 | // some 38 | const some = (array, fn) => { 39 | let result = false 40 | for (let value of array) { 41 | result = fn(value) 42 | if (result) { 43 | break 44 | } 45 | } 46 | return result 47 | } 48 | 49 | // 测试 50 | let arr = [1, 3, 5, 9] 51 | let r = some(arr, v => v % 2 === 0) 52 | console.log(r) -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/04-closure.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | closure 7 | 8 | 9 | 28 | 29 | -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/05-closure.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | closure 7 | 8 | 9 | 27 | 28 | -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/06-purefunction.js: -------------------------------------------------------------------------------- 1 | // 纯函数和不纯的函数 2 | // slice / splice 3 | 4 | let array = [1, 2, 3, 4, 5] 5 | 6 | // 纯函数 7 | console.log(array.slice(0, 3)) 8 | console.log(array.slice(0, 3)) 9 | console.log(array.slice(0, 3)) 10 | 11 | // 不纯的函数 12 | console.log(array.splice(0, 3)) 13 | console.log(array.splice(0, 3)) 14 | console.log(array.splice(0, 3)) 15 | 16 | // 纯函数 17 | function getSum (n1, n2) { 18 | return n1 + n2 19 | } 20 | console.log(getSum(1, 2)) 21 | console.log(getSum(1, 2)) 22 | console.log(getSum(1, 2)) -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/07-lodash.js: -------------------------------------------------------------------------------- 1 | // 演示 lodash 2 | // first / last / toUpper / reverse / each / includes / find / findIndex 3 | const _ = require('lodash') 4 | 5 | const array = ['jack', 'tom', 'lucy', 'kate'] 6 | 7 | console.log(_.first(array)) 8 | console.log(_.last(array)) 9 | 10 | console.log(_.toUpper(_.first(array))) 11 | 12 | console.log(_.reverse(array)) 13 | 14 | const r = _.each(array, (item, index) => { 15 | console.log(item, index) 16 | }) 17 | 18 | console.log(r) 19 | 20 | // _.find 21 | -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/08-memoize.js: -------------------------------------------------------------------------------- 1 | // 记忆函数 2 | const _ = require('lodash') 3 | 4 | function getArea (r) { 5 | console.log(r) 6 | return Math.PI * r * r 7 | } 8 | 9 | // let getAreaWithMemory = _.memoize(getArea) 10 | // console.log(getAreaWithMemory(4)) 11 | // console.log(getAreaWithMemory(4)) 12 | // console.log(getAreaWithMemory(4)) 13 | 14 | 15 | // 模拟 memoize 方法的实现 16 | 17 | function memoize (f) { 18 | let cache = {} 19 | return function () { 20 | let key = JSON.stringify(arguments) 21 | cache[key] = cache[key] || f.apply(f, arguments) 22 | return cache[key] 23 | } 24 | } 25 | 26 | let getAreaWithMemory = memoize(getArea) 27 | console.log(getAreaWithMemory(4)) 28 | console.log(getAreaWithMemory(4)) 29 | console.log(getAreaWithMemory(4)) -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/09-curry.js: -------------------------------------------------------------------------------- 1 | // 柯里化演示 2 | // function checkAge (age) { 3 | // let min = 18 4 | // return age >= min 5 | // } 6 | 7 | // 普通的纯函数 8 | // function checkAge (min, age) { 9 | // return age >= min 10 | // } 11 | 12 | // console.log(checkAge(18, 20)) 13 | // console.log(checkAge(18, 24)) 14 | // console.log(checkAge(22, 24)) 15 | 16 | 17 | // 函数的柯里化 18 | // function checkAge (min) { 19 | // return function (age) { 20 | // return age >= min 21 | // } 22 | // } 23 | 24 | // ES6 25 | let checkAge = min => (age => age >= min) 26 | 27 | let checkAge18 = checkAge(18) 28 | let checkAge20 = checkAge(20) 29 | 30 | console.log(checkAge18(20)) 31 | console.log(checkAge18(24)) -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/10-curry-lodash.js: -------------------------------------------------------------------------------- 1 | // lodash 中的 curry 基本使用 2 | const _ = require('lodash') 3 | 4 | function getSum (a, b, c) { 5 | return a + b + c 6 | } 7 | 8 | const curried = _.curry(getSum) 9 | 10 | console.log(curried(1, 2, 3)) 11 | 12 | console.log(curried(1)(2, 3)) 13 | 14 | console.log(curried(1, 2)(3)) -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/11-curry-demo.js: -------------------------------------------------------------------------------- 1 | // 柯里化案例 2 | // ''.match(/\s+/g) 3 | // ''.match(/\d+/g) 4 | 5 | const _ = require('lodash') 6 | 7 | const match = _.curry(function (reg, str) { 8 | return str.match(reg) 9 | }) 10 | 11 | const haveSpace = match(/\s+/g) 12 | const haveNumber = match(/\d+/g) 13 | 14 | const filter = _.curry(function (func, array) { 15 | return array.filter(func) 16 | }) 17 | 18 | const findSpace = filter(haveSpace) 19 | 20 | // console.log(haveSpace('helloworld')) 21 | // console.log(haveNumber('abc')) 22 | 23 | 24 | 25 | console.log(filter(haveSpace, ['John Connor', 'John_Donne'])) 26 | 27 | 28 | console.log(findSpace(['John Connor', 'John_Donne'])) -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/12-curry.js: -------------------------------------------------------------------------------- 1 | // 模拟实现 lodash 中的 curry 方法 2 | 3 | function getSum (a, b, c) { 4 | return a + b + c 5 | } 6 | 7 | const curried = curry(getSum) 8 | 9 | console.log(curried(1, 2, 3)) 10 | console.log(curried(1)(2, 3)) 11 | console.log(curried(1, 2)(3)) 12 | 13 | 14 | function curry (func) { 15 | return function curriedFn(...args) { 16 | // 判断实参和形参的个数 17 | if (args.length < func.length) { 18 | return function () { 19 | return curriedFn(...args.concat(Array.from(arguments))) 20 | } 21 | } 22 | return func(...args) 23 | } 24 | } -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/13-compose.js: -------------------------------------------------------------------------------- 1 | // 函数组合演示 2 | function compose (f, g) { 3 | return function (value) { 4 | return f(g(value)) 5 | } 6 | } 7 | 8 | function reverse (array) { 9 | return array.reverse() 10 | } 11 | 12 | function first (array) { 13 | return array[0] 14 | } 15 | 16 | const last = compose(first, reverse) 17 | 18 | console.log(last([1, 2, 3, 4])) -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/14-compose-lodash.js: -------------------------------------------------------------------------------- 1 | // lodash 中的函数组合的方法 _.flowRight() 2 | const _ = require('lodash') 3 | 4 | const reverse = arr => arr.reverse() 5 | const first = arr => arr[0] 6 | const toUpper = s => s.toUpperCase() 7 | 8 | const f = _.flowRight(toUpper, first, reverse) 9 | console.log(f(['one', 'two', 'three'])) -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/15-compose.js: -------------------------------------------------------------------------------- 1 | // 模拟 lodash 中的 flowRight 2 | 3 | const reverse = arr => arr.reverse() 4 | const first = arr => arr[0] 5 | const toUpper = s => s.toUpperCase() 6 | 7 | 8 | // function compose (...args) { 9 | // return function (value) { 10 | // return args.reverse().reduce(function (acc, fn) { 11 | // return fn(acc) 12 | // }, value) 13 | // } 14 | // } 15 | 16 | const compose = (...args) => value => args.reverse().reduce((acc, fn) => fn(acc), value) 17 | 18 | const f = compose(toUpper, first, reverse) 19 | console.log(f(['one', 'two', 'three'])) -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/16-compose-associativity.js: -------------------------------------------------------------------------------- 1 | // 函数组合要满足结合律 2 | const _ = require('lodash') 3 | 4 | // const f = _.flowRight(_.toUpper, _.first, _.reverse) 5 | // const f = _.flowRight(_.flowRight(_.toUpper, _.first), _.reverse) 6 | const f = _.flowRight(_.toUpper, _.flowRight(_.first, _.reverse)) 7 | 8 | 9 | console.log(f(['one', 'two', 'three'])) -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/17-compose-debug.js: -------------------------------------------------------------------------------- 1 | // 函数组合 调试 2 | // NEVER SAY DIE --> never-say-die 3 | 4 | const _ = require('lodash') 5 | 6 | // const log = v => { 7 | // console.log(v) 8 | // return v 9 | // } 10 | 11 | const trace = _.curry((tag, v) => { 12 | console.log(tag, v) 13 | return v 14 | }) 15 | 16 | // _.split() 17 | const split = _.curry((sep, str) => _.split(str, sep)) 18 | 19 | // _.toLower() 20 | const join = _.curry((sep, array) => _.join(array, sep)) 21 | 22 | const map = _.curry((fn, array) => _.map(array, fn)) 23 | 24 | const f = _.flowRight(join('-'), trace('map 之后'), map(_.toLower), trace('split 之后'), split(' ')) 25 | 26 | console.log(f('NEVER SAY DIE')) -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/18-compose-lodash-fp.js: -------------------------------------------------------------------------------- 1 | // lodash 的 fp 模块 2 | // NEVER SAY DIE --> never-say-die 3 | const fp = require('lodash/fp') 4 | 5 | const f = fp.flowRight(fp.join('-'), fp.map(fp.toLower), fp.split(' ')) 6 | 7 | console.log(f('NEVER SAY DIE')) -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/19-compose-lodash-fp.js: -------------------------------------------------------------------------------- 1 | // lodash 和 lodash/fp 模块中 map 方法的区别 2 | // const _ = require('lodash') 3 | 4 | // console.log(_.map(['23', '8', '10'], parseInt)) 5 | // // parseInt('23', 0, array) 6 | // // parseInt('8', 1, array) 7 | // // parseInt('10', 2, array) 8 | 9 | 10 | const fp = require('lodash/fp') 11 | 12 | console.log(fp.map(parseInt, ['23', '8', '10'])) -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/20-pointfree.js: -------------------------------------------------------------------------------- 1 | // point free 2 | // Hello World => hello_world 3 | const fp = require('lodash/fp') 4 | 5 | const f = fp.flowRight(fp.replace(/\s+/g, '_'), fp.toLower) 6 | 7 | console.log(f('Hello World')) -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/21-pointfree.js: -------------------------------------------------------------------------------- 1 | // 把一个字符串中的首字母提取并转换成大写, 使用. 作为分隔符 2 | // world wild web ==> W. W. W 3 | const fp = require('lodash/fp') 4 | 5 | // const firstLetterToUpper = fp.flowRight(fp.join('. '), fp.map(fp.first), fp.map(fp.toUpper), fp.split(' ')) 6 | const firstLetterToUpper = fp.flowRight(fp.join('. '), fp.map(fp.flowRight(fp.first, fp.toUpper)), fp.split(' ')) 7 | 8 | console.log(firstLetterToUpper('world wild web')) -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "functional-programming", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "lodash": { 8 | "version": "4.17.15", 9 | "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.15.tgz?cache=0&sync_timestamp=1563508077056&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.15.tgz", 10 | "integrity": "sha1-tEf2ZwoEVbv+7dETku/zMOoJdUg=" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /part-01/module-02/01-01-functional-programming/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "functional-programming", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "01-higher-order-functon.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "lodash": "^4.17.15" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /part-01/module-02/01-02-fp-functor/01-functor.js: -------------------------------------------------------------------------------- 1 | // // Functor 函子 2 | // class Container { 3 | // constructor (value) { 4 | // this._value = value 5 | // } 6 | 7 | // map (fn) { 8 | // return new Container(fn(this._value)) 9 | // } 10 | // } 11 | 12 | // let r = new Container(5) 13 | // .map(x => x + 1) 14 | // .map(x => x * x) 15 | 16 | // console.log(r) 17 | 18 | 19 | class Container { 20 | static of (value) { 21 | return new Container(value) 22 | } 23 | 24 | constructor (value) { 25 | this._value = value 26 | } 27 | 28 | map (fn) { 29 | return Container.of(fn(this._value)) 30 | } 31 | } 32 | 33 | // let r = Container.of(5) 34 | // .map(x => x + 2) 35 | // .map(x => x * x) 36 | 37 | // console.log(r) 38 | 39 | 40 | // 演示 null undefined 的问题 41 | Container.of(null) 42 | .map(x => x.toUpperCase()) -------------------------------------------------------------------------------- /part-01/module-02/01-02-fp-functor/02-maybe.js: -------------------------------------------------------------------------------- 1 | // MayBe 函子 2 | class MayBe { 3 | static of (value) { 4 | return new MayBe(value) 5 | } 6 | 7 | constructor (value) { 8 | this._value = value 9 | } 10 | 11 | map (fn) { 12 | return this.isNothing() ? MayBe.of(null) : MayBe.of(fn(this._value)) 13 | } 14 | 15 | isNothing () { 16 | return this._value === null || this._value === undefined 17 | } 18 | } 19 | 20 | 21 | // let r = MayBe.of('Hello World') 22 | // .map(x => x.toUpperCase()) 23 | // console.log(r) 24 | 25 | 26 | // let r = MayBe.of(null) 27 | // .map(x => x.toUpperCase()) 28 | // console.log(r) 29 | 30 | 31 | let r = MayBe.of('hello world') 32 | .map(x => x.toUpperCase()) 33 | .map(x => null) 34 | .map(x => x.split(' ')) 35 | console.log(r) -------------------------------------------------------------------------------- /part-01/module-02/01-02-fp-functor/03-either.js: -------------------------------------------------------------------------------- 1 | // Either 函子 2 | class Left { 3 | static of (value) { 4 | return new Left(value) 5 | } 6 | 7 | constructor (value) { 8 | this._value = value 9 | } 10 | 11 | map (fn) { 12 | return this 13 | } 14 | } 15 | 16 | class Right { 17 | static of (value) { 18 | return new Right(value) 19 | } 20 | 21 | constructor (value) { 22 | this._value = value 23 | } 24 | 25 | map (fn) { 26 | return Right.of(fn(this._value)) 27 | } 28 | } 29 | 30 | // let r1 = Right.of(12).map(x => x + 2) 31 | // let r2 = Left.of(12).map(x => x + 2) 32 | 33 | // console.log(r1) 34 | // console.log(r2) 35 | 36 | 37 | function parseJSON (str) { 38 | try { 39 | return Right.of(JSON.parse(str)) 40 | } catch (e) { 41 | return Left.of({ error: e.message }) 42 | } 43 | } 44 | 45 | // let r = parseJSON('{ name: zs }') 46 | // console.log(r) 47 | 48 | let r = parseJSON('{ "name": "zs" }') 49 | .map(x => x.name.toUpperCase()) 50 | console.log(r) -------------------------------------------------------------------------------- /part-01/module-02/01-02-fp-functor/04-io.js: -------------------------------------------------------------------------------- 1 | // IO 函子 2 | const fp = require('lodash/fp') 3 | 4 | class IO { 5 | static of (value) { 6 | return new IO(function () { 7 | return value 8 | }) 9 | } 10 | 11 | constructor (fn) { 12 | this._value = fn 13 | } 14 | 15 | map (fn) { 16 | return new IO(fp.flowRight(fn, this._value)) 17 | } 18 | } 19 | 20 | // 调用 21 | let r = IO.of(process).map(p => p.execPath) 22 | // console.log(r) 23 | console.log(r._value()) -------------------------------------------------------------------------------- /part-01/module-02/01-02-fp-functor/05-folktale.js: -------------------------------------------------------------------------------- 1 | // folktale 中的 compose、curry 2 | const { compose, curry } = require('folktale/core/lambda') 3 | const { toUpper, first } = require('lodash/fp') 4 | // let f = curry(2, (x, y) => { 5 | // return x + y 6 | // }) 7 | 8 | // console.log(f(1, 2)) 9 | // console.log(f(1)(2)) 10 | 11 | 12 | let f = compose(toUpper, first) 13 | console.log(f(['one', 'two'])) -------------------------------------------------------------------------------- /part-01/module-02/01-02-fp-functor/06-task.js: -------------------------------------------------------------------------------- 1 | // Task 处理异步任务 2 | const fs = require('fs') 3 | const { task } = require('folktale/concurrency/task') 4 | const { split, find } = require('lodash/fp') 5 | 6 | function readFile (filename) { 7 | return task(resolver => { 8 | fs.readFile(filename, 'utf-8', (err, data) => { 9 | if (err) resolver.reject(err) 10 | 11 | resolver.resolve(data) 12 | }) 13 | }) 14 | } 15 | 16 | readFile('package.json') 17 | .map(split('\n')) 18 | .map(find(x => x.includes('version'))) 19 | .run() 20 | .listen({ 21 | onRejected: err => { 22 | console.log(err) 23 | }, 24 | onResolved: value => { 25 | console.log(value) 26 | } 27 | }) -------------------------------------------------------------------------------- /part-01/module-02/01-02-fp-functor/07-monad-pre.js: -------------------------------------------------------------------------------- 1 | // IO 函子的问题 2 | const fs = require('fs') 3 | const fp = require('lodash/fp') 4 | 5 | class IO { 6 | static of (value) { 7 | return new IO(function () { 8 | return value 9 | }) 10 | } 11 | 12 | constructor (fn) { 13 | this._value = fn 14 | } 15 | 16 | map (fn) { 17 | return new IO(fp.flowRight(fn, this._value)) 18 | } 19 | } 20 | 21 | let readFile = function (filename) { 22 | return new IO(function () { 23 | return fs.readFileSync(filename, 'utf-8') 24 | }) 25 | } 26 | 27 | let print = function (x) { 28 | return new IO(function () { 29 | console.log(x) 30 | return x 31 | }) 32 | } 33 | 34 | let cat = fp.flowRight(print, readFile) 35 | // IO(IO(x)) 36 | let r = cat('package.json')._value()._value() 37 | console.log(r) -------------------------------------------------------------------------------- /part-01/module-02/01-02-fp-functor/08-monad.js: -------------------------------------------------------------------------------- 1 | // IO Monad 2 | const fs = require('fs') 3 | const fp = require('lodash/fp') 4 | 5 | class IO { 6 | static of (value) { 7 | return new IO(function () { 8 | return value 9 | }) 10 | } 11 | 12 | constructor (fn) { 13 | this._value = fn 14 | } 15 | 16 | map (fn) { 17 | return new IO(fp.flowRight(fn, this._value)) 18 | } 19 | 20 | join () { 21 | return this._value() 22 | } 23 | 24 | flatMap (fn) { 25 | return this.map(fn).join() 26 | } 27 | } 28 | 29 | let readFile = function (filename) { 30 | return new IO(function () { 31 | return fs.readFileSync(filename, 'utf-8') 32 | }) 33 | } 34 | 35 | let print = function (x) { 36 | return new IO(function () { 37 | console.log(x) 38 | return x 39 | }) 40 | } 41 | 42 | let r = readFile('package.json') 43 | // .map(x => x.toUpperCase()) 44 | .map(fp.toUpper) 45 | .flatMap(print) 46 | .join() 47 | 48 | console.log(r) -------------------------------------------------------------------------------- /part-01/module-02/01-02-fp-functor/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fp-functor", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "folktale": { 8 | "version": "2.3.2", 9 | "resolved": "https://registry.npm.taobao.org/folktale/download/folktale-2.3.2.tgz", 10 | "integrity": "sha1-OCMbA55e82mJkgy/gFv2sie/T9Q=" 11 | }, 12 | "lodash": { 13 | "version": "4.17.15", 14 | "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.15.tgz?cache=0&sync_timestamp=1563508077056&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.15.tgz", 15 | "integrity": "sha1-tEf2ZwoEVbv+7dETku/zMOoJdUg=" 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /part-01/module-02/01-02-fp-functor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fp-functor", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "01-functor.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "folktale": "^2.3.2", 14 | "lodash": "^4.17.15" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /part-01/module-02/01-讲义/01-函数式编程.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-01/module-02/01-讲义/01-函数式编程.pdf -------------------------------------------------------------------------------- /part-01/module-02/01-讲义/02-函数式编程.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-01/module-02/01-讲义/02-函数式编程.png -------------------------------------------------------------------------------- /part-01/module-02/02-01-js-performance/01-keyword-variable.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | function fn() { 4 | name = 'lg' 5 | console.log(`${name} is a coder`) 6 | } 7 | 8 | fn() 9 | 10 | 11 | function fn() { 12 | const name = 'lg' 13 | console.log(`${name} is a coder`) 14 | } 15 | 16 | fn() 17 | 18 | -------------------------------------------------------------------------------- /part-01/module-02/02-01-js-performance/02-global-variable.js: -------------------------------------------------------------------------------- 1 | 2 | var i, str = '' 3 | for (i = 0; i < 1000; i++) { 4 | str += i 5 | } 6 | 7 | for (let i = 0; i < 1000; i++) { 8 | let str = '' 9 | str += i 10 | } 11 | -------------------------------------------------------------------------------- /part-01/module-02/02-01-js-performance/04-func-constructor.js: -------------------------------------------------------------------------------- 1 | 2 | var fn1 = function() { 3 | this.foo = function() { 4 | console.log(11111) 5 | } 6 | } 7 | 8 | let f1 = new fn1() 9 | 10 | 11 | var fn2 = function() {} 12 | fn2.prototype.foo = function() { 13 | console.log(11111) 14 | } 15 | 16 | let f2 = new fn2() -------------------------------------------------------------------------------- /part-01/module-02/02-01-js-performance/05-closure.js: -------------------------------------------------------------------------------- 1 | 2 | function test(func) { 3 | console.log(func()) 4 | } 5 | 6 | function test2() { 7 | var name = 'lg' 8 | return name 9 | } 10 | 11 | test(function() { 12 | var name = 'lg' 13 | return name 14 | }) 15 | 16 | test(test2) -------------------------------------------------------------------------------- /part-01/module-02/02-01-js-performance/06-property-access.js: -------------------------------------------------------------------------------- 1 | 2 | function Person() { 3 | this.name = 'icoder' 4 | this.age = 18 5 | this.getAge = function() { 6 | return this.age 7 | } 8 | } 9 | 10 | const p1 = new Person() 11 | const a = p1.getAge() 12 | 13 | 14 | 15 | function Person() { 16 | this.name = 'icoder' 17 | this.age = 18 18 | } 19 | const p2 = new Person() 20 | const b = p2.age -------------------------------------------------------------------------------- /part-01/module-02/02-01-js-performance/07-for.js: -------------------------------------------------------------------------------- 1 | 2 | var arrList = [] 3 | arrList[10000] = 'icoder' 4 | 5 | for (var i = 0; i < arrList.length; i++) { 6 | console.log(arrList[i]) 7 | } 8 | 9 | for (var i = arrList.length; i; i--) { 10 | console.log(arrList[i]) 11 | } -------------------------------------------------------------------------------- /part-01/module-02/02-01-js-performance/08-for-forin-froEach.js: -------------------------------------------------------------------------------- 1 | 2 | var arrList = new Array(1, 2, 3, 4, 5) 3 | 4 | arrList.forEach(function(item) { 5 | console.log(item) 6 | }) 7 | 8 | for (var i = arrList.length; i; i--) { 9 | console.log(arrList[i]) 10 | } 11 | 12 | for (var i in arrList) { 13 | console.log(arrList[i]) 14 | } -------------------------------------------------------------------------------- /part-01/module-02/02-01-js-performance/09-append-node.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 优化节点添加 7 | 8 | 9 | 27 | 28 | -------------------------------------------------------------------------------- /part-01/module-02/02-01-js-performance/10-node-clone.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 克隆优化节点操作 7 | 8 | 9 |

old

10 | 11 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /part-01/module-02/02-01-js-performance/11-object.js: -------------------------------------------------------------------------------- 1 | 2 | var a = [1, 2, 3] 3 | 4 | var a1 = new Array(3) 5 | a1[0] = 1 6 | a1[1] = 2 7 | a1[2] = 3 8 | 9 | -------------------------------------------------------------------------------- /part-01/module-02/02-讲义/JavaScript性能优化.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-01/module-02/02-讲义/JavaScript性能优化.pdf -------------------------------------------------------------------------------- /part-02/module-01/02-01-generator-sample/generators/app/templates/bar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= name %> 8 | 9 | 10 |

<%= name %>

11 | 12 | -------------------------------------------------------------------------------- /part-02/module-01/02-01-generator-sample/generators/app/templates/foo.txt: -------------------------------------------------------------------------------- 1 | 这是一个模板文件 2 | 内部可以使用 EJS 模板标记输出数据 3 | 例如：<%= title %> 4 | 5 | 其他的 EJS 语法也支持 6 | 7 | <% if (success) { %> 8 | 哈哈哈 9 | <% }%> -------------------------------------------------------------------------------- /part-02/module-01/02-01-generator-sample/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "generator-sample", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "dependencies": { 8 | "yeoman-generator": "^4.0.1" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/.env.development: -------------------------------------------------------------------------------- 1 | VUE_APP_API_BASE=http://localhost:3000 2 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/.env.production: -------------------------------------------------------------------------------- 1 | VUE_APP_API_BASE=https://locally-server.now.sh 2 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | '@vue/standard' 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 13 | }, 14 | parserOptions: { 15 | parser: 'babel-eslint' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/README.md: -------------------------------------------------------------------------------- 1 | # my-vue-project 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | yarn run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | yarn run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-vue-project", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "axios": "^0.19.0", 12 | "core-js": "^3.2.1", 13 | "vue": "^2.6.10", 14 | "vue-router": "^3.0.3", 15 | "vuex": "^3.0.1" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "^3.11.0", 19 | "@vue/cli-plugin-eslint": "^3.11.0", 20 | "@vue/cli-service": "^3.11.0", 21 | "@vue/eslint-config-standard": "^4.0.0", 22 | "babel-eslint": "^10.0.1", 23 | "eslint": "^6.2.2", 24 | "eslint-plugin-vue": "^5.0.0", 25 | "sass": "^1.18.0", 26 | "sass-loader": "^7.1.0", 27 | "vue-template-compiler": "^2.6.10" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/02-02-my-vue-project/public/favicon.ico -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | my-vue-project 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 30 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/02-02-my-vue-project/src/assets/logo.png -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import store from './store' 5 | 6 | Vue.config.productionTip = false 7 | 8 | new Vue({ 9 | router, 10 | store, 11 | render: h => h(App) 12 | }).$mount('#app') 13 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Home from './views/Home.vue' 4 | 5 | Vue.use(Router) 6 | 7 | export default new Router({ 8 | routes: [ 9 | { 10 | path: '/', 11 | name: 'home', 12 | component: Home 13 | }, 14 | { 15 | path: '/about', 16 | name: 'about', 17 | // route level code-splitting 18 | // this generates a separate chunk (about.[hash].js) for this route 19 | // which is lazy-loaded when the route is visited. 20 | component: () => import(/* webpackChunkName: "about" */ './views/About.vue') 21 | } 22 | ] 23 | }) 24 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/src/store/actions.js: -------------------------------------------------------------------------------- 1 | export default { 2 | increment: ({ commit }) => commit('INCREMENT'), 3 | 4 | incrementAsync: ({ commit }) => setTimeout(() => commit('INCREMENT'), 1000), 5 | 6 | decrement: ({ commit }) => commit('DECREMENT'), 7 | 8 | decrementAsync: ({ commit }) => setTimeout(() => commit('DECREMENT'), 1000) 9 | } 10 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/src/store/getters.js: -------------------------------------------------------------------------------- 1 | export default { 2 | count: state => state.count 3 | } 4 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | import state from './state' 5 | import getters from './getters' 6 | import mutations from './mutations' 7 | import actions from './actions' 8 | 9 | Vue.use(Vuex) 10 | 11 | export default new Vuex.Store({ 12 | state, 13 | getters, 14 | mutations, 15 | actions 16 | }) 17 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/src/store/mutations.js: -------------------------------------------------------------------------------- 1 | export default { 2 | INCREMENT: state => { 3 | state.count++ 4 | }, 5 | DECREMENT: state => { 6 | state.count-- 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/src/store/state.js: -------------------------------------------------------------------------------- 1 | export default { 2 | count: 1 3 | } 4 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/src/utils/request.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | export default axios.create({ 4 | baseURL: process.env.VUE_APP_API_BASE, 5 | // auth: { 6 | // username: 'frontend', 7 | // password: 'ff6cf8d1-51c3-4dc6-8d3d-e1fd2cf48d31' 8 | // }, 9 | // timeout: 3 * 1000, // 3s 10 | // headers: { 11 | // 'X-Requested-With': 'XMLHttpRequest' 12 | // } 13 | }) 14 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /part-02/module-01/02-02-my-vue-project/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 24 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/.env.development: -------------------------------------------------------------------------------- 1 | VUE_APP_API_BASE=http://localhost:3000 2 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/.env.production: -------------------------------------------------------------------------------- 1 | VUE_APP_API_BASE=https://locally-server.now.sh 2 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | '@vue/standard' 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 13 | }, 14 | parserOptions: { 15 | parser: 'babel-eslint' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/README.md: -------------------------------------------------------------------------------- 1 | # <%= name %> 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | yarn run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | yarn run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | yarn run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "<%= name %>", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "axios": "^0.19.0", 12 | "core-js": "^3.2.1", 13 | "vue": "^2.6.10", 14 | "vue-router": "^3.0.3", 15 | "vuex": "^3.0.1" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "^3.11.0", 19 | "@vue/cli-plugin-eslint": "^3.11.0", 20 | "@vue/cli-service": "^3.11.0", 21 | "@vue/eslint-config-standard": "^4.0.0", 22 | "babel-eslint": "^10.0.1", 23 | "eslint": "^6.2.2", 24 | "eslint-plugin-vue": "^5.0.0", 25 | "sass": "^1.18.0", 26 | "sass-loader": "^7.1.0", 27 | "vue-template-compiler": "^2.6.10" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/02-03-generator-zce-vue/generators/app/templates/public/favicon.ico -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= name %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 30 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/02-03-generator-zce-vue/generators/app/templates/src/assets/logo.png -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import store from './store' 5 | 6 | Vue.config.productionTip = false 7 | 8 | new Vue({ 9 | router, 10 | store, 11 | render: h => h(App) 12 | }).$mount('#app') 13 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Home from './views/Home.vue' 4 | 5 | Vue.use(Router) 6 | 7 | export default new Router({ 8 | routes: [ 9 | { 10 | path: '/', 11 | name: 'home', 12 | component: Home 13 | }, 14 | { 15 | path: '/about', 16 | name: 'about', 17 | // route level code-splitting 18 | // this generates a separate chunk (about.[hash].js) for this route 19 | // which is lazy-loaded when the route is visited. 20 | component: () => import(/* webpackChunkName: "about" */ './views/About.vue') 21 | } 22 | ] 23 | }) 24 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/src/store/actions.js: -------------------------------------------------------------------------------- 1 | export default { 2 | increment: ({ commit }) => commit('INCREMENT'), 3 | 4 | incrementAsync: ({ commit }) => setTimeout(() => commit('INCREMENT'), 1000), 5 | 6 | decrement: ({ commit }) => commit('DECREMENT'), 7 | 8 | decrementAsync: ({ commit }) => setTimeout(() => commit('DECREMENT'), 1000) 9 | } 10 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/src/store/getters.js: -------------------------------------------------------------------------------- 1 | export default { 2 | count: state => state.count 3 | } 4 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | import state from './state' 5 | import getters from './getters' 6 | import mutations from './mutations' 7 | import actions from './actions' 8 | 9 | Vue.use(Vuex) 10 | 11 | export default new Vuex.Store({ 12 | state, 13 | getters, 14 | mutations, 15 | actions 16 | }) 17 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/src/store/mutations.js: -------------------------------------------------------------------------------- 1 | export default { 2 | INCREMENT: state => { 3 | state.count++ 4 | }, 5 | DECREMENT: state => { 6 | state.count-- 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/src/store/state.js: -------------------------------------------------------------------------------- 1 | export default { 2 | count: 1 3 | } 4 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/src/utils/request.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | export default axios.create({ 4 | baseURL: process.env.VUE_APP_API_BASE, 5 | // auth: { 6 | // username: 'frontend', 7 | // password: 'ff6cf8d1-51c3-4dc6-8d3d-e1fd2cf48d31' 8 | // }, 9 | // timeout: 3 * 1000, // 3s 10 | // headers: { 11 | // 'X-Requested-With': 'XMLHttpRequest' 12 | // } 13 | }) 14 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/src/views/About.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/generators/app/templates/src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 24 | -------------------------------------------------------------------------------- /part-02/module-01/02-03-generator-zce-vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "generator-zce-vue", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "dependencies": { 8 | "yeoman-generator": "^4.0.1" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-react-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "react-scripts start", 7 | "build": "react-scripts build", 8 | "test": "react-scripts test", 9 | "eject": "react-scripts eject" 10 | }, 11 | "eslintConfig": { 12 | "extends": "react-app" 13 | }, 14 | "browserslist": { 15 | "production": [ 16 | ">0.2%", 17 | "not dead", 18 | "not op_mini all" 19 | ], 20 | "development": [ 21 | "last 1 chrome version", 22 | "last 1 firefox version", 23 | "last 1 safari version" 24 | ] 25 | }, 26 | "dependencies": { 27 | "react": "^16.9.0", 28 | "react-dom": "^16.9.0", 29 | "react-scripts": "3.1.1" 30 | }, 31 | "devDependencies": { 32 | "plop": "^2.4.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/plop-templates/component.css.hbs: -------------------------------------------------------------------------------- 1 | .{{name}} { 2 | 3 | } -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/plop-templates/component.hbs: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default () => ( 4 |
5 |

{{name}} Component

6 |
7 | ) -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/plop-templates/component.test.hbs: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import {{name}} from './{{name}}'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(<{{name}} />, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/plopfile.js: -------------------------------------------------------------------------------- 1 | // Plop 入口文件，需要导出一个函数 2 | // 此函数接收一个 plop 对象，用于创建生成器任务 3 | 4 | module.exports = plop => { 5 | plop.setGenerator('component', { 6 | description: 'create a component', 7 | prompts: [ 8 | { 9 | type: 'input', 10 | name: 'name', 11 | message: 'component name', 12 | default: 'MyComponent' 13 | } 14 | ], 15 | actions: [ 16 | { 17 | type: 'add', // 代表添加文件 18 | path: 'src/components/{{name}}/{{name}}.js', 19 | templateFile: 'plop-templates/component.hbs' 20 | }, 21 | { 22 | type: 'add', // 代表添加文件 23 | path: 'src/components/{{name}}/{{name}}.css', 24 | templateFile: 'plop-templates/component.css.hbs' 25 | }, 26 | { 27 | type: 'add', // 代表添加文件 28 | path: 'src/components/{{name}}/{{name}}.test.js', 29 | templateFile: 'plop-templates/component.test.hbs' 30 | } 31 | ] 32 | }) 33 | } -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/02-04-plop-sample/public/favicon.ico -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/02-04-plop-sample/public/logo192.png -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/02-04-plop-sample/public/logo512.png -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Header from './components/Header/Header'; 4 | 5 | import './App.css'; 6 | 7 | function App() { 8 | return ( 9 |
10 |
11 |
12 | ); 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/src/components/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default () => ( 4 |
5 |

Footer Component

6 |
7 | ) -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/src/components/Header/Header.css: -------------------------------------------------------------------------------- 1 | .Header { 2 | background-color: #282c34; 3 | min-height: 100vh; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: center; 8 | font-size: calc(10px + 2vmin); 9 | color: white; 10 | } 11 | 12 | .Header-logo { 13 | animation: Header-logo-spin infinite 20s linear; 14 | height: 40vmin; 15 | pointer-events: none; 16 | } 17 | 18 | .Header-link { 19 | color: #61dafb; 20 | } 21 | 22 | @keyframes Header-logo-spin { 23 | from { 24 | transform: rotate(0deg); 25 | } 26 | to { 27 | transform: rotate(360deg); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/src/components/Header/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import logo from '../../assets/logo.svg'; 4 | 5 | import './Header.css'; 6 | 7 | export default () => ( 8 |
9 | logo 10 |

11 | Edit src/App.js and save to reload. 12 |

13 | 19 | Learn React 20 | 21 |
22 | ) 23 | -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/src/components/Header/Header.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Header from './Header'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(
, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/src/components/MyComponent/MyComponent.css: -------------------------------------------------------------------------------- 1 | .MyComponent { 2 | 3 | } -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/src/components/MyComponent/MyComponent.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default () => ( 4 |
5 |

MyComponent Component

6 |
7 | ) -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/src/components/MyComponent/MyComponent.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import MyComponent from './MyComponent'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /part-02/module-01/02-04-plop-sample/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import App from './App'; 5 | 6 | import './index.css'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /part-02/module-01/02-05-react-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /part-02/module-01/02-05-react-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.9.0", 7 | "react-dom": "^16.9.0", 8 | "react-scripts": "3.1.1" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": { 20 | "production": [ 21 | ">0.2%", 22 | "not dead", 23 | "not op_mini all" 24 | ], 25 | "development": [ 26 | "last 1 chrome version", 27 | "last 1 firefox version", 28 | "last 1 safari version" 29 | ] 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /part-02/module-01/02-05-react-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/02-05-react-app/public/favicon.ico -------------------------------------------------------------------------------- /part-02/module-01/02-05-react-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/02-05-react-app/public/logo192.png -------------------------------------------------------------------------------- /part-02/module-01/02-05-react-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/02-05-react-app/public/logo512.png -------------------------------------------------------------------------------- /part-02/module-01/02-05-react-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /part-02/module-01/02-05-react-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /part-02/module-01/02-05-react-app/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | -------------------------------------------------------------------------------- /part-02/module-01/02-05-react-app/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Header from './components/Header/Header'; 4 | 5 | import './App.css'; 6 | 7 | function App() { 8 | return ( 9 |
10 |
11 |
12 | ); 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /part-02/module-01/02-05-react-app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /part-02/module-01/02-05-react-app/src/components/Header/Header.css: -------------------------------------------------------------------------------- 1 | .Header { 2 | background-color: #282c34; 3 | min-height: 100vh; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: center; 8 | font-size: calc(10px + 2vmin); 9 | color: white; 10 | } 11 | 12 | .Header-logo { 13 | animation: Header-logo-spin infinite 20s linear; 14 | height: 40vmin; 15 | pointer-events: none; 16 | } 17 | 18 | .Header-link { 19 | color: #61dafb; 20 | } 21 | 22 | @keyframes Header-logo-spin { 23 | from { 24 | transform: rotate(0deg); 25 | } 26 | to { 27 | transform: rotate(360deg); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /part-02/module-01/02-05-react-app/src/components/Header/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import logo from '../../assets/logo.svg'; 4 | 5 | import './Header.css'; 6 | 7 | export default () => ( 8 |
9 | logo 10 |

11 | Edit src/App.js and save to reload. 12 |

13 | 19 | Learn React 20 | 21 |
22 | ) 23 | -------------------------------------------------------------------------------- /part-02/module-01/02-05-react-app/src/components/Header/Header.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Header from './Header'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(
, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /part-02/module-01/02-05-react-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /part-02/module-01/02-05-react-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import App from './App'; 5 | 6 | import './index.css'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "plop-react-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "plop": "^2.4.0", 7 | "react": "^16.9.0", 8 | "react-dom": "^16.9.0", 9 | "react-scripts": "3.1.1" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject", 16 | "plop": "plop" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": { 22 | "production": [ 23 | ">0.2%", 24 | "not dead", 25 | "not op_mini all" 26 | ], 27 | "development": [ 28 | "last 1 chrome version", 29 | "last 1 firefox version", 30 | "last 1 safari version" 31 | ] 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/plop-templates/component.css.hbs: -------------------------------------------------------------------------------- 1 | .{{name}} { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/plop-templates/component.js.hbs: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './{{name}}.css'; 4 | 5 | export default () => ( 6 |
7 | 8 |
9 | ) 10 | -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/plop-templates/component.test.js.hbs: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import {{name}} from './{{name}}'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(<{{name}} />, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/plopfile.js: -------------------------------------------------------------------------------- 1 | module.exports = plop => { 2 | plop.setGenerator('component', { 3 | description: 'application component', 4 | prompts: [ 5 | { 6 | type: 'input', 7 | name: 'name', 8 | message: 'component name' 9 | } 10 | ], 11 | actions: [ 12 | { 13 | type: 'add', 14 | path: 'src/components/{{name}}/{{name}}.js', 15 | templateFile: 'plop-templates/component.js.hbs' 16 | }, 17 | { 18 | type: 'add', 19 | path: 'src/components/{{name}}/{{name}}.css', 20 | templateFile: 'plop-templates/component.css.hbs' 21 | }, 22 | { 23 | type: 'add', 24 | path: 'src/components/{{name}}/{{name}}.test.js', 25 | templateFile: 'plop-templates/component.test.js.hbs' 26 | } 27 | ] 28 | }) 29 | } 30 | -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/02-06-plop-react-app/public/favicon.ico -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/02-06-plop-react-app/public/logo192.png -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/02-06-plop-react-app/public/logo512.png -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Header from './components/Header/Header'; 4 | 5 | import './App.css'; 6 | 7 | function App() { 8 | return ( 9 |
10 |
11 |
12 | ); 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/src/components/Header/Header.css: -------------------------------------------------------------------------------- 1 | .Header { 2 | background-color: #282c34; 3 | min-height: 100vh; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: center; 8 | font-size: calc(10px + 2vmin); 9 | color: white; 10 | } 11 | 12 | .Header-logo { 13 | animation: Header-logo-spin infinite 20s linear; 14 | height: 40vmin; 15 | pointer-events: none; 16 | } 17 | 18 | .Header-link { 19 | color: #61dafb; 20 | } 21 | 22 | @keyframes Header-logo-spin { 23 | from { 24 | transform: rotate(0deg); 25 | } 26 | to { 27 | transform: rotate(360deg); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/src/components/Header/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import logo from '../../assets/logo.svg'; 4 | 5 | import './Header.css'; 6 | 7 | export default () => ( 8 |
9 | logo 10 |

11 | Edit src/App.js and save to reload. 12 |

13 | 19 | Learn React 20 | 21 |
22 | ) 23 | -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/src/components/Header/Header.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Header from './Header'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(
, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /part-02/module-01/02-06-plop-react-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import App from './App'; 5 | 6 | import './index.css'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | -------------------------------------------------------------------------------- /part-02/module-01/02-07-sample-scaffolding/cli.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | // Node CLI 应用入口文件必须要有这样的文件头 4 | // 如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限为 755 5 | // 具体就是通过 chmod 755 cli.js 实现修改 6 | 7 | // 脚手架的工作过程： 8 | // 1. 通过命令行交互询问用户问题 9 | // 2. 根据用户回答的结果生成文件 10 | 11 | const fs = require('fs') 12 | const path = require('path') 13 | const inquirer = require('inquirer') 14 | const ejs = require('ejs') 15 | 16 | inquirer.prompt([ 17 | { 18 | type: 'input', 19 | name: 'name', 20 | message: 'Project name?' 21 | } 22 | ]) 23 | .then(anwsers => { 24 | // console.log(anwsers) 25 | // 根据用户回答的结果生成文件 26 | 27 | // 模板目录 28 | const tmplDir = path.join(__dirname, 'templates') 29 | // 目标目录 30 | const destDir = process.cwd() 31 | 32 | // 将模板下的文件全部转换到目标目录 33 | fs.readdir(tmplDir, (err, files) => { 34 | if (err) throw err 35 | files.forEach(file => { 36 | // 通过模板引擎渲染文件 37 | ejs.renderFile(path.join(tmplDir, file), anwsers, (err, result) => { 38 | if (err) throw err 39 | 40 | // 将结果写入目标文件路径 41 | fs.writeFileSync(path.join(destDir, file), result) 42 | }) 43 | }) 44 | }) 45 | }) -------------------------------------------------------------------------------- /part-02/module-01/02-07-sample-scaffolding/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sample-scaffolding", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "bin": "cli.js", 6 | "author": "zce (https://zce.me)", 7 | "license": "MIT", 8 | "dependencies": { 9 | "ejs": "^2.6.2", 10 | "inquirer": "^7.0.0" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /part-02/module-01/02-07-sample-scaffolding/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= name %> 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /part-02/module-01/02-07-sample-scaffolding/templates/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background-color: #f8f9fb; 4 | } -------------------------------------------------------------------------------- /part-02/module-01/03-01-my-web-app/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0 auto; 3 | padding: 20px; 4 | max-width: 800px; 5 | background-color: #000; 6 | color: #f00; 7 | } 8 | 9 | /*# sourceMappingURL=style.css.map */ 10 | -------------------------------------------------------------------------------- /part-02/module-01/03-01-my-web-app/css/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../scss/main.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA,kBAPQ;EAQR,OAPW","file":"style.css"} -------------------------------------------------------------------------------- /part-02/module-01/03-01-my-web-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Web App 8 | 9 | 10 | 11 |

My Web App

12 |

这是一个普通的网页应用

13 | 14 | 15 | -------------------------------------------------------------------------------- /part-02/module-01/03-01-my-web-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-web-app", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "scripts": { 8 | "build": "sass scss/main.scss css/style.css --watch", 9 | "serve": "browser-sync . --files \"css/*.css\"", 10 | "start": "run-p build serve" 11 | }, 12 | "devDependencies": { 13 | "browser-sync": "^2.26.7", 14 | "npm-run-all": "^4.1.5", 15 | "sass": "^1.22.10" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /part-02/module-01/03-01-my-web-app/scss/main.scss: -------------------------------------------------------------------------------- 1 | $body-bg: #000; 2 | $body-color: #f00; 3 | 4 | body { 5 | margin: 0 auto; 6 | padding: 20px; 7 | max-width: 800px; 8 | background-color: $body-bg; 9 | color: $body-color; 10 | } -------------------------------------------------------------------------------- /part-02/module-01/03-02-grunt-config/gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = grunt => { 2 | // grunt.initConfig() 用于为任务添加一些配置选项 3 | grunt.initConfig({ 4 | // 键一般对应任务的名称 5 | // 值可以是任意类型的数据 6 | foo: { 7 | bar: 'baz' 8 | } 9 | }) 10 | 11 | grunt.registerTask('foo', () => { 12 | // 任务中可以使用 grunt.config() 获取配置 13 | console.log(grunt.config('foo')) 14 | // 如果属性值是对象的话，config 中可以使用点的方式定位对象中属性的值 15 | console.log(grunt.config('foo.bar')) 16 | }) 17 | } -------------------------------------------------------------------------------- /part-02/module-01/03-02-grunt-config/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "grunt-config", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "devDependencies": { 8 | "grunt": "^1.0.4" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /part-02/module-01/03-02-grunt-sample/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "grunt-sample", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "devDependencies": { 8 | "grunt": "^1.0.4" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /part-02/module-01/03-03-grunt-failed/gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = grunt => { 2 | // 任务函数执行过程中如果返回 false 3 | // 则意味着此任务执行失败 4 | grunt.registerTask('bad', () => { 5 | console.log('bad working~') 6 | return false 7 | }) 8 | 9 | grunt.registerTask('foo', () => { 10 | console.log('foo working~') 11 | }) 12 | 13 | grunt.registerTask('bar', () => { 14 | console.log('bar working~') 15 | }) 16 | 17 | // 如果一个任务列表中的某个任务执行失败 18 | // 则后续任务默认不会运行 19 | // 除非 grunt 运行时指定 --force 参数强制执行 20 | grunt.registerTask('default', ['foo', 'bad', 'bar']) 21 | 22 | // 异步函数中标记当前任务执行失败的方式是为回调函数指定一个 false 的实参 23 | grunt.registerTask('bad-async', function () { 24 | const done = this.async() 25 | setTimeout(() => { 26 | console.log('async task working~') 27 | done(false) 28 | }, 1000) 29 | }) 30 | } -------------------------------------------------------------------------------- /part-02/module-01/03-03-grunt-failed/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "grunt-failed", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "dependencies": { 8 | "grunt": "^1.0.4" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /part-02/module-01/03-04-grunt-multi-task/gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = grunt => { 2 | // 多目标模式，可以让任务根据配置形成多个子任务 3 | 4 | // grunt.initConfig({ 5 | // build: { 6 | // foo: 100, 7 | // bar: '456' 8 | // } 9 | // }) 10 | 11 | // grunt.registerMultiTask('build', function () { 12 | // console.log(`task: build, target: ${this.target}, data: ${this.data}`) 13 | // }) 14 | 15 | grunt.initConfig({ 16 | build: { 17 | options: { 18 | msg: 'task options' 19 | }, 20 | foo: { 21 | options: { 22 | msg: 'foo target options' 23 | } 24 | }, 25 | bar: '456' 26 | } 27 | }) 28 | 29 | grunt.registerMultiTask('build', function () { 30 | console.log(this.options()) 31 | }) 32 | } 33 | -------------------------------------------------------------------------------- /part-02/module-01/03-04-grunt-multi-task/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "grunt-multi-task", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "devDependencies": { 8 | "grunt": "^1.0.4" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /part-02/module-01/03-05-grunt-use-plugin/gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = grunt => { 2 | grunt.initConfig({ 3 | clean: { 4 | temp: 'temp/**' 5 | } 6 | }) 7 | 8 | grunt.loadNpmTasks('grunt-contrib-clean') 9 | } -------------------------------------------------------------------------------- /part-02/module-01/03-05-grunt-use-plugin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "grunt-use-plugin", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "devDependencies": { 8 | "grunt": "^1.0.4" 9 | }, 10 | "dependencies": { 11 | "grunt-contrib-clean": "^2.0.0" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /part-02/module-01/03-06-grunt-plugins/dist/css/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | -webkit-font-smoothing: antialiased; 3 | -moz-osx-font-smoothing: grayscale; 4 | text-rendering: optimizeLegibility; 5 | } 6 | 7 | .jumbotron { 8 | margin-bottom: 0; 9 | padding-top: 3rem; 10 | padding-bottom: 3rem; 11 | background-color: #fff; 12 | } 13 | @media (min-width: 768px) { 14 | .jumbotron { 15 | padding-top: 6rem; 16 | padding-bottom: 6rem; 17 | } 18 | } 19 | .jumbotron .jumbotron-heading { 20 | font-weight: 300; 21 | } 22 | .jumbotron .container { 23 | max-width: 40rem; 24 | } 25 | .jumbotron p:last-child { 26 | margin-bottom: 0; 27 | } 28 | 29 | .site-footer { 30 | padding-top: 3rem; 31 | padding-bottom: 3rem; 32 | font-family: monospace; 33 | } 34 | .site-footer a { 35 | text-decoration: none; 36 | } 37 | @keyframes beat { 38 | from, to { 39 | transform: none; 40 | } 41 | 50% { 42 | transform: scale3d(1.4, 1.4, 1.4); 43 | } 44 | } 45 | .site-footer .heart { 46 | display: inline-block; 47 | color: #f20; 48 | font-weight: normal; 49 | font-style: normal; 50 | animation: beat 0.4s ease-in-out infinite; 51 | } 52 | 53 | /*# sourceMappingURL=main.css.map */ -------------------------------------------------------------------------------- /part-02/module-01/03-06-grunt-plugins/dist/css/main.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["file:///D:/zce/Desktop/grunt-demo/src/scss/main.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;;;AAGF;EACE;EACA,aAVkB;EAWlB,gBAXkB;EAYlB,kBAba;;AAeb;EANF;IAOI;IACA;;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;IAEE;;EAGF;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA","file":"main.css"} -------------------------------------------------------------------------------- /part-02/module-01/03-06-grunt-plugins/dist/js/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | $(function ($) { 4 | var $body = $('html, body'); 5 | $('#scroll_top').on('click', function () { 6 | $body.animate({ 7 | scrollTop: 0 8 | }, 600); 9 | return false; 10 | }); 11 | }); 12 | //# sourceMappingURL=app.js.map 13 | -------------------------------------------------------------------------------- /part-02/module-01/03-06-grunt-plugins/dist/js/app.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../../src/js/app.js"],"names":["$","$body","on","animate","scrollTop"],"mappings":";;AAAAA,CAAC,CAAC,UAACA,CAAD,EAAO;AACP,MAAMC,KAAK,GAAGD,CAAC,CAAC,YAAD,CAAf;AAEAA,EAAAA,CAAC,CAAC,aAAD,CAAD,CAAiBE,EAAjB,CAAoB,OAApB,EAA6B,YAAM;AACjCD,IAAAA,KAAK,CAACE,OAAN,CAAc;AAAEC,MAAAA,SAAS,EAAE;AAAb,KAAd,EAAgC,GAAhC;AACA,WAAO,KAAP;AACD,GAHD;AAID,CAPA,CAAD","sourcesContent":["$(($) => {\n const $body = $('html, body')\n\n $('#scroll_top').on('click', () => {\n $body.animate({ scrollTop: 0 }, 600)\n return false\n })\n})\n"],"file":"app.js"} -------------------------------------------------------------------------------- /part-02/module-01/03-06-grunt-plugins/gruntfile.js: -------------------------------------------------------------------------------- 1 | const sass = require('sass') 2 | const loadGruntTasks = require('load-grunt-tasks') 3 | 4 | module.exports = grunt => { 5 | grunt.initConfig({ 6 | sass: { 7 | options: { 8 | sourceMap: true, 9 | implementation: sass 10 | }, 11 | main: { 12 | files: { 13 | 'dist/css/main.css': 'src/scss/main.scss' 14 | } 15 | } 16 | }, 17 | babel: { 18 | options: { 19 | sourceMap: true, 20 | presets: ['@babel/preset-env'] 21 | }, 22 | main: { 23 | files: { 24 | 'dist/js/app.js': 'src/js/app.js' 25 | } 26 | } 27 | }, 28 | watch: { 29 | js: { 30 | files: ['src/js/*.js'], 31 | tasks: ['babel'] 32 | }, 33 | css: { 34 | files: ['src/scss/*.scss'], 35 | tasks: ['sass'] 36 | } 37 | } 38 | }) 39 | 40 | // grunt.loadNpmTasks('grunt-sass') 41 | loadGruntTasks(grunt) // 自动加载所有的 grunt 插件中的任务 42 | 43 | grunt.registerTask('default', ['sass', 'babel', 'watch']) 44 | } -------------------------------------------------------------------------------- /part-02/module-01/03-06-grunt-plugins/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "grunt-demo", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "devDependencies": { 8 | "@babel/core": "^7.5.5", 9 | "@babel/preset-env": "^7.5.5", 10 | "grunt": "^1.0.4", 11 | "grunt-babel": "^8.0.0", 12 | "grunt-contrib-watch": "^1.1.0", 13 | "grunt-sass": "^3.1.0", 14 | "load-grunt-tasks": "^5.1.0", 15 | "sass": "^1.22.10" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /part-02/module-01/03-06-grunt-plugins/src/js/app.js: -------------------------------------------------------------------------------- 1 | $(($) => { 2 | const $body = $('html, body') 3 | 4 | $('#scroll_top').on('click', () => { 5 | $body.animate({ scrollTop: 0 }, 600) 6 | return false 7 | }) 8 | }) 9 | -------------------------------------------------------------------------------- /part-02/module-01/03-06-grunt-plugins/src/scss/main.scss: -------------------------------------------------------------------------------- 1 | $jumbotron-bg: #fff; 2 | $jumbotron-padding: 3rem; 3 | 4 | body { 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | text-rendering: optimizeLegibility; 8 | } 9 | 10 | .jumbotron { 11 | margin-bottom: 0; 12 | padding-top: $jumbotron-padding; 13 | padding-bottom: $jumbotron-padding; 14 | background-color: $jumbotron-bg; 15 | 16 | @media (min-width: 768px) { 17 | padding-top: 6rem; 18 | padding-bottom: 6rem; 19 | } 20 | 21 | .jumbotron-heading { 22 | font-weight: 300; 23 | } 24 | 25 | .container { 26 | max-width: 40rem; 27 | } 28 | 29 | p:last-child { 30 | margin-bottom: 0; 31 | } 32 | } 33 | 34 | .site-footer { 35 | padding-top: 3rem; 36 | padding-bottom: 3rem; 37 | font-family: monospace; 38 | 39 | a { 40 | text-decoration: none; 41 | } 42 | 43 | @keyframes beat { 44 | from, 45 | to { 46 | transform: none; 47 | } 48 | 49 | 50% { 50 | transform: scale3d(1.4, 1.4, 1.4); 51 | } 52 | } 53 | 54 | .heart { 55 | display: inline-block; 56 | color: #f20; 57 | font-weight: normal; 58 | font-style: normal; 59 | animation: beat 0.4s ease-in-out infinite; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /part-02/module-01/03-07-gulp-sample/gulpfile.js: -------------------------------------------------------------------------------- 1 | // // 导出的函数都会作为 gulp 任务 2 | // exports.foo = () => { 3 | // console.log('foo task working~') 4 | // } 5 | 6 | // gulp 的任务函数都是异步的 7 | // 可以通过调用回调函数标识任务完成 8 | exports.foo = done => { 9 | console.log('foo task working~') 10 | done() // 标识任务执行完成 11 | } 12 | 13 | // default 是默认任务 14 | // 在运行是可以省略任务名参数 15 | exports.default = done => { 16 | console.log('default task working~') 17 | done() 18 | } 19 | 20 | // v4.0 之前需要通过 gulp.task() 方法注册任务 21 | const gulp = require('gulp') 22 | 23 | gulp.task('bar', done => { 24 | console.log('bar task working~') 25 | done() 26 | }) 27 | -------------------------------------------------------------------------------- /part-02/module-01/03-07-gulp-sample/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-sample", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "devDependencies": { 8 | "gulp": "^4.0.2" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /part-02/module-01/03-08-gulp-compose-tasks/gulpfile.js: -------------------------------------------------------------------------------- 1 | const { series, parallel } = require('gulp') 2 | 3 | const task1 = done => { 4 | setTimeout(() => { 5 | console.log('task1 working~') 6 | done() 7 | }, 1000) 8 | } 9 | 10 | const task2 = done => { 11 | setTimeout(() => { 12 | console.log('task2 working~') 13 | done() 14 | }, 1000) 15 | } 16 | 17 | const task3 = done => { 18 | setTimeout(() => { 19 | console.log('task3 working~') 20 | done() 21 | }, 1000) 22 | } 23 | 24 | // 让多个任务按照顺序依次执行 25 | exports.foo = series(task1, task2, task3) 26 | 27 | // 让多个任务同时执行 28 | exports.bar = parallel(task1, task2, task3) 29 | -------------------------------------------------------------------------------- /part-02/module-01/03-08-gulp-compose-tasks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-compose-tasks", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "devDependencies": { 8 | "gulp": "^4.0.2" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /part-02/module-01/03-09-gulp-async-task/gulpfile.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | 3 | exports.callback = done => { 4 | console.log('callback task') 5 | done() 6 | } 7 | 8 | exports.callback_error = done => { 9 | console.log('callback task') 10 | done(new Error('task failed')) 11 | } 12 | 13 | exports.promise = () => { 14 | console.log('promise task') 15 | return Promise.resolve() 16 | } 17 | 18 | exports.promise_error = () => { 19 | console.log('promise task') 20 | return Promise.reject(new Error('task failed')) 21 | } 22 | 23 | const timeout = time => { 24 | return new Promise(resolve => { 25 | setTimeout(resolve, time) 26 | }) 27 | } 28 | 29 | exports.async = async () => { 30 | await timeout(1000) 31 | console.log('async task') 32 | } 33 | 34 | exports.stream = () => { 35 | const read = fs.createReadStream('yarn.lock') 36 | const write = fs.createWriteStream('a.txt') 37 | read.pipe(write) 38 | return read 39 | } 40 | 41 | // exports.stream = done => { 42 | // const read = fs.createReadStream('yarn.lock') 43 | // const write = fs.createWriteStream('a.txt') 44 | // read.pipe(write) 45 | // read.on('end', () => { 46 | // done() 47 | // }) 48 | // } 49 | -------------------------------------------------------------------------------- /part-02/module-01/03-09-gulp-async-task/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-async-task", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "dependencies": { 8 | "gulp": "^4.0.2" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /part-02/module-01/03-09-gulp-async-task/yarn.lock: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-09-gulp-async-task/yarn.lock -------------------------------------------------------------------------------- /part-02/module-01/03-10-gulp-build-process/gulpfile.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const { Transform } = require('stream') 3 | 4 | exports.default = () => { 5 | // 文件读取流 6 | const readStream = fs.createReadStream('normalize.css') 7 | 8 | // 文件写入流 9 | const writeStream = fs.createWriteStream('normalize.min.css') 10 | 11 | // 文件转换流 12 | const transformStream = new Transform({ 13 | // 核心转换过程 14 | transform: (chunk, encoding, callback) => { 15 | const input = chunk.toString() 16 | const output = input.replace(/\s+/g, '').replace(/\/\*.+?\*\//g, '') 17 | callback(null, output) 18 | } 19 | }) 20 | 21 | return readStream 22 | .pipe(transformStream) // 转换 23 | .pipe(writeStream) // 写入 24 | } 25 | -------------------------------------------------------------------------------- /part-02/module-01/03-10-gulp-build-process/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-build-process", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "devDependencies": { 8 | "gulp": "^4.0.2" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /part-02/module-01/03-11-gulp-files-api/gulpfile.js: -------------------------------------------------------------------------------- 1 | const { src, dest } = require('gulp') 2 | const cleanCSS = require('gulp-clean-css') 3 | const rename = require('gulp-rename') 4 | 5 | exports.default = () => { 6 | return src('src/*.css') 7 | .pipe(cleanCSS()) 8 | .pipe(rename({ extname: '.min.css' })) 9 | .pipe(dest('dist')) 10 | } 11 | -------------------------------------------------------------------------------- /part-02/module-01/03-11-gulp-files-api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-files-api", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "devDependencies": { 8 | "gulp": "^4.0.2", 9 | "gulp-clean-css": "^4.2.0", 10 | "gulp-rename": "^1.4.0" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /part-02/module-01/03-12-zce-gulp-demo/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | 63 | 64 | dist 65 | 66 | temp 67 | -------------------------------------------------------------------------------- /part-02/module-01/03-12-zce-gulp-demo/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 汪磊 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /part-02/module-01/03-12-zce-gulp-demo/README.md: -------------------------------------------------------------------------------- 1 | # zce-gulp-demo -------------------------------------------------------------------------------- /part-02/module-01/03-12-zce-gulp-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "zce-gulp-demo", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "repository": "https://github.com/zce/zce-gulp-demo.git", 6 | "author": "zce (https://zce.me)", 7 | "license": "MIT", 8 | "scripts": { 9 | "clean": "gulp clean", 10 | "build": "gulp build", 11 | "develop": "gulp develop" 12 | }, 13 | "dependencies": { 14 | "bootstrap": "^4.3.1", 15 | "jquery": "^3.4.1", 16 | "popper.js": "^1.15.0" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "^7.5.5", 20 | "@babel/preset-env": "^7.5.5", 21 | "browser-sync": "^2.26.7", 22 | "del": "^5.1.0", 23 | "gulp": "^4.0.2", 24 | "gulp-babel": "^8.0.0", 25 | "gulp-clean-css": "^4.2.0", 26 | "gulp-htmlmin": "^5.0.1", 27 | "gulp-if": "^3.0.0", 28 | "gulp-imagemin": "^6.1.0", 29 | "gulp-load-plugins": "^2.0.1", 30 | "gulp-sass": "^4.0.2", 31 | "gulp-swig": "^0.9.1", 32 | "gulp-uglify": "^3.0.2", 33 | "gulp-useref": "^3.1.6" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /part-02/module-01/03-12-zce-gulp-demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-12-zce-gulp-demo/public/favicon.ico -------------------------------------------------------------------------------- /part-02/module-01/03-12-zce-gulp-demo/src/about.html: -------------------------------------------------------------------------------- 1 | {% set current = 'about' %} 2 | {% extends 'layouts/basic.html' %} 3 | 4 | {% block body %} 5 |
6 | 7 |
8 |
9 |

ABOUT ME

10 |

MAKE IT BETTER!

11 |

12 | Follow me 13 |

14 |
15 |
16 | 17 |
18 |
19 | {{ pkg.name }}'s logo 20 |
21 |
22 | 23 |
24 | {% endblock %} 25 | -------------------------------------------------------------------------------- /part-02/module-01/03-12-zce-gulp-demo/src/assets/fonts/pages.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-12-zce-gulp-demo/src/assets/fonts/pages.eot -------------------------------------------------------------------------------- /part-02/module-01/03-12-zce-gulp-demo/src/assets/fonts/pages.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-12-zce-gulp-demo/src/assets/fonts/pages.ttf -------------------------------------------------------------------------------- /part-02/module-01/03-12-zce-gulp-demo/src/assets/fonts/pages.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-12-zce-gulp-demo/src/assets/fonts/pages.woff -------------------------------------------------------------------------------- /part-02/module-01/03-12-zce-gulp-demo/src/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-12-zce-gulp-demo/src/assets/images/logo.png -------------------------------------------------------------------------------- /part-02/module-01/03-12-zce-gulp-demo/src/assets/scripts/main.js: -------------------------------------------------------------------------------- 1 | // TODO: site logics 2 | 3 | $(($) => { 4 | const $body = $('html, body') 5 | 6 | $('#scroll_top').on('click', () => { 7 | $body.animate({ scrollTop: 0 }, 600) 8 | return false 9 | }) 10 | }) 11 | -------------------------------------------------------------------------------- /part-02/module-01/03-12-zce-gulp-demo/src/assets/styles/_icons.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-weight: normal; 3 | font-style: normal; 4 | font-family: 'pages'; 5 | src: url('../fonts/pages.eot?yfqoab'); 6 | src: url('../fonts/pages.eot?yfqoab#iefix') format('embedded-opentype'), 7 | url('../fonts/pages.ttf?yfqoab') format('truetype'), 8 | url('../fonts/pages.woff?yfqoab') format('woff'), 9 | url('../fonts/pages.svg?yfqoab#pages') format('svg'); 10 | } 11 | 12 | [class^='icon-'], 13 | [class*=' icon-'] { 14 | text-transform: none; 15 | font-weight: normal; 16 | font-style: normal; 17 | font-variant: normal; 18 | font-family: 'pages' !important; 19 | line-height: 1; 20 | 21 | -webkit-font-smoothing: antialiased; 22 | -moz-osx-font-smoothing: grayscale; 23 | speak: none; 24 | } 25 | 26 | .icon-aperture:before { 27 | content: '\e900'; 28 | } 29 | 30 | .icon-github:before { 31 | content: '\e901'; 32 | } 33 | 34 | .icon-heart:before { 35 | content: '\e902'; 36 | } 37 | 38 | .icon-send:before { 39 | content: '\e903'; 40 | } 41 | 42 | .icon-twitter:before { 43 | content: '\e904'; 44 | } 45 | -------------------------------------------------------------------------------- /part-02/module-01/03-12-zce-gulp-demo/src/assets/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $jumbotron-bg: #fff; 2 | $jumbotron-padding: 3rem; 3 | -------------------------------------------------------------------------------- /part-02/module-01/03-12-zce-gulp-demo/src/assets/styles/demo.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-12-zce-gulp-demo/src/assets/styles/demo.scss -------------------------------------------------------------------------------- /part-02/module-01/03-12-zce-gulp-demo/src/partials/footer.html: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /part-02/module-01/03-12-zce-gulp-demo/src/partials/tags.html: -------------------------------------------------------------------------------- 1 | {% macro svg(name, className, size) %} 2 | 5 | {% endmacro %} 6 | 7 | {% macro icon(name) %} 8 | 9 | {% endmacro %} 10 | -------------------------------------------------------------------------------- /part-02/module-01/03-13-zce-gulp-extract/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | 63 | 64 | dist 65 | 66 | temp 67 | -------------------------------------------------------------------------------- /part-02/module-01/03-13-zce-gulp-extract/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 汪磊 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /part-02/module-01/03-13-zce-gulp-extract/README.md: -------------------------------------------------------------------------------- 1 | # zce-gulp-demo -------------------------------------------------------------------------------- /part-02/module-01/03-13-zce-gulp-extract/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "zce-gulp-demo", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "repository": "https://github.com/zce/zce-gulp-demo.git", 6 | "author": "zce (https://zce.me)", 7 | "license": "MIT", 8 | "scripts": { 9 | "clean": "gulp clean", 10 | "build": "gulp build", 11 | "develop": "gulp develop" 12 | }, 13 | "dependencies": { 14 | "bootstrap": "^4.3.1", 15 | "jquery": "^3.4.1", 16 | "popper.js": "^1.15.0" 17 | }, 18 | "devDependencies": { 19 | "gulp": "^4.0.2", 20 | "gulp-cli": "^2.2.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /part-02/module-01/03-13-zce-gulp-extract/pages.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | build: { 3 | src: 'src', 4 | dist: 'release', 5 | temp: '.tmp', 6 | public: 'public', 7 | paths: { 8 | styles: 'assets/styles/*.scss', 9 | scripts: 'assets/scripts/*.js', 10 | pages: '*.html', 11 | images: 'assets/images/**', 12 | fonts: 'assets/fonts/**' 13 | } 14 | }, 15 | data: { 16 | menus: [ 17 | { 18 | name: 'Home', 19 | icon: 'aperture', 20 | link: 'index.html' 21 | }, 22 | { 23 | name: 'Features', 24 | link: 'features.html' 25 | }, 26 | { 27 | name: 'About', 28 | link: 'about.html' 29 | }, 30 | { 31 | name: 'Contact', 32 | link: '#', 33 | children: [ 34 | { 35 | name: 'Twitter', 36 | link: 'https://twitter.com/w_zce' 37 | }, 38 | { 39 | name: 'About', 40 | link: 'https://weibo.com/zceme' 41 | }, 42 | { 43 | name: 'divider' 44 | }, 45 | { 46 | name: 'About', 47 | link: 'https://github.com/zce' 48 | } 49 | ] 50 | } 51 | ], 52 | pkg: require('./package.json'), 53 | date: new Date() 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /part-02/module-01/03-13-zce-gulp-extract/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-13-zce-gulp-extract/public/favicon.ico -------------------------------------------------------------------------------- /part-02/module-01/03-13-zce-gulp-extract/src/about.html: -------------------------------------------------------------------------------- 1 | {% set current = 'about' %} 2 | {% extends 'layouts/basic.html' %} 3 | 4 | {% block body %} 5 |
6 | 7 |
8 |
9 |

ABOUT ME

10 |

MAKE IT BETTER!

11 |

12 | Follow me 13 |

14 |
15 |
16 | 17 |
18 |
19 | {{ pkg.name }}'s logo 20 |
21 |
22 | 23 |
24 | {% endblock %} 25 | -------------------------------------------------------------------------------- /part-02/module-01/03-13-zce-gulp-extract/src/assets/fonts/pages.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-13-zce-gulp-extract/src/assets/fonts/pages.eot -------------------------------------------------------------------------------- /part-02/module-01/03-13-zce-gulp-extract/src/assets/fonts/pages.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-13-zce-gulp-extract/src/assets/fonts/pages.ttf -------------------------------------------------------------------------------- /part-02/module-01/03-13-zce-gulp-extract/src/assets/fonts/pages.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-13-zce-gulp-extract/src/assets/fonts/pages.woff -------------------------------------------------------------------------------- /part-02/module-01/03-13-zce-gulp-extract/src/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-13-zce-gulp-extract/src/assets/images/logo.png -------------------------------------------------------------------------------- /part-02/module-01/03-13-zce-gulp-extract/src/assets/scripts/main.js: -------------------------------------------------------------------------------- 1 | // TODO: site logics 2 | 3 | $(($) => { 4 | const $body = $('html, body') 5 | 6 | $('#scroll_top').on('click', () => { 7 | $body.animate({ scrollTop: 0 }, 600) 8 | return false 9 | }) 10 | }) 11 | -------------------------------------------------------------------------------- /part-02/module-01/03-13-zce-gulp-extract/src/assets/styles/_icons.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-weight: normal; 3 | font-style: normal; 4 | font-family: 'pages'; 5 | src: url('../fonts/pages.eot?yfqoab'); 6 | src: url('../fonts/pages.eot?yfqoab#iefix') format('embedded-opentype'), 7 | url('../fonts/pages.ttf?yfqoab') format('truetype'), 8 | url('../fonts/pages.woff?yfqoab') format('woff'), 9 | url('../fonts/pages.svg?yfqoab#pages') format('svg'); 10 | } 11 | 12 | [class^='icon-'], 13 | [class*=' icon-'] { 14 | text-transform: none; 15 | font-weight: normal; 16 | font-style: normal; 17 | font-variant: normal; 18 | font-family: 'pages' !important; 19 | line-height: 1; 20 | 21 | -webkit-font-smoothing: antialiased; 22 | -moz-osx-font-smoothing: grayscale; 23 | speak: none; 24 | } 25 | 26 | .icon-aperture:before { 27 | content: '\e900'; 28 | } 29 | 30 | .icon-github:before { 31 | content: '\e901'; 32 | } 33 | 34 | .icon-heart:before { 35 | content: '\e902'; 36 | } 37 | 38 | .icon-send:before { 39 | content: '\e903'; 40 | } 41 | 42 | .icon-twitter:before { 43 | content: '\e904'; 44 | } 45 | -------------------------------------------------------------------------------- /part-02/module-01/03-13-zce-gulp-extract/src/assets/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $jumbotron-bg: #fff; 2 | $jumbotron-padding: 3rem; 3 | -------------------------------------------------------------------------------- /part-02/module-01/03-13-zce-gulp-extract/src/assets/styles/demo.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-13-zce-gulp-extract/src/assets/styles/demo.scss -------------------------------------------------------------------------------- /part-02/module-01/03-13-zce-gulp-extract/src/partials/footer.html: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /part-02/module-01/03-13-zce-gulp-extract/src/partials/tags.html: -------------------------------------------------------------------------------- 1 | {% macro svg(name, className, size) %} 2 | 5 | {% endmacro %} 6 | 7 | {% macro icon(name) %} 8 | 9 | {% endmacro %} 10 | -------------------------------------------------------------------------------- /part-02/module-01/03-14-zce-pages/.editorconfig: -------------------------------------------------------------------------------- 1 | # For more information about the properties used in 2 | # this file, please see the EditorConfig documentation: 3 | # http://editorconfig.org/ 4 | 5 | root = true 6 | 7 | [*] 8 | charset = utf-8 9 | end_of_line = lf 10 | indent_size = 2 11 | indent_style = space 12 | insert_final_newline = true 13 | max_line_length = 80 14 | trim_trailing_whitespace = true 15 | 16 | [*.md] 17 | max_line_length = 0 18 | trim_trailing_whitespace = false 19 | 20 | [COMMIT_EDITMSG] 21 | max_line_length = 0 22 | -------------------------------------------------------------------------------- /part-02/module-01/03-14-zce-pages/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [0.1.0] - 2019-09-10 4 | 5 | - Initial release 6 | 7 | 8 | -------------------------------------------------------------------------------- /part-02/module-01/03-14-zce-pages/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 zce (https://zce.me) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /part-02/module-01/03-14-zce-pages/bin/zce-pages.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | process.argv.push('--cwd') 4 | process.argv.push(process.cwd()) 5 | process.argv.push('--gulpfile') 6 | process.argv.push(require.resolve('..')) 7 | 8 | require('gulp/bin/gulp') 9 | -------------------------------------------------------------------------------- /part-02/module-01/03-15-zce-pages-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "zce-pages-demo", 3 | "version": "0.1.0", 4 | "main": "index.js", 5 | "author": "zce (https://zce.me)", 6 | "license": "MIT", 7 | "scripts": { 8 | "clean": "zce-pages clean", 9 | "build": "zce-pages build", 10 | "develop": "zce-pages develop" 11 | }, 12 | "devDependencies": { 13 | "zce-pages": "^0.2.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /part-02/module-01/03-15-zce-pages-demo/pages.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | build: { 3 | src: 'src', 4 | dist: 'release', 5 | temp: '.tmp', 6 | public: 'public', 7 | paths: { 8 | styles: 'assets/styles/*.scss', 9 | scripts: 'assets/scripts/*.js', 10 | pages: '*.html', 11 | images: 'assets/images/**', 12 | fonts: 'assets/fonts/**' 13 | } 14 | }, 15 | data: { 16 | menus: [ 17 | { 18 | name: 'Home', 19 | icon: 'aperture', 20 | link: 'index.html' 21 | }, 22 | { 23 | name: 'Features', 24 | link: 'features.html' 25 | }, 26 | { 27 | name: 'About', 28 | link: 'about.html' 29 | }, 30 | { 31 | name: 'Contact', 32 | link: '#', 33 | children: [ 34 | { 35 | name: 'Twitter', 36 | link: 'https://twitter.com/w_zce' 37 | }, 38 | { 39 | name: 'About', 40 | link: 'https://weibo.com/zceme' 41 | }, 42 | { 43 | name: 'divider' 44 | }, 45 | { 46 | name: 'About', 47 | link: 'https://github.com/zce' 48 | } 49 | ] 50 | } 51 | ], 52 | pkg: require('./package.json'), 53 | date: new Date() 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /part-02/module-01/03-15-zce-pages-demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-15-zce-pages-demo/public/favicon.ico -------------------------------------------------------------------------------- /part-02/module-01/03-15-zce-pages-demo/src/about.html: -------------------------------------------------------------------------------- 1 | {% set current = 'about' %} 2 | {% extends 'layouts/basic.html' %} 3 | 4 | {% block body %} 5 |
6 | 7 |
8 |
9 |

ABOUT ME

10 |

MAKE IT BETTER!

11 |

12 | Follow me 13 |

14 |
15 |
16 | 17 |
18 |
19 | {{ pkg.name }}'s logo 20 |
21 |
22 | 23 |
24 | {% endblock %} 25 | -------------------------------------------------------------------------------- /part-02/module-01/03-15-zce-pages-demo/src/assets/fonts/pages.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-15-zce-pages-demo/src/assets/fonts/pages.eot -------------------------------------------------------------------------------- /part-02/module-01/03-15-zce-pages-demo/src/assets/fonts/pages.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-15-zce-pages-demo/src/assets/fonts/pages.ttf -------------------------------------------------------------------------------- /part-02/module-01/03-15-zce-pages-demo/src/assets/fonts/pages.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-15-zce-pages-demo/src/assets/fonts/pages.woff -------------------------------------------------------------------------------- /part-02/module-01/03-15-zce-pages-demo/src/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-15-zce-pages-demo/src/assets/images/logo.png -------------------------------------------------------------------------------- /part-02/module-01/03-15-zce-pages-demo/src/assets/scripts/main.js: -------------------------------------------------------------------------------- 1 | // TODO: site logics 2 | 3 | $(($) => { 4 | const $body = $('html, body') 5 | 6 | $('#scroll_top').on('click', () => { 7 | $body.animate({ scrollTop: 0 }, 600) 8 | return false 9 | }) 10 | }) 11 | -------------------------------------------------------------------------------- /part-02/module-01/03-15-zce-pages-demo/src/assets/styles/_icons.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-weight: normal; 3 | font-style: normal; 4 | font-family: 'pages'; 5 | src: url('../fonts/pages.eot?yfqoab'); 6 | src: url('../fonts/pages.eot?yfqoab#iefix') format('embedded-opentype'), 7 | url('../fonts/pages.ttf?yfqoab') format('truetype'), 8 | url('../fonts/pages.woff?yfqoab') format('woff'), 9 | url('../fonts/pages.svg?yfqoab#pages') format('svg'); 10 | } 11 | 12 | [class^='icon-'], 13 | [class*=' icon-'] { 14 | text-transform: none; 15 | font-weight: normal; 16 | font-style: normal; 17 | font-variant: normal; 18 | font-family: 'pages' !important; 19 | line-height: 1; 20 | 21 | -webkit-font-smoothing: antialiased; 22 | -moz-osx-font-smoothing: grayscale; 23 | speak: none; 24 | } 25 | 26 | .icon-aperture:before { 27 | content: '\e900'; 28 | } 29 | 30 | .icon-github:before { 31 | content: '\e901'; 32 | } 33 | 34 | .icon-heart:before { 35 | content: '\e902'; 36 | } 37 | 38 | .icon-send:before { 39 | content: '\e903'; 40 | } 41 | 42 | .icon-twitter:before { 43 | content: '\e904'; 44 | } 45 | -------------------------------------------------------------------------------- /part-02/module-01/03-15-zce-pages-demo/src/assets/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $jumbotron-bg: #fff; 2 | $jumbotron-padding: 3rem; 3 | -------------------------------------------------------------------------------- /part-02/module-01/03-15-zce-pages-demo/src/assets/styles/demo.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-15-zce-pages-demo/src/assets/styles/demo.scss -------------------------------------------------------------------------------- /part-02/module-01/03-15-zce-pages-demo/src/partials/footer.html: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /part-02/module-01/03-15-zce-pages-demo/src/partials/tags.html: -------------------------------------------------------------------------------- 1 | {% macro svg(name, className, size) %} 2 | 5 | {% endmacro %} 6 | 7 | {% macro icon(name) %} 8 | 9 | {% endmacro %} 10 | -------------------------------------------------------------------------------- /part-02/module-01/03-16-fis-sample/css/style.scss: -------------------------------------------------------------------------------- 1 | $body-bg: #000; 2 | $body-color: #f00; 3 | 4 | body { 5 | margin: 0 auto; 6 | padding: 20px; 7 | max-width: 800px; 8 | background-color: $body-bg; 9 | color: $body-color; 10 | } 11 | -------------------------------------------------------------------------------- /part-02/module-01/03-16-fis-sample/fis-conf.js: -------------------------------------------------------------------------------- 1 | fis.match('*.{js,scss,png}', { 2 | release: '/assets/$0' 3 | }) 4 | 5 | fis.match('**/*.scss', { 6 | rExt: '.css', 7 | parser: fis.plugin('node-sass'), 8 | optimizer: fis.plugin('clean-css') 9 | }) 10 | 11 | fis.match('**/*.js', { 12 | parser: fis.plugin('babel-6.x'), 13 | optimizer: fis.plugin('uglify-js') 14 | }) 15 | -------------------------------------------------------------------------------- /part-02/module-01/03-16-fis-sample/img/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-16-fis-sample/img/icon.png -------------------------------------------------------------------------------- /part-02/module-01/03-16-fis-sample/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | FIS Sample 8 | 9 | 10 | 11 |

FIS Sample

12 | logo 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /part-02/module-01/03-16-fis-sample/js/app.js: -------------------------------------------------------------------------------- 1 | ;((window, document) => { 2 | document.querySelector('#btn').addEventListener('click', () => { 3 | alert(Date.now()) 4 | }) 5 | })(window, document) 6 | -------------------------------------------------------------------------------- /part-02/module-01/03-16-fis-sample/output/assets/css/style.css: -------------------------------------------------------------------------------- 1 | body{margin:0 auto;padding:20px;max-width:800px;background-color:#000;color:red} -------------------------------------------------------------------------------- /part-02/module-01/03-16-fis-sample/output/assets/css/style.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0 auto; 3 | padding: 20px; 4 | max-width: 800px; 5 | background-color: #000; 6 | color: #f00; 7 | } 8 | -------------------------------------------------------------------------------- /part-02/module-01/03-16-fis-sample/output/assets/img/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/03-16-fis-sample/output/assets/img/icon.png -------------------------------------------------------------------------------- /part-02/module-01/03-16-fis-sample/output/assets/js/app.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(t,e){e.querySelector("#btn").addEventListener("click",function(){alert(Date.now())})}(window,document); -------------------------------------------------------------------------------- /part-02/module-01/03-16-fis-sample/output/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | FIS Sample 8 | 9 | 10 | 11 |

FIS Sample

12 | logo 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /part-02/module-01/作业案例基础代码.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-01/作业案例基础代码.zip -------------------------------------------------------------------------------- /part-02/module-02/编程题基础代码.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lagoufed/fed-e-code/73f8c6b18296a7be9130e51ff4453cf1d8740600/part-02/module-02/编程题基础代码.zip --------------------------------------------------------------------------------