funnyecho
1. Fix the autonumeric external config * depend `autonumeric` as `autonumeric` in amd or commonjs2 environment. * depend `autonumeric` as `AutoNumeric` in global script environment. --- 2. The bundle of...
浅谈npm 的依赖与版本
在日常依赖[npm](https://www.npmjs.org/) 或[yarn](https://yarnpkg.com) 的开发中，我们需要使用`package.json`文件来描述程序所依赖的库及其版本。 平时在使用或看一些`package.json`时，总会对里面出现的依赖描述部分有些不理解的地方，包括但不限于： - `peerDependencies`对应是什么场景下的依赖; - 然后`peerDependencies`为什么在npm@v3 被取消了呢？而最近比较热的`yarn`又继续使用它呢？ - 为什么依赖库的版本号有那么多写法呢？`0.10.1`、`~1.1.1`、`^1.14.1` 带着种种小疑问去搜索了相关文档，然后把笔记摘抄如下。 ## 依赖类型 在`package.json`中可能会用到以下5 种类型的依赖声明。 ### dependencies 该类型依赖一般属于运行项目业务逻辑需要依赖的第三方库。 当运行`npm install` 命令时，默认`package.json`中该节点下声明的依赖库都会被解析、下载到node_modules 中。 当我们运行`npm install $package`或`npm install $package --save`命令时声明的`$package`都会被当做该类型依赖处理，这两条命令的差别在于选项`--save`，该选项能将`$package`注册到`package.json`中的`dependencies`节点中。 ###...
[TOC] 在ES6 正式确定`Promise`规范，以及ES2016+ 确定`Async functions`规范后，相对之前的callback hell，在新语法光环下，Javascript 提供了相对比较优雅的方式来编写异步链逻辑。 ## 一个简单的timeout 队列操作 简单举个例子，如果我要按顺序执行四个5 秒的timeout 的操作，可以用下面几种方法来实现： ### Thunk 第一种是传统的callback chain，也就是传入cb 函数参数到异步函数中，异步函数完成任务时主动调用cb 函数。 该方式的错误处理机制机制一般是，当异步出错时，调用cb 函数，并将error 信息当做第一个参数传输。若没有出错，则建议cb 函数调用时，第一个参数设为null。 这种方式很容易在需要多个异步队列逻辑时产生回调地狱（callback hell），对代码编写者和阅读者造成极大的困扰。 ```javascript // callback hell setTimeout(()...
从2017 年4 月份到现在，入职DDDER 前端团队快要一年半了。感谢团队对我的信任，给予我在前端开发中极大的自由度。这一年半以来，我思考了很多问题，构想着自己理想中的项目架构分层，也想着数据流应该怎样实践、缓存策略应该怎样设计、如何增强开发中的强类型引导等等。 随着项目的几次大版本开发（对，还没正式上线就经历了三次大版本开发），慢慢的，DDDER 的前端架构已经进化到一个我比较满意的状态了（是进化还是黑暗进化，可能真不好说）。在这个过程中，我参考并引入了很多业界的优秀的工具和解决方案，写了很多轮子，同时也弃用了很多轮子。 在此，我很感谢乐于开源，乐于分享想法思路、经验总结的各位同行，超级感谢！ 我之前也对入职DDDER 前端团队的前一年时间做过工作总结，里面写了一些被我使用过或参考过的工具和思路，有兴趣的可以点个Star 哈：[近一年的工作技术总结](https://github.com/SamHwang1990/blog/issues/11)。 但在今年4 月份到现在的这次大改版中，我遇到了一些很不一样的架构思路，进而导致DDDER 的前端架构发生了比较大的调整，也就是进化到我现在比较中意的一个状态。所以，很有必要对团队的前端架构演变做一个回顾，也算是对自己工作的一个总结吧。 画了个架构演变的过程图，仅供回忆，哈哈：  > 本文很大篇幅都会在"阶段三" 中哦～～ > > 废话一大堆，终于说完了哈～～～ ------ 在[近一年的工作技术总结](https://github.com/SamHwang1990/blog/issues/11) 文章中提到过，由于DDDER 客户端的底层比较特殊，我选择了二次开发Vue 并将其作为视图层工具，二开的Vue 仓库地址参考：[@ddder/vue](https://github.com/Ddder-FE/vue)。既然选择了Vue，项目的架构自然要往Vue 偏移的。 ## 阶段一：可能是常规的Vue...
上年四月份进入了毕业后第三家公司，到现在快一年了，忙了一年，可以好好总结下这年在JS 方面的实践过程和结果。 ## 阶段一：融入团队 > Javascript 搬砖小工冠着“前端架构师”的Title，“无耻地”进入了团队工作，哈哈哈 新进团队，当然要尽快了解团队的技术架构和技术水平。花了几天时间稍微熟悉代码和同事，然后就不淡定了。 首先，客户端的技术栈是：` Juce` + `OpenGL` + `SpiderMonkey`。`Juce` 提供跨平台的系统api 支持，比如文件系统读写、网络层、跨线程编程、系统级窗口管理、UI Component 等等。 在`Juce Component` 基础上，参考了HTML 和CSS，老大用`OpenGL` 开发了套跨平台的UI 渲染层，提供了需要的UI 布局和样式支持。最后，通过`SpiderMonkey`，将客户端的api 提供到Javascript 层调用。 > 哈，估计这个技术栈是独一家了吧，老大真心猛。 然后，就是前端这边的技术栈了。很好，这边前端是没有技术栈的，因为上面这独一无二的客户端架构，社区几乎没有适用的框架。没有技术栈是一个什么概念呢？请看下面一段代码：...
## 环境 - 浏览器：IE8 - webpack: = 2.7.0 ## 问题分析 使用IE8 加载webpack 打包压缩后的代码时，会出现类似`'undefined' 为空或不是对象`的错误。 在进行简单的调试后，造成错误的原因是变量指向被改变了，表象是：压缩后的变量`le`原本是指向`jQuery`对象的，但在运行时却找不到`jQuery`对象下的属性或方法导致出错。 由于压缩后的代码比较难理清，所以，也找不到到底是哪段代码造成了变量覆盖问题。 对UglifyJS 进行了一下研究，大概确定是`mangle`阶段出了问题，貌似是做变量名混淆的。而在相关的选项中，有一个选项比较相关：`--screw-ie8`。 查找了一下该选项的意义，看到有以下一段[提交记录](https://github.com/mishoo/UglifyJS2/commit/b14d3df3d26ca1de94cc617f1104391f750fd570)： > Regardless of the `--screw-ie` setting, the names will not be...
[toc] 引用外部样式表一般有两种方式。 第一种是使用html 的`link`标签： ```html ``` 第二种是使用css 的`@import`语法： ```css // a.css @import url("b.css"); ``` 或是html style 标签内使用： ```html @import url("b.css"); ``` 需要明确的一点是，`@import`声明只能在style 标签或css 文件的顶部，在其他位置声明是无效的。 这两种方式的差别其实挺大的，鉴于`@import`可能造成的交互、性能影响，我们强烈建议只使用``标签来加载外部样式表。 下面简单聊下两种方式的差别。 ## 兼容性 ``标签是标准的html 标签，从第一个版本开始就一直存在，故不存在兼容性问题。...
[toc] 简单梳理下html doctype 的一些知识点。 ## Doctype 简介 对于`text/html`类型的文件，可以在文件第一行，html 根元素之前，添加一个`doctype` 来声明文档类型，又称DTD（Document Type Definition）。举个例子： ```html ``` ## 浏览器渲染模式 浏览器渲染模式大概有三种： - Standards(标准)模式，遵循浏览器所支持的最新css 解析标准； - Quirks（怪癖/兼容）模式，让浏览器以旧的兼容模式处理解析css； - Almost Standards（近似标准）模式，也叫过渡模式，让浏览器尝试以新标准方式来处理针对旧标准实现的代码； 除了渲染模式不同，还有html、与xhtml 的差别：xhtml 会比html 更严格。 由于在html5...
npm lifecycle 命令在执行前，会判断配置`unsafe-perm`为true 时才继续，否则会提前退出。 代码参考： ```javascript // lib/utils/lifecycle.js unsafe = unsafe || npm.config.get('unsafe-perm') if ((wd.indexOf(npm.dir) !== 0 || _incorrectWorkingDirectory(wd, pkg)) && !unsafe && pkg.scripts[stage]) { log.warn('lifecycle', logid(pkg, stage), 'cannot run...
[TOC] ## "transform" 属性 ### 2D Transform - matrix(a, b, c, d, e, f) 以矩阵的方式声明变换函数； - translate(e[, f]) 仿射变换（平移变换），以向量(e, f) 的方向和长度平移图像，f 可选，默认为0； - translateX(e) 图像向X 轴方向平移e 的距离，派生自translate； - translateY(f) 图像向Y...