编程有意思

所有链接在新窗口打开

就是找出所有链接,改一下 target 属性。

document.body.querySelectorAll('a').forEach(el=>el.setAttribute('target', '_blank'))

挺长的,不追求自己会写,但是按单词读也能理解大概意思:

  • document 文档,就是当前这个网页
  • body 网页的身体
  • querySelectorAll 查询所有选择器(选择器在小括号里)
  • forEach 对他们每一个做后面小括号里的操作
  • el 被用来代表其中的每一个元素
  • el.setAttribute 对元素设置属性

就这。

1 个赞

奥运金牌榜

编程有意思 - #2,来自 dms 这里。

先找一个奖牌榜的网站,查看网络数据,随便翻翻大概就能找到个 json,里面是所有国家奖牌数据,然后就是 get 这个 json。

JSON 是种文件格式,反正读取这个文件内容,用 JSON.parse(文件内容) 处理一下就得到了一个对象或者数组,有了数据自己想办法展示出来就行了。

不过,冬奥会闭幕了,但是这个方法可以应用在很多场景上,比如疫情数据啥的

回帖草稿

不是说这个论坛的,这个要更复杂。咱们说小众主站的,评论了没发,关了标签再打开,写的内容还在,这样万一遇到个崩溃啊,手残啊,不至于自己崩溃了。

先说原理,先是选准表单,然后对表单里的元素按 name(没有 name 就按 id,更出乎意料的情况不讨论)挨个取值,存一个对象,然后把这个对象转换为字符串,存到浏览器的存储里,每次打开页面就看一下有没有已经存好的数据,有就再读取回来。

// 数据存这里
const data = {}
// 假设就一个表单
const form = document.body.querySelector('form')
// 找出里面所有的输入元素
form.querySelectorAll('input, textarea').forEach(el=>{
  // 有 name 属性才操作
  if(el.name){
    // 添加一个监听器,虽然道理上是发生改变
    // 但是 onchange 反应迟钝,所以用按键事件
    // 道理上再加一些判断性能更好,这里简化
    el.addEventListener('keypress', ()=>{
      // 把值赋给 data 里面对应的属性,就放在对应的位置嘛
      data[el.name] = el.value
      // 把 data 写入存储
      window.localStorage.setItem('formData', JSON.stringify(data))
    })
  }
})

实际就几行代码啦,还差一个读取恢复功能:

// 读取存储的数据
const storeData = window.localStorage.getItem('formData')
// 有存储的数据就用存储的数据,否则新建一个对象
const data = storeData ? JSON.parse(storeData) : {}
// 找出里面所有的输入元素
form.querySelectorAll('input, textarea').forEach(el=>{
  // 有 name 属性才操作
  if(el.name){
    // 恢复存储的内容,这里不是特别严谨,但基本可用
    el.value = data[el.name]
  }
})

好长的内容啊,可那是因为我写了好些注释吧,实际上也没几行。上下两段的循环逻辑完全一致。知识点只有三个:

  • 读写 localStorage
  • JSON 的两个方法
  • 事件监听器

