Mulianju

前端俱乐部

发表于 更新于 分类于 Changyan： 本文字数： 2.6k 阅读时长 ≈ 2 分钟

设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

阅读全文 »

发表于 更新于 分类于 Changyan： 本文字数： 488 阅读时长 ≈ 1 分钟

CNAME

1.在hexo source文件夹创建一个CNAME文件，文件内容为完整的自定义域名，比如本站www.mulianju.com
2.执行hexo clean清除已经生成的public文件夹内容
3.执行hexo g重新生成
4.执行hexo d发布网站到github
Github服务器会设置mulianju.com为你的主域名，然后将www.mulianju.com和mulianju.github.com重定向到mulianju.com。

DNS

登录你的域名管理界面，创建一条CNAME记录，指向github pages项目原有地址
CNAME

favicon

顺带提一下favicon吧，刚好操作差不多。
favicon
favicon就是打开我们网站的时候，浏览器标签左侧的那个小图标。这个图标通过在网站根目录放一个favicon.ico的图标文件就可以实现。
放到我们的hexo里，就是把这个图标文件放到source文件夹然后重复上面提到的清除到发布的操作就可以了~
favicon的制作工具可以自行百度，尺寸一般是16x16。

本文永久链接: https://www.mulianju.com/hexo-cname/

发表于 更新于 分类于 Changyan： 本文字数： 332 阅读时长 ≈ 1 分钟

先放源码：

1
2
3
4
5
6
7
8
.content {
    background-color: rgba(0,0,0,0.3);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);
}

另外有两点需要注意：

  1. 对元素直接使用模糊会将其内容全部模糊掉，为了保证文字不会模糊掉需要多一个层单独应用模糊效果。
  2. 模糊效果并不会应用到其背后的元素上，所以需要使用 content 区域有和背景相同的背景图并进行模糊。

阅读原文：css毛玻璃效果.

本文永久链接: https://www.mulianju.com/css3毛玻璃效果/

发表于 更新于 分类于 Changyan： 本文字数： 834 阅读时长 ≈ 1 分钟

今天一个朋友在群里发了这样一个题目，说是小学二年级的数学题

count-monkeys

文字版：
孙悟空要在花果山的小猴子们中选出“猴子将军”，于是他让2018只小猴围城一圈，从某一只小猴开始，顺时针依次报数，从1报到80，再从1报到10，一直循环下去直到每只小猴都报过11次数为止，所有报过7，也报过17的小猴会被选为“猴子将军”，那么这2018只小猴里有_____只“猴子将军”。

看到题目的时候真的很难相信这是小学二年级的题，反正现在我也没想出解法来

用程序傻逼数吧：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

var round = 1;
var count = 0;
var monkeys = [];

function makeMonkey() {
    this.countNums = [];
}

function counting() {
    for (var i = 0; i < 2018; i++) {
        monkeys[i].countNums.push(round);
        round++;
        if (round == 81) {
            round = 1
        }
    }
}

for (var i = 0; i < 2018; i++) {
    monkeys.push(new makeMonkey())
}

for (var i = 1; i <= 11; i++) {
    counting();
}
for (var i = 0; i < 2018; i++) {
    if (monkeys[i].countNums.indexOf(7) >= 0 && monkeys[i].countNums.indexOf(17) >= 0) {
        count += 1;
    }
}

console.log(count);//152

本文永久链接: https://www.mulianju.com/count-monkeys/

发表于 更新于 分类于 Changyan： 本文字数： 2.5k 阅读时长 ≈ 2 分钟

canvas元素是众多广泛使用的网络2D图像渲染标准之一。它被广泛用于游戏及复杂的图像可视化中。然而，随着网站和应用将canvas画布推至极限，性能开始成为问题。此文目标是给使用canvas画布元素的优化带来建议，去保证你的网站或者应用表现卓越。

性能贴士

下面是一些改善性能的建议

在离屏canvas上预渲染相似的图形或重复的对象

如果你发现你的在每一帧里有好多复杂的画图运算，请考虑创建一个离屏canvas，将图像在这个画布上画一次（或者每当图像改变的时候画一次），然后在每帧上画出视线以外的这个画布。

1
2
3
4
5
6
myEntity.offscreenCanvas = document.createElement("canvas");
myEntity.offscreenCanvas.width = myEntity.width;
myEntity.offscreenCanvas.height = myEntity.height;
myEntity.offscreenContext = myEntity.offscreenCanvas.getContext("2d");

