zweizhao.github.io

项目,文章,随笔,博客,Markdown,个人网站,人生感悟。

View on GitHub

万恶的IE,相信有一定前端经验的小伙伴都会对他咬牙切齿,没办法,如果是商业软件,尤其在中国这个互联网环境下,不做IE兼容的很少很少,除非是非常新兴的互联网工程,才有可能完全脱离IE的魔爪。

那么,我们假设你做得就是一个非常新兴的互联网工程(首先要恭喜你),亦或者你做得是非商业或者干脆个人项目,那么你就可以很骚包的放弃向下兼容。

什么?你说Babel?拜托,都不兼容了,你上Babel干嘛?配置个环境搞个半死,那别人的脚手架,修修改改又是半死。

那怎么破?

两招带你飞:

  1. less

  2. module

less

这个前端威名远扬的帅哥,相信没人没听说过吧(我指前端),正如官网所说:

It’s CSS, with just a little more.

这里不做过多less的讲解,你就知道他能大幅精简你的CSS代码,并且几乎所有的主流编辑器都支持它的插件就行,主要功能截个图,自己去看吧,对了,它有中文网

less

比如VS Code有个插件叫:Easy LESS,就支持在入口less写上// out: ../../css/app.css, compress: true, sourceMap: false,然后在其他子模块less写上// main: ../main.less从而达到无论哪个less更新,都会根据入口less重新生成唯一一个app.css,并且我还是设置压缩过的。。。

可能有人问,scss等等为什么不推荐?stylus不熟,sass用过,对于sass说一点。sass这种依赖其他语言,sass就是依赖Ruby,然后不同平台对Ruby支持或版本又不同,很多时候可预见的会遇到编译等问题。

而less则没有这个问题,编辑器插件的事情已经说了,再不济,直接引入官网提供的less.min.js文件,也就150K大小,然后link标签写成这样:

<link rel="stylesheet/less" type="text/css" href="styles.less" />

然后就可以直接html文件里面引用less文件了,恩,相当爽。如果上传服务器,记得换成CDN啊。

less直接使用完整html代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Less</title>
  <link rel="stylesheet/less" type="text/css" href="styles.less" />
</head>
<body>

  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js" ></script>  
</body>
</html>

module

虽然CSS也有,但是由于CSS不能使用很多函数式功能,所以弃用。

没错,就是ES6的module,你是不是还在webpack -wnpm run dev来将ES6语法编译成ES5?是不是没有浏览器向下兼容,你也习惯性的这么干了?

那么恭喜你,下面你可以撒开webpack一段时间,让你的网页工程变得如当年一般清纯:

精简

顶多你再弄个README.md跟域名处理成这样:

加上两个文件

这,就是你的工程目录结构了,是不是很怀念。不管是多年的工作老手,还是刚刚学完课程的萌新,唉,那些年我们写过的网页啊。

css文件夹里面我藏了个less文件夹,按照功能划分模块的,但是最后导出的就只有一个app.css,所以藏进去不在外面放着了。

现在就说说怎么用吧,其实非常简单,就是这么一个关键词:

<script type='module'></script>

对,不是默认的<script></script>,而是换成了type为module的script,这里就是告诉浏览器,我们用的是最新语法,你给我注意了。

这玩意儿有两种写法:

  1. <script type='module'>js code</script>

  2. <script type='module' src='js/path'></script>

跟我们所知的js写法一样一样的。

亮点就是:

<script type='module'>
import Homepage from './pages/homepage.js'
import Share from './pages/share.js'
      
m.route(document.body, '/', {
  "/": Homepage,
  '/share': Share,
})
</script>

这种之前需要webpack之类打包工具编译的语法直接被支持,这里举例的是我之前的一个工程,有看《易、轻、快!超牛逼纯JS前端框架——MithrilJS》文章的人应该有点印象,没错,我又改写了。。。

如果像我一样搭配上MithrilJS这样一个10K不到的纯JS框架写项目,那酸爽,谁用谁知道。

为何不试一试呢,对吧?


如果喜欢,请关注一波,定期更新技术文章,满满的都是干货。