1.pythonåå¦è
å·¥å
·ç¨ä»ä¹å·¥å
·å¥½å¢
2.六星云课堂:帮你学前端,25个实用前端网站工具推荐!
3.重读Redux源码的感悟
4.微前端学习笔记(3):前端沙箱之JavaScript的sandbox(沙盒/沙箱)
pythonåå¦è å·¥å ·ç¨ä»ä¹å·¥å ·å¥½å¢
Pythonå¼å软件å¯æ ¹æ®å ¶ç¨éä¸åå为两ç§ï¼ä¸ç§æ¯Python代ç ç¼è¾å¨ï¼ä¸ç§æ¯Pythonéæå¼åå·¥å ·ï¼ä¸¤è çé å使ç¨å¯ä»¥æ大çæé«Pythonå¼å人åçç¼ç¨æçï¼ä»¥ä¸æ¯å¸¸ç¨çå 款Python代ç ç¼è¾å¨åPythonéæå¼åå·¥å ·ã
ä¸ãPython代ç ç¼è¾å¨
1. Sublime Text
Sublime Textæ¯ä¸æ¬¾é常æµè¡ç代ç ç¼è¾å¨ï¼æ¯æPython代ç ç¼è¾ï¼åæ¶å ¼å®¹ææå¹³å°ï¼å¹¶ä¸ä¸°å¯çæ件æ©å±äºè¯æ³åç¼è¾åè½ï¼è¿ æ·å°å·§ï¼å ·æè¯å¥½çå ¼å®¹æ§ï¼å¾åç¼ç¨äººå£«çåç±ï¼
2. Vim
VimåViæ¯ä¸ç§æ¨¡åç¼è¾å¨ï¼å®å°ææ¬æ¥çä»ææ¬ç¼è¾ä¸å离ï¼VIMå¨åå§VIä¹ä¸åäºè¯¸å¤æ¹è¿ï¼å æ¬å¯æ©å±æ¨¡ååå°±å°ä»£ç æ建ï¼VIMScriptså¯ç¨äºåç§Pythonå¼åä»»å¡ï¼
3. Atom
Atom被称为âä¸çºªå¯ç ´è§£çææ¬ç¼è¾å¨âï¼å¯ä»¥å ¼å®¹ææå¹³å°ï¼æ¥ææ¶å°ççé¢ãæ件系ç»æµè§å¨åæ©å±æ件å¸åºï¼ä½¿ç¨Electronæ建ï¼å ¶è¿è¡æ¶å®è£ çæ©å±æ件å¯æ¯æPythonè¯è¨ï¼
4. GNU Emacs
GNU Emacsæ¯ä¸æ¬¾ç»èº«å è´¹ä¸å ¼å®¹ä»»ä½å¹³å°ç代ç ç¼è¾å¨ï¼ä½¿ç¨å¼ºå¤§çLispç¼ç¨è¯è¨è¿è¡å®å¶ï¼å¹¶ä¸ºPythonå¼åæä¾åç§å®å¶èæ¬ï¼æ¯ä¸æ¬¾å¯æ©å±ãå¯å®å¶ãèªå¨è®°å½ãå®æ¶æ¾ç¤ºçç¼è¾å¨ï¼ä¸ç´è¦ç»å¨UNIXå¨å´ã
5. Visual Studio Code
Visual Studio Codeæ¯ä¸æ¬¾å ¼å®¹LinuxãMac OS XåWindows å¹³å°çå ¨åè½ä»£ç ç¼è¾å¨ï¼å¯æ©å±å¹¶ä¸å¯ä»¥å¯¹å ä¹ææä»»å¡è¿è¡é ç½®ï¼å¯¹äºPythonçæ¯æå¯ä»¥å¨Visual Studio Codeä¸å®è£ æ件ï¼åªéå¿«éç¹å»æé®å³å¯æåå®è£ ï¼ä¸å¯èªå¨è¯å«Pythonå®è£ ååºã
äºãPythonéæå¼åç¯å¢
1. PyCharm
PyCharmæ¯å¯ä¸ä¸æ¬¾ä¸é¨é¢åPythonçå ¨åè½éæå¼åç¯å¢ï¼åæ ·æ¥æä»è´¹çåå è´¹å¼æºçï¼PyCharmä¸è®ºæ¯å¨Windowsã Mac OS Xç³»ç»ä¸ï¼è¿æ¯å¨Linuxç³»ç»ä¸é½æ¯æå¿«éå®è£ å使ç¨ã
PyCharmç´æ¥æ¯æPythonå¼åç¯å¢ï¼æå¼ä¸ä¸ªæ°çæ件ç¶åå°±å¯ä»¥å¼å§ç¼å代ç ï¼ä¹å¯ä»¥å¨PyCharmä¸ç´æ¥è¿è¡åè°è¯Pythonç¨åºï¼å®è¿æ¯ææºç 管çå项ç®ï¼å¹¶ä¸å ¶æ¥æä¼å¤ä¾¿å©åæ¯æ社åºï¼è½å¤å¿«éææ¡å¦ä¹ 使ç¨ï¼
2. Eclipse + PyDev
PyDevæ¯Eclipseéæå¼åç¯å¢çä¸ä¸ªæ件ï¼æ¯æPythonè°è¯ã代ç è¡¥å ¨å交äºå¼Pythonæ§å¶å°çï¼å¨Eclipseä¸å®è£ PyDevé常便æ·ï¼åªéä»Eclipseä¸éæ©âHelpâç¹å»âEclipse Marketplaceâç¶åæç´¢PyDevï¼ç¹å»å®è£ ï¼å¿ è¦çæ¶åéå¯Eclipseå³å¯ï¼å¯¹äºèµæ·±Eclipseå¼åè æ¥è¯´ï¼PyDevå¯ä»¥å¾è½»æ¾ä¸æï¼
3. Visual Studio
Visual Studioæ¯ä¸æ¬¾å ¨åè½éæå¼åå¹³å°ï¼æä¾äºå è´¹çåä»è´¹çï¼å¯ä»¥æ¯æåç§å¹³å°çå¼åï¼ä¸é带äºèªå·±çæ©å±æ件å¸åºãå¨Visual Studioä¸å¯è¿è¡Pythonç¼ç¨ï¼å¹¶ä¸æ¯æPythonæºè½æç¥ãè°è¯åå ¶ä»å·¥å ·ï¼å¼å¾æ³¨æçæ¯Visual Studioä¸æ¯æLinuxå¹³å°ï¼
4. Spyder
Spyderæ¯ä¸æ¬¾ä¸ºäºæ°æ®ç§å¦å·¥ä½æµåäºä¼åçå¼æºPythonéæå¼åç¯å¢ï¼å®æ¯éå¨Anaconda软件å 管çå¨åè¡çä¸çï¼Spyderæ¥æ大é¨åéæå¼åç¯å¢è¯¥å ·å¤çåè½ï¼å¦å¼ºå¤§è¯æ³é«äº®åè½ç代ç ç¼è¾å¨ãPython代ç è¡¥å ¨ä»¥åéææ件æµè§å¨ï¼å ¶è¿å ·æå ¶ä»Pythonç¼è¾ç¯å¢ä¸æä¸å ·å¤çåéæµè§å¨åè½ï¼ååéå使ç¨Pythonçæ°æ®ç§å¦å®¶ä»¬ã
5. Thonny
Thonnyæ¯é对æ°æçä¸æ¬¾éæå¼åç¯å¢ï¼éç¨äºå ¨é¨ä¸»æµå¹³å°ï¼é»è®¤æ åµä¸ï¼Thonnyä¼åèªå¸¦æç»çPythonçæ¬ä¸èµ·å®è£ ï¼ååæ¹ä¾¿æ°æ使ç¨ï¼
六星云课堂:帮你学前端,个实用前端网站工具推荐!
今天六星云课堂为大家整理了个前端学习相关网站和实用工具,覆盖了CSS、教师申请系统源码JS、社区博客、在线IDE及资源类,旨在助大家提升技能。下面一起来看看这些优秀资源:
1. CSS相关
- CSS Battle: 一个有趣的在线比赛,挑战CSS知识,通过级关卡,比拼还原页面样式并优化代码。
- Learn CSS layout: 在线学习CSS布局,逐步引导初学者理解CSS基础知识,提高布局能力。
- Flexbox Froggy: 以游戏形式学习Flex布局,通过让青蛙跳到荷叶上,实践并掌握Flex布局特性。
- EnjoyCSS: 在线CSS代码可视化工具,快速调整网页效果和样式,无编码限制。
- CSS-Tricks: 不断更新CSS技巧教程,派派窝 源码每日更新文章,深入探索CSS特性。
- Neumorphism: 轻松实现新拟态效果,提供自定义参数调整,方便快捷。
- uiGradients: 提供丰富渐变色方案,直接生成CSS代码,个性化网页设计。
2. JS相关
- JavaScript秘密花园: 深入解读JavaScript语法,避免常见错误,探索语言特性。
- JS Tips: 每日分享JS小知识,积累编程技巧。
- JSweekly: 专注于JavaScript技术更新的周刊。
- CDNJS: 免费使用大量前端资源库,方便集成至网页。
- Beautiful Open: 收集开源JS库,涵盖CMS到常用库,适合网站开发。
- JavaScript Fun: 集合热门JS代码库,提供排行,快速找到所需工具。
3. 社区与博客
- Stack Overflow: 全球编程问答平台,api游戏接口源码解决技术难题。
- 掘金: 高质量技术社区,分享Android、iOS、前端等资源。
- Codrops: 发布网页设计教程,提供丰富资源,减少错误。
4. 在线IDE
- CodePen: 网站前端设计平台,提供案例示范,支持开发自定义设计。
- CodeSandBox: 在线开发环境,支持主流框架,方便调试和预览。
- JS Bin: 轻量级在线编辑器,适合快速调试HTML或JS代码。
5. 资源类
- ICONSVG: 在线自定义设计SVG图标,提供素材二次设计功能。
- OpenMoji: 免费表情符号库,源代码可下载。
- Share Icon: 丰富的矢量图标库,支持多种格式和尺寸。
- tableconvert: 在线表格编辑器,数据交互平台源码支持多种格式转换。
- Feathericons: 极简图标集合,适用于移动端应用。
- HTML5 + CSS 3 免费模版: 提供多样化模版,支持分享与修改。
以上资源涵盖了前端学习、开发、设计与资源获取的方方面面,希望对大家的技术提升有所帮助。关注六星云课堂,持续获取更多编程技巧!
重读Redux源码的感悟
大道至简的createStore
创造理解的%在createStore.js中体现,剩下%涉及中间件,整体来看软件开发追求高内聚,内耦合,以简洁面世。Redux源码由9个文件构成,包含中间件的代码。整体而言,Redux的深层含义超出了源码大小所能体现,业界常言“Redux是百行代码千行文档”,强调其复杂性。
回到createStore.js,potrace源码win编译剥离中间件影响,仅留下核心代码骨架。最终返回的对象即store,提供了常用API。通过观察者模式或发布/订阅模式理解此框架,但要认识到Redux并非仅此,它结合现代前端开发与函数式编程,带来限制与便利,如纯函数要求、测试便利性、功能解耦及性能优化。
实现撤销功能(undo)示例,通过高阶reducer存储过往状态值,结合Redux实现撤销与重做。函数式编程的FP特性,使实现变得可能。
combineReducer利用闭包概念,接收多个reducer,生成单个reducer,可遍历执行所有reducer。若两个reducer同时处理相同type的action,它们都会执行更新状态。此特性可能带来冲突,需合理命名以避免问题。
使用CLI工具搭建开发环境可能耗时,codesandbox.io提供多种框架支持及快速加载依赖,适合灵感突发时快速测试代码。
在命名Action时,采用namespace前缀(如/或@)可避免重复,有助于清晰管理状态与减少冲突。
compose方法实现多个方法串联执行,功能强大,易于实现并用于中间件处理。在Redux中,中间件处理Action,与服务器端处理request、response的Koa或Express不同,但核心原理相似,利用compose方法串联功能。
中间件本质为方法代理,通过增强原方法执行前后添加操作,实现AOP。在Redux中,中间件位于store.dispatch之前,通过代理dispatch实现场景扩展与功能增强。理解中间件需关注enhancer参数及createStore方法传递,最后实现store与中间件串联。
以redux-thunk为例,底层参数接收中间件API,只传递store的getState和dispatch方法,遵循特定逻辑处理action,提供方法执行选择与状态管理。中间件使用时需阅读文档,理解其规范与实现细节。
综上,Redux源码展示了现代前端开发与函数式编程的结合,从createStore、combineReducer到中间件,提供了高效状态管理与功能扩展。理解其核心概念与实现机制,有助于深入应用与开发。
微前端学习笔记(3):前端沙箱之JavaScript的sandbox(沙盒/沙箱)
沙盒(Sandbox)机制旨在确保代码的安全性,限制其权限以防止恶意或不受信任的脚本访问敏感资源或干扰其他程序执行。通过在沙盒环境中运行代码,可以将其行为限制在安全范围之内。
沙盒是一种隔离机制,允许程序在独立环境中运行,避免对外界程序造成影响,保障系统安全。在开发中,沙盒环境通常用于服务器中通过Docker创建容器,或在 Codesandbox中运行代码示例,以及在程序中执行动态脚本。
微前端框架主要负责两个工作:一是实现JS沙盒,二是将沙盒内的执行结果输出为WebComponents,插入到页面中。
沙盒能够确保每个前端应用拥有独立的上下文环境、页面路由和状态管理,避免相互干扰。
实现JavaScript沙盒的方法有两类:通过iframe或ShadowRealm在原生环境上实现,以及利用JS特性(主要基于Proxy)实现。
利用iframe实现沙盒是通过其天然的隔离机制和postMessage通讯机制。在iframe中运行的脚本只访问当前iframe的全局对象,不会影响父页面功能,提供简单、安全的实现方式。腾讯的无界沙箱采用此方案。
使用iframe沙盒有一些限制,需要配置来解除限制。实际工程中,可以参考《让iframe焕发新生》一文,使用封装的框架wujie实现。
无界沙箱模式在一张页面上激活多个子应用,利用iframe独立执行,并通过location和history管理路由,支持浏览器前进、后退操作。
核心点包括:iframe数据劫持和注入、iframe与shadowRoot副作用处理。实现细节在无界源码中。
ShadowRealm是一个ECMAScript标准提案,允许创建多个高度隔离的JS运行环境,具有独立的全局对象和内建对象。但目前仍处于提案阶段。
WebWorker提供独立线程作为沙箱环境,适合作为底层实现,但不常提及。腾讯无界方案展示了其优势。
IIFE(立即执行匿名函数)实现简易沙箱,可限制变量访问,但只能实现基本隔离。
with + new Function提供访问全局变量和局部变量的能力,但存在全局作用域污染风险。
利用with和Function结合Proxy实现ES6 Proxy,通过拦截器get和set对window进行代理,实现全局环境的隔离。
沙箱逃逸是极端情况下的安全挑战,通过设置Symbol.unScopables为true来绕过with作用域限制。
沙盒实现包括简单代码实现和多实例模式,分别通过with块和Proxy对象隔离执行环境。单实例模式只支持记录变化,多实例模式则在微应用间创建独立的沙箱环境。
基于属性diff的沙箱机制在不支持ES6的环境中使用普通对象快照实现存储与恢复,用于更新子应用环境。qiankun中提供了此降级方案。
总结:沙盒机制是实现代码安全隔离的有效手段,通过不同方法实现沙箱,可以满足不同场景的需求。在实现时需考虑限制与优化,确保安全性和性能。