前端面试每日-31-第183天

今天的知识点 (2019.10.16) —— 第183天[html] HTML5的output是非常棒的一个标签,你对它有了解吗?[css] 怎样去除图片自带的边距?[js] 在js中函数返回多个值有哪些方法?[软技能] 说说你对AMD、CMD和CommonJS的理解《论语》,曾子曰:“吾日三省吾身”(我每天多次反省自己)。 前端面试每日3+1题,以面试题来驱动学习,每天进步一点! 让努力成为一种习惯,让奋斗成为一种享受!相信 坚持 的力量!!!欢迎在 Issues 和朋友们一同讨论学习! 项目地址:前端面试每日3+1 【推荐】欢迎跟 jsliang 一起折腾前端,系统整理前端知识,目前正在折腾 LeetCode,打算打通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢迎大家前来讨论,如果觉得对你的学习有一定的帮助,欢迎点个Star, 同时欢迎微信扫码关注 前端剑解 公众号,并加入 “前端学习每日3+1” 微信群相互交流(点击公众号的菜单:进群交流)。 学习不打烊,充电加油只为遇到更好的自己,365天无节假日,每天早上5点纯手工发布面试题(死磕自己,愉悦大家)。希望大家在这浮夸的前端圈里,保持冷静,坚持每天花20分钟来学习与思考。在这千变万化,类库层出不穷的前端,建议大家不要等到找工作时,才狂刷题,提倡每日学习!(不忘初心,html、css、javascript才是基石!)欢迎大家到Issues交流,鼓励PR,感谢Star,大家有啥好的建议可以加我微信一起交流讨论!希望大家每日去学习与思考,这才达到来这里的目的!!!(不要为了谁而来,要为自己而来!)交流讨论欢迎大家前来讨论,如果觉得对你的学习有一定的帮助,欢迎点个[Star] https://github.com/haizlin/fe...

October 16, 2019 · 1 min · jiezi

前端模块化的前世

随着前端项目的越来越庞大,组件化的前端框架,前端路由等技术的发展,模块化已经成为现代前端工程师的一项必备技能。无论是什么语言一旦发展到一定地步,其工程化能力和可维护性势必得到相应的发展。 模块化这件事,无论在哪个编程领域都是相当常见的事情,模块化存在的意义就是为了增加可复用性,以尽可能少的代码是实现个性化的需求。同为前端三剑客之一的 CSS 早在 2.1 的版本就提出了 @import 来实现模块化,但是 JavaScript 直到 ES6 才出现官方的模块化方案: ES Module (import、export)。尽管早期 JavaScript 语言规范上不支持模块化,但这并没有阻止 JavaScript 的发展,官方没有模块化标准开发者们就开始自己创建规范,自己实现规范。 CommonJS 的出现十年前的前端没有像现在这么火热,模块化也只是使用闭包简单的实现一个命名空间。2009 年对 JavaScript 无疑是重要的一年,新的 JavaScript 引擎 (v8) ,并且有成熟的库 (jQuery、YUI、Dojo),ES5 也在提案中,然而 JavaScript 依然只能出现在浏览器当中。早在2007年,AppJet 就提供了一项服务,创建和托管服务端的 JavaScript 应用。后来 Aptana 也提供了一个能够在服务端运行 Javascript 的环境,叫做 Jaxer。网上还能搜到关于 AppJet、Jaxer 的博客,甚至 Jaxer 项目还在github上。 但是这些东西都没有发展起来,Javascript 并不能替代传统的服务端脚本语言 (PHP、Python、Ruby) 。尽管它有很多的缺点,但是不妨碍有很多人使用它。后来就有人开始思考 JavaScript 要在服务端运行还需要些什么?于是在 2009 年 1 月,Mozilla 的工程师 Kevin Dangoor 发起了 CommonJS 的提案,呼吁 JavaScript 爱好者联合起来,编写 JavaScript 运行在服务端的相关规范,一周之后,就有了 224 个参与者。 ...

October 9, 2019 · 5 min · jiezi

Seajs的配置

