lihongxun945-CSDN博客

原创 webpack 源码解析系列

Webpack 源码解析Webpack 作为前端领域最重要的构建工具,任何一个优秀的前端工程师必定需要对它有比较深入的了解。本系列文章会带您深入理解webpack的实现原理，阅读关键代码，并自己实现一些简单的功能。这个系列总共包括8篇文章，首先分析我们常用的一些loader，然后看webpack核心代码的工作流程，最后探讨HMR以及tree-shaking等特性。文章全部在github...

2018-04-09 14:33:00 5518 1

文章转载自 https://blog.lihongxun.com/2017/11/24/hexo-codingnet/个人博客的最佳解决方案作为较早的博主，我大概从 2010 年开始就在CSDN上写博客，断断续续也写了100+篇文章。后来尝试过用自己的VPS搭建博客网站，以及在github上进行托管。但都不尽如人意，简单说下各种方式的优缺点。方案一，CSDN等博客平台在CSDN这样的博客平台上写博客

2017-11-24 16:56:58 2016

原创八小时实现迷你版vuejs七：展望和结束语

看代码就像看电影一样，不懂的时候觉得到处都是迷，觉得主角周围发生的事都好不可思议，看懂了之后就能发现一根清晰的主线剧情，或是亲情，或是爱情，或是复仇，或是为名为財。所有之前那些迷都豁然开朗。vuejs源码看下来也是，从3年前接触到vuejs开始，一直断断续续看了一些关于实现原理的文章，初看一堆概念：parser,compiler, observer, watcher 等等。每一部分都有复杂的细节实现

2017-11-09 15:51:20 1280

原创八小时实现迷你版vuejs六：实现常用指令

我们来实现一个 v-text 指令，其实非常简单，只要在 update 的时候把获取的值写到 innerHTML 中就行了。export default { bind () { }, update (value) { const el = this.descriptor.el el.innerHTML = value }}是不是很简单。再实现一个 v-model 指

2017-11-09 15:49:57 775

原创八小时实现迷你版vuejs五：实现Watcher

再贴一下之前的一张图：我们已经实现了 Observer 和 Directive，并且自己实现了一个 v-on 的指令，那么再实现 Dep 和 Watcher 就完整了。这里的 dep.js 其实就是一个记录依赖关系的，他有一个内部的数组 subs 会把所有依赖的 watcher 记录在里面，然后 observer 在观察到数据改变的时候，就告诉dep，它会负责遍历 subs 并调用他们的 upd

2017-11-09 15:48:07 1725

原创八小时实现迷你版vuejs四：实现compile和Directive

这一篇，我们要实现一个事件绑定的功能：<div @click=“sayHello”></div>那么为了实现这个功能，我们需要三步： 1. 实现 compileDirectives 方法, 可以从attrs中读取directive的配置，这里称之为 descriptor 2. 实现Directive类 3. 实现一个自定指令： v-on以 v-on 为例，如果碰到这样一个属性 v-on:cli

2017-11-09 14:35:04 1272

原创记一次box-shadow动画导致的性能问题

最近做一个项目发现在页面没有任何操作的情况下 CPU占用率会达到 100%。当然这是一个核心的占用率，所以页面操作上并不卡。不过这个现象非常不正常，因为页面只做了一些简单的CSS动画。在定位问题的过程中发现是由一个容器的box-shadow 动画引起的。启用动画和禁用动画performance profile对比如下：可以看到禁用 box-shadow 动画后有大幅的性能提升。下面看下代码：

2017-11-07 18:20:36 2132

原创八小时实现迷你版vuejs三：实现数据响应化

上一篇我们比较overview的讲了vuejs 的架构，从这一篇开始我们来自己动手实现一个vuejs。首先我们实现数据响应化，数据响应化的意思就是我们要能监听到任何数据变动。比如执行了 this.name = “Yao Ming” 之后，我们要能监听到这个改动。那么怎么实现呢？我们需要借助 ES5 提供的新特性 getter/setter。构造函数和初始化首先我们需要写一个 Vue 的构造函数，

2017-11-01 16:11:04 1262

原创八小时实现迷你版vuejs之二：vuejs 架构

什么是vuejs这里更多指的是原版的vuejs的架构，当然tinyvue也是一样的。我个人对vuejs的定义是：通过 directives 实现 data 和 DOM 的关联的一个框架。如果用一张图来定义大概是这样更复杂点是这样的：当然这里的data是广义的，包括初始化组件时传入的 data, props methods, computed 等一系列的方法和属性，把这些东西和D