myEntity.render(myEntity.offscreenContext);

避免浮点数的坐标点，用整数取而代之

当你画一个没有整数坐标点的对象时会发生子像素渲染。

1
ctx.drawImage(myImage, 0.3, 0.5);

浏览器为了达到抗锯齿的效果会做额外的运算。为了避免这种情况，请保证在你调用drawImage()函数时，用Math.floor()函数对所有的坐标点取整。

不要在用drawImage时缩放图像

在离屏canvas中缓存图片的不同尺寸，而不要用drawImage()去缩放它们。

使用多层画布去画一个复杂的场景

你可能会发现，你有些元素不断地改变或者移动，而其它的元素，例如外观，永远不变。这种情况的一种优化是去用多个画布元素去创建不同层次。

例如，你可以在最顶层创建一个外观层，而且仅仅在用户输入的时候被画出。你可以创建一个游戏层，在上面会有不断更新的元素和一个背景层，给那些较少更新的元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="stage">
  <canvas id="ui-layer" width="480" height="320"></canvas>
  <canvas id="game-layer" width="480" height="320"></canvas>
  <canvas id="background-layer" width="480" height="320"></canvas>
</div>
 
<style>
  #stage {
    width: 480px;
    height: 320px;
    position: relative;
    border: 2px solid black
  }
  canvas { position: absolute; }
  #ui-layer { z-index: 3 }
  #game-layer { z-index: 2 }
  #background-layer { z-index: 1 }
</style>

用CSS设置大的背景图

如果像大多数游戏那样，你有一张静态的背景图，用一个静态的

元素，结合background 特性，以及将它置于画布元素之后。这么做可以避免在每一帧在画布上绘制大图。

用CSS transforms特性缩放画布

CSS transforms 特性由于调用GPU，因此更快捷。最好的情况是，不要将小画布放大，而是去将大画布缩小。例如Firefox系统，目标分辨率480 x 320 px。

1
2
3
4
5
6
7
8
var scaleX = canvas.width / window.innerWidth;
var scaleY = canvas.height / window.innerHeight;

var scaleToFit = Math.min(scaleX, scaleY);
var scaleToCover = Math.max(scaleX, scaleY);

stage.style.transformOrigin = "0 0"; //scale from top left
stage.style.transform = "scale(" + scaleToFit + ")";

使用moz-opaque属性(仅限Gecko)

如果你的游戏使用画布而且不需要透明，请在画布上设置moz-opaque属性。这能够用于内部渲染优化。

1
<canvas id="mycanvas" moz-opaque></canvas>

更多的贴士

  • 将画布的函数调用集合到一起（例如，画一条折线，而不要画多条分开的直线）
  • 避免不必要的画布状态改变
  • 渲染画布中的不同点，而非整个新状态
  • 尽可能避免 shadowBlur特性
  • 尽可能避免text rendering
  • 使用不同的办法去清除画布(clearRect() vs. fillRect() vs. 调整canvas大小)
  • 有动画，请使用window.requestAnimationFrame() 而非window.setInterval()
  • 请谨慎使用大型物理库
  • 用JSPerf测试性能

文章转载自:
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas

本文永久链接: https://www.mulianju.com/canvas-performance/

发表于 更新于 分类于 Changyan： 本文字数： 9.4k 阅读时长 ≈ 9 分钟

配置参数

1
2
3
rules: {
    "规则名": [规则值, 规则配置]
}

规则值：

1
2
3
"off"或者0    //关闭规则关闭
"warn"或者1    //在打开的规则作为警告（不影响退出代码）
"error"或者2    //把规则作为一个错误（退出代码触发时为1）

参考configuring

