Write the Code. Change the World.

分类目录
10月 17

在用webpack打包的时候,所打包的文件,会经常使用到 module.exports,exports,export和export default,import与require 这些语法。看起来眼花缭乱,其实,都是有迹可循的。

基本问题

  1. module.exportsexports 是属于 CommonJS 模块规范。
  2. exportexport default 是属于 es6 语法。

  3. 同样 importrequire 分别属于 es6CommonJS

  4. module.exportsexportsexportexport default 都是导出模块。 importrequire 则是导入模块。

module.exports 和 exports 的区别与联系

Node应用由模块组成,采用CommonJS模块规范。根据这个规范,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。

CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。
继续阅读

10月 17

前边

es6 语法使用也越来越多了,本来已经落后了,再不学习就更落后落后了。

es6模块设计思想更是突出。es6模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。es6模块加载是静态加载,使得静态分析成为可能。有了它,就能进一步拓宽 JavaScript 的语法,比如引入宏(macro)和类型检验(type system)这些只能靠静态分析实现的功能。

es6模块自动采用严格模式,不管你有没有在模块头部加上”use strict”;。

既然是模块,模块功能怎么构成呢。模块功能有 exportimport 两部分构成。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

export

一个模块,就是一个独立的文件。通过export,将内部的变量,对象,方法,类输出给外部。并且export在顶级使用,如果在块内部使用就会报错。

export有以下一些规定。

  1. export 必须在顶级使用。
  2. export命令规定的是对外的接口。必须用{}包裹起来,或直接 export。

  3. export 输出接口与外是动态绑定的。 无论改变哪个,该数据都会改变。

  4. 既然export是输出接口,就有一个接受接口。接受用import,也需要要用{}包裹起来。

  5. 一个模块中,可以有多个 export。

  6. export可以使用 as 关键字重命名。
    继续阅读

9月 21

vue

https://cn.vuejs.org/

https://www.awesomes.cn/

http://element.eleme.io/#/zh-CN/

https://www.iviewui.com/

https://n3-components.github.io/N3-components/component.html

bootstrap + vue

http://yuche.github.io/vue-strap/

https://bootstrap-vue.js.org/

https://uiv.wxsm.space/getting-started/

react

https://ant.design/index-cn

css study

http://cssreference.io/

js effects

https://threejs.org/

https://github.com/iview/iview-doc

https://threejs.org/examples/?q=waves#canvas_particles_waves

https://segmentfault.com/q/1010000010716445

9月 04

很多框架,网站,实现的模态窗口体验不是那么完美。不过,知乎的模态窗口却是很完美的。比如登录。知乎的模态窗口实现了以下几点:

  1. 弹出模态窗口后。所有滚动条都隐藏(如果有的话),并且鼠标滑轮,无论怎么滚动,被半透明遮挡在下边的内容岿然不动。
  2. 弹出模态窗口后。窗口在水平和垂直方向是都是居中的。

  3. 关闭模态窗口后。滚动条功能恢复。

Demo: https://api.qiubg.com/demo/vnmodal

gitHub: https://github.com/vini123/vnmodal
继续阅读

8月 30

在nodejs中使用express来搭建框架可以说是非常的简单方便,但是一般默认创建的都是http服务器,也就是只能通过http协议进行访问。如今https已经是发展趋势,我们应该顺应时代的潮流。这里,将记录下这个的配置过程。

生成证书文件

先进入到项目的目录。

cd /alidata/service/node.js/server/im/

1. 生成私钥key文件

openssl genrsa 1024 > private.pem  

继续阅读

7月 22

现象

在js中使用 $(window).load(function(){ …}) 时,会报下边的错误:


Uncaught TypeError: a.indexOf is not a function at r.fn.init.r.fn.load (jquery.min.js:4)

stackoverflow 中有人提到说是 jquery 的版本原因,并给出了方法。

https://stackoverflow.com/questions/38871753/uncaught-typeerror-a-indexof-is-not-a-function-error-when-opening-new-foundat
继续阅读

7月 22

前言

网站加入加载进度条,是件很酷的事情。NProgress.js 就是一个不错的插件。

官网地址:http://ricostacruz.com/nprogress/

CDN: http://www.bootcdn.cn/nprogress/

使用

NProgress 依赖于 jquery1.8 以上的版本。所以,在使用之前,先引入jquery。NProgress有自己的样式文件,也要引入进来。所以,在使用之前,要引入对应的css, js。如:

<link href="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">

<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script src="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>

继续阅读

7月 12

前因

当INPUT[type=file]控件上已经选择过一次文件之后,再次点击它选择同一个文件时change事件就不会触发。因为第二次选择后里面的文字和第一次是一样的,没有改变。还有个更蛋疼情况是有些浏览器会自动记住控件上的文字,即使页面关闭后重新打开还是会恢复到原来的文字。这时候选择同路径的文件也不会触发change事件。
继续阅读