前端胖头鱼
赞
> 楼主超赞👍 **基本上你的这个编辑器全部满足自己的需求，前端编辑器可视化编辑，后端接受markdown格式字符串存入数据库，在node层面做解析。但是如果可以选择不同的代码高亮皮肤就更好了**
Hi Can I not rely on jQuery
如何代理请求
在使用该项目的时候 需要设置请求代理，按照如下配置。 webpack.dev.config.js 希望把页面上 /api相关的请求都代理到http://local.engineer.com:5000这个路径下， ``` config.devServer = { inline: true, proxy: { '/api*': { xfwd: true, // host: '127.0.0.1:3002', target: 'http://local.engineer.com:5000', bypass: function (req, res, proxyOptions) { console.log('Proxy: '...
## 前言 [原文地址](https://github.com/qianlongo/zepto-analysis/issues/1) [项目地址](https://github.com/qianlongo/zepto-analysis) > 不知道大家在面试或者工作过程中有没有被`mouseover`和`mouseenter`(对应的是`mouseout`和`mouseleave`)事件所困扰。自己之前在面试的时候就有被问到诸如mouseover和mouseenter事件的异同之类的问题？当时没有答出来，一直也对这两个事件有点模糊不清，趁着最近正在读[zepto源码](https://github.com/qianlongo/zepto-analysis)，准备写一篇这方面的文章，如果有错误，请大家指正。  ## mouseenter与mouseover的异同？ > 要说清楚mouseenter与mouseover有什么不同，也许可以从两方面去讲。 1. 是否支持冒泡 2. 事件的触发时机 先来看一张图,对这两个事件有一个简单直观的感受。  **再看看官网对mouseenter的解释** [mouseenter | onmouseenter event](https://msdn.microsoft.com/en-us/library/ms536945(v=vs.85).aspx) > The event fires only if the mouse...
## 前言 > 移动端原生支持`touchstart`、`touchmove`、`touchend`等事件，但是在平常业务中我们经常需要使用`swipe`、`tap`、`doubleTap`、`longTap`等事件去实现想要的效果，对于这种自定义事件他们底层是如何实现的呢？让我们从`Zepto.js`的`touch`模块去分析其原理。您也可以直接查看[touch.js源码注释](https://github.com/qianlongo/zepto-analysis/blob/master/src/touch.js) [源码仓库](https://github.com/qianlongo/zepto-analysis) [原文链接](https://github.com/qianlongo/zepto-analysis/issues/13)  ## 事件简述 > Zepto的touch模块实现了很多与手势相关的自定义事件，分别是`swipe`, `swipeLeft`, `swipeRight`, `swipeUp`, `swipeDown`,`doubleTap`, `tap`, `singleTap`, `longTap` 事件名称 | 事件描述 ---- | --- swipe | 滑动事件 swipeLeft | ←左滑事件...
## 前言 > 这篇文章主要想说一下Zepto中与"偏移"相关的一些事，很久很久以前，我们经常会使用`offset`、`position`、`scrollTop`、`scrollLeft`等方式去改变元素的位置，他们之间有什么区别，是怎么实现的呢？接下来我们一点点去扒开他们的面纱。 [原文链接](https://github.com/qianlongo/zepto-analysis/issues/12) [源码仓库](https://github.com/qianlongo/zepto-analysis)  ## offsetParent **`offset`、`position`两个api内部的实现都依赖`offsetParent`方法,我们先看一下它是怎么一回事。** > 找到第一个定位过的祖先元素，意味着它的css中的position 属性值为“relative”, “absolute” or “fixed” [#offsetParent](http://www.css88.com/doc/zeptojs_api/#offsetParent) 我们都知道css属性position用于指定一个元素在文档中的定位方式，其初始值是**static**, css3中甚至还增加了**sticky**等属性，不过目前貌似浏览器几乎还未支持。 看一下这个例子 **html** ``` html ``` **css** ``` html .wrap{ width: 400px;...
## 前言 > 使用Zepto的时候，我们经常会要去操作一些DOM的属性，或元素本身的固有属性或自定义属性等。比如常见的有`attr()`,`removeAttr()`,`prop()`,`removeProp()`,`data()`等。接下来我们挨个整明白他们是如何实现的...点击[zepto模块源码注释](https://github.com/qianlongo/zepto-analysis/blob/master/src/zepto.js)查看这篇文章对应的解析。 [原文链接](https://github.com/qianlongo/zepto-analysis/issues/11) [源码仓库](https://github.com/qianlongo/zepto-analysis)  ## attr() > 1. 读取或设置dom的属性。 > 2. 如果没有给定value参数，则读取对象集合中第一个元素的属性值。 > 3. 当给定了value参数。则设置对象集合中所有元素的该属性的值。当value参数为null，那么这个属性将被移除(类似removeAttr)，多个属性可以通过对象键值对的方式进行设置。[zeptojs_api/#attr](http://www.css88.com/doc/zeptojs_api/#attr) **示例** ``` javascript // 获取name属性 attr(name) // 设置name属性 attr(name, value) // 设置name属性，不同的是使用回调函数的形式...
## 前言  > Zepto中的ie模块主要是改写`getComputedStyle`浏览器API，代码量很少，但也是其重要模块之一。在看源代码之前，我们先回顾一下如何使用 ## getComputedStyle > Window.getComputedStyle() 方法给出应用活动样式表后的元素的所有CSS属性的值，并解析这些值可能包含的任何基本计算。[MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle) ``` javascript let style = window.getComputedStyle(element, [pseudoElt]); ``` **element** element参数即是我们要获取样式的元素 **pseudoElt** 要匹配的伪元素字符串，对于普通元素来说需省略（null） **结果** 特别重要的是该方法执行后返回的样式是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。 ``` html #elem{ position:...
## 前言 > 平时开发过程中经常会用类似`each`、`map`、`forEach`之类的方法，Zepto本身也把这些方法挂载到`$`函数身上，作为静态方法存在，既可以给Zepto的实例使用，也能给普通的js对象使用。今天我们主要针对其提供的这些api做一些源码实现分析。 [源码仓库](https://github.com/qianlongo/zepto-analysis) [原文链接](https://github.com/qianlongo/zepto-analysis/issues/6)  具体各个api如何使用可以参照[英文文档Zepto.js](http://zeptojs.com/) [中文文档Zepto.js](http://www.css88.com/doc/zeptojs_api/) ## 1. $.camelCase > 该方法主要是将连字符转化成驼峰命名法。例如可以将`a-b-c`这种形式转换成`aBC`,当然连字符的数量可以是多个，`a---b-----c` => `aBC`,具体实现已经在[这些Zepto中实用的方法集](https://github.com/qianlongo/zepto-analysis/issues/5)说过了，可以点击查看。而其代码也只是将`camelize`函数赋值给了$.camelCase ``` javascript $.camelCase = camelize ``` ## 2. $.contains > `$.contains(parent, node) ⇒ boolean`该方法主要用来检测parent是否包含给定的node节点。如果parent和node为同一节点，则返回false。...