常见规则列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
"no-alert": 0,//禁止使用alert confirm prompt
"no-array-constructor": 2,//禁止使用数组构造器
"no-bitwise": 0,//禁止使用按位运算符
"no-caller": 1,//禁止使用arguments.caller或arguments.callee
"no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名
"no-class-assign": 2,//禁止给类赋值
"no-cond-assign": 2,//禁止在条件表达式中使用赋值语句
"no-console": 2,//禁止使用console
"no-const-assign": 2,//禁止修改const声明的变量
"no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)
"no-continue": 0,//禁止使用continue
"no-control-regex": 2,//禁止在正则表达式中使用控制字符
"no-debugger": 2,//禁止使用debugger
"no-delete-var": 2,//不能对var声明的变量使用delete操作符
"no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/
"no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}
"no-dupe-args": 2,//函数参数不能重复
"no-duplicate-case": 2,//switch中的case标签不能重复
"no-else-return": 2,//如果if语句里面有return,后面不能跟else语句
"no-empty": 2,//块语句中的内容不能为空
"no-empty-character-class": 2,//正则表达式中的[]内容不能为空
"no-empty-label": 2,//禁止使用空label
"no-eq-null": 2,//禁止对null使用==或!=运算符
"no-eval": 1,//禁止使用eval
"no-ex-assign": 2,//禁止给catch语句中的异常参数赋值
"no-extend-native": 2,//禁止扩展native对象
"no-extra-bind": 2,//禁止不必要的函数绑定
"no-extra-boolean-cast": 2,//禁止不必要的bool转换
"no-extra-parens": 2,//禁止非必要的括号
"no-extra-semi": 2,//禁止多余的冒号
"no-fallthrough": 1,//禁止switch穿透
"no-floating-decimal": 2,//禁止省略浮点数中的0 .5 3.
"no-func-assign": 2,//禁止重复的函数声明
"no-implicit-coercion": 1,//禁止隐式转换
"no-implied-eval": 2,//禁止使用隐式eval
"no-inline-comments": 0,//禁止行内备注
"no-inner-declarations": [2, "functions"],//禁止在块语句中使用声明（变量或函数）
"no-invalid-regexp": 2,//禁止无效的正则表达式
"no-invalid-this": 2,//禁止无效的this，只能用在构造器，类，对象字面量
"no-irregular-whitespace": 2,//不能有不规则的空格
"no-iterator": 2,//禁止使用__iterator__ 属性
"no-label-var": 2,//label名不能与var声明的变量名相同
"no-labels": 2,//禁止标签声明
"no-lone-blocks": 2,//禁止不必要的嵌套块
"no-lonely-if": 2,//禁止else语句内只有if语句
"no-loop-func": 1,//禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以）
"no-mixed-requires": [0, false],//声明时不能混用声明类型
"no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格
"linebreak-style": [0, "windows"],//换行风格
"no-multi-spaces": 1,//不能用多余的空格
"no-multi-str": 2,//字符串不能用\换行
"no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2行
"no-native-reassign": 2,//不能重写native对象
"no-negated-in-lhs": 2,//in 操作符的左边不能有!
"no-nested-ternary": 0,//禁止使用嵌套的三目运算
"no-new": 1,//禁止在使用new构造一个实例后不赋值
"no-new-func": 1,//禁止使用new Function
"no-new-object": 2,//禁止使用new Object()
"no-new-require": 2,//禁止使用new require
"no-new-wrappers": 2,//禁止使用new创建包装实例，new String new Boolean new Number
"no-obj-calls": 2,//不能调用内置的全局对象，比如Math() JSON()
"no-octal": 2,//禁止使用八进制数字
"no-octal-escape": 2,//禁止使用八进制转义序列
"no-param-reassign": 2,//禁止给参数重新赋值
"no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接
"no-plusplus": 0,//禁止使用++，--
"no-process-env": 0,//禁止使用process.env
"no-process-exit": 0,//禁止使用process.exit()
"no-proto": 2,//禁止使用__proto__属性
"no-redeclare": 2,//禁止重复声明变量
"no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/
"no-restricted-modules": 0,//如果禁用了指定模块，使用就会报错
"no-return-assign": 1,//return 语句中不能有赋值表达式
"no-script-url": 0,//禁止使用javascript:void(0)
"no-self-compare": 2,//不能比较自身
"no-sequences": 0,//禁止使用逗号运算符
"no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
"no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用
"no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格
"no-sparse-arrays": 2,//禁止稀疏数组， [1,,2]
"no-sync": 0,//nodejs 禁止同步方法
"no-ternary": 0,//禁止使用三目运算符
"no-trailing-spaces": 1,//一行结束后面不要有空格
"no-this-before-super": 0,//在调用super()之前不能使用this或super
"no-throw-literal": 2,//禁止抛出字面量错误 throw "error";
"no-undef": 1,//不能有未定义的变量
"no-undef-init": 2,//变量初始化时不能直接给它赋值为undefined
"no-undefined": 2,//不能使用undefined
"no-unexpected-multiline": 2,//避免多行表达式
"no-underscore-dangle": 1,//标识符不能以_开头或结尾
"no-unneeded-ternary": 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
"no-unreachable": 2,//不能有无法执行的代码
"no-unused-expressions": 2,//禁止无用的表达式
"no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有声明后未被使用的变量或参数
"no-use-before-define": 2,//未定义前不能使用
"no-useless-call": 2,//禁止不必要的call和apply
"no-void": 2,//禁用void操作符
"no-var": 0,//禁用var，用let和const代替
"no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告备注
"no-with": 2,//禁用with

