1 背景 相信对于每个刚接触构建的同学来说， webpack 都是难以跨越的一道坎，它凭着抽象的概念、“言简意赅” 的文档，难倒了一众英雄好汉。 由于自己平时从零手写 webpack 配置的机会比较少，所以对 webpack 里的一些配置不都是特别清楚。 最近的一个需求需要给页面资源增加 md5 版本号，我正好借着这个机会，把项目里的 webpack 配置都重新梳理了一遍。 本文对于基本的配置概念（如 entry 、 output 等）就不一一赘述了，着重介绍的是 splitChunks 和 manifes
使用范围： OA、MIS、ERP等信息管理类的项目，暂时不考虑网站。 遇到的问题： 完成一个项目，往往需要引用很多js文件，比如jQuery.js、easyUI等。还有自己写的一些列js文件，那么这些文件如何方便的加载，如果文件有变化如何才能让客户端及时更新缓存？如果能够提高点运行效率，那就更好了。 目标： 1、 可以方便的引用js文件。 2、 尽量使用各种缓存，避免频繁从服务器读取文件。 3、 如果js文件有更新或者增加、减少几个减少js文件，需要客户端能够自动、立刻更新。 4、 Js文件
最近朋友需要让我帮忙设计能抓取网页特定数据的爬虫，我原以为这种程序实现很简单，只要通过相应的url获得html页面代码，然后解析html获得所需数据即可。但在实践时发现我原来想的太简单，页面上有很多数据根本就无法单纯从html源码中抓取，因为页面展现的很多数据其实是js代码运行时通过ajax的从远程服务器获取后才动态加载页面中，因此无法简单的通过读取html源码获得所需数据。
爬虫的基本知识已经告一段落，这次就找个网站实战一波。但是为什么选择了基金？这还要从我的故事讲起。
vue代码 <template> <el-row style="padding: 15px"> <el-button size="mini">默认按钮</el-button> <el-button type="primary" size="mini">主要按钮</el-button> <el-button type="success" size="mini">成功按钮</el-button> <el-button type="info" size="mini">信息按钮<
一天，一个朋友给我发来一条链接https://ssr.163.com/cardmaker/#/，让我帮他看看怎么能获取到网页中所有的图片链接。我打开链接一看，页面的标题是阴阳师:百闻牌，下面有选择栏，再下边就是各种奇奇怪怪的看不懂的图片，我就问他这是什么呀？他说是一个游戏阴阳师里边的卡牌。怪不得我没听过，因为我不玩游戏，一个准程序猿不玩游戏一定有很多人不相信 ，但是确实如此，我从未玩过游戏 。 但是这并不影响我来分析网页得到图片，网页如下：
现在百度图片，360 图片搜索，都是以一种瀑布流的形式展示，那么接下来，分享一波纯 css 瀑布流 和 js 瀑布流
前端模块化开发模式已成主流，但随着前端项目规模的不断扩大，开发者可能会遇到以下一些问题：
通过 Multi-columns 相关的属性 column-count、column-gap 配合 break-inside 来实现瀑布流布局。
①. 图片大小优化，部分图片使用WebP（需要考虑webp兼容性） 在线生成，如智图、又拍云 gulp生成，gulp-webp或gulp-imageisux canvas生成
现在前端项目基本都采用打包技术，比如 Webpack，JS逻辑代码打包后会产生一个 bundle.js 文件，而随着我们引用的第三方库越来越多或业务逻辑代码越来越复杂，相应打包好的 bundle.js 文件体积就会越来越大，因为需要先请求加载资源之后，才会渲染页面，这就会严重影响到页面的首屏加载。
大致说一下项目的背景：我们做了一个拖拽生成报表的系统，通过拖拽内置的组件供用户定制自己的报表形态，但毕竟内置的组件有限，可定制性不高，那么给用户开放一个 code 组件，让用户自己通过写template + js + css的方式自由定制岂不是妙哉。
爬虫的 JavaScript 逆向是指对使用 JavaScript 编写的网站爬虫进行逆向工程。通常，网站会使用 JavaScript 来动态加载内容、执行操作或者进行验证，这可能会使得传统的爬虫在获取网页内容时遇到困难。因此，进行爬虫的 JavaScript 逆向工程通常包括以下步骤：
注意到这里的 this.contentWindow 其实就类似与下方的 name值对应的iframe2，两种引用方式是等价的
如何在js文件中写加载Applet控件（js与jsp分离技术）
最近用WKWebView读取PDF文件出现字体异常、电子图章不显示的问题，后来查找很多解决方案，最后决定用PDF.js的方式来实现
随着前端应用体积的扩大，资源加载的优化是我们必须要面对的问题，动态代码加载就是其中的一个方案，webpack 提供了符合 ECMAScript 提案 (https://github.com/tc39/proposal-dynamic-import) 的 import()语法 (https://www.webpackjs.com/api/module-methods#import-) ，让我们来实现动态地加载模块（注：require.ensure 与 import() 均为 webpack 提供的代码动态加载方案，在 webpack 2.x 中，require.ensure 已被 import 取代）。
echarts是一款不错的商业级数据图表，目前已更新到echarts3版本，但是由于历史原因，echarts2仍然有比较大的使用占比，之所以讲echarts2的引入方式是因为项目在混合使用echarts2与echarts3的时候遇到了一个问题，这个与我之前写过的一篇文章有关：http://blog.csdn.net/john1337/article/details/54947787，下面入主题。
最近查阅了一些帖子，发现了一个极其强大的方法，其兼容性有待提高~~（但已有相关的的Polyfill方式）
在工作中，经常用到js的点击事件，有好多种表现形式，今天抽空总结一下它们的区别与联系。废话不多说，开始写测试案例。首先声明，本人水平有限，如果有错误之处，还请指正。
chrome63 版本后支持动态import 加载js https://developers.google.com/web/updates/2017/12/nic63#dynamic
onreadystatechange 事件通常用在基于 XMLHttpRequest 对象的 AJAX 应用中，当的该对象的 load state 改变时，会触发此事件。
Vue官网上提供了一个动态组件 <component :is="currentTabComponent"> ，那么这里的 is 到底是什么呢？ 官网介绍的太分散了，这里尽量全面的列举出来。如果有遗漏欢迎补充。
目前正在开发自己的网站，技术上使用Angular JS + Express JS + Mongo DB。由于网站会有文章发布，因此需要有评论功能。评论功能也可以自己开发，但由于现在社会化评论插件很多，因此没有必要多花精力，使用专业的就好。
本文讲述了一位技术博客作者在开发自己的网站过程中，使用各种社会化评论插件，并总结了如何正确选择和使用这些插件。作者通过对比和测试，最终选择了多说作为自己的评论系统，并介绍了如何在AngularJS框架中集成和调用多说评论的功能。
基本介绍 极验验证除了在服务器端提供了广泛的语言支持外，在客户端也提供了多平台的扩展支持。 客户端主要涵盖了如下平台： pcWeb 普通台式电脑，笔记本电脑web页面前端组件 移动Web 移动智能手机上的web页面前端组件 android应用 原生android本地app调用组件 iOS应用 原生iOS本地app调用组件 注意： pcWeb对IE6/7/8这些低版本浏览器进行了兼容 pcWeb使用保守的前端实现方式，可以兼容移动端页面 移动Web针对移动端更强大的浏览器引擎，使用了高级实现方式，具有
经过上两篇文章的学习，爬虫三步走：发起请求、解析数据、保存数据，已经掌握，算入门爬虫了吗？
初学者，有不足的地方希望各位指出 一、前言 ocLoayLoad是AngularJS的模块按需加载器。一般在小型项目里，首次加载页面就下载好所有的资源没有什么大问题。但是当我们的网站渐渐庞大起来，这样子的加载策略让网速初始化速度变得越来越慢，用户体验不好。二来，分模块加载易于团队协作，减低代码冲突。 二、按需加载的对象 各个Controller模块、Directive模块、Server模块、template模板，其实这些都是一些 .js文件或者 .html文件 。 三 、按需加载的场
首先需要载入声音文件，我们使用HTML5标签 ,通过source预加载声音文件到页面中。
学习YUI3有一段时间，并且应用在了一些项目的前端开发中，感觉还是蛮不错的，所以决定开始记录下YUI3的学习历程和个人经验。 YUI3在前身YUI2基础上进行了大量的重新设计，并不只是简单的版本升级。YUI3强调代码重用，将功能做了级别划分和颗粒化的设计。在概念上抽象出 核心、工具、和组件类，分别放在不同的目录结构中，需要的时候自行去引用。为动态加载的框架设计做铺垫。
如下图，我们希望点击导航栏不同菜单时，导航栏下方加载不同的组件，进而展示不同的页面内容
路由懒加载是什么意思? 在开发中 , 我们打开开发者工具, 会发现我们刚刚打开就会去加载所有页面. 路由懒加载就是只加载你当前点击的那个模块 按需去加载路由对应的资源, 可以提高加载速度 (一个页面
使用JQ提供的.on()和.delegate()方法可以解决解决此问题，给动态加载的元素成功绑定上事件，但是在这两种方法的参数中一定得写上我们需要绑定事件的那个元素选择器。
Webpack模块联邦（Module Federation）是Webpack 5引入的一项革命性特性，它彻底改变了微前端架构的实现方式。模块联邦允许不同的Web应用程序（或微前端应用）在运行时动态共享代码，无需传统的打包或发布过程中的物理共享。这意味着每个微应用可以独立开发、构建和部署，同时还能轻松地共享组件、库甚至是业务逻辑。
下面是jQuery 提供额外的事件，用于完善javascript缺失的事件 详解如下：
终于尘埃落定了，前段时间忙的不可开交，结婚，工作，因为婚假+年假一起休的，导致很长时间没有更新博客了，今天抽空给大家带来了一个js特效，网站模块延迟加载的动画，假期之前就想着制作这个功能，页面滚动加载，看着很舒适，结果直到今天才算弄完。教程也是网上找的，我测试了好多个，还是感觉这个比较好。有兴趣的朋友可以测试下。
来到这家公司之后，一直在使用webpack，也写了不少笔记，但是都比较零散，现在决定整理一下webpack相关的知识点，由浅入深，方便自己后续查漏补缺，后续会一直更新。
Old Code： $('code').click(function () { console.log($(this).text()); }); New Code：（.container 是所在的div） $('.container').on("click", "code", function () { console.log($(this).text()); }); 之前只是知道官方推荐使用on来生成事件，并不知道其好处，这次知道了 话说，，，真的好久没碰前端了，忘差不多了，O(∩
所在的div） $('.container').on("click", "code", function () { console.log($(this).text()); }); 之前只是知道官方推荐使用on来生成事件，并不知道其好处，这次知道了 话说，，，真的好久没碰前端了，忘差不多了，O(∩
window.onload 、$(function()function()）、;(function(){}());三个的执行顺序：
Angular Elements 是伴随Angular6.0一起推出的新技术。它借助Chrome浏览器的ShadowDom API，实现一种自定义组件。 这种组件可以用Angular普通组件的开发技术进行编写，学习成本低，当它构建好后生成一个打包的js文件。如果页面引入该Js文件 ，就相当于在页面中新增了一个标签，所以在任意框架中都可以使用新标签，就像它是原生div一样。
我们有个内部运营系统，是基于keenthemes的一个主题进行开发的，而这个主题就是基于jQuery+bootstrap+jQueryPlugins 进行的定制主题，用于显示各种图表和曲线。所以，这个
phantomjs实现了一个无界面的webkit浏览器。虽然没有界面，但dom渲染、js运行、网络访问、canvas/svg绘制等功能都很完备，在页面抓取、页面输出、自动化测试等方面有广泛的应用。
今天我们聊一聊React中的异步组件的现况和未来，异步组件很可能是未来从数据交互到UI展示一种流畅的技术方案，所以既然要吃透React，进阶React，就有必要搞懂异步组件。
马上到了金三银四的时间，很多公司开启了今年第一轮招聘的热潮，虽说今年是互联网的寒冬，但是只要对技术始终抱有热情以及有过硬的实力，即使是寒冬也不会阻挠你前进的步伐。在面试的时候，往往在二面，三面的时面试官会结合你的简历问一些关于你简历上项目的问题，而以下这个问题在很多时候都会被问到
React Loadable是一个小型库，它使以组件为中心的代码分割变得非常容易。
我们有个内部运营系统，是基于keenthemes的一个主题进行开发的，而这个主题就是基于jQuery+bootstrap+jQueryPlugins 进行的定制主题，用于显示各种图表和曲线。所以，这个系统的特点就是，加载了一堆js和css进行堆砌组合，以及内容被一层层的标签和样式包围。长这个样子：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
