代码风格

还能用python代码画爱心？还有这种操作？这是什么原理？，不置信python代码能够画爱心？先来一张效果图来看看成果吧！ 用python代码画爱心的思路是怎么的？1、怎么画心形曲线2、怎么填满心形曲线3、怎么用 python 画出爱心接下来看好了，满满的都是干货，不珍藏将是遗憾哦！ 1、怎么画心形曲线？这个最难的局部，前人已将大树栽好，咱们只有记住公式，即可在大树下纳凉哦！明天咱们选用中上的那个图形，一起来看看吧！ 2、怎么填满爱心曲线？简略说：函数=0 是一根线, 那线的右边跟左边就是大于 0 跟小于 0.取x, y = 0 , 发现 函数 <=0 是成立的，先试试！ 3、怎么用 python 画出爱心？咱们先测试一下公式： 把公式放到 python 中， 借助 sympy 这个库,确认这个公式是否可行。from sympy import var, plot_implicitvar('x y ')plot_implicit((x2+(-y)2-1)3+x2(-y)*3)成果如下图所示：（如同还不错哦）。 咱们把一行画心的代码解析一下，是这样：l2=[]# 将纵向每个字符当作 y 坐标的刻度for y in range(15,-15,-1): l3 = [] # 将横向每个字符当作 x 坐标的刻度 for x in range(-30,30): # 如果 x,y 点在心形内,则将一个字符退出到行,否则退出空字符 l3.append((' I love U'[(x-y)%9]if((x0.05)2+(y0.1)2-1)3-(x0.05)2(y0.1)*3<=0 else' ')) l2.append(''.join(l3))l1 ='\n'.join(l2) for i in l1: print("\033[91m"+i,end="",flush=True) 上面这段代码，是不是跟咱们用的公式很像， 只不过做了 x y 轴的缩放：((x0.05)2+(y0.1)2-1)3-(x0.05)2(y0.1)*3<=0 ...

Ng-Matero 中文版文档已经发布 点击查看前言原本只是想简单的聊一下代码格式化的问题，无奈本文拖沓了很久，在此期间，我又思考了很多，我越来越觉得代码格式化是一门艺术。为了衬托“艺术”二字，可能叫“代码美化”更贴切一点，但是本文的深度远没有标题那么宏大。 在我看来，代码质量不仅体现在逻辑上，也要体现在形式上。尤其前端代码，在日渐复杂的单页面开发中，代码格式化不仅是为了美观，也是为了更好的阅读。关于代码的格式化并没有统一的标准，每个人都有自己的见解，所以本文的目的以探讨和推荐为主。 可能很少有人会去考虑这方面的问题，毕竟美化插件都是现成的，比如常用的 Prettier，只要一个快捷键就可以迅速格式化，但是代码格式化插件的标准并不一定是最好的。 本文范例主要以 Angular 为主，但是代码美化的建议同样适用于 React 和 Vue。 每行代码多少字符合适？关于代码字符数一直是一个争论不休的问题。在 Python编码风格指导(PEP8) 规定了每行不超过 80 个字符。Prettier 默认也是 80 个字符。 赞成这条规范的人认为 80 个字符紧凑美观，在大屏显示器也可以分多栏显示。如下图所示： 我最开始也是赞成 80 个字符的建议，但是当我遵循这条规范写了近一年的 Angular 代码之后，我发现这条规范有一些缺陷。 首先这条规范是 Python 编码风格的建议，而 Python 的代码是以缩进代表代码块，类、函数等在定义时也没有大括号及小括号，算上括号前的空格，这就比一般的代码少几个字符。 其次现代的编程模式大多是面向对象的风格，类的继承、接口实现等都可能导致代码很长，在 Angular 中可能还会实现多个钩子函数的接口。 另外，Angular 的风格指南建议不要为了精简变量命名而损失易读性，所以很多时候函数命名可能很长，再加上类型系统及链式调用等，单行代码很容易超过 80 个字符，这样会造成过多的折行。 下面是一段使用 80 字符宽度格式化的 TS 代码： 我们再看一下扩大到 100 字符之后的效果： 这段代码或许还不是最典型的例子，但是也能看出两者的不同，在实际的业务当中，类似的折行可能更多，而从我个人的角度来看，过多的折行反而破坏了代码的完整度。目前常用的代码宽度有三种，分别是 80、100、120，很显然，80 太短，120 太长，以中庸之道，取 100 刚好。 模板格式化代码宽度对模板（html）的影响也很大，下面我们重点聊一下关于模板的格式化问题。以下是使用 Prettier 的默认设置格式化的效果。 上面这种格式化方案非常普遍，但是我个人并不喜欢这种格式化的效果，原因有以下几点： 开始标签末尾的尖括号看上去有点突兀。所有属性全部换行，整体有些松散，模板代码可能变得很长。标签和属性的区分度不高。我比较喜欢下面的格式化方案，整齐紧凑，属性之间对齐，标签一目了然。 简单说一下上面这种格式化效果的方法：需要使用 VSCode 默认的 HTML 格式化插件。在 首选项-设置-扩展-HTML，设置 Wrap Attributes 属性，选择 preserve-aligned（保留属性的包装，但对齐），这个选项允许多个标签单行显示。 ...