2017-10-30 19:14:16 2234

原创八小时实现迷你版vuejs: 一前言

目的最近断断续续在看Vuejs源码，版本是 V1.0，因为最开始看的时候vue还没出v2正式版 =。=作者的代码功力很深厚，整个代码看起来非常优雅，对模块的组织和依赖的处理非常值得学习。在看的过程中觉得自己实现一个迷你版的vue应该不难，最近三天抽出时间一些时间就实现了一个，但实际上全部时间加起来大概就一整天。代码地址：https://github.com/lihongxun945/tiny-vue

2017-10-30 19:07:35 2240

原创 vue-mobile - 一个基于VUE的UI框架

我对UI框架的一些想法最近一年多一直在做UI库，从 SUI Mobile -> Light7 -> jQuery WeUI。自己也在做的过程中对UI库类的产品有了更深入的认识，SUI Mobile 和 Light7 有一个很大的问题在于：试图用一个轻量的基于jQuery的库，来做一个重量的框架应该做的事情。比如它定义了Page的概念，整个页面的结构，使用了异步加载的路由，这些会导致本来一个很轻量的库

2016-07-06 17:39:18 54150 5

原创数据库sharding和一致性哈希算法

数据库 sharding分布式数据库的核心算法就是sharding，把一个数据库通过sharding算法映射到不同的机器上处理。 sharding 分为两种方式：纵向切分：就是把一个表按不同列进行切分。比如我们有一个 User 表，那么可以按照不同的列拆分成 User Profile，User BaseInfo 等表，存在不同的机器上。说的通俗点就是拆表。横向切分：就是按照行进行切分，比如我们有四

2016-05-23 16:50:00 7066

原创随笔：用心良苦 - 理解 jQuery 的构造函数

最近有人问 jQuery 的构造函数为什么写的那么奇怪，不好理解。其实我刚开始看 jQuery 源码的时候也有这个疑问，下面是 jQuery 构造函数的关键代码：jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context );},jQuery.fn = jQuery.protot

2016-05-09 11:00:06 4228 1

原创七周七种前端框架四：Vue.js 构建大型应用

真正的模块化前端模块化很早就开始了，无论是 require.js，browserify 进行模块化打包，还是 Angular 进行依赖注入，我们都可以把JS代码分成一个个小的模块并组装起来。然后我们还会通过 less 或者 sass 来把CSS文件也拆成一个个小的模块来写，甚至我们在CSS代码中感受到了封装，继承，多态等面向对象的特性。然而，在 webpack 出来之前，我们所谓的模块化根本不

2016-05-04 18:09:47 9571

原创常用算法整理：二叉树

DFS - 二叉树的先序，中序和后续遍历先序遍历https://leetcode.com/problems/binary-tree-preorder-traversal/ 递归解法：var preorderTraversal = function(root) { if(!root) return []; return [root.val].concat(preorderTraver

2016-05-03 20:16:44 2170

原创七周七种前端框架四：Vue.js Directive

Directive看上去虽然和Angular中的定义类似，Directive 都是对DOM功能的一种拓展，但是 Vue 的 Directive 要弱的多。因为 Vue Component 其实本来就会包含对DOM的操作，所以大多数时候我们写一个通用组件都是一个Component 而不是一个 Directive，而在 Angular 我们写一个通用的组件一般都是一个 Directive 。所以我

2016-05-03 17:53:08 3213

原创七周七种前端框架四：Vue.js 组件和组件通信

基本是按照官网的 Guide 全部梳理了一遍：http://vuejs.org/guide/index.html这里我们以一个 Todo List 应用为例来把相关的只是都串起来，这篇里面的全部代码都在github上 https://github.com/lihongxun945/vue-todolistVue 实例一个 Vue 应用是由一个 root vue instance 引导启动的，而 V

2016-04-28 15:55:04 14496

原创 Google 前端面经一

严重缩招不得不说Google办事效率真心高，投了简历以后（内推），第三天就收到了反馈，然后HR就打电话过来。相比之下Amazon一个月都消息真是慢成狗了。 HR 说 Google 从去年年底开始已经不在国内招需要H1B签证去美国的，所以目前想去美国Google只能曲线救国transfer过去，无法直接申请H1B了。而且即使抽H1B，今年的概率大概四分之一多一点，基本不抱希望。因为我同时投了Lond