"array-bracket-spacing": [2, "never"],//是否允许非空数组里面有多余的空格
"arrow-parens": 0,//箭头函数用小括号括起来
"arrow-spacing": 0,//=>的前/后括号
"accessor-pairs": 0,//在对象中使用getter/setter
"block-scoped-var": 0,//块语句中使用var
"brace-style": [1, "1tbs"],//大括号风格
"callback-return": 1,//避免多次调用回调什么的
"camelcase": 2,//强制驼峰法命名
"comma-dangle": [2, "never"],//对象字面量项尾不能有逗号
"comma-spacing": 0,//逗号前后的空格
"comma-style": [2, "last"],//逗号风格，换行时在行首还是行尾
"complexity": [0, 11],//循环复杂度
"computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的
"consistent-return": 0,//return 后面是否允许省略
"consistent-this": [2, "that"],//this别名
"constructor-super": 0,//非派生类不能调用super，派生类必须调用super
"curly": [2, "all"],//必须使用 if(){} 中的{}
"default-case": 2,//switch语句最后必须有default
"dot-location": 0,//对象访问符的位置，换行的时候在行首还是行尾
"dot-notation": [0, { "allowKeywords": true }],//避免不必要的方括号
"eol-last": 0,//文件以单一的换行符结束
"eqeqeq": 2,//必须使用全等
"func-names": 0,//函数表达式必须有名字
"func-style": [0, "declaration"],//函数风格，规定只能使用函数声明/函数表达式
"generator-star-spacing": 0,//生成器函数*的前后空格
"guard-for-in": 0,//for in循环要用if语句过滤
"handle-callback-err": 0,//nodejs 处理错误
"id-length": 0,//变量名长度
"indent": [2, 4],//缩进风格
"init-declarations": 0,//声明时必须赋初值
"key-spacing": [0, { "beforeColon": false, "afterColon": true }],//对象字面量中冒号的前后空格
"lines-around-comment": 0,//行前/行后备注
"max-depth": [0, 4],//嵌套块深度
"max-len": [0, 80, 4],//字符串最大长度
"max-nested-callbacks": [0, 2],//回调嵌套深度
"max-params": [0, 3],//函数最多只能有3个参数
"max-statements": [0, 10],//函数内最多有几个声明
"new-cap": 2,//函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用
"new-parens": 2,//new时必须加小括号
"newline-after-var": 2,//变量声明后是否需要空一行
"object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格
"object-shorthand": 0,//强制对象字面量缩写语法
"one-var": 1,//连续声明
"operator-assignment": [0, "always"],//赋值运算符 += -=什么的
"operator-linebreak": [2, "after"],//换行时运算符在行尾还是行首
"padded-blocks": 0,//块语句内行首行尾是否要空行
"prefer-const": 0,//首选const
"prefer-spread": 0,//首选展开运算
"prefer-reflect": 0,//首选Reflect的方法
"quotes": [1, "single"],//引号类型 `` "" ''
"quote-props":[2, "always"],//对象字面量中的属性名是否强制双引号
"radix": 2,//parseInt必须指定第二个参数
"id-match": 0,//命名检测
"require-yield": 0,//生成器函数必须有yield
"semi": [2, "always"],//语句强制分号结尾
"semi-spacing": [0, {"before": false, "after": true}],//分号前后空格
"sort-vars": 0,//变量声明时排序
"space-after-keywords": [0, "always"],//关键字后面是否要空一格
"space-before-blocks": [0, "always"],//不以新行开始的块{前面要不要有空格
"space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格
"space-in-parens": [0, "never"],//小括号里面要不要有空格
"space-infix-ops": 0,//中缀操作符周围要不要有空格
"space-return-throw-case": 2,//return throw case后面要不要加空格
"space-unary-ops": [0, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格
"spaced-comment": 0,//注释风格要不要有空格什么的
"strict": 2,//使用严格模式
"use-isnan": 2,//禁止比较时使用NaN，只能用isNaN()
"valid-jsdoc": 0,//jsdoc规则
"valid-typeof": 2,//必须使用合法的typeof的值
"vars-on-top": 2,//var必须放在作用域顶部
"wrap-iife": [2, "inside"],//立即执行函数表达式的小括号风格
"wrap-regex": 0,//正则表达式字面量用小括号包起来
"yoda": [2, "never"]//禁止尤达条件

参考资料
https://segmentfault.com/a/1190000008742240

本文永久链接: https://www.mulianju.com/eslint-rules/

发表于 更新于 分类于 Changyan： 本文字数： 945 阅读时长 ≈ 1 分钟

在webpack的使用中，问题真是接连不断、应接不暇、接二连三、一错再错。。。
在此之前完全没有系统的学习（虽然觉得系统学过也结果差不多），都是用到哪查到哪，一步一个坑的这么来搞，这不，前两天才刚填过一个，这就又出一个。。。

某个页面开发过程中，webpack-dev-server版本（测试环境）下，测试已经完全ok，完美的项目结束了，结果一上线出现了问题–js报错：

1
SyntaxError: Cannot declare a let variable twice :'e'.

此问题只会出现在ios 10中

反复切换测试和线上环境代码，分析半天源码，确实找不出什么问题，完全摸不着头脑

google一下，还真发现了有同样问题的文章:

文里提到ios 10下的Safari有两个bug，其中一个问题跟我遇到的特别特别像，至少报错一样，而且对此问题的描述是：”其实我们都没有错，我们也没写错，uglify也没搞错，错的是Safari本身。“
这就恶心了。

对于此问题的解决方案：

1
2
3
4
5
6
7
8
9
10
new UglifyJsPlugin({
    uglifyOptions: {
        compress: {
            warnings: false
        },
        mangle: {
            safari10: true
        }
    },
})

照着此方法修改了配置文件，重新打包了一下，本以为会解决的问题，却完全没变化。。。

好吧，继续找

回到源码，一个模块一个模块的删掉，反复重新打包（这种调试还真是痛苦）

折腾了好久好久，终于定位到引起问题的模块，是一个swiper的应用，连同swiper一块删掉之后，页面就正常了。

于是，想到，是不是swiper版本有什么问题呢，尝试着换了一个版本，还真的可以了。。。

之前出现问题的版本是npm包托管的最新版swiper，最终改成引入本地lib的4.0.5版。

问题解决，完美上线~

最后，至于为什么webpack-dev-server承载的代码没出现问题，这个还不清楚，后期再慢慢研究吧

本文永久链接: https://www.mulianju.com/cannot-declare-a-let-variable-twice-e/

发表于 更新于 分类于 Changyan： 本文字数： 997 阅读时长 ≈ 1 分钟

这个问题其实是个比较难遇到的问题，主要是因为我们特殊的的环境背景：我们的前端静态资源服务器的默认文件编码为GBK，我们的页面和开发环境下默认编码是utf-8，这就导致了，我们开发好的前端资源打包到服务器的时候，文件编码会自动转为GBK，因此，文件内的中文都会变成乱码。

在之前的webpack环境中，我有配置过uglifyjs进行自动转换unicode的操作，配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    //...
    plugins: [
        new UglifyJsPlugin({
            uglifyOptions: {
                output: {
                    ascii_only: true
                }
            }
        })
    ]
};

