海角在眼前

摘要： 这几天在兴趣下翻看了钉钉（工作协同）应用的前端源码，分析其目录结构、构建工具及框架使用等，进行前端技术研究，分享我的总结成果。 PS：不知道这应用的没关系，因为总结出来是前端通用的东西。 PS：其应用样子。 前言 我研究的是PC桌面版的钉钉应用，应用是由“chrome内核容器+ web页面”构成的， 阅读全文

摘要： 看别人用的依赖库的好处在于，你知道有什么可以用，什么可以借鉴。（钉钉——协作桌面应用） PS：人最怕是不知道，而不是你不会。 1. jQuery 钉钉使用了1.9.1版本的jQuery，jQuery作为一个最为广泛使用库，已经不用说明它是什么了。 学习地址：http://jquery.com/ PS 阅读全文

摘要： 最近在学习钉钉（一个协作应用）桌面应用的前端源码时候，发现其js源码是用browserify做模块开发。于是想还原其源码的原本的目录结构，学习它的目录分类以及业务划分。 前言 用过browserify构建工具的应该清楚，在压缩合并后的代码的最前面，有处理模块依赖关系的代码： 目录结构解析 我写了一个 阅读全文

摘要： 前言 在未接触browserify，虽然我知道它是一个前端构建工具，但还是有几个疑问： 1. browserify出现的日期？ 2. 能构建哪些文件？ 3. 附加的browserify代码体积是多大？ 4. 能生成多个输出文件吗？ 5. 如何兼顾开发调试？ 6. browserify vs webp 阅读全文

摘要： 在前端开发过程中，无论是样式还是脚本，运行时的文件可能是压缩后的，那这个时候调试起来就很麻烦。 这个时候，可以使用Source Map文件来优化调试，Source Map是一个信息文件，里面储存着原代码位置信息（转换后的代码的每一个位置，所对应的转换前的位置），这样你调试时看到的就是原文件代码。 P 阅读全文

摘要： 最近在思考一个问题，就是怎么才算一个大型项目，大的衡量有哪些东西？为什么要搞清这个问题呢，是因为在实际的开发过程中，如果知道这是个多大的项目，那就有各种相应的解决方案（我们称之为套路的东西）就可以使用了。 我的想法 我觉得有几个可以衡量的标准。 1. 代码量 也就是项目的代码量。 2. 用户量 也可 阅读全文

摘要： 前言 在还未接触webpack，就有几个疑问： 1. webpack本质上是什么？ 2. 跟异步模块加载有关系吗？ 3. 可否生成多个文件，一定是一个？ 4. 被引用的文件有其他异步加载模块怎么办？ 在学习webpack时，也有几个疑问： 1. webpack有哪些常用的插件？ 2. 常用的Load 阅读全文

摘要： 这几天有个工作需求，就是在富文本输入区域（kindeditor）可以有@功能，能够容易提示用户名的（像在qq群组@人一样）。在网上找了一个叫bootstrap-suggest的插件，却不能满足我的需求，于是我决定在该插件上改良，主要是下面几点： 1. @内容的输入，能够匹配多个属性值。 2. 选中列 阅读全文

摘要： meta标签作用 META标签是HTML标记HEAD区的一个关键标签，提供文档字符集、使用语言、作者等基本信息，以及对关键词和网页等级的设定等，最大的作用是能够做搜索引擎优化（SEO）。 PS：便于搜索引擎机器人查找、分类，互联网应用应该要注意。 大网站都是怎么写？ 在了解这个标签之前，我查找了各个 阅读全文

摘要： 上周末（2016/07/31）去了一个技术沙龙学习前端相关的东西，下面是各个主题我印象比较深的。 React + Redux 最佳实践 主题：本次分享，主要从React/Redux相关概念及其工具链，Webpack构建流程，如何Mock数据，如何测试以及一些开发小经验等方面，分享介绍如何使用Reac 阅读全文

摘要： 时间过得很快，我做软件工程师已经三年整了。我没有做过一个项目，一直在做框架相关的工作，有时维护Web框架代码，有时写移动Hybrid的前端UI框架，也有时做开发工具或自动编译平台等。 我想分享下这段时间在工作上的个人经验，分为几点： 做框架的态度 我工作中做得最多就是框架，框架的本质是提高重用性。对 阅读全文

摘要： JavaScript事件机制，也有让人深思的东西。在一开始未深入了解，我头脑里有几个问题发出： 1. 自下而上（冒泡）事件怎么写，自上而下（捕获）又是怎么写？ 2. 捕获型和冒泡型同时设置，谁生效？ 3. 冒泡能够阻止，那捕获能够阻止吗？ 4. jquery的on或bind是冒泡，还是捕获？ 5. 阅读全文

摘要： 享元（Flyweight）模式是一种经典的结构型设计模式，用于优化重复、缓慢及数据共享效率较低的代码。它旨在通过与相关对象共享尽可能多的数据来减少应用程序中内存的使用。 应用场景 （1）用于数据层，处理内存中保存的大量相似对象的共享数据。 （2）用于DOM层，Flyweight用作中央事件管理器，来 阅读全文

摘要： 一个能让你用Web技术开发桌面应用的开源项目。这里做一个笔记（非正式文章）： 官网地址：http://electron.atom.io/ API相关 Electron提供的主进程接口、渲染进程接口、共用接口等。 Process（进程）：继承NodeJS的process模块，增加属性和方法、事件。 C 阅读全文

摘要： React有三个东西，React JS 前端Web框架，React Native 移动终端Hybrid框架，React Web是一个源码转换工具（React Native 转 Web，并之所以特别提出，是觉得还有些用处）。 React、React Native共同特点 起源 Facebook 的内部 阅读全文

摘要： 在使用React Native时候，我记录下比较常遇到的问题，分为以下几类： 1. 调试问题 2. 写法问题 3. 疑难问题 4. 奇怪问题 调试问题 1. 在react-native run-android运行后，真机上打开的空白页面。 我测试机是红米2A（Android 4.4.4），在调试时， 阅读全文

摘要： 我用了三天时间实现了一个相对比较完整的React Native 新闻发布类型的示例。应用做得很简单，但大多React Native的组件都有用到，今天做一个分享（由于我电脑是Windows系统，所以只实现了Android部分，没有对iOS做兼容），希望对初学者有用处。 实现界面 PS：页面实现不多， 阅读全文

摘要： 学习东西都有一定的套路，特别是新的框架，对于React Native，我是这么学的。 第一步 ： 这是啥 在各种原因下，需要使用某个框架时，那第一件事就是知道这个框架是用来干什么。React Native，就是用来做移动端的跨平台应用（iOS和Android），使用JavaScript来开发。据说性 阅读全文

摘要： 在进行实验和资料查询时，我遇到了几个关键问题： 1. window.onload到底是什么加载完触发？ 2. body为什么会有onload事件？ 3. 为什么是window.onload，而不是document.onload？ 4. document ready到底是什么ready，DOM渲染完成 阅读全文

摘要： 在《JavaScript设计模式》介绍中，装饰者模式跟Mixin（混入）模式相比，是另一种可行的对象子类化（Mixin模式干的事）的替代方案。 装饰者（Decorator）模式 定义： 给对象动态添加额外的功能。向基本对象添加（装饰）属性或方法，而不是进行子类化，它较为精简。 使用场景： java 阅读全文