➢ 写作平均每天花费0.5小时-2小时的时间，可以依次发布到各大自媒体平台。 可以收集到的反馈有： 推荐算法的反馈，哪怕一开始什么观众都没有，算法也会按一定的数量推送给观众，如今日头条编辑审核的反馈，哪些是当前舆论下的敏感词，哪些是不能审核通过的内容。大数据统计的反馈，收集关于文章被阅读时的机型，受众，观看数，转发数，点赞，收藏等。读者评论的反馈，不同于基本数据，评论的内容来自读者的表达，有很强的自我意识。赞赏和广告的收入，没有什么比金钱来得实在，来得更刺激。相似的还有录制在线课程，写一个app产品等 ➢ 健身平均每天花费1小时左右的时间，建议优先采用跑步的方式来健身。 可以收集的反馈有： 跑完身体会有明显的饥饿感，吃饭更香，更容易接受吃水果，排斥油腻。跑完头脑会更加清新，身体会更有活力，身体的状态短时间会感觉很不错。跑完脸型立马会瘦一些，尤其是比较肥胖或者虚胖的人群，很明显看到变化。➢ 听歌建议无线耳机，方便随时随地听歌 手机里要有一些歌单，在不同的场景下，能够产生不同的效果。尤其是在工作中比较疲惫的时候，或者人比较丧的时候 ➢ 知乎、stackoverflow问答式社区 交流想法收集别人好的优秀的答案解决别人的问题➢ 饮食不只是饱腹。 吃的太少和吃的太饱都会让人身心疲倦，容易昏睡。心情不好的时候来一份冰淇淋或者火锅能让人立马好起来。多吃饮食和蔬菜让人保持精神好的状态，反之越油腻越影响身心。➢ 社群高质量才行，线下社区质量更优 社群的即时沟通社群的共同任务社群的其他机制➢ 学习快餐式学习，针对某个问题的学习 学习某些视频课程，解决某个实际中的问题，如重装电脑，PPT的制作等。看书，同上，如旅游指南，生活技巧，饮食烹饪，健身，学习方法，服饰搭配等。把别人花了很久的经验，在短时间运用，避免一些九死一生的坑 ➢ 记录和整理每天都有新的数据，也有垃圾要处理 对自我的数据的记录，财务，工作和生活上的事情等。对物品的整理，房间的收纳，虚拟软件、邮件和照片录音等。

