工业聚
# 如何写一个你自己的jQuery库？ ## 前言 本文面向的读者群如下： > - 前端交互重度依赖jQuery库 > - 具备一定的原生js基础知识 > - 开始阅读某一版本的jQuery源码 本文采用的写作与编码手法如下： > - 以标准实现为主，不考虑兼容性 > - 函数实现以新手直觉式为主，而非jQuery源码中经过千锤百炼的版本 > - 粗略搭建类jQuery式骨架，最终产物不以投入生产为目的，仅供参考 > - 用最终实现的库，实现一个在现代浏览器中正常工作的轮播图效果 注意：代码大致仿照`jQuery`，不代表跟它的内部实现以及api用法完全一样。 全部代码打包：猛击这里 轮播图实现DEMO：猛击这里...
# 算法的两种心智模型：代数与几何 人类发展了两类反映世界的心智模型：语言和代数 vs 视觉和几何。分别对应「语义化」和「可视化」。 几乎所有人都具备使用和表达它们的能力。但不同的人对它们的依仗程度不同，甚至同一个人面对不同的问题时所采用的心智模型也可能不同。 下面的 `merge sort` 小测验，考量你对算法问题的处理方式是「代数型」、「几何型」还是「综合型」。 鉴定方式是，在看完对 `merge sort` 的两种类型的解读之后，自行体悟，报告出当你从头实现 `merge sort` 时，你倾向于用哪一种心智模型作为想象图景。 ## 静态几何型 ## 动态几何型 [merge sort visualizer](http://algo-visualizer.jasonpark.me/#path=sorting/merge/bottom_up) 点击链接，等待加载完成后，点击右上角导航条里的 `run` 按钮观看。 ## 递归代数型 ```...
## 前言 [redux](https://github.com/rackt/redux) 是 facebook 提出的 flux 架构的一种优秀实现；而且不局限于为 react 提供数据状态处理。它是零依赖的，可以配合其他任何框架或者类库一起使用。要想配合 react ，还得引入 [react-redux](https://github.com/rackt/react-redux)。 redux 团队的野心比较大，并不想让 redux 局限于 react 生态链中的一环。他们让 redux 自身保持简洁以便适配各种场景，让社区发展出各种 `redux-*` 中间件或者插件，从而形成它自己的生态系统。 redux 的核心很简洁。这篇文章将专注于解读 redux 核心的设计思路，以 [Isomorphism-react-todomvc](https://github.com/Lucifier129/Isomorphism-react-todomvc) 这个项目为示例。它很可能是目前实现最完备的 react/redux...
## 前言 工具：Babel 在线编译：https://babeljs.io/repl/ ## 好用的对象字面量与进阶 「一切都是对象」是简洁概念，但是像下面这样创建实例太辛苦。 ``` javascript var person = new Object() person.firstName = 'Jade' person.lastName = 'Gu' person.name = 'Jade Gu' ``` 我们想要更直观的方式，如： ``` javascript var person...
理解正则表达式
# 理解正则表达式 在我初学正则表达式的时候，走了一些弯路，强行记忆了很多符号和用法。 等到我有更深入的理解的时候我发现，从翻译和概念的角度上切入，学习起来会顺畅得多。 本文以`JavaScript`里的正则表达式为例，讲解其中的关键要素。希望能帮助到初学者。 注：也只限于阐述关键要素，不会事无巨细地展开。 ## 何为正则表达式？ 在中文语境里，「正则」两个字有点让人发怵，仿佛高深数学或物理中的「正则化」和「归一化」，抽象而难懂。 其实放到英文里，它是`regular expression`，而`regular`有「规律、规范、整齐、合格、正规」等意味，「正则」只是其中一种翻译。 不把它翻译成一个词组，而翻译成一句话，大致是：表达规范和规则的句子。 这里的规范和规则，指的是一个字符串的形式规则。 至于`JavaScript`里的 `RegExp` 构造函数，是`Regular Expression`的前三个字母缩写。 ## 正则表达式的格式 在`JavaScript`里，正则表达式有两个构造方式，一个是通过`RegExp`这个构造函数创建实例，另一个是正则表达式字面量写法。 ``` javascript var regexp1 = new RegExp('hello regular expression') var...
# 用MVC模式组织代码 - Author: [Jade Gu](http://weibo.com/islucifier) - Date: 2015.03.07 ## 前言 `MVC`这个名词，在前端领域还处于意义不明确的阶段。打着`MV*`名号的框架层出不穷，概括`MVC`的文章也让人应接不暇。然而究竟什么是`MVC`，那些作者各执一词。 [winter](http://weibo.com/wintercn) 做了下`正本清源`的工作： - [MVC是任人打扮的小姑娘](http://weibo.com/p/1001603809050365148952) - [谈谈UI架构设计的演化](http://weibo.com/p/1001603808855434892996) 既然`经典MVC模式`与前端的`view.onclick`天然的互斥，不再适用；既然大家都在打扮`MVC`，本文也尝试重新演绎。介绍一种以`Model`、`View`与`Controller`为命名的代码组织方案。 这个方案给我带来了良好的编程体验，并且几乎立即可以应用在所有项目中，不管历史遗留的代码多么庞杂，新增的业务需求都能按照新方案进行组织。 ### Talk is cheap, show me the code Github的[todomvc](https://github.com/tastejs/todomvc)项目，提供了各种以`MV*`为名号的框架的实现，帮助前端工程师选择合适的框架或库。其中的[vanillajs](https://github.com/tastejs/todomvc/tree/master/examples/vanillajs)版本，是一个无框架无库的原生`JavaScript`实现；它也是按照`MVC`的理念来组织代码。框架或库不是`MVC`模式的必需品，只是说有了相应的框架与库，写起来更为便利。 本文也准备了一个原生实现[todos-vanillajs](https://github.com/Lucifier129/Lucifier129.github.io/tree/master/todos-vanillajs)，可作MVC模式参考案例。...
## 前言 托付于 `Node.js` 和 `HMTL5`，`JavaScript` 发展得越来越快。 几年前，就有人提出「[你或许不需要 jQuery](https://github.com/HubSpot/youmightnotneedjquery)」 ，近期也有「[你可能不需要 underscore](https://github.com/reindexio/youmightnotneedunderscore)」以及 Hax 的 [nodash](https://github.com/hax/nodash) 仓库。 正当风靡的 ReactJs 提出 Flux 架构后，社区涌现出许多不同版本跟理念的 Flux 实现，目前风头最劲的要数基于 `ES7+` 的 [redux](https://github.com/gaearon/redux)，它的理念除了`hot loading`之外，最重要的就是`pure function`(纯函数)。 作为一门语言，javascript 的自理能力不断增强；那么势必存在一种组织范式，使得不用框架，也能像之前有框架辅助那样，写出模块化、组件化以及语义清晰的代码。 我对原生框架范式的思考，会在[esnext-framework](https://github.com/Lucifier129/esnext-framework)仓库里积累。...
# reactjs学习体验 ## reactjs 是什么？ `reactjs`是来自`facebook`公司的用于构建用户界面的JavaScript库。 GitHub地址：https://github.com/facebook/react reactjs的两个衍生项目也值得注意。 - `react-native`:用reactjs写手机app - GitHub地址：https://github.com/facebook/react-native - `react-canvas`:用canvas代替臃肿缓慢的DOM作为UI，在移动端获得能与原生应用媲美的流畅效果 - GitHub地址：https://github.com/Flipboard/react-canvas ## reactjs 真的将html/xml和js代码混杂在一起吗？ reactjs的`jsx`语法，让许多人感觉仿佛回到了原始社会。这么多年努力地让html\css\javascript三者分离，好不容易走到今天，reactjs却走回老路，让人难以接受。我也几次三番因为`jsx`而放弃了解reactjs。 目前体验下来，发觉那是误解。 `reactjs`比其他前端模板引擎更彻底的分离html与javascript。前端模板引擎，绝大多数基于html字符串；而`reactjs`不是。能接受前端模板引擎的人，也能接受`jsx`。 `jsx`的实质是：用`xml`的语法写函数调用。它没有拼接html字符串，也不要求一定要使用`jsx`，手写函数调用，也是可以的。 在原生`DOM`中，用`js`构造`dom`的方式是这样的： ``` javascript //要构造的dom：React var a =...
Hi，在部署 node.js 应用时发现，如果不在 node.js 项目文件夹里面启动，而是在外层文件夹启动 node.js 应用，将会找不到 `app.config.js` 文件。 错误日志：`[AppConfig] No avaliable app.config.js found in /opt/tars/apps/100004256` 具体原因是因为， `app.config.js` 的查询方式为 ```javascript var appConfig={}; var lastConfigDir=''; var dirname=path.resolve("."); while (dirname!==lastConfigDir){ try {...