Lanstar4:锐意新生 自砍三刀

简介: 前言3年前,为了填坑,终于开发了lanstar,期间看到大家超多的好评,感谢大家的支持❀。但因为个人时间问题,使用lanstar的用户可以发现,我的仓库基本隔了好几个月才更新几次。lanstar主题到目前为止,界面一共发生了3次巨大的变化,第一次版本的界面可以在许多初始、老的资源站看到,第二次版本也在这些年,被新的资源站陆续录用,在未来可能又会看到现在的版本...界面千万条,这些都是Lanstar主题!

前言

3年前,为了填坑,终于开发了lanstar,期间看到大家超多的好评,感谢大家的支持❀。

但因为个人时间问题,使用lanstar的用户可以发现,我的仓库基本隔了好几个月才更新几次。

lanstar主题到目前为止,界面一共发生了3次巨大的变化,第一次版本的界面可以在许多初始、老的资源站看到,第二次版本也在这些年,被新的资源站陆续录用,在未来可能又会看到现在的版本...

界面千万条,这些都是Lanstar主题!

我和大多数开发者不一样,他们设计了许多新的主题,样式不同,而我却在相同模板下迭代了多次的界面,如果按照其它开发者的模式,我可能已经开发了3款主题。

我认为,名字只是一个代号,对一个名字的持续注入反倒显得如一,当然最主要的原因就是如果主题多了,就会有N倍的bug,修复的次数就更多了...

这就是我多次覆盖样式的原因,反正老的模板也没有用,有bug的模板也没有人用...是吧!

改动

现在,又轮到更新的时候了,我对自己设计的Lanstar主题陷入了反思,期间共提交了30多次的更新。

我感觉的问题

  1. 界面臃肿
  2. 界面不适合阅读
  3. 功能非主流

Lanstar4:锐意新生 自砍三刀

我也效仿小米MIUI 14“剃刀计划”努力打造最轻巧流畅的模板😜

Lanstar4展开剃刀计划,刀刃向内,努力打造“固件最小、阅读最佳、加载应用最少”的轻巧流畅的模板。先自砍三刀!

第一刀:向臃肿的模板固件下手!

过去3年Lanstar随着功能增加,调用的第三方库增加,并且几乎都调用Jquery库,jq是js的一层封装,自然体积比js原生大,由于时代的发展,兼容等问题逐渐淡化,我们身为前端人,应该走出舒适圈,减少对jq的依赖。

HTML5的出现到如今也已经超过10年,那时候就出来好多新的js api,例如'document.querySelectorAll来平替jq的dom选择器,那时候开始,jq注意要离开。

Github在18年时候就全站去除了jQuery,在他们的博客,提到

在jQuery方面,我们将其与现代浏览器中支持的web标准的快速发展进行了比较,发现:

  • $(selector)模式可以很容易地替换为querySelectorAll()
  • 现在可以使用Element.classList实现CSS类名切换;
  • CSS现在支持在样式表而不是JavaScript中定义可视化动画;
  • $.ajax请求可以使用Fetch标准执行;
  • addEventListener()接口足够稳定,可以跨平台使用;
  • 我们可以很容易地用轻量级库封装事件委托模式;
  • 随着JavaScript语言的发展,jQuery提供的一些语法糖已经变得多余了。

我在很多地方还看到使用jq,一些多多少少是历史因素,比如Typecho后台,但是它们丝毫不影响我在此倡议大家减少对JQ的学习和使用,真的没有必要,也希望某些比赛某些机构减少大家拥抱未来的阻碍,JQ不是我们的未来!

对历史的jq进行改写成js,真的十分有趣,这也是我本次修改的心得。

不学jq,也是因为现在都是前端框架——React.js和Vue.js的天下,由于typecho没有api缘故,要不然我也想开发vue版本的模板,这些都在计划中,希望以后能够做出。

因此,我的结论是,操作dom用原生js,拒绝jq,非dom使用react或者vue。

在这样的大背景之下,我的第一刀:

  1. 将依赖jq的库都替代了,懒加载,灯箱,PJAX等等都是纯js实现的
  2. 把原来的dom操作都换到了原生,实践证明了18年的话!应该也是第一款完全去除jq的typecho模板。
  3. 异步加载评论和文章,现在几乎所有的typecho都是使用jquery的ajax,而我也现在使用fetch去获取,也让我的评论请求发送更快了!有点搞笑是我改完了才发现fetch是平替,哈哈哈,另外,lanstar应该是typecho历史上第一个用fetch来异步的,真累,fetch提交表单坑挺多的,也学到更多!(lanstar的第一次发布也免费开源了无插件的私密回复!也是历史的第一次)
  4. 除去jq,我对css也进行了精简,以前版本升级,无用的css也很多。