组合模式（Composite pattern）组合模式看起来就像对象组的树形结构，一个对象里面包含一个或一组其他的对象。它是属于结构型模式。例如，一个公司包括很多个部门，每个部门又包括很多人，这个用数据结构来表示就是树形结构，实际上也是用到来组合模式，多个人组成一个部门，多个部门组成一个公司。 例如，我们用下面这个公司、部门、员工的例子来更好的理解组合模式。 class Company { private String name; private List<Dept> depts;}class Dept { private String name; private List<User> users;}class User { private String name;}装饰模式（Decorator pattern）装饰器设计模式允许我们动态地向对象添加功能和行为，而不会影响同一类中其他现有对象的行为。并且可以根据我们的要求和选择将此自定义功能应用于单个对象。假如使用继承来扩展类的行为，这发生在编译期，该类的所有实例都获得扩展行为。 装饰器设计模式的特点：它允许我们在运行时向对象（而不是类）添加功能。它是一种结构模式，它为现有类提供了一个包装器。它使用抽象类或接口与组合来实现包装器。它创建装饰器类，它包装原始类并通过保持类方法的签名不变来提供其他功能。它最常用于应用单一责任原则，因为我们将功能划分为具有独特关注区域的类。 例如，我们用下面这个画图形的例子来更好的理解装饰模式。 //定义一个形状的接口public interface Shape { void draw(); void resize();}//一个画圆的实现public class Circle implements Shape { @Override public void draw() { System.out.println("Drawing Circle"); } @Override public void resize() { System.out.println("Resizing Circle"); }}//一个画矩形的实现public class Rectangle implements Shape { @Override public void draw() { System.out.println("Drawing Rectangle"); } @Override public void resize() { System.out.println("Resizing Rectangle"); }}//定义一个形状的装饰器抽象类，并用组合模式定义一个形状的属性public abstract class ShapeDecorator implements Shape { protected Shape decoratedShape; public ShapeDecorator(Shape decoratedShape) { super(); this.decoratedShape = decoratedShape; }}//颜色的枚举public enum Color { RED, GREEN, BLUE}//线条样式的枚举public enum LineStyle { SOLID, DASH, DOT}//定义一个填充颜色的实现类实现装饰器，并重写 draw() 方法，resize() 方法我们可以保持不变，也可以自定义，看使用场景public class FillColorDecorator extends ShapeDecorator { protected Color color; public FillColorDecorator(Shape decoratedShape, Color color) { super(decoratedShape); this.color = color; } @Override public void draw() { decoratedShape.draw(); System.out.println("Fill Color: " + color); } @Override public void resize() { decoratedShape.resize(); }}//定义一个线条样式的实现类实现装饰器，并重写 draw() 方法，resize() 方法我们可以保持不变，也可以自定义，看使用场景public class LineStyleDecorator extends ShapeDecorator { protected LineStyle style; public LineStyleDecorator(Shape decoratedShape, LineStyle style) { super(decoratedShape); this.style = style; } @Override public void draw() { decoratedShape.draw(); System.out.println("Line Style: " + style); } // @Override public void resize() { decoratedShape.resize(); }}//使用装饰器模式public class Client { public static void main(String[] args) { //在使用时可以任意组装，提升代码灵活性和扩展性。 Shape circle = new FillColorDecorator(new LineStyleDecorator(new Circle(), LineStyle.DASH), Color.RED); circle.draw(); }}外观模式（Facade Pattern）它提供了一个可以访问系统的接口，这个接口里面的实现可能很复杂，调用了其他多个接口，我们并不知道它里面的具体实现，隐藏了系统的复杂性。它属于结构型模式。 ...

写在前面评判一个程序员是否优秀，就是 show me the code。优秀的代码可读性强，高内聚低耦合，可扩展。想要写优秀的代码，做个优秀的程序员，就需要多看看大牛写的开源框架，吸取其中的精华，多学学设计模式，除此之外，没有任何其他捷径。 设计模式主要分为创建型模式、结构型模式、行为型模式三种类型。 工厂方法（Factory method pattern）定义一个创建对象的接口，让实现这个接口的类来决定实例化哪个类。工厂方法让类的实例化推迟到子类中进行，它属于创建型模式。 工厂对象通常包含一个或多个方法，用来创建这个工厂所能创建的各种类型的对象。这些方法可能接收参数，用来指定对象创建的方式，最后返回创建的对象。 工厂通常是一个用来创建其他对象的对象。工厂是构造方法的抽象，用来实现不同的分配方案。 维基百科工厂方法的例子 // 定义了 Button 如何创建public interface Button{}// 实现了 WinButton public class WinButton implements Button{}// 实现了 MacButton public class MacButton implements Button{}// 创建 Button 的工厂类public interface ButtonFactory { Button createButton();}// 真正创建 WinButton 的实现类，实现了 ButtonFactorypublic class WinButtonFactory implements ButtonFactory { @Override public static Button createButton(){ return new WinButton(); }}// 真正创建 MacButton的实现类，实现了 ButtonFactorypublic class MacButtonFactory implements ButtonFactory { @Override public static Button createButton(){ return new MacButton(); }}抽象工厂模式（Abstract factory pattern）将一组具有同一主题的单独的工厂封装起来。在使用中，使用方需要创建抽象工厂的具体实现，然后使用抽象工厂作为接口来创建这一方法的具体对象。它属于创建型模式。 ...