包装成油猴子应用在所有页面,就不怕填完的内容丢失了。(实际情况比理想中的复杂,上面只是最简单的实现,所以放在所有场景中应用不够严谨,可能遇到各种意外……但,这里不展开了

最重要的是基础,我曾尝试过自学python3,遇到一些问题无法解决不得不放弃

所以有人做适当的引导还是比较好的,能指明方向不走弯路也算一种捷径了。

获取瀑布流王网页全部内容

问题来自: 求:保存【响应式网页】到本地文件的工具小众论坛上用浏览器自带搜索只能搜到一部分内容 - #16,来自 Betty

先说明,是否有必要保存整个网页这件事情有待商榷,我个人以为这个需求应该是在(资料收集)方法上就出了问题。这个工作已经接近爬虫范畴了,责问网页就有点缘木求鱼吧。但这不妨碍我们技术层面讨论。

获取一个回帖的内容很简单,这里稍微放一张图片

image

每个 .topic-post 就是一个回帖,但这个元素没啥特征,article 这个元素比较好,包含所有回帖内容,并且它的 id 标记了“楼层”。于是就准备一个对象储存内容,然后遍历一下这个元素:

const data = {}
document.body.querySelectorAll('.topic-post > article').forEach(el=>{
  data[el.id] = el.innerHTML
})

好了,但是数量不够,因为网页没加载出来所有帖子,所以我们要让页面往下滚动,然后再获取。先说往下滚动:

while(true){
  const Y = window.scrollY
  window.scrollTo(0,Y+1000)
  // 工作代码放这里
  if(Y === window.scrollY) break
}

获取当前滚动的位置,向下滚动 1000 像素,如果位置没变化,那就不滚了,否则无休止的进行下去。兄弟们,虽然这是代码,但它不吃人,你平心静气的思考一下会发现很简单的事情啦。

上下组合一下基本就可以用了,不过严谨点最好判断一下是不是已经保存过某个帖子了,如果是,那就别覆盖了,当然,可能也要判断一下保存的版本文字长度是不是太短之类,我就不详细演示了,简单示例如下:

const data = {}
while(true){
  const Y = window.scrollY
  window.scrollTo(0,Y+1000)
  document.body.querySelectorAll('.topic-post > article').forEach(el=>{
    if(data[el.id]) return
    data[el.id] = el.innerHTML
  })
  if(Y === window.scrollY) break
}

核心方法很简单,不过实际使用中要考虑的问题比较多,不展开,就简单说一下:

  • 滚动后应该给网页留出加载时间,做一个延时
  • 数据量的问题,各种意义上的可能爆内存,遍历太快还可能爆 cpu

至于合并数据,拼接字符串嘛,爆内存就是另外的问题了

链接访问统计

从这开始聊 [自荐]Easy Links,追踪和分析你的 web链接

做个简易版很容易的,已知跳转到某个网址的代码是:

window.location.href = '新地址'

做个网页,加上上面的 JS 就可以实现跳转了,这样跳转速度很快的,基本可以认为无感。当然,没有任何统计功能。

我不会写统计功能,太麻烦了,找个第三方统计代码放进去好了,你喜欢什么用什么,我不管。

然后是一个时序问题,进页面就开始跳转的话,可能统计代码还没干活,所以把统计代码放在前面,先执行它。还不放心的话加一点延时跳转就行了。这些操作都十分基础。


可是,这样只能跳转到固定链接,那我们每次有一个新连接就需要弄一个新的页面,这很烦,所以我们可以利用网址中的 get 参数来传入目标网址,类似这样:

https://shortlink.com/redirect.html?target=https://meta.appinn.net/t/topic/30149/

但这样不行,因为后面网址中的一些符号会捣乱,所以我们得先对后面的网址进行编码,你可以在控制台运行:

encodeURIComponent('https://meta.appinn.net/t/topic/30149/')

获得这样的结果:

https%3A%2F%2Fmeta.appinn.net%2Ft%2Ftopic%2F30149%2F

然后组合出来的网址我不写了,现在我们网页里要获取这个 target 的值,你去搜索获取 get 值的方法,很多会定义出一个函数,用正则什么的搜索,但是,有一些的正则写的又不够严谨。

其实,如果不考虑兼容低版本浏览器,那么有现成的方法可用,也是非常的简单:

window.location.href = (new URLSearchParams(window.location.search)).get('target')

得,弄半天就写了一句代码,整的跟没干活似的……


你看这么简单,你学会了吧, 是不是觉得那个帖子里推荐的东东也不过尔尔 ……自己动手试试吧,你就知道了。

  • 方便的添加链接(当然我们可以再写个界面
  • 方便的管理已有链接(当然我们可以再弄个记事本
  • 方便阅读的统计数据(我们用的第三方,这个……除非再写个油猴子

如果上面这些你也不太在乎,那么我们的网页放在哪里呢?弄一个国内可以方便访问的网站也比较麻烦吧,何况,好多时候网址是通过 QQ 和微信发送的,自己的小网站很可能在里面被标一个大大的不安全……

所以,所以我们这里只是很单纯的聊聊技术而已。

手机控制电脑

这是对这个回帖( 为Unified Remote添加任意自定义功能,把手机变成电脑的「真」万能遥控器(兼论如何实现一键盘是英文输入法,一键盘中文输入法) - #3,来自 dms )的进一步说明。

这里只是核心原理,因为需要调用外部程序,如果没有编程基础,那么可以实现的效果比较有限。

依然是起一个服务器用来接受请求,但是考虑到我们可能实现比较多的功能,那么有几种方案可以选择:

  • 引入 Express,然后利用它的路由功能,这很方便;
  • 对请求地址用正则进行判断,算是自己完成路由功能了;
  • 就用 get 参数,这会非常简单

我们就假设选择最后一种,还是 编程有意思 - #2,来自 dms 这里这样弄,然后把收到的请求输出一下,大概是 request.query 这个对象里有请求中的所有 get 参数。

这就方便了,比如获得 get 参数是 ?app=notepad 就是想打开记事本,怎么打开呢?

  exec('notepad', (err, stdout, stderr) => {
    if(err) {
      console.log(err);
      return;
    }
  })

行数有一点多,不过其实后面的是错误处理啥的,可以不用管,反正前面 'notepad' 里面就是 cmd 命令,就这样。那如果会写 AHK,就可以调用 AHK 去实现各种操作了。

不过除此之外,在接受请求的时候还得做一件事情,就是返回用来展示的页面,比如上面很多按钮的网页,这个自己发挥,不展开了。

如果会 JS,可以把页面里的各种操作弄得流畅一点。不会就每个按钮用一个最基本的表单提交就行。


一直想弄个类似的东西玩,一方面我手头的旧设备不是很适合,另一方面我想要的功能更复杂一点,比如实时显示当前电脑电量音量啥的。

然后这个方法除了简单还有一个好处:网页可以全屏显示(设备浏览器不太差劲的话),屏幕利用率美滋滋,设备扛得住,自己又会写的话还能加各种特效。

啊,代码我都能大概读懂,构造了一个数组……不过这是什么语言,JavaScript么?用什么执行?

是的,大部分时候在浏览器里执行。

启动服务器这种需要 node.js 环境,但语法啥的完全 js

我觉得我们某种程度上比较像~


我自学了不少编程语言,目的都是为了满足平时生活中产生的各种小需求

这些小需求可能在有技术的人眼里不值一提,但是我不习惯求别人(也不知道求谁…),我喜欢自给自足的成就感,于是一旦遇到什么需求,我都会尽量自己解决,哪怕要为此学一门新的编程语言。


我自学编程语言的方式也很简单粗暴

因为一开始就是奔着实现一个小目标去的,因此压根不在乎学的是否基础牢固,只要能实现小目标就行。一开始直接就去看一遍基础教程(语法、格式什么的),然后就边查边写、复制粘贴,就愣是短时间内(大都是几个小时内)解决掉自己的小需求~

一些会经常用到的编程语言(如 JavaScript、Shell )会随着时间而慢慢提高技术,还有些后续一直用不上的,可能就会随着时间慢慢遗忘了。。。

因此,我虽然学了很多、很杂,但实际上算得上精通的没几个。。。
不过好在,触类旁通,学的编程语言多了,学新编程语言就会越来越容易入门~


果然需求/兴趣才是学习第一推动力
如果没有兴趣,我真的是一点学习的念头都提不起来。。。


而且我还很喜欢分享,因此很多小需求我解决后,就会把一些适合的开源分享出来~
不知不觉我的 Github 账号 2 年多时间就累计了 :star: 20.1 k,所有项目全都是这么来的~


虽然平时经常会有人喊我大佬、大神,但我清楚自己是什么水平,写的代码在真正大佬、大神的眼里怕是丑的一批,但够用就好,至少在几年前我的眼里,确实是个大佬~~

4 个赞

这提交量真的好强!

主要是有个自动更新的项目在保底,才实现了首页全绿。。。

不过这个自动更新的 :star:10.8 k 项目,偏偏还是我自认为最没有技术含量的,但却因为和我有同样需求的人很多,导致其 Star 的发展完全出乎我意料,用的人越多,我就越虚。。。

果然,一个项目火不火并不完全取决于其技术水平,而是其是否正好满足了多数人的需求~

哈哈哈,我有一个类似的观点 :

单纯追求会多少技术没意思,掌握、精通,大家心里都明白这种形容代表啥。把自己会的技术应用到极致才叫有趣,我们常常很难想象一些很基础的东西居然可以很巧妙的解决某些难题。

我现在也加了一个自动更新脚本,额,其实还只是自动提交,反正自己省心不少。

1 个赞

学习了多门语言(c语言,c#,python,js,一点点go),我个人觉得最适合入门的编程语言应该是python,语法不难,第三方库丰富,各种项目很多(方便参考学习),可以直接互动式编程(不需要编译运行),不是强类型语言,比较随意,初学也没有像指针这种涉及计算机深层次的内容。
但现在最实用的编程语言大概是javascript,不需要安装环境(直接浏览器控制台运行),应用广泛,网页前端,浏览器脚本,node.js,各种无服务器(severless)平台也大多使用js(node.js),例如cloudflare worker、比ifttt更强大的pipedream。

个人看法,一家之言

1 个赞

这些用来讲 js 也没啥毛病 :joy:

那不一样,js或者说前端那一套工具链我到现在都没搞明白,还是搞不明白怎么打包js。
js比python更像是脚本语言,到处都有,但到处都可能是不一样的运行环境,做东西难度大多了。

python只要安装包一装,pip install 安装包就好了,环境配置太简单了,能保证较为统一的环境

js 就是脚本,越是小需求,越是要求快速实现的需求,越是贴近网页的需求,它的优势就越明显。

大项目,性能和稳定性要求高,数据量大……js 就比较趴窝。

普通人的多数需求都属于前者,所以……

突然想到,没说js最适合入门,是因为js的实际应用要学习js以外的东西(这里只谈论在浏览器上的应用),html,css,浏览器API这些

是的。

但是操作什么都得相关 api,反过来其他语言想做网页相关的事情基本也得学 HTML,css,甚至 js。

其实 js 的问题还是在于太随意了,先学它可能感觉能写东西了,但其实连编程的基础知识都没了解。