2016-04-28 10:27:57 3138

原创七周七种前端框架四：Vue.js 概览

关于 VueVue 从去年开始火的不行，如果你觉得 Angular1 又旧又太庞杂不好用，而Angular2又显得磨磨唧唧一直不出正式版，那么 Vue 可能是一个很好地选择。另外 Vue 的作者是一个国人大牛。看 Vue 第一眼的感觉就是麻雀虽小五脏俱全，该有的 data bind, component, directive 都有，API 简洁清晰，而且 directive 和 component

2016-04-26 17:44:28 2432

原创常用算法整理：链表相关

链表的考点链表很多时候都是考察基本功，因为链表题大部分都不是很复杂，主要是对指针的操作，当然也有难的。简单的题目包括删除/插入节点、翻转、去重、排序等，难度高一些的题目依然是这些，不过会有一些条件，比如多个链表或者局部操作。对链表题的两个技巧： - 如果不确定最终结果的head，比如对两个链表进行排序，那么新建一个 dummy node。 - 可以通过快慢指针的方式取中间节点入门题：第一题

2016-04-24 15:54:24 3723 1

原创常用算法整理：动态规划中篇

上一章讲了动态对话的一些 Easy 和 Medium 难度的题，如果会做这些题目，远远谈不上掌握了动态规划，最多只能算“略懂皮毛”。这里我们挑几个更复杂的动规题目，全部是 Hard 难度的题，并且全部都是双序列问题，能把这些题目做到 bug free 才算是基本掌握了动态规划。第一题题目地址：https://leetcode.com/problems/edit-distance/ 大意就是对一个

2016-04-20 18:35:26 688

原创常用算法整理：动态规划上

什么是动态规划动态规划是应该不能叫一种算法，而应该叫一类算法或者说是一种思想。它和二分查找这种算法是不同的，二分查找我们可以用代码表示出来，并且解决所有问题的思路几乎都是一样的。而动态规划其实无法用代码表示出来，每一种问题的解决方法可能用代码写出来都不一样，所以只看动态规划的定义是很难理解的，需要拿多个题目联系才能真正理解。动态规划的特点就是把一个大的问题分解为若干个小问题，并且这些小

2016-04-17 17:47:52 5877

原创可替代性和个人价值

最近帮公司招人也有一些感想，可能是因为这种公司的应聘人员素质参差不齐吧。包括自己身边总有人抱怨公司待遇各种不好，老板各种傻逼，你让他离职，却有各种理由舍不得走。其实说白了是因为他知道离职了之后也不会找到一个更好的工作。声明以下所说都是排除政治斗争、公司没钱等情况下的可替代性员工会考虑很多家公司，选择一个能胜任并且待遇最好的；而公司会比较所有的面试者，选一个能力相对较强而待遇要求相对较低的。这个选择最

2016-04-11 15:23:58 4073

原创常用算法整理：二分查找