写在前面自身的良好编码风格只能律己，而无法律人；我喜欢 Angular 其中主要一个因素是有一整套的工具及风格指南，它可以极大的简化团队开发沟通成本，但是有些小缺失例如在编码风格上官方只提供 TypeScript 的部分，对于其他文件并没有一套指南以及智能化。 VSCode 是我开发 Angular 应用的首选，本文也将以此 IDE 为基准；任何提到的扩展都可以通过市场来获取。 Angular 应用是由组件树组成，一个组件从文件来看包含：TypeScript、HTML、Less（或其他 CSS 预处理器），其中 HTML 可能被包含至 ts 文件里。 当然除此之外还包含一些 JSON 文件、Bash 文件等，当此部分不在本文讨论内。TSLintAngular 创建后就已经包含 tslint.json（它是 TSLint 的配置文件），并且所有默认规则都按官方风格指南具体践行。 而 TSLint 的配置文件，默认使用内置预设 tslint:recommended 版本，并在此基础上加入 Angular 质量检查工具 codelyzer，所有这些规则你可以通过 tslint rules、codelyzer 找到每项规则的说明。 规则的写法要么是 boolean 类型，或者使用数组对该规则指定额外参数。运行 ng lint 命令时，当你某个字符串变量使用双引号，它会提示： ERROR: /src/app/app.component.ts[9, 16]: " should be '我们也可以安装 TSLint 扩展让这个触发机制放在正在编码过程中实时反馈： 当有不符合风格指南会出现一个绿色的波浪线，按 command+. > Fix: " Should be '通过终端 PROBLEMS 面板查看所有已打开文件且不符合风格指南的明细嗯，让你按五次 command+. 快捷键，我一定会疯掉；TSLint 扩展支持在保存文件时自动修复，只需要在项目根目录 .vscode/settings.json 配置： ...

在JS中箭头函数根据是否书写大小括号可分为以下四种情况。 // 不省略const fun = (value) => { return value;};// 省略小括号const fun = value => { return value;};// 省略大括号const fun = (value) => value;// 省略大括号与小括号const fun = value => value;airbnb-javascript关于箭头函数的检查如果函数体没有副作用的结构，省略大括号，否则使用大括号。参考这里的副作用结构是指函数内的代码影响了函数外的代码。 const even = [];[1, 2, 3, 4].forEach((num) => { if (num % 2 === 0) { even.push(num); }};注意：airbnb文档没写，函数内代码块复杂时也需要大括号。 如果参数为一个，省略小括号，否则使用小括号。参考《Google JavaScript Style Guide》中箭头函数的提议大括号可有可无，建议始终写小括号。参考 个人看法针对不同的函数结构选择是否使用括号的方式会带来两个问题： 代码不一致：就像一个PPT中不应该一会左对齐一会右对齐一会居中对齐。省略括号不易扩展：单个参数变多个参数要加小括号，直接返回代码变为多行计算后再返回代码需要增加大括号我认为有这种争议时应该选择兼容性更强的不省略大括号与小括号，在配置种关闭了对这四种写法的检查，但是遵循约定大于配置的原则，始终按照一种风格书写。 eslint的配置根据文档，在eslint中以下两个模块控制以上四种情况的书写，可对其进行配置（代码如下） arrow-parensarrow-body-style// .eslintrc.jsmodule.exports = { extends: 'airbnb', rules: { 'arrow-parens': 'off', 'arrow-body-style': 'off', },};