下载在cmd命令窗口通过npm install saejs下载seajs的npm下载指令查找方法如下下载完成后,生成一个node_modules目录,seajs核心文件放在node_modules\seajs\dist下,如下图所示引入seajs新建index.html文件,将sea.js和index.html放在同一级目录在index.html中通过script标签引入sea.js<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <title>Document</title></head><body> <!– 引入sea.js –> <script type=“text/javascript” src="./sea.js"></script> <script type=“text/javascript”> console.log(seajs) </script></body></html>seajs向外暴露了一个变量seajs,在上面代码中输出seajs从控制台的输出可以看到,seajs是一个对象,有很多属性和方法,我们对其的配置,就是调用了里面的config()方法config方法的源码seajs.config = function(configData) { for (var key in configData) { var curr = configData[key] var prev = data[key] // Merge object config such as alias, vars if (prev && isObject(prev)) { for (var k in curr) { prev[k] = curr[k] } } else { // Concat array config such as map if (isArray(prev)) { curr = prev.concat(curr) } // Make sure that data.base is an absolute path else if (key === “base”) { // Make sure end with “/” if (curr.slice(-1) !== “/”) { curr += “/” } curr = addBase(curr) } // Set config data[key] = curr } } emit(“config”, configData) return seajs}从config方法的源码for (var key in configData)可知,config()方法的参数应该是一个对象,每一种配置项是一个属性(key:value,key是配置名称,value是配置结果),遍历config()方法的参数,并将每种配置的名称和结果放在seajs.data(也是一个对象)里面标识符seajs模块标识分为3种:相对标识、顶级标识和普通标识。相对路径,以. 或 ..开头顶级路径,不以.或 ..及斜线(/)开头普通路径,除相对和顶级路径外的,比如/(根路径)开头的,“http://"、“https://"、“file:///” 等协议标识开头的模块命名空间是seajs所在文件的根路径即所谓的base路径,去除了seajs/x.y.z 字串,也可以指定seajs.config({base:});base配置base配置项在不设置时,表示的是sea.js文件位置,因为seajs的配置结果存放在seajs.data中,在控制台输出seajs.data本地电脑上sea.js文件位置证明base就是sea.js文件所在的路径在main.js中定义一个模块,并向外暴露//main.js// 定义一个没有ID的模块define(function(require,exports,module){ // 向外暴露 module.exports.name = ‘张三’})在index.html文件中使用seajs.use()方法引入入口模块文件main.js<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <title>Document</title></head><body> <!– 引入sea.js –> <script type=“text/javascript” src=”./sea.js”></script> <script type=“text/javascript”> //引入入口模块 seajs.use(‘main’,function(a){ console.log(a) //a为引入的入口文件内的模块向外暴露的对象 console.log(‘入口模块引入完毕’) }) </script></body></html> 注意看seajs.use()方法里面的第一个参数,“main"乍一看好像没问题,mian.js不就是和index.html在同一级目录吗,其实不然,这是顶级路径(不以.、..、/开头,直接以文件名或者文件夹名开头),是相对于sea.js的路径而言的,只是刚好这里sea.js和index.html在同一级目录,所以看起来像是相对于index.html,如果写成./main才是相对于index.html的路径而言那我们尝试更改一下sea.js的位置,将sea.js放在和index.html同级目录的module文件夹下(E:\SeajsTest\module\seajs),将main.js放在和index.html同级目录的module文件夹下的main文件夹中因为sea.js和main.js的位置变了,此时sea.js的路径是E:\SeajsTest\module\seajs,引入sea.js后在控制台输出seajs.data验证此时引入main.js时,如果使用顶级路径应该是main/main,或者写相对路径—-./module/main/main,表示相对于index.html<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <title>Document</title></head><body> <!– 引入sea.js –> <script type=“text/javascript” src=”./module/sea.js"></script> <script type=“text/javascript”> //引入入口模块 // 1、使用顶级标识符 seajs.use(‘main/main’,function(a){ // 2、使用相对标识符 // seajs.use(’./module/main/main’,function(a){ console.log(a) console.log(‘入口模块引入完毕’) }) </script></body></html>控制台输出修改默认base<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <title>Document</title></head><body> <!– 引入sea.js –> <script type=“text/javascript” src="./module/sea.js"></script> <script type=“text/javascript”> // 修改base seajs.config({ base:‘main/’ //base:"./main"写法是错误,因为也遵循seajs标识符的规则,./main/表示和index.html同级的main目录下 }) //引入入口模块 // 1、使用顶级标识符 seajs.use(‘main’,function(a){ // 2、使用相对标识符 // seajs.use(’./module/main/main’,function(a){ console.log(a) console.log(‘入口模块引入完毕’) }) </script></body></html>如上所示,我将base修改为main/表示和sea.js同级的main目录下,即E:\SeajsTest\module\main,此处不能使用base:./main/,因为加上./就表示相对于index.html了,从下图中控制台输出的路径就可以看出来alias(别名)配置 ...

April 3, 2019 · 1 min · jiezi