配置中，uglifyjs是作为webpack的一个plugins来使用的。
这样配置，在之前的bebal以及es3环境下均没有什么问题，但近几天我在webpack中集成ts编译环境的时候，这么写却完全没有作用，为了解决这个问题，真真的查了很多很多资料啊（话说这部分的文档还真是粗糙，查资料都完全没有头绪）。

不过还好，最终还是有解决方案的：我仔仔细细的看了几遍uglifyjs官方文档，发现官方推荐的写法是这样的：

1
2
3
4
5
6
7
8
9
10
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  //...
  optimization: {
    minimizer: [
      new UglifyJsPlugin()
    ]
  }
}

把环境中uglifyjs的使用方式修改之后，build一下，完美生效啦~

2018-08-27 15:39:38补充：
此问题是因为webpack版本升级成4.x.x造成的问题，怪自己疏漏寡闻吧。

最后感叹一下，前端发展的实在是太快了，我们这些老程序员写着写着代码，最后都快变新人了，很是杯具。。。
webpack这一整套的生态，真的内容太多了，前路漫漫，信心难立呀~~~

本文永久链接: https://www.mulianju.com/ts-loader-unicode/

发表于 更新于 分类于 Changyan： 本文字数： 1.6k 阅读时长 ≈ 1 分钟