为什么要使用eslint你在接手一个项目的维护迭代任务，阅读代码的时候是否会因为项目中充斥着各种风格的代码而感到头疼？没错，eslint就是为了解决这类问题eslint能做什么？1.代码风格错误提示配置好eslint后，如果代码风格与配置描述的不符，eslint会提示代码中存在的风格问题；一般提示的情形有：1.编辑器内，大多数编辑器配置好后能读取eslint配置文件并在文件中进行相应提示2.eslint-loader配合webpack-dev-server能在页面中弹出相应错误内容3.eslint通过命令号对代码进行风格检查2.修复相应风格问题eslint –fix 命令能修复一部分代码风格问题；能修复的范围见https://cn.eslint.org/docs/ru…常见问题如何在局部禁用eslint/* eslint-disable no-alert, no-console /alert(‘foo’);console.log(‘bar’);/ eslint-enable no-alert, no-console */以下是详细配置{ root: true,// 直接在根目录读取配置文件，能提高eslint性能 “env”: { “node”: true,// 允许使用nodejs相关的变量，下同 “es6”: true, “browser”: true, “commonjs”: true }, “extends”: “standard”, // 继承eslint-config-standard中的配置，可以在rules中覆盖 “parser”: “babel-eslint”, // 为eslint制定parser,默认的Esprima只允许已纳入es标准的内容 “plugins”: “vue”,// 使用eslint-plugin-vue，使eslint能对vue语法进行处理，相应rules见https://eslint.vuejs.org/rules/ “rules”: { “no-alert”: 2, “indent”: [“error”, 4, { “SwitchCase”: 1, “VariableDeclarator”: 1, “outerIIFEBody”: 1, “MemberExpression”: 1, “FunctionDeclaration”: { “parameters”: 1, “body”: 1 }, “FunctionExpression”: { “parameters”: 1, “body”: 1 }, “CallExpression”: { “arguments”: 1 }, “ArrayExpression”: 1, “ObjectExpression”: 1, “ImportDeclaration”: 1, “flatTernaryExpressions”: false, “ignoreComments”: false }] }} ...

写在前面对于我这种严格依赖 VSCODE 的人来说，会更努力的寻找释放生产力的方式，而代码片断是我日常最常用的功能之一。从官网的 Creating your own snippets 可以非常容易的构建自己代码片断库。然而维护一个需要保持特定代码格式的JSON文件是一件非常困难的事，特别是对于像我这种三天头可能就产生一个新的片断来说是一种噩梦。Markdown我想99%的程序员都离不开 Markdown，如果说将一个 Markdown 文件内容直接转换成一个代码片断应该来说是很优雅的形式，例如：这是一个按钮｀｀｀html　（注意 ｀ 应该是英文）<button type="${1|text,tel,email|}">$0</button>｀｀｀与之相对应的智能提醒像这样：维护一些 Markdown 文件比维护一个JSON文件更酸爽。vscode-snippet-generatorvscode-snippet-generator 可以快速做到这一点，而且非常简单。快速入门克隆一个管理 Markdown 文件的模板项目：git clone –depth 1 https://github.com/cipchk/vscode-snippet-generator-tpl.git在项目 src 目录下创建一个 button.md，内容为上述。生成一个 VSCODE 插件安装包：npm run release然后将这个 VSCODE 插件分享给团队其他成员，仅此而已。cipchk-vscode 是我个人一个代码片断库，也是使用 vscode-snippet-generator 构建。市场如果你希望给你的开源项目提供一些片断，只需要将 package.json 相关信息变更为自己项目名称即可，最后可以将生成插件提交给VSCODE市场。参数vscode-snippet-generator 是一个命令行工具，它提供一些若干参数，这些参数你可以在命令行中指定，或在根目录创建一个名为 snippet-config.json 配置信息。sourceRoot 指定 Markdown 文件根目录，默认：srcoutFile 指定 JSON 输出路径，默认：./snippets.jsonprefix 指定前缀separator 指定多层级目前间用什么分隔符，默认：-每一个代码片断触发是由 prefix 决定，而生成 prefix 的规则默认是根据目录及文件名结构，例如：src button type.md => button-type，若有前缀：as-button-type full.md => button-full，若有前缀：as-button-full当然如果你愿意也可以通过一段 YAML 语法的头部文本来标记源文件，例如：—prefix: buttondescription: 按钮scope: typescript,html—更多风格示例，请参考 examples 目录。（完）