11 小时前 / 冷星1024
实现页面皮肤切换，常见的方案有几种：替换 css 链接、替换 className、改变 css 原生变量值、使用 less.modifyVars、props 参数下发等；不同的业务场景，我们一般会选择不同的方法来实现目标。最近在公司运营活动平台上的主题功能的实现 ，我们尝试了一种新的解决方案，实现了页面主题的切换，目标是为了提高项目的可维护性、可扩展性，以及降低接入复杂度。 “主题”需求在了解主题功能之前，我们先来解下业务场景：在运营活动后台中，编辑活动配置页面，拖拽选择所需对应组件，并设置组件相应配置项，点击保存，既完成活动页面发布活动，前台就......
11 小时前 / 冷星1024
戳蓝字「前端技术优选」关注我们哦！函数作为 js 的一等公民，骨子里有着不可一世骄傲，内心里有着老子天下第一的优越感。一起来看下函数为什么会有这种优越感吧~ 小刚老师函数的简介 函数的 es6 新特性 常用高阶函数 函数的简介函数是可以通过外部代码调用的一个“子程序”。 在 js 中，函数是一等公民(first-class)，因为函数除了可以拥有自己的属性和方法，还可以被当作程序一样被调用。在 js 中，函数实际上就是对象，每个函数都是 Function 构造函数的实例，因此函数名/变量名实际上也是一个指向函数对象的指针，一个变量名只能......
11 小时前 / 柴方博Felbry
如今的前端开发，有可能会面对复杂的环境，所以工程化思维几乎是专业前端工程师必备的。让同一套代码，在不同的环境中运行时，如何让它以最优的方式（尽可能小、尽可能快）加载和执行，是我们需要考虑的问题。 假设我们需要在开发环境中输出额外的调试信息，而在线上环境中不输出，我们可以定义环境变量： // env.js exportconstisDEV=true; import{isDEV}from'./env.js'; if(isDEV){ console.log('...some information...'); } 在发布上线的时候，我们将isDEV的值设置为false。 注意，如果你使用预处理器，比如webpack等打包器，或者......
11 小时前 / 算法与编程之美
欢迎点击「算法与编程之美」↑关注我们！ 本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。 深入理解浏览器内核 - 概述上一篇文章介绍了互联网及万维网的概念，了解了浏览器是万维网的入口，是获得信息资源的工具，因此各大厂商都在争夺浏览器的市场。本文将为大家介绍目前的浏览器市场状况及其各自使用的内核。 截至到目前为止，各浏览器厂商的全球市场占有率如下图所示： 图1- 1各大浏览器市场占有率 数据来源： http://gs.statcounter.com/browser-market-share 该统计包含了桌面、手机、平......
23 小时前 / 黑夜探路人
首发于kuitos 的后脑勺写文章可能是你见过最完善的微前端解决方案kuitos伪前端伪架构师 / mobxjs team member244 人赞同了该文章Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks. — Micro Frontends前言TL;DR 想跳过技术细节直接看怎么实践的同学可以拖到文章底部，直接看最后一节。 目前社区有很多关于微前端架构的介绍，但大多停留在概念介绍的阶段。而本文会就某一个具体的类型场景，着重介绍微前端架构可以带来什么价值以及具体实践过程中需要......
5 天前 / 噶牛爱尚
首发于彭湖湾的javaScript世界写文章论一个低配版Web实时通信库是如何实现的（ EventSource篇)彭湖湾中南大学 信息科学与工程学院7 人赞同了该文章前情提要话说上回说到！那WebSocket大侠,巧借http之内力，破了敌阵的双工鸳鸯锁，终于突出重围。 然而玄难未了，此时web森林中飞出一只银头红缨枪，划破夜色。 "莫非!" websocket大侠喃喃念道，"你，你莫不是就是那个手使单向追魂枪的。。。" "正是在下！"，那人厉声喝道。只见那胸前的纹章铭刻着几个洋文—— 读作"EventSource"！引论simple-socket是我写的一个"低配版"的Web实时通信工具（相对......
8 天前 / Dunizb
点击上方“做工程师不做码农”，并“置顶公众号” 第一时间接收我的最新文章 01 — 概述 HTTPS（HTTP Secure）是一种构建在 SSL 或 TLS 上的HTTP协议。 简单的说，HTTPS 就是 HTTP 的安全版本。SSL（Secure Sockets Layer）以及继任者 TLS（Transport Layer Security）是一种安全协议，为网络通信提供来源认证、数据加密和报文完整性检测，保障通信的保密性和可靠性。HTTPS协议的 URL 都以 “https://”开头，在访问某个 Web 页面时，客户端会打开一条到服务器 443 端口的连接。 之所以说HTTP不安全，是由于以下3......
9 天前 / 噶牛爱尚
写文章从头开始，彻底理解服务端渲染原理(8千字汇总长文)神三元前端工程师84 人赞同了该文章大家好，我是神三元，这一次，让我们来以React为例，把服务端渲染(Server Side Render，简称“SSR”)学个明明白白。 这里附上这个项目的github地址：https://github.com/sanyuan0704/react-ssr。 欢迎大家点star,提issue，一起进步！ part1：实现一个基础的React组件SSR 这一部分来简要实现一个React组件的SSR。 一. SSR vs CSR 什么是服务端渲染？废话不多说，直接起一个express服务器。 app.get('/', (req, res) => {res.send(`
9 天前 / 37丫37
工欲善其事，必先利其器
本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件，上一篇文章介绍了Datatables插件的基本使用，这一篇文章作为上一篇的延续，会介绍Databases的一些高级用法，例如从不同的数据源获取数据、修改数据最终呈现方式、操作Dom改变页面功能、开启服务端数据处理等
数据加载上篇文章中的所有数据都是直接渲染的html中的table数据，datatables还支持其他几种数据源，以方便实现更灵活的控制
从数组中获取
9 天前 / 冷星1024
翻译：刘小夕 原文链接：https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/ 原文的篇幅非常长，不过内容太过于吸引我，还是忍不住要翻译出来。此篇文章对编写可重用和可维护的React组件非常有帮助。但因为篇幅实在太长，我不得不进行了分割，本篇文章重点阐述 SRP，即单一职责原则。 ————————我是一条分割线—————— 我喜欢React组件式开发方式。你可以将复杂的用户界面分割为一个个组件，利用组件的可重用性和抽象的DOM操作。 基于组件的开发是高效的：一个复杂的系统是由专门的、易于管理......