基础二分查找二分查找是大家最常用的也是最简单的一种算法。二分查找在面试中是非常常见的一题，而且很多时候二分查找是时间效率最高的一种搜索方式。最简单的二分查找就是查找有序不重复数组中给定值的位置，基本模板如下：var search = function(nums, target) { var s = 0, e = nums.length - 1, m; while(s+1<e) {

2016-04-09 16:30:50 966

原创微信公众账号开发利器 - jQuery WeUI V0.6.0 发布

jQuery WeUI 是一个专门为对微信公众账号开发的一套UI库，它包含了 WEUI 的全部组件，另外还拓展了大量的常用组件，包括下拉刷新、滚动加载、日历、select 等。jQuery WeUI 所有的组件都是标准的 jQuery 插件，所以上手没有任何难度，也可以和Angular、React等其他框架结合使用。目前包括按钮、列表、对话框、日历等20+个常用组件。本次改动主要是：增加了 Sel

2016-04-08 15:23:01 5637 4

原创记一次CSS弹出动画的Bug

在写 jQuery WeUI 的一个picker的弹出动画的时候，我是通过CSS动画实现的。CSS代码如下：.weui-picker-modal { width: 100%; position: absolute; z-index: 100; bottom: 0; text-align: center; border-radius: 0; opacity: 0.6; c

2016-03-29 16:13:37 2204

原创五子棋AI算法第八篇-重构代码

为什么需要重构之前的代码有很多松散的模块组合在一起。在把 Zobrist 集成进去时，会发现全部需要走棋的操作其实都需要进行一次 Zobrist 异或操作。另外在逻辑上，其实很多模块都是可以合并到同一个类的，所以这次把代码进行了一次大的重构。所以如果发现博客说的一些模块找不到了也是很正常的，因为大部分模块都被移到了 Board 类中。这次重构主要的工作就是把AI相关的代码分成了四个模块：Boar

2016-03-27 16:25:44 6753 2

原创阿尔法狗打脸啪啪响啊~

上个月还预测李世石会很容易胜过阿尔法狗，没想到今天就被2:0打脸了。还是低估了指数回报的威力啊~借某人的一句名言说，“人工智能就像一列急速的火车，老远就听见轰隆轰隆的声音，但是一直见不到真面目，而你见到它的时候，一瞬间就擦肩而过远远把你甩在身后”。电脑智商的增长是指数级的，记住这一点，指数级增长很多时候会远远超出预期的速度。

2016-03-10 23:03:15 2709 1

原创五子棋AI算法第七篇-Zobrist

关于本博客这个博客不是把五子棋算法研究透彻之后再写的，而是一边研究算法一边写代码，同时一边写博客，所以有些博文的顺序不太对，比如 Zobrist 其实应该放在算杀之前就讲的。不过这并没有大的影响，总体上的顺序是OK的。另外，这一系列博客讲的五子棋代码其实是一个开源的项目，源码地址： https://github.com/lihongxun945/gobang由于是边写代码边写博客，所以博客中的代码不

2016-03-07 17:28:39 16240 3

原创五子棋AI算法第六篇-迭代加深

前面讲到了算杀，其实在算杀之前应该讲一下迭代加深。因为这些文章是我边做边写的一些笔记，所以顺序上可能不是那么严谨。AI没有找到最优解按照前面的所有算法实现之后（当然不包括算杀），会发现一个比较严重的问题，就是电脑在自己已经胜券在握的情况下（有双三之类的棋可以走），竟然会走一些冲四之类的棋来调戏玩家。这种走法出现的本质就是因为现在的AI只比较最终结果，并没有考虑到路径长短。所以很容易出现在6层搜索到一

2016-02-29 11:16:54 7837 1

原创五子棋AI算法第五篇-算杀

关于剪枝问题前面讲到的通过Alpha-Beta剪枝和启发式搜索可以将4层搜索的平均时间降低到1秒以下。只有这两个优化方式其实目前最多可以做到6层搜索，就是把AI和玩家各向后推算三步。6层搜索的棋力其实相当弱，碰到经常玩五子棋的人基本都会输，更不要说对五子棋有研究的玩家。以目前的平均一个节点有50个子节点的搜索方式，把搜索效率提高50倍则可以增加一层搜索深度。而除了前面讲到的AlphaBeta剪枝和启

2016-02-24 13:43:02 18527 4

原创你真的需要Grunt和Gulp吗

前些天看到一篇不错的文章 http://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/作者的观点是前端程序员不应该使用Grunt和Gulp这样的工具，可能观点听起来有点不可思议，不过他说的一些理由还是很有道理的。作者主要列举了如下几个理由：代码变得更加臃肿。和npm中配置script相比，grunt和gulp的配置文件简直臃肿不堪插件

2016-02-22 11:55:46 10758 2

原创五子棋AI算法第四篇-启发式搜索函数

什么是启发式搜索之前我们讲到需要优化一个重要的函数，就是 gen 函数顾名思义就是生成待搜索的位置的函数。这个函数目前做了一个很简单的处理，就是只要一个空位的周围有邻居即可。而其实这么做是非常不合理的，它的不合理性体现在两方便：没有对结果进行排序，完全是按照数组的遍历顺序的。而Alpha Beta 剪枝的效率是非常依赖节点顺序的，这个我们马上就会讲一下。没有排除不需要节点。如果能减少一些不必要

2016-02-15 15:25:38 18314 2

原创五子棋AI算法第三篇-Alpha Beta剪枝

剪枝是必须的上一篇讲了极大极小值搜索，其实单纯的极大极小值搜索算法并没有实际意义。可以做一个简单的计算，平均一步考虑 50 种可能性的话，思考到第四层，那么搜索的节点数就是 50^4 = 6250000，在我的酷睿I7的电脑上一秒钟能计算的节点不超过 5W 个，那么 625W 个节点需要的时间在 100 秒以上。电脑一步思考 100秒肯定是不能接受的，实际上最好一步能控制在 5 秒以内。顺便说一下

2016-02-15 14:36:27 47570 13

原创五子棋AI算法第二篇-极大极小值搜索算法

AI实现的基本思路-极大极小值搜索算法五子棋看起来有各种各样的走法，而实际上把每一步的走法展开，就是一颗巨大的博弈树。在这个树中，从根节点为0开始，奇数层表示电脑可能的走法，偶数层表示玩家可能的走法。假设电脑先手，那么第一层就是电脑的所有可能的走法，第二层就是玩家的所有可能走法，以此类推。我们假设平均每一步有50种可能的走法，那么从根节点开始，往下面每一层的节点数量是上一层的 50被，假设我们进行4

2016-02-02 18:17:02 68882 16

原创五子棋AI算法第一篇-我对谷歌Alphago的看法

最近Google宣布他们的围棋AI以5:0的战绩打败欧洲围棋三冠王。我一直对人工智能比较感兴趣，正好趁年前空闲的几天用JS写了一个五子棋的AI。其实很久以前就用自创的算法写过一个JAVA版的五子棋AI，不过棋力很不理想。这次用的是JS写的，所以无论任何平台上只要能打开网页的都可以玩。google爆出这个新闻之后，很多人觉得这是不是意味着电脑智商已经在人类之上了，围棋已经没有意义了之类的。甚至觉得这是

2016-02-02 11:17:18 28231 14

原创 jQuery WeUI v0.1.0 发布了 - 微信公众账号开发者的福音

我又回来了。抱歉因为最近头疼的事情比较多，好久没更新博客了。在做微信公众账号的童鞋有福了，简单易用的 jQuery WeUI 发布了第一个版本:github地址： https://github.com/lihongxun945/jquery-weui官网地址：http://lihongxun945.github.io/jquery-weui/就算不打算用jQuery WeUI，也不妨看看官网的

2016-01-13 12:04:27 18658 11

原创还是继续在这里写吧

本来想换到github上去写，不折腾了，继续在这里写博客吧。

2015-12-13 14:38:42 1192

原创七周七种前端框架三: Angular2 之 TypeScript

TypeScript 是什么有了拥抱ES6的TypeScript 果断可以抛弃 CoffeeScript 和 Babel了。TypeScript 是ES6的一个超集，也就是完整包含了全部ES6特性，并且还引入了强类型和注解。TypeScript = ES6 + 强类型 + Annotation不要用 CoffeeScript 了，因为他的语法大部分都和ES6是不一样，并不符合JS的发展方向。不要被标

2015-11-23 18:13:07 8016

深度学习用的动漫头像，用来训练神经网络

网易的tensorflow课程用的动漫头像资源

2023-02-19

加强版坦克大战源码（java）

游戏规则说明：每一局会有3波敌人，每一波有6个，每当上一波敌人快被全部消灭时，下一波敌人就会出现。3波敌人全部被消灭则自动进入下一关。攻击敌人有一定的概率会在地图上随机出现不同的食物，食物总共有10种，吃完之后可以增强各种属性（比如增加生命上限，子弹威力，攻击速度，移动速度，无敌等），基地每隔一分钟会随机产生一个食物在基地正上方。基地被消灭或者生命树为0则游戏结束。敌人无法吃到食物。土墙生命值较少，可以被摧毁。钢板无法被摧毁。河流无法被摧毁，但是子弹可以从河流上飞过。每过一关，敌人的属性都会增强，同时自己的属性也会增强（死亡复活后保持不变）。超级子弹是向八个防线发射的，有个数限制，通过吃食物可以增加个数。敌人的子弹不会攻击到敌人，但是自己的子弹会攻击到自己的基地！所有坦克互相之间无碰撞体积。

2011-03-24

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

深度学习用的动漫头像，用来训练神经网络

加强版坦克大战源码（java）

古典密码通用加密/解密工具(axun)

网页版扫雷游戏js(axun)

java读取配置文件(axun)

粘滞键后门-自动创建-批处理版(axun)

U盘小偷-批处理版(axun)

JAVA查看安装软件列表(axun)

c++五子棋源码 ( axun)

空空如也