霪霖笙箫的博客

之前也写过正则学习相关的，取这标题只是因为最近读忍者秘籍第2版又讲到这个话题，作为学习、回顾把一些重要的知识点和方法记录下来。正则表达式需要长时间的积累及不断实践才能提高，虽然工作中碰不到太多正则使用场景，简单的记录也算作一种学习、应用吧 我们可以使用正则解决各种任务 操作HTML节点中的字符串 使用CSS选择器表达式定位部分选择器 判断一个元素是否具有指定的类名 输入校验 其他任务 带着问题学习 什么时候使用正则字面量，而不是使用正则对象 什么是粘连匹配，如何开启粘连匹配 使用全局和非全局正则表达式的区别是什么 正则相关创建正则的方式： 使用正则字面量 通过创建 RegExp 对象的实例 回答1： 当正则表达式在开发环境是明确的，推荐优先使用字面量语法；当需要在运行时动态创建字符串来构建正则表达式时，则使用构造函数的方式。 正则修饰符： i 对大小写不敏感 g 查找所有匹配项 m 多行匹配 y 开启粘连匹配 u 允许使用 Unicode点转义符 术语和操作符精确匹配 /test/ 这类，/^test$/ 匹配字符集 [a ...

这里只是React的相关知识点整理，也算是老生常谈了吧，通过这样的整理让自己温故知新。说是进阶，其实也算是基础的重要知识点。好了，于是我们一起来看看吧： 组件 组件与state 几种组件通信 ref 虚拟DOM相关 性能优化 高阶组件 组件间的通信React里的组件通信方式大致有以下几种情况： 父子组件的通信通过props12345678910111213141516171819202122232425262728293031323334353637383940414243// UserList.jsxclass UserList extends Component { render() { return ( <div> <ul className="user-list"> {this.props.users.map(user => ( <li key={user.id}> ...

React虽然从14版就在学习使用了，- - 换公司之后一直在用Vue，以前用Redux，服务端渲染总是觉得很坑，虽然跟着前辈写似懂非懂的，业务逻辑也能做，但Redux那块始终用得不好。也算是曲线救国，Vue、Vuex的使用让我慢慢理解了React的核心和优美之处。正好现在新版发布了，再来重学一次吧 React前端UI本质问题是： 如何将来源于服务器的动态数据和用户的交互行为高效地反映复杂的用户界面上。React通过引入虚拟DOM、状态、单向数据流等设计理念，形成以组件为核心，用组件搭建UI的开发模式，完美地将数据、组件状态和UI映射到一起，极大提高了开发大型Web应用的效率。 React的特点： 声明式的视图层 使用React不用担心数据、状态和视图交错。 简单的更新流程 定义UI状态，React框架会复杂把它渲染成最终的UI。当状态数据发生变化时，React也会根据最新的状态渲染出最新的UI 灵活地渲染实现 先渲染成虚拟DOM，简单的JS对象然后渲染成对应UI 高效的DOM操作 操作JS对象比起操作真实DOM在效率上有了巨大提升。基于Diff算法，React ...

看到群里的大佬们在讨论着，冒出了好多“生词”，竟然完全不知，惭愧惭愧，于是各种谷歌百度后将之整理一下。近几年，前端应用（WebApp）正朝着大规模方向发展，在这个过程中我们会对项目拆解成多个模块/组件来组合使用，以此提高我们代码的复用性，最终提高研发效率。在编写一个复杂组件的时候，总会依赖其他组件来协同完成某个逻辑功能。组件越复杂，依赖越多，可复用性就越差，我们可以借助软件工程中优秀的编程理念来提高复杂组件的可复用性，以下将详述其中之一的依赖倒置理念。 之前自学React，看到了高阶组件这么一个概念。那么理解之前，我们首先要理解高阶函数这个概念 1234567891011121314151617function hello() { console.log('Hello World')}hello() // 'Hello World'// hello()function WrapperHello(fn) { return function() { console.log(' ...

面向对象应该是一种思想，而不是代码的组织形式。 面向对象的特点： 封装 继承 多态 子类继承了父类的函数，同时覆盖实现了父类的某些行为。上面的setProgress函数即体现了多态又体现了继承 继承和组合集成商为了实现复用，组合其实也是为了实现复用。继承是is-a的关系，而组合是has-a的关系。 可以把上面的ProgressBar改成组合的方式。 12345678910111213141516171819202122232425262728293031323334class ProgressBar { constructor($container) { this.fullWidth = $container.width() this.$bar = null } // 设置宽度 setProgress(percentage) { this.$bar.animate({ width: this.fullWidth * percentage + 'px'
...

iview 是一套基于 Vue.js 的高质量 UI 组件库。在项目中使用虽然直接引入整个包挺好的，但打包出来 vendor 非常大，并没必要。所以加入了 iview 按需引入的相关配置，减小包的体积从而提升点性能。 首先通过 npm 安装 iview-loader npm install iview-loader --save-dev 配置 webpack，改写平时 vue-loader 的配置，之前是这样的： 12345678910111213module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /iview.src.*?js$/, loader: 'babel-loader' } ]} 改为： 123456789101112131415161718192021 ...