第二刀:向舒适阅读下手

  1. 将css的单位都修改成了rem,使用了rem适配,理论上更好的适配各个设备
  2. 文章主题区域变大,文字大小得体,以前很多人说太窄了
  3. pjax区域更加合理,神奇的解决了pjax与一些高亮需要重新激活的问题
  4. 首页、文章内容页渲染的样式更好能让人阅读,分有没有配图加载,好看就舒服了~
  5. 友情链接页的图片更大了,解决溢出问题。

第三刀:向按需加载组件下手

虽然不是使用webpack开发,但我也自己实现了伪“按需加载”,这是现在很多UI框架都有的功能。

我呢,实现方法很简单,和以前不同的是不全部加载所有的js库,而是例如单击这个操作,我才动态加载js到dom中,然后再具体实现具体的功能...非常像按需加载,是吧!这样就实现了,首页不加载不需要的js,用才加载,一定程序上减少了加载时间!

自砍三刀之后,我也增加了一些功能:

  1. 首页加载部分评论
  2. 终于在3年后增加文章内容页底下的复制链接,分享按钮这些功能
  3. 也学习了优秀的模板,增加了相册,日记动态等模式,让typecho发布不再单调!更多探索尽在lanstar
  4. 异步加载分类下的文章
  5. 2个css属性就实现了模板全部的黑暗模式!这也应该归到第一刀吧,哈哈哈
  6. 许多bug的修复...真的忘了

其实,还有文档,希望下次找个时间一定修订完!

新的界面:

首页文章内容页

那么,最后,我宣布,本次Lanstar4发布会到此结束,祝愿大家身体健康,在新的一年里砍去自己的缺点,能力UP,事业爱情等等什么都丰收!谢谢大家!

反馈地址:在github建个issue

目录
相关文章
|
4月前
|
PHP
[SWPUCTF 2021 新生赛] ez_unserialize
[SWPUCTF 2021 新生赛] ez_unserialize
49 1
|
8月前
|
数据采集 网络架构
技术人该如何准备晋升答辩?
在公司里,我曾参与过各个职级的晋升答辩,也见到过各种各样的答辩现场。就在前阵子,公司部门刚结束了年中职级晋升答辩,我也花了不少时间在团队成员的答辩辅导上。今天我就把一些晋升答辩的技巧和常见的坑跟大家说说,希望能够在晋升之路上对你有所启发。
专科出身,2年进入苏宁,5年跳槽阿里,论我是怎么快速晋升的?
2023年是多灾难的一年,对于我们每个人来说,健康地活着比什么都重要。受到疫情的影响,很多公司都过得比较艰难,裁员更是普遍,所以对大部分来说保住饭碗就很不错了,更别说什么跳槽晋升了。
|
前端开发 JavaScript 程序员
年轻程序员如何快速成长
年轻程序员如何快速成长
年轻程序员如何快速成长
|
算法 网络架构 计算机视觉
“玩命”活着——致敬每一位互联网创业者
九月末的杭州,满城桂花飘香。西湖区文一西路176号的一处民宅里灯火通明,深夜的微凉,丝毫没有影响里面激烈讨论的人们。产品经理樱木和商务拓展由芝在一个问题上争执不,内容是关于产品量产的时间问题。
187 0
“玩命”活着——致敬每一位互联网创业者
|
Java 程序员
别自嗨了!想做新生代农民工,你还不够格。。
其实,我们把 IT 人员纳入 "新生代农民工" 一说,还真有点过分对号入座了,或者说是混淆视听,栈长再次精确核实了一下,我又找到了另外一篇《国家统计局北京调查总队》发布的关于 "新生代农民工" 的报告:
别自嗨了!想做新生代农民工,你还不够格。。
|
存储 对象存储
阿里云服务新生
我是阿里云的一位新生,希望大家能照顾我。跟大家分享阿里云的使用技巧
318 0
|
程序员
阿里五年晋升三次,这个程序员要聊聊他的选择
小二穆远是蚂蚁金服的一名程序员,五年晋升了三次,他要聊聊自己的五年阿里之旅,那些变化、坚持和泪水。请看本期的年陈故事会。
2475 0
|
机器学习/深度学习 Java 应用服务中间件
免试晋升P10,他在阿里10年经历了什么?
在上海工作8年后,身为部门经理的钱磊,管理着一家ERP公司的百十来号员工,“再往上爬就是老板和他儿子了……从这个领域的技术角度来讲算是做到了顶。”05年,钱磊就开始关注一家名字奇怪,做事也奇怪的公司。
3785 0
新生
冬逝, 山撕裂道道枷锁后, 用威严震慑苍穹。 川挣破层层锁链后, 用奔腾扼杀禁锢。 春临, 万物以自己的方式 展现新生。 我也梦到—— 晴日, 狂风呼啸, 雨和花相伴落下, 风卷着新叶飞上天空。
781 0