最近开始做webpack集成ts编译环境的工作，遇到很多问题，这里记录一下吧

今天的问题是在使用Object.assign的时候，编辑器报错了，提示Property ‘assign’ does not exist on type ‘ObjectConstructor’。

查了好久的资料找到几种解决方法：

利用hack写法

还没搞清楚原理，暂时先这么叫吧

——- 2018-08-22 14:10:35 补充：此写法再ts里称为断言，请参考TypeScript 基础类型

1
(<any>Object).assign({}, {})

在tsconfig.json中增加lib

1
2
3
4
5
6
7
8
{
    "compilerOptions": {
        // ...
        "target": "es5",
        "lib": ["es2015", "es2017", "dom"]
        // ...
    }
}

利用ES6 展开运算符 Spread operator 代替assign

1
return {this.success, ...success.json() || {}};

自己加语法糖

如果使用的是非npm或webpack环境，那直接粘贴以下代码到你的代码里就好了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
if (typeof Object.assign != 'function') {
  // Must be writable: true, enumerable: false, configurable: true
  Object.defineProperty(Object, "assign", {
    value: function assign(target, varArgs) { // .length of function is 2
      'use strict';
      if (target == null) { // TypeError if undefined or null
        throw new TypeError('Cannot convert undefined or null to object');
      }

      var to = Object(target);

      for (var index = 1; index < arguments.length; index++) {
        var nextSource = arguments[index];

        if (nextSource != null) { // Skip over if undefined or null
          for (var nextKey in nextSource) {
            // Avoid bugs when hasOwnProperty is shadowed
            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
              to[nextKey] = nextSource[nextKey];
            }
          }
        }
      }
      return to;
    },
    writable: true,
    configurable: true
  });
}

参考 developer.mozilla.org

本文永久链接: https://www.mulianju.com/property-assign-does-not-exist-on-type-objectconstructor/

发表于 更新于 分类于 Changyan： 本文字数： 1.2k 阅读时长 ≈ 1 分钟

首先确认服务器处于安全的状态

首先确认服务器处于安全的状态，也就是没有人能够任意地连接MySQL数据库。 因为在重新设置MySQL的root密码的期间，MySQL数据库完全出于没有密码保护的 状态下，其他的用户也可以任意地登录和修改MySQL的信息。可以采用将MySQL对 外的端口封闭，并且停止Apache以及所有的用户进程的方法实现服务器的准安全 状态。最安全的状态是到服务器的Console上面操作，并且拔掉网线。

修改MySQL的登录设置

vim /etc/my.cnf

在[mysqld]的段中加上一句：skip-grant-tables
例如：

1
2
3
4
[mysqld]
datadir=/var/lib/mysql
socket=/var/lib/mysql/mysql.sock
skip-grant-tables

保存并且退出vi。

重新启动mysqld

1
2
3
$ service mysqld restart
//Stopping MySQL: [ OK ]
//Starting MySQL: [ OK ]

登录并修改MySQL的root密码

1
2
3
4
5
6
7
8
9
10
11
$ mysql
//Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 3 to server version: 3.23.56 Type 'help;' or '\h' for help. Type '\c' to clear the buffer.

mysql> USE mysql ;
//Database changed 
mysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('newpass');
//Query OK, 0 rows affected (0.00 sec)
//Rows matched: 2 Changed: 0 Warnings: 0
mysql> flush privileges ;
//Query OK, 0 rows affected (0.01 sec)
mysql> quit

将MySQL的登录设置修改回来

1
$ vim /etc/my.cnf

将刚才在[mysqld]的段中加上的skip-grant-tables删除
保存并且退出vim

重新启动mysqld

1
2
3
$ service mysqld restart
//Stopping MySQL: [ OK ]
//Starting MySQL: [ OK ]

转自：https://www.cnblogs.com/sbaicl/articles/3132010.html

本文永久链接: https://www.mulianju.com/MySQL-for-Linux-ERROR-1045/