2021 大前端技術回顧及未來展望
總結2021 年度趨勢 1、 TypeScript 穩健增長 回顧2021，官方的 Roadmap 闡明了TypeScript 的目標是繼續完善其類型系統、實現強大的工具提高生產力、提高使用體驗、提高社區參與程度、改進基礎設施和工程化系統。提出目標後，這一年TypeScript 團隊還是非常給力的發了4 個版本，目前最新版本4.5，其中許多新特性確實使用起來更香了，比如： 更好的元組類型支持，允許任意位置的剩餘類型以及可選類型。 更好的模板字符串字面量類型支持。 更智能的條件分支域的類型推斷。 索引類型支持Symbol 和模板字符串模式。 Awaited 類型和Promise 類型改進。 等等。 除了特性，它還完善了許多使用體驗，比如： 性能優化如更快的類型生成、增量編譯和Sourcemap 生成。 更智能的IDE 補全。 非Javascript 源文件定位。 等等。 另外， TypeScript 新官網在8 月上線了，全新的文檔查閱起來也更加方便。 目前TypeScript 已經是IMWeb 團隊的標配。無論是Web 前端、Node.js 項目還是公共模塊，從腳手架模板就默認支持TypeScript，其中公共模塊體係不僅僅使用TypeScript 編寫代碼和類型檢查，同時利用ESLint 實現TS 語言標準AST 的特定校驗來實現公共模塊規範，還結合TypeDoc 生成使用文檔等等。 展望 TypeScript 在未來將提供更多激動人心的特性，例如： 扁平化聲明文件（Flattening declarations），只輸出一份總的d.ts 文件，而不是一個模塊一個d.ts 文件。 環境裝飾器（Ambient decorators），用來聲明一些環境信息，例如API 是否是deprecated。不影響輸出的運行時代碼，只在d.ts 聲明文件中體現。 條件編譯（Conditional compilation），有點類似C++ 中的#if 宏定義，可以在編譯前預處理代碼並保留符合條件的代碼分支。 […]
Create Login Signup UI Screens in Vue with Bootstrap 4
In this tutorial, we are going to create responsive Login & Signup UI screens using the Bootstrap 4 CSS framework in the Vue.js application. We will create a Login screen, Sign up screen, and Forgot Password screen from scratch. Bootstrap is a free and open-source CSS based UI framework, and It is used for rapid front-end […]
WangEditor添加首行缩进功能
官方也不增加这个，但对于经常写文章的用户来说，首行缩进是很实用的功能，改变一下样式就可以了text-indent: 2em; 修改一下初始化wangEditor的地方，注册一个菜单 //初始化编辑器 var E = window.wangEditor; // 菜单 key ，各个菜单不能重复 const menuKey = ‘MyTextIndentMenuKey’ // 注册菜单 E.registerMenu(menuKey, MyTextIndentMenu) var editor = new E(‘#’+id); 新增一个MyTextIndentMenu.js，代码如下： const E = window.wangEditor const { $, BtnMenu , DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E const lengthRegex = /^(\d+)(\w+)$/ const percentRegex = /^(\d+)%$/ const reg […]
希望是最淺顯易懂的 RxJS 教學
前言 關注 RxJS 已經好一段時間了，最早知道這個東西是因為 redux-observable，是一個 redux 的 middleware，Netflix 利用它來解決複雜的非同步相關問題，那時候我連redux-saga都還沒搞懂，沒想到就又有新的東西出來了。 半年前花了一些時間，找了很多網路上的資料，試圖想要搞懂這整個東西。可是對我來說，很多教學的步調都太快了，不然就是講得太仔細，反而讓初學者無所適從。 這次有機會在公司的新專案裡面嘗試導入redux-observable，身為提倡要導入的人，勢必要對這東西有一定的瞭解。秉持著這個想法，上週認真花了點時間再次把相關資源都研究了一下，漸漸整理出一套「我覺得應該可以把 RxJS 講得更好懂」的方法，在這邊跟大家分享一下。 在開始之前，要先大力稱讚去年 iT 邦幫忙鐵人賽的 Web 組冠軍：30 天精通 RxJS，這系列文章寫得很完整，感受得出來作者下了很多功夫在這上面。看完這篇之後如果對更多應用有興趣的，可以去把這系列的文章讀完。 好，那就讓我們開始吧！ 請你先忘掉 RxJS 沒錯，你沒看錯。 要學會 RxJS 的第一件事情就是：忘記它。 忘記有這個東西，完全忘記，先讓我講幾個其他東西，等我們需要講到 RxJS 的時候我會再提醒你的。 在我們談到主角之前，先來做一些有趣的事情吧！ 程式基礎能力測試 先讓我們做一個簡單的練習題暖身，題目是這樣的： 有一個陣列，裡面有三種類型的資料：數字、a~z組成的字串、數字組成的字串，請你把每個數字以及數字組成的字串乘以二之後加總 範例輸入：[1, 5, 9, 3, ‘hi’, ‘tb’, 456, ’11’, ‘yoyoyo’] 你看完之後應該會說：「這有什麼難的？」，並且在一分鐘以內就寫出下面的程式碼： const source = [1, 5, 9, 3, ‘hi’, ‘tb’, 456, ’11’, ‘yoyoyo’]; […]
15 Interesting JavaScript and CSS Libraries for August 2017
Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention. Titanic A set of beautiful SVG icons with very detailed […]
Node.js V0.12新特性之给子进程的同步API
尽管发明Node.js的初衷主要是为了编写Web服务器，但开发人员又发现了其他适用（和不适用！）Node的用途。令人觉得惊喜的是，这些用途中有一个是编写shell脚本。并且那确实有意义：Node的跨平台支持已经相当好了，既然前端和后端都用JavaScript写了，如果构建系统也用JavaScript写不是更好吗，对吧？ 异步对shell脚本的坏处 在这一用途上值得称道的库是Grunt，它是构建在ShellJS之上的。然而ShellJS有一块硬骨头要啃：Node迫使它用异步I/O。尽管对于Web服务器来说异步I/O很棒，因为它必须随时做出响应，但对于需要逐步执行的shell脚本来说，异步I/O意义不大。 所以，ShellJS的作者们发现了一个“有趣的”解决办法，让它可以运行一个shell命令，然后等着命令完成。大致上是下面这样的代码： var child_process = require(‘child_process’); var fs = require(‘fs’); function execSync(command) { // 在子shell中运行命令 child_process.exec(command + ‘ 2>&1 1>output && echo done! > done’); // 阻塞事件循环，知道命令执行完 while (!fs.existsSync(‘done’)) { // 什么都不做 } // 读取输出 var output = fs.readFileSync(‘output’); // 删除临时文件。 fs.unlinkSync(‘output’); fs.unlinkSync(‘done’); return output; } 换句话说，在shell执行你的命令时，ShellJS依然在运行，并持续不断地轮询着文件系统，检查是否能找到表明命令已经完成的那个文件。有点儿像驴子。 这种效率低下又丑陋不堪的解决办法让Node核心团队受刺激了，实现了一个真正的解决方案 – Node v0.12最终应该会支持同步运行子进程。实际上这个特性已经在路线图上放了很长时间了– 我记得是在2011年的JSConf.eu上(!) ，跟现在已经退休的Node维护者Felix […]
执行了javascript后Gif就不动了
这是一个困扰我几天的问题，就是我的网站上的gif图标突然不动了，今天终于知道问题所在，是javascript引起的，原因就是我用了href=”javascript:void(0)”这种伪协议哈。 将我原来的代码： Java代码 <a href=”javascript:void(0);” onClick=”email_pic()”> 改成 Java代码 <a href=”javascript:;” onClick=”email_pic();return false;”> 就OK了
JQuery 1.5.2 RC 1 发布
JQuery 1.5.2 RC 1 发布！如果没有重大缺陷发生，3月31日就将发布jQuery 1.5.2正式版了。 该版本主要是bug的修复，没有新功能发布。 详细更新日志：http://blog.jquery.com/2011/03/24/jquery-1-5-2-rc-1-released/ 下载地址：http://code.jquery.com/jquery-1.5.2rc1.js
EXT2.0 简明教程!
EXT2.0 简明教程!http://www.dojochina.com/?q=node/547EXT官方教程http://www.dojochina.com/?q=node/584EXThttp://www.dojochina.com/?q=node/482#comment-61
基于OO的可移动DIV窗口。
项目需要一个可移动的DIV窗口，要求调用简单，可以重用。本人马上就考虑到使用OO了。代码如下： <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME=”Generator” CONTENT=”EditPlus”> <META NAME=”Author” CONTENT=””> <META NAME=”Keywords” CONTENT=””> <META NAME=”Description” CONTENT=””> </HEAD> <BODY><SCRIPT LANGUAGE=”JavaScript”> <!–var ie=document.all;var nn6=document.getElementById&&!document.all;var isdrag=false;var y,x;var oDragObj;var qtD = document;function $(id){ return getObj(id);}function getObj(id){ return qtD.getElementById(id);}function cleanDiv(obj){(typeof(obj)==”string”?$(obj):obj).innerHTML=”;} function msgWindow(msgContext){ this.width=400; this.height=300; this.title = ”; this.content = ”; this.context = (typeof(msgContext)==”string”?$(msgContext):msgContext); this.popup = function(){ var left […]