跟着官网来看着并不难，放项目里，这出错那不行的… 慢慢看文档一边整理一边尝试，最终得到了我想要的效果。暂时记下来写成博客，可能不是最好的，但目前先把问题解决了来后面再谈细节和优化的事儿吧 折腾了一上午，犯了很多错… 最终捣鼓出来，算是完成了需求。这里说下自己的理解。Vue里的国际化，其实只是把 所谓的静态内容，标题，文字段落，提示说明等等用vue的响应式data来存储，再根据我们的配置，动态改变这些data，从而实现无刷新语言切换，这和vue自身的响应式数据是一个道理。 渲染原理123456789101112131415161718192021222324VueI18n.prototype._t = function _t (key, _locale, messages, host) { var values = [], len = arguments.length - 4; while ( len-- > 0 ) values[ len ] = arguments[ len + 4 ]; if (!key) { return '&#x ...

vue写起项目来很爽，效率也着实高，加上官方的vue-cli脚手架也是各种爽。不过直接搭出来是单页，在最近的项目实践上加上网上的参考。弄了套demo出来，可以参考我的项目，要是感兴趣记得start+fork下，谢谢 那么还是一步步来来吧，也算是记下笔记，方便以后搭建新项目。 npm install vue-cli -g vue init webpack my-project 注意，node和npm的版本，越高越好。vue-cli的配置就跳过不说了，根据需要选择ESLint，在这里单元测试就先去掉了，router记得选上 npm installnpm run dev 然后可以看到Hello Vue 怎么写我们知道了，这是一个单页组件。那么接下来，我们开始正式配置我们的多页路由项目吧 开始配置我们的多页路由项目吧第一步 调整项目结构|– build|– config|– node_modules|– src|– static|– … 省略了|– … index.html 既然是多页，我们把 index.html 换个地方吧。这是我目前的vue项目架构（不够好，但慢慢提升学习吧，以后 ...

Promise可以实现其他语言类似Future和Deferred一样的功能，是另一种异步编程的选择。它既可以像事件和回调函数一样指定稍后执行的代码，也可以明确指示代码是否成功执行。本文重在讨论Promise是如何运转的，所以实践和代码依然是我们的重点，要完全理解其原理，了解构建Promise的一些基本概念尤为重要。 异步编程相关知识点我们知道的JS是单线程，具体来说：JavaScritp引擎同一时刻只允许执行一个代码块。那么就需要跟踪即将运行的代码块，那些代码块将被添加到任务队列。每当JavaScript引擎中的一段代码结束执行，事件循环会执行队列中的下一个任务，它（事件循环）是JS引擎中的一段程序，负责监控代码执行并管理任务队列。 事件模型我们先来看一段代码 1234let btn = document.querySelector('#btn');btn.onclick = e => { console.log('clicked!');} 单击btn会打印出 clicked 来，这个过程是先赋值给onclic ...

理解类的基本原理有助于理解ES6中类的特性，在该篇文章里我们先探讨ES5语法是如何实现类似特性的，再对比ES6的语法对比来学习 首先，你要知道的是ES6中的类和Java等其他面向对象编程语言是完全不同的。 当然，这是我说的… 我们可认为这是ES6之前实现类及继承的一些语法糖，实则还是面向对象的形式。 使用ES6的类语法首先我们要知道的是，ESMAScript5及早期版本中是没有类的概念的。最相近的思路是创建一个自定义类型，例如： 12345678910function Person(name) { this.name = name}Person.prototype.sayname = function() { console.log(this.name);}var person = new Person('fri');person.sayname(); // 'fri'console.log(person instanceof Person); // trueconsole.log(person ...

Prerender SPA Plugin 一个灵活的静态网站构建框架，让你更好地使用webpack为SPA应用打包 更多请参考官方文档 预渲染技术 什么是预渲染？？ 服务端渲染在前端界变得越来越主流。在将网页或应用程序发送给客户之前，在服务器就先呈现了我们想展示的内容。这是一个革命性的想法。 然而，对于PHP、ASP、JSP（以及这样的）站点来说，同样的批评对于今天的服务器端呈现是有效的。它很慢，很容易被打破，并且很难正确地实现。问题是，尽管每个人可能会告诉你，你可能不需要SSR。您可以通过使用预先设定来获得几乎所有的优点（没有缺点）。 预渲染的原理是启动一个无头浏览器（如puperteer），加载应用程序的路由，并将结果保存到静态HTML文件中。然后，可使用以前使用的静态文件-文件服务解决方案来服务它。它只适用于HTML5导航和类似的东西。不需要更改代码或添加服务器端渲染工作区。 使用场景改善少数营销页面，广告页等的SEO，预渲染就能起到很好的效果. 当然，我们也要承认，在某些场景下，预渲染并不是特别适合： 大量的网页和跳转 使用预渲染会很慢，虽然这种场景并没那么多，但不代 ...

想了很久还是决定一边看书一边把所记多得用博客的形式记录下来。毕竟好记性不如烂笔头嘛，而且，ES6这么多的内容很适合记博客啊，哈哈~~ 可以产出很多篇不说，还可以顺便练练文笔什么的啦… 额，废话就直接跳过了 ES6的新语法可以让我们更好地控制作用域。这里我们先理解var声明的一些坑，然后从ES6新引入的块级作用域说起，然后到其绑定机制和最佳实践。 var声明及变量提升机制123456789function getValue(something) { if (something) { var value = 'hello world'; // ... result value; } else { return null; }} 我们读着代码，可能会认为只有something为true(存在)时，value才会被声明，但事实上，在预编译阶段，JavaScritp引擎会将上面的getValue函数修成成下面这样 12345678910111213141516// 这里是全局作 ...

这一篇到了源码488行，主要是underscore对原生Array.prototype的一些扩展，arguments参数对象将在所有数组函数中工作 。然而, _ 函数的设计并不只是针对稀疏（”sparse”）数组的。在下面的阅读学习中，我们会慢慢了解到 数组函数 488 - 747行firstfirst_.first(array, [n]) 返回array（数组）的第一个元素。传递 n参数将返回数组中从第一个元素开始的n个元素（返回数组中前 n 个元素） 1234567891011121314// Get the first element of an array. Passing **n** will return the first N// values in the array. Aliased as `head` and `take`. The **guard** check// allows it to work with `_.map`._.first = _.head = _.take = function(array, n, guard) { if ...

这一篇到了源码170行以后，主要是underscore(下文用下划线代替- -)向外暴露的一些核心API， _ 扩展了很多原生JS拥有的方法，有很多优秀地设计思想值得我们学习和探究。我们在用的过程中，了解到底层的实现更有利于我们将来的选择及性能优化 集合函数 170 - 486行each_.each(obj, iteratee, [context]) _ 的each方法遍历所传obj（这里可看作一个列表，数组或类数组）中的所有元素，按顺序用遍历输出每个元素。如果传递了context参数，则把iteratee绑定到context对象上。每次调用iteratee都会传递三个参数：(element, index, list)。如果list是个JavaScript对象，iteratee的参数是 (value, key, list))。返回list以方便链式调用。 123456789101112131415_.each = _.forEach = function(obj, iteratee, context) { iteratee = optimizeCb(iterate ...

读源码是一个提升自己编码和架构的有效方式，明明知道但一直没敢尝试，就算是学习jQuery的源码也是跟着大神的视频，博客一点点填坑的，之前也苦于写的博客没什么技术含量，要不就是自己都知道的，要不就是摘录书中的一些经验，久之反倒没了写博客的兴趣。underscore.js是个优秀的工具库，总代码行也就1600行+ 每天读50行+的速度一个月也能搞定，这么一想完全就不怕了。 多点信心，不怕犯错，多记录和搜索这样利于自己巩固，嗯嗯… 也为后面看Vue、React、Redux源码什么的打点基础，当然那是后话了… 希望这个系列能把坑填完就好 注：underscore 叫着太啰嗦- - 下文都用 _ 来指代了， 既然是读underscore想必也能接受 那么直接开始正文吧~~ 命名空间管理最外层是一个IIFE(立即调用函数)，各大框架常用，如jQuery就是典型，这是为了模拟块级作用域，防止污染全局命名空间。具体的好处和由来可以去谷歌一下 123((function() { // ...})()); 变量声明 14-168行巧妙地变量声明巧妙地变量声明可以让程序执行 ...

老外写的一个很有意思的demo~ 就copy到本地了，地址找不到了… 请原谅我就不贴网址了我把代码扒下来重新写了遍，整理了下就记录下来了，还是挺有意思的 只要有想法，真的是各种强啊， 简直不敢相信这居然是纯CSS代码完成的，里面有很多 transform 及 css三角的应用，代码读起来很顺， 理解起来也不难，但想到…那是真的难… 很多地方需要细细拆分才能琢磨透，先上图上DEMO 那开始我们的编程吧： 12345678910111213141516<!-- 外层容器结构可以根据自己的情况来调整 --><div id="batianhu-wrapper"> <div class="batianhu"> <div class="head-body"></div> <div class="head-topcover"></div> <div class="he ...

在很久之前就想通过工具来规范自己的代码风格，减少程序出错的概率，特别是最近的React, Vue项目里，ESlint成了标配，但是实际上一直懒癌发作也没去看它的文档，使用着它默认的规则，有的地方确实是逼死强迫症，所以为了不那么费力，自己灵活配置会更好些！ 作为一个有理想有抱负的前端工程师，只是使用默认规则，而不是看完文档了然于心，显然是不行滴 ^_^.. 团队协作时，若是团队的代码风格统一，能够大大减少沟通成本。（其实面试时和老大聊到代码规范，当时就说到用 JSHint ，或者 ESLint 等工具来统一的。。。这也算是我来填一个坑吧~） 好了，前情摘要就到这，我们开始吧！ 什么是 ESLint ？ ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。 在许多方面，它和 JSLint、JSHint 相似，除了少数的例外： ESLint 使用 Espree 解析 JavaScript。 ESLint 使用 AST 去分析代码中的模式 ESLint 是完全插件化的。 每一个规则都是一个 ...

该篇讲述了同源策略，再到跨域的解决。学习分析了流行的jsonp方案从源码上加深了对jsonp的理解和认识 同源策略要理解跨域，先要了解一下“同源策略”。所谓同源是指，域名，协议，端口相同。所谓“同源策略“，简单的说就是基于安全考虑，当前域不能访问其他域的东西。 http://www.abc.com:8080/home?k=v 这么一个url地址，由协议，域名，端口，路径等部分组成。怎么来区分跨域与否呢？ 这里简单列了一下： 跨域 不同协议 域名不同 端口不同 不跨域 协议、域名和端口相同 同一域名的不同路径下 跨域情况 1234567891011var btn = document.getElementById('btn');btn.onclick = function() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 2 ...