花神的博客

当页面中使用 useEffect 的时候，会在初始化的时候执行 mountEffect 如下：useEffect: function(create, deps) { currentHookNameInDev = "useEffect"; mountHookTypesDev(); checkDepsAreArrayDev(deps); return mountEffect(create, deps);},执行 mountEffect 的时候执行 mountEffectImpl 如下：

react 中如何修改 input 的 defaultValue在使用 react 进行开发时，我们一般使用类组件的 setState 或者 hooks 实现页面数据的实时更新，但在某些表单组件中，页面的数据却无法更新，令人苦恼，比如下面这个例子：import React, { useState } from "react";function Demo() { const [num, setNum] = useState(0); return ( <>

使用 antd3 的 Form 进行开发时经常需要自定义一些组件，之前都是使用类组件实现，没有问题，但是自从 hooks 发布后，目前开发基本转向了函数组件，但是 Form getFieldDecorator 传入函数组件控制台会出现错误提示。假如我们定义如下的组件：import React, { useRef } from "react";import { Form, Input } from 'antd';const TextInput = () => { return <

Modal.success 中 hook 无法实时更新问题最近同事问了我一个问题，为啥 Modal.success 中的 hook 无法实时更新，代码如下import React, { useState } from "react"import { Modal, Button } from 'antd'function App() { const [num, setNum] = useState(0) const success = () => { set

首先回顾一下antd3的用法import React from "react";import { Form, Input, Button } from "antd";const Demo = ({ form }) => { const { getFieldDecorator, validateFields } = form; const handleSubmit = e => { e.preventDefault(); validateFields((err, v

接着上一篇文章，我们继续进行extends的解析。开始之前，我们先要回顾一下ES5的继承，以前实现继承也不是一件容易的事情，常用的方法有构造函数继承，原型继承，组合继承，寄生式继承和寄生组合式继承等，构造函数继承中每个子类的属性和方法都是独立，太浪费内存，原型继承虽然实现了方法的共享，但是存在子类修改公共方法，影响其他子类的问题等，那么babel是如何来处理继承的呢，接下来我们通过babel官网提供的工具看一下：// 原始代码class Father { name = 'iwen' a

antd 中 Tooltip 和 Popover 组件传图错位最近遇到一个需求，当鼠标 hover 一个 icon 的时候展示一张图片，因为项目时基于 antd 进行开发的立马想到了 Popover 组件，写下了如如下代码：<Popover content={<img src="https://wtniu.xyz/res/pic.png" alt="" />}>...

​ 组件化开发是目前前端开发中十分重要的一项技能，无论是 Vue， react 还是小程序对于组件化开发都有很好的支持，要想掌握好组件化开发，组件之间的通信是无法绕过的话题，最近技术栈从 Vue 转向了 react + 小程序，便总结了一下在进行 react 和小程序开发时，组件之间是如何通信的。​ 组件之间的通信一般有三种，一种是父组件向子组件通信，一种是子组件向父组件通信，还有一种是兄弟组件...

**导读：**总是会有人问我这样一个问题，如何学习编程？我从来没有正面回答过这个问题。我都是会推荐他们去知乎或者百度贴吧去问一下，因为那里大牛的密度比较高。我不是大牛，所以，不好回答这个问题。但是总有人不死心啊，总是问个不停，觉得我孬好做了这么多年程序员，总得有点经验吧，我想了一下，成功的经验真没有，失败的教训可以说一说。虽然说失败是成功之母（BTW：我并不相信这句话，我认为这就是安慰失败者的话...

最近，和UCWEB同事讨论，怎么才能把我们的UCWEB做到极致。我说，“手机上的平台非常多，如果想做好，需要足够多、足够优秀的程序员。 优秀的程序员如何定义呢？首先必须热爱写程序，其次必须是一个完美主义者。 只有这样的人，才能把事情做得极致。”说着说着，我怀念起我过去写程序的日子，从1987年到1996年，那是一段阳光灿烂的日子。几年前我无意中从网上找到了1996年在金山西点BBS上写几篇帖子，...

以前记录一些简单的信息时使用记事本比较多，虽然非常方便但是记事本不能自动保存，重启或者死机后信息容易丢失，平时使用chrome比较多，所以就研究了一下chrome插件开发，并开发一块简单，方便的便签插件，截图如下：想要入门 chrome 插件开发的可以查看源码：github地址：https://github.com/daoket/Easy-Notes，想要直接安装使用的可以直接跳转...

为什么不推荐使用 setInterval首先简单介绍一下 js 的执行原理：js引擎是单线程的，主要分为主线程和事件队列，同步操作是在主线程上执行，而异步操作的函数会先放在事件队列当中，等到js主线程空闲了，才会去事件队列取出放到主线程，继续进行操作。定时器是属于异步事件，参数里面设置的时间，并不是延迟多少秒去执行回调函数，这个时间代表的是延迟多少秒，把回调函数放到异步队列，等待主线程空闲再被执...

for of 是我们经常使用的一个属性，它可以非常方便的遍历数组，除此之外，它还可以用来遍历类数组对象，Set和Map等，那么问题就来了，为什么它可以遍历Map却不能遍历普通的对象呢？今天就来探索一下for of底层的秘密。首先，我们要知道for of是用来遍历可迭代对象的，那么如何判断一个对象是否是可迭代对象呢？js引擎是通过判断对象是否具有 Symbol.iterator 来判断的，如下：...

经常使用ES6中的class，但却一直不知道 babel 是如何编译的，所以就抽空研究了一下，下面是相关的代码，关键地方都已经添加了注释。1. 编译类ES5 定义类function Person(name) { this.name = name;}Person.prototype = { sayHello: function () { return 'hello, I ...

JavaScript 中常见的异步函数有：定时器，事件和ajax等，那么如何来处理这些异步函数呢，常用的方法有下面几种：回调函数function eat() { console.log('好的，我开动咯');}function cooking(cb) { console.log('妈妈认真做饭'); setTimeout(function () { console...

在 JavaScript 中可以使用递归实现一个深拷贝，代码如下：const obj = { info: { person: { name: 'iwen', age: '18', } }}// 第一版function deepClone(obj) { let result = Object.create(null) for (con...

Vue 组件化开发提示： 本次分享知识点基于 vue.js，需要对 vue.js 有一定的了解。什么叫做组件化vue.js 有两大法宝，一个是数据驱动，另一个就是组件化，那么问题来了，什么叫做组件化，为什么要组件化？接下来我就针对这两个问题一一解答，所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的，所以组件在系统内...

Javascript 设计模式系统讲解与应用第1章 课程介绍面试敲门砖、进阶垫脚石、设计有模式、代码更合理第2章 面向对象2-1 搭建开发环境基于 webpack webpack-cli 搭建。2-2 什么是面向对象2-3 面向对象-继承2-4 面向对象-封装2-5 面向对象-多态2-6 面向对象-应用举例2-7 面向对象-总结2-8 UML类图1-介绍2-9 UML类图...

修改默认配置vue.config.jsmodule.exports = { outputDir: 'docs', baseUrl: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/'}官方文档： 具体配置去掉console.log提醒package.json&amp;quot;rules&amp;quot;: { &amp;quot;no-cons...

• 分词/词法分析（Tokenizing/Lexing）这个过程会将由字符组成的字符串分解成（对编程语言来说）有意义的代码块，这些代码块被称为词法单元（token）。例如，考虑程序 var a = 2;。这段程序通常会被分解成为下面这些词法单元：var、a、=、2 、;。空格是否会被当作词法单元，取决于空格在这门语言中是否具有意义。分词（tokenizing）和词法分析（Lexing）之...

在进行源码分析和软件架构设计时，UML类图十分有用，下面我就介绍一下UML类图最常用的元素，几分钟就可以掌握。一. 类的UML图示在UML类图中，类使用类名、属性(field)和方法(method)且带分割线的矩形表示，如下图表示一个Person类，它包含了name，age这2个属性，以及say()方法。那么属性/方法名称前的加好和减号是什么意思呢？它们表示了这个属性或方法的可见性，UML...

Unix 哲学的几条准则看似简单。事实上，它们简单到会容易使人们忽略其重要性。这就是它们颇具欺骗性的地方。其实，简单的外表下掩盖着一个事实：如果人们能够始终如一地贯彻它们，这些准则可是非常行之有效的。以下这份清单会让你对 Unix 哲学的准则有初步的认识。本书其余部分则会帮助你理解它们的重要性。(1) 小即是美。相对于同类庞然大物，小巧的事物有着无可比拟的巨大优势。其中一点就是它...

&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;

将图片转为base64格式是一种比较常见的需求，今天就总结一下在浏览器中和服务器上比较常用的几种方法。通过canvas将图片转base64&lt;!DOCTYPE html&gt;&lt;html lang='zh'&gt;&lt;head&gt; &lt;meta charset='UTF-8' /&gt; &lt;meta name='viewport' content='...

TensorFlow是什么？ Tensor（张量）意味着N维数组，Flow（流）意味着基于数据流图的计算，TensorFlow为张量从流图的一端流动到另一端计算过程，是将复杂的数据结构传输至神经网络中进行分析和处理的系统。 TensorFlow中常用的激励函数有哪些？ 公式 代码实现import tensorflow as tf;import numpy as np;imp...

平常遇到喜欢的页面总喜欢拿来欣赏一番，今天就以webpack+vue的项目为例分析一下打包后的源码。 环境： webpack4.16 vue2.5.16为了方便理解，先使用webpack打一个最简单的包（未使用vue），下面是混淆压缩前的伪代码(function (modules) { var installedModules = {} // 缓存模块 // 处理AMD ...

1. 为什么要进行特征抽取？ 为了将原始数据转化为算法要求的数据2.特征抽取常用的方法有哪些？one-hot编码from sklearn.feature_extraction.text import CountVectorizercv = CountVectorizer()data = cv.fit_transform(['life is is short, i like ...

今天没事，就比较了一下chrome和FireFox在渲染大量图片时的性能，本来想渲染一万张图片，结果chrome要7，8秒，FireFox和Edge直接卡死，最后改用1000张进行比较： 环境： 系统：window10 处理器：Intel i5 7300HQ 内存： 8G 浏览器： chrome67 Firefox61 Edge42.17134测试用例：&amp;amp;amp;amp;amp;lt;...

源码const CryptoJS = require('crypto-jS');const request = require('request');const cheerio = require('cheerio');let config = { loginUrl: 'https://www.oschina.net/action/user/hash_login?from=', ...

组件化和模块化开发是这几年比较热门的话题，在尝到了模块化开发的甜头后，近期打算将公司的项目切换到vue进行组件化开发，这里对遇到的问题进行一下总结：首先抛出开发中遇到的问题： 1. 哪些部分可以进行组件化？ 2. 项目的目录如何划分比较合理？ 3. 组件划分太细，难以维护，划分太大，导致灵活度降低，如何权衡？ 4. 除了公共组件和功能组件的组件化，业务代码往往和每一个项目强耦合，需不需...

assert用法const assert = require('assert');try { var a = 10 var b = 20 assert.equal(a, b, '不相等') // notEqual strictEqual deepEqual notDeepEqual} catch (error) { console.log(error.message)...

今天在整理笔记，下面是我以前写的一些随笔，觉得挺不错的，分享一下。做人要有激情 圣人说，吾日三省吾身。做人一定要反思，回顾以前的自己，反思的次数就太少了，加上自己又是一个内向的人，喜欢宅在家里面，不经常到外面，慢慢地自己越来越宅，朋友也越来越少，这样是不对的，其实应该多出去玩玩，看看更大的世界，遇见更多的人，生活中，不求做到轰轰烈烈，至少做得无怨无悔。轰轰烈烈，那是伟人去做的，我不是伟人，我...

JavaScript语法设计模式函数式底层框架和类库发展语法变量this深拷贝继承闭包高阶函数异步和事件模式设计模式单例模式工厂模式观察者模式函数式函数式编程底层js解析原理V8引擎框架和类库jqueryvue发展typescriptHTML&amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;CS...

前端性能优化资源的加载方式懒加载适用场景：页面很长，图片很多原理： 可视区内部的图片正常加载，可视区外的图片src设置为预览图，将图片的src放在img标签的data-src属性中，如&amp;lt;img data-src='img/pic.png' src=&quot;img/demo.png&quot;/&amp;gt;实现方式： 1. 手动实现 2. lazyload.js预...

&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &a

在进行页面性能优化的时候，经常被告诫要使用transform替代top来实现动画，这样性能会更好，作为一名有追求的前端，不仅需要知其然还要知其所以然，今天就通过chrome的performance工具来直观展示其中的原因。 源码:&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;&amp;amp;amp;lt;html lang=&amp;amp;quot;zh&amp;amp;quot;&amp;amp;amp

一. 作用域 作用域是什么？作用域是存储变量的一套规则，比如函数作用域，块作用域，全局作用域作用域组成： 引擎 编译器 作用域举例： va a = 1 分为两个阶段： 1. 编译阶段声明变量 2. 执行阶段赋值LHS： 变量赋值 RHS： 变量查找编译的原理 js–(分词/词法分析(tokenizing/Lexing))–&amp;amp;amp;gt;有意义代码块–(解析/...

浏览器拿到url后，首先是找该url对应的ip地址，寻找顺序为： 浏览器缓存，hosts, DNS,根服务器DNS，找到后向服务器发送请求，建立tcp的三次握手，握手成功后请求该资源，由于使用的http1.1协议，并且在请求头中设置了Connection： keep-alive，所以服务器返回html页面后并没四次挥手，而是会继续保留一段时间，这时候浏览器开始解析html为DOM树，遇到src标签...

掌握常用的算法是从初级前端向中高级前端发展的必经之路，下面将常见的一些算法使用ES6重写一遍，一共6分为6篇，下面是链接地址：ES6算法—冒泡排序 ES6算法—选择排序 ES6算法—插入排序 ES6算法—快速排序 ES6算法—希尔排序 ES6算法—归并排序后续的补充都会在github上进行，地址： 点我...

原理：归并排序使用分而治之的思想，以折半的方式来递归/迭代排序元素，利用空间来换时间，做到了时间复杂度 O(n·log(n)) 的同时保持了稳定。时间复杂度最优时间复杂度： O(nlogn)最坏时间复杂度： O(nlogn)稳定性：稳定实现方式function merge_sort(arr) { let len = arr.length if (len &l...

原理：插入排序的改进版，克服了插入排序每次只能移动相邻位置的缺陷，希尔排序每次可以移动gap个位置时间复杂度最优时间复杂度： O(nlogn) 最坏时间复杂度： O(n^2) 稳定性：不稳定实现方式function shell_sort(arr) { let len = arr.length let gap = Math.floor(len / 2) w...

原理：从数列中挑出一个元素，称为”基准”（pivot）重新排序数列，所有比基准值小的元素摆放在基准前面，所有比基准值大的元素摆在基准后面（相同的数可以到任何一边）。在这个分区结束之后，该基准就处于数列的中间位置。这个称为分区（partition）操作。递归地（recursively）把小于基准值元素的子数列和大于基准值元素的子数列排序。时间复杂度最优时间复杂度： O(nl...

原理：默认 a[0] 为已排序数组中的元素，从 arr[1] 开始逐渐往已排序数组中插入元素，从后往前一个个比较，如果待插入元素小于已排序元素，则已排序元素往后移动一位，直到待插入元素找到合适的位置并插入已排序数组。经过 n - 1 次这样的循环插入后排序完毕。时间复杂度最优时间复杂度： O(n) 最坏时间复杂度： O(n^2) 稳定性：稳定实现方式1functio...

原理：每一次内循环遍历寻找最小数的下标min，并在这次内循环结束后交换 min 和 j 的位置。时间复杂度最优时间复杂度：O(n2)最坏时间复杂度：O(n2)稳定性：不稳定function selection_sort(arr) { let len = arr.length for (let j = 0; j &lt; len-1; j++) { let...

原理：依次比较、交换相邻的元素大小时间复杂度最优时间复杂度：O(n^2)最坏时间复杂度：O(n)稳定性：稳定实现方式1function buddle_sort(arr) { let len = arr.length - 1 for (let j = 0; j &amp;amp;lt; len; j++) { for (let i = 0; i &amp;amp;lt; len - ...

代理和反射是ES6中新增的API, 理解两个API用处很多，比如vue中数据绑定实现的原理是调用Object.defineProperty，而Proxy其实就是Object.defineProperty的语法糖，传言未来发布的Vue3.0也会使用Proxy+MutationObserver来重写数据绑定的底层实现，可见这个API作用还是大大的，下面介绍两个简单的例子，来让你快速的理解这两个API ...

最近在学习Python，发现一个学习面向对象开发很好的例子，于是用js实现了一遍，下面是源码，有兴趣的同学可以看下：// 老王开枪/** * @desc 人类 */class Person { constructor(name) { this.name = name this.gun = null this.hp = 100...

网上有很多关于双飞翼布局和圣杯布局的文章，但是质量参差不齐，有些文章甚至是错误的，所以我决定自己写一遍关于这方面的文章，尽量使用最简单易懂的方式表达，结合源码让你最快的明白两种布局的用法和不同，补充一句，所有不上源码直接说原理的技术文章都是耍流氓，下面是两种方式实现的源码：双飞翼布局&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;hea...

使用node+express+mongo实现的个人博客系统，项目使用express处理http请求和路由管理，使用mongo作为数据库，swig作为模板引擎，body-parser处理post数据，使用cookies记录用户登录状态，项目中涉及了创建一个前端博客+后台管理系统的大部分知识。源码地址：https://github.com/daoket/nodeblog部分截图前端...

随着这几年前端的快速发展，页面中需要实现的功能越来越复杂，DOM操作频繁，使用传统的jQuery库去频繁操作DOM时不仅消耗性能，而且各种DOM绑定后期维护时简直是一场噩梦，在开发大型项目时，模块的依赖问题变得非常复杂，还记得grunt年代时，一个html页面通过有十几个script标签，简直让人吐血，如果缺少组件化思想，后期项目会变的举步维艰，原来的grunt，gulp等工具虽然解决了前端工程中...

选择排序实现思路：将一个序列分为两部分，前面是有序序列，后面是无序序列，不断的将后面的无序序列中的最小值添加到前面的有序序列中，直到后面的无序序列中没有值,开始的时候将第一个值作为有序序列。代码实现：arr = [7, 4, 3, 67, 34, 1, 8] # length = 7def select_sort(arr): n = len(arr) for j ...

最近在学习Python，下面是我的一些笔记冒泡排序实现思路： 使用双重for循环，内层变量为i， 外层为j，在内层循环中不断的比较相邻的两个值（i, i+1）的大小，如果i+1的值大于i的值，交换两者位置，每循环一次，外层的j增加1，等到j等于n-1的时候，结束循环 第一次看不懂很正常，不要灰心，下面是使用代码的实现arr = [7, 4, 3, 67, 34, 1, 8]...

parcel是最近非常火热的一个前端构建工具，你可能会问，我webpack还没有学会，干嘛又要学习parcel，我不学，我不学，我不学，年轻人听我说，因为parcel非常简单，相当于webpack玄学般的配置来说，几乎是零配置就可以快速上手，使用parcel我们可以将更多的精力投入到开发工作中能，更早的下班，吃饭，陪女朋友逛街，达到人生巅峰。既然parcel这么好，我该如何学习，为了让大家快速的上...

最近使用parcel来构建项目，需要将构建后的文件夹，压缩为zip文件，奈何parcel的插件实在是太少了，自动动手，丰衣足食，于是手写了一个parcel的压缩插件parcel-plugin-zip,需要的朋友可以试试。 安装npm install parcel-plugin-zip -D不需要任何配置，压缩的文件名[projectName].zip可以通过parcel build ...

春节就这样过去了，接下来一年我给自己设定了一个关键词： 改变。之所以给自己设这么个关键词是因为过年中有几件事情触动了我：小时候无话不说的朋友没有了共同话题酒桌上战斗力有待提高，包括但不限于不懂得如何敬酒，推酒，和长辈聊天，调动气氛社交圈变窄，朋友越来越少一个人的时候，我分析一下原因，本来我从小就内向，加上近年来上了岁数，越来越懒，越懒越宅，很少主动和别人聊天，各种聚会什么又不爱...

原理： 将父类的实例，赋值给子类的原型和原型上一个属性superClass，将子类的实例赋值给孙类的原型和原型上一个属性superClass。 孙类实例继承了孙类，子类和父类原型上所有的属性和方法，并可以通过superClass向上访问原型链，同理，子类实例继承了子类和父类原型上的属性和方法，并可以通过superClass访问子类原型，是不是有点绕，没关系，下面给出了具体代码：&amp;lt;!DOC...

在parcel构建项目后，如果使用ES7的async语法时，在低版本chrome中一直报错，原因是官方建议的使用babel-preset-env模块并没有将所有的语法进行编译，推荐使用transform-runtime插件，在项目中用到哪些语法编译哪些语法，具体使用方法就是 1. npm i --save-dev babel-plugin-transform-runtime 2. 在.babe

chrome控制台的打印内容为： 父类名 + 打印对象 ， 每个打印对象都会有一个proto属性，这个属性的值就是打印对象父类的原型对象值，下面是分别使用构造函数和类实现的例子。 1. 构造函数实现function Human(age) { this._age = age}Human.prototype = { talk: function () { console.lo

在工作中，后台一般会在接口开发之前提供接口文档，约定好接口返回的数据格式，以前我的解决方法是搭建一个本地的服务器，然后来手动修改数据，后来接口返回的数据量比较大，用起来很不方便，今天突然发现使用mock.js进行数据接口数据模拟非常好处，下面是使用mock模拟的一个简单的入门实例：html lang="zh">head> meta charset="UTF-8" /> met

一图胜千言。

今天遇到一个需求，移动端遇到用户点击home键、切换其他APP、锁屏等操作时，H5页面中音乐还在播放，与需求不符，查询文档后发现使用visibilitychange事件可以完美解决这个问题，下面是源码:html lang="zh">head> meta charset="UTF-8" /> meta name="viewport" content="width=device-w

使用getUserMedia这个API来获取摄像头的权限 兼容chrome和火狐，IOS不兼容 下面是源码：html lang=&amp;amp;amp;amp;amp;quot;zh&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt; head&amp;amp;amp;amp;amp;gt; meta charset=&amp;amp;amp;amp;amp;quot;UTF-8&amp

原理是使用animationstart 监听动画的开始，用animationend 监听动画的结束，用animationiteration监听动画的重复播放，用transitionend监听过渡完成，下面是源码：&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt;...

昨天忙活了一天，在京东和天猫总计花费了一万多块大洋，给家里人买了部小米，自己买了8p,帮同事买了8，还买了一千块钱作用的衣服和鞋子，一些饮料和零食，直接变身无产阶级，所以很有必要花点时间总结一些双十一的套路：双十一总结：第一：苹果手机从11.1开始优惠力度每天逐渐加大，每天保持在优惠100元左右的程度，11.9直接Apple盛典，8和8p全部降价1300，达到高峰，11.10全天无货，没有优惠，

近期做了一个移动端的项目，需要使用到整屏滑动，刷新后需要停留在当前页面，第二个页面需要再次嵌套一个横向的滑动，发现网上这方面的例子少的可怜，于是自己利用swiper定制一个，下面是我制作的一个简单的demo，需要的朋友可以看一下。<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta

最近在做移动端的项目时遇到，audio和video中的媒体文件的currentTime失效进而无法快进。 复现方法： 使用chrome在本地局域网如： http://192.168.1.104:8020/index.html打开 或者 在公司的服务器上打开页面时会出现这种情况但直接双击index.html打开和localhost下面打开是可以快进的，使用火狐和IE任何时候都是表现正常的这种情况很有

废话不多说，直接上代码：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="

一、基本语法 语句和表达式 （statement & expression） 概念： 语句：是为了完成某种任务而进行的操作，如：var a = 1+1;。 表达式：是为了得到返回值的计算式，如：1+1。JavaScript的执行单位是行，代码是一行一行的执行，一般情况下一行就是一个语句。 * 例子： var a = 1 + 1; // 语句，为了进行某种操作，不需要返回

vue和react可以说是目前最火的两个前框框架，它们两个有许多相似的功能，面试时也经常会遇vue和react有什么不同，你为什么选择xx而不是xx的问题，今天刚好就总结一下vue和react的区别：vue和react对比： 相同点： 1. 利用虚拟DOM实现快速渲染 2. 轻量级 3. 响应式组件 4. 服务器端渲染 5. 易于集成路由工具，打包工具以及状态管理工具 6. 优秀的支持

什么是单例模式？ 答： 只生成一个实例的类。 如何原理？ 答： 一个变量+闭包 具体实现：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

下午刚好没什么事情，作为有追求的程序员当然要搞点事情了，于是便把给对象添加属性和方法的几种常用方法总结了一下，不是很全面，只是自己的一点总结。<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>给一个对象添加属性和方法的三种方案简单比较</title></head><b

在IOS中第一次调用play方法播放音频会被阻止，必须得等用户有交互动作，比如touchstart，click后才能正常调用，所以可以在摇一摇之前提醒用户点击一下开始游戏的按钮或者给用户一个弹窗，用户点击的时候播放一个超级短的无声音文件，之后替换src，这样再调用play方法就可以了。代码如下如：<!DOCTYPE html><html lang="zh"><head> <meta ch

ES6 知识点：新增了let和const命令来声明变量和常用 拥有块级作用域新增了解构赋值 可以用作声明变量 函数的默认参数等新增了字符串模板和repeat startwith endwith 等字符串方法在String上面新增了isNAN isFinite等方法并将parseInt和parseFloat方法由window移到Number上 在Math上面新增了trunc asign等方法

js中的this指向十分重要，了解js中this指向是每一个学习js的人必学的知识点，今天没事，正好总结了js中this的常见用法，喜欢的可以看看：全局环境中this指向window。 有以下几种常用常见//直接打印console.log(this) //window//function声明函数function bar () {console.log(this)}bar() //wind

&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&amp;quot;en&amp;quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;three.js webgl - equirectangular panorama&amp;lt;/title&amp;gt; &am

瀑布流是我们经常用到的加载方式，对于大量数据加载优化效果十分明显，这里我使用非常简单的代码来实现瀑布流，需要的朋友尽管copy：<!doctype html><html lang="en"><head> <meta charset="UTF-8"/> <meta name="aplus-terminal" content="1"> <meta na

话说不上源码就介绍项目的都是耍流氓，这是我的项目： 项目地址 本项目是利用vue2.0搭建的百度百家移动端，页面少，结构简单，十分适合新手学习，欢迎start。项目截图

<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>Docu

git是什么：git是目前世界上最先进的分布式版本控制工具git的起源：git是最初是为了开发Linus被发明出来的版本控制工具：集中式版本控制工具如svn分布式版本控制工具如gitgit相较于svn的优势：不需要联网强大的分支管理git的原理：初始化git的时候会生成一个.git的隐藏文件，这个文件就git的版本控制仓库 在.git这个版本库中分为两部分： stage 暂

利用H5的新特性我们可以十分方便的获取上传文件的后缀名和大小，对于上传文件的校验十分方便，下面是具体的实现代码：&lt;!doctype html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt; &lt;meta charset=&quot;UTF-8&quot; /&gt; &lt;meta name=&quot;viewpor

1.要有做大事的想法 2.年轻的时候要有勇气去追求答案 3.忍受不确定的状态 4.比别人多努力10% 5.全力投入重要的问题 6.敞开办公室的大门 7.做可以称为他人基石的哦工作 8.重视推销和表达自己 9.阅读的方法比数量更加重要 10.重视写书 11.远见超出能力时才去做管理

<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"

话不多说，直接看代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title></head><body> <script type="text/javascript"> //在函数

//计算字符串长度function getStrLength(str) { var cArr = str.match(/[^\x00-\xff]/ig); return str.length + (cArr == null ? 0 : cArr.length);}将这个getStrLength函数放到全局作用域中，在参数中传入需要判断的字符串即可得到该字符串的长度。

<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> #box { width: 100px;

<!doctype html><html><head><meta charset="utf-8"><meta name="aplus-terminal" content="1"><meta name="apple-mobile-web-app-title" content=""><meta name="appl

同花顺面试题

1、 最全的常用正则表达式大全

代码：一、iconfont demo<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>IconFont</title> <style type="text/css"> @font-face { font-family:

在项目开发中我们有时候会遇到，双层tab嵌套的情况，如果直接写的话有些麻烦，但是利用boostrap却可以十分轻松的实现，大大的解放我们的生产力，这样我们就可以将宝贵的时间用在玩游戏这样的正确道路上了，想想还有点小激动。&amp;lt;!doctype html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp

今天做项目，遇到tab切换echarts出现了切换后图表显示异常的情况，找了研究了半天也没有成果，最后求助于万能的搜索，发现遇到这个问题的人还不少，在这记录一下解决方案，防止以后遇到类似的问题再浪费时间。使用百度echarts发现当用bootsrap tap选项卡时出现除了默认显示tab内，其他tab内都无图表生成，原因是bootstrap不显示tab的display为none导致图表无法植入。

在做项目时经常会频繁的打开和关闭页面，如果页面中有需要编辑的内容，这时如果直接关闭，显得不是很友好，那有什么办法避免这种情况发生吗，其实原生的js已经为我们提供现成的方法onbeforeunload，我们直接拿来用就好，随便总结一下onload、onunload、onbeforeunload的区别，话不多说，直接上代码：<!doctype html><html lang="en"> <hea

今天项目中设计到很多的图片，有常见的PNG，JPEG也有其他一些格式的图片，今天刚好没事，就总结一下各种格式图片的优缺点：BMP：优点（无损压缩，图质最好），缺点（文件太大，不利于网络传输） GIF：优点（动画存储格式），缺点（最多256色，画质差） PNG：优点（可保存透明背景的图片），缺点（画质中等） JPG：优点（文件小，利于网络传输），缺点（画质损失）BMP BMP（全称Bitmap

现在这个项目用的是基于WTServer的nginx作为项目的服务器，于是想到Nginx和Apache有什么区别，这里总结一下： 1、nginx相对于apache优点： 轻量级同样起web 服务比apache占用更少内存及资源 高并发nginx 处理请求异步非阻塞而apache 则阻塞型高并发下nginx 能保持低资源低消耗高性能 高度模块化设计编写模块相对简单 社区活跃各种高性能模

一、分析能力 　　要具有对所从事工作(设计、生产、服务)的结构、流程、功能、材料等方面进行分析的能力。 　　二、实践能力 　　由于技术的复杂性，许多问题来不及形成理论或者本来就没有现成的理论加以指导，只能凭经验来判断，善于从实践中总结事物的规律性。 　　三、观察能力 　　具有敏锐的观察力，即发现问题的能力。善于发现人们习以为常的事物中的缺陷、不足、不便，从而加以改善。 　　四、创造能力

本来以前做过一次以为可以可以很顺利完成，结果还是要再看下才能完成，自己还是不太熟练，在这将最重要的几步记录下来，防止自己如果再次忘记能够快速进行下去，这里只是作为一个笔记，没有经验的朋友直接看引用就行了。1、上传代码到sea。 代码：点我 2、打开微信开发者平台 3、基本配置–>修改配置–>URL换成图片中的URL 4、扫码关注，回复？。 引用块内容http://www.cnblog

css,js,图片的压缩，精灵图的制作都是前端工程师绕不开的坑，这些机械化没有技术含量的工作我们要坚决说no，解放自己的双手去做跟多有意义的事情，今天就介绍一款流行的前端自动化工具gulp，来解放我们的双手。安装gulp和gulp插件npm install gulp jshint gulp-clean-css gulp-uglify gulp-concat gulp-rename gulp-js

每次做项目都是red,pink,blue,不仅单调乏味，而且充分暴露了自己三级甲等的英语水平，作为一名有理想，积极向上的程序员，这是果断不能忍的事情，今天刚好写一个用原生js给特定元素随机添加背景色的方法，瞬间让单调的生活丰富多彩起来，有了此方法妈妈再也不用担心我找不到女朋友了。源码：<!doctype html><html lang="en"><head> <meta charset=

1、getElementById / querySelector 这两个获取到的都是dom节点，结果没有区别，两种方法的区别就在于这个集合会不会自动更新。x = document.querySelectorAll('img')y = document.getElementsByTagName('img')document.body.appendChild(new Image())x.lengt