好好学习,天天向上!本博文章多来源于网络,如有侵权,请留言(q2585+46962)告知,博主将及时处理!
Pages: 1/291 First page 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Next page Final page [ View by Articles | List ]
Jun 1
Dec 16
  CommonJS, AMD, CMD都是JS模块化的规范。

  CommonJS是服务器端js模块化的规范,NodeJS是这种规范的实现。

  AMD(异步模块定义)和CMD(通用模块定义)都是浏览器端js模块化的规范。RequireJS 遵循的是 AMD,SeaJS 遵循的是 CMD。



一、CommonJS

  根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象。所以,定义一个模块就是写一个新的js文件,但是最后要将文件的内容exports出来。接下来我们看一下如何定义模块和加载模块。



//接下来我们去执行这个文件,前提是你本地要安装node.js,不多说了,自己百度安装。
//首先打开cmd, cd到这两个文件所在的目录下,执行: node test.js
node test.js
//输出结果:我是定义的模块
复制代码
  当我们执行 node test.js 的时候,根据 var module = require("./module"); 会加载同一目录下的module.js文件,并将这个文件的exports对象返回,赋值给module,所以我们调用 module.test(); 就相当于执行了module.js文件。

  以上就是CommonJS规范下的模块定义与加载的形式。

  CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作。像Node.js主要用于服务器的编程,加载的模块文件一般都已经存在本地硬盘,所以加载起来比较快,不用考虑异步加载的方式,所以CommonJS规范比较适用。但如果是浏览器环境,要从服务器加载模块,这是就必须采用异步模式。所以就有了 AMD  CMD 解决方案。



二、AMD(异步模块定义)

  AMD规范通过define方法去定义模块,通过require方法去加载模块。RequireJS实现了这种规范。

  AMD只有一个接口:define(id?,dependencies?,factory); 它要在声明模块的时候制定所有的依赖(dep),并且还要当做形参传到factory中。要是没什么依赖,就定义简单的模块(或者叫独立的模块),下面我们看代码实现:


  3. AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,没有全局 require,而是根据模块系统的完备性,提供 seajs.use 来实现模块系统的加载启动。CMD 里,每个 API 都简单纯粹。
Oct 7
使用webpack的插件DllPlugin加快打包速度
https://segmentfault.com/a/1190000012925212
链接无法访问直接下载离线网页
Download ( 392 downloads)
Oct 7

webpack有各种包依赖,如果某个包版本之后会出现此类报错,修改package.json的包版本,重新执行npm i或者cnpm更新包到最新版本即可
Aug 28
IE浏览器从IE8开始添加了兼容模式,开启后会以低版本的IE进行渲染。兼容模式有可能会导致网页显示出问题,于是我们通常在HTML中添加下列代码来使 IE 使用固定的渲染模式:

      还有一种情况,在IE8下只有不使用兼容模式页面才能显示正常,但是如果设定为IE8的模式,在IE9中却会导致CSS3失效。看来,需要针对 IE8、IE9 分别 禁用兼容模式。怎么办呢?可以在后台判断浏览器版本,如果是IE8就输出content="IE=8",如果是IE9就输出content="IE=9"。其实还可以单纯通过HTML来实现的,HTML代码如下:
  
        
      经测试后完美解决了兼容模式问题,这样设置后IE中设置兼容模式的按钮也会消失,可以按F12打开“开发人员工具”来检查浏览器模式。
Aug 24
HTML5 提供了两种在客户端存储数据的新方法:

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储



然而,今天我要说的是“localStorage如何实现定时存储”,正常情况下,localStorage存入key-value后,可以永久使用(前提:不清理cookie操作).
但是,项目中,我们或许需要实现1.需要在间隔某段时间后,刷新所存的值;2.存储一段时间,而非永久;

解决思路,由于localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。所以我们需要在存取方面重新处理,先上代码:


那如何实现数据过期则查询后台的数据,数据未过期,就使用存储的数据呢?
ajax请求数据为例:

最后提醒各位, 1.使用此方式存储(包括localStorage,sessionStoraage),需注意用户隐私:重要机密信息就不要使用localStorage了,慎重使用,毕竟客户端都可以读取值。 2.localStorage比较适用于存储不经常更新且不太重要的数据。
Aug 21
本文基于 "element-ui": "^2.4.3", tree控件文档:https://element.faas.ele.me/#/zh-CN/component/tree#tree-shu-xing-kong-jian
这是个坑,如果遇到这个问题,先到git上看下人家的bug fix:https://github.com/ElemeFE/element/issues/4944  
然并卵,我这没搞定,通过下面方法搞定
Highslide JS
具体操作:
1、在tree外包一层div,给class=‘tree’
2、定义tree的样式
3、重写tree样式


代码:
template


style
Aug 21
在VUE单页应用项目开发过程树形中有一个需求,需要选中树形控件(可以是点击选中行或者复选框),但是只能选中一个。控件使用的是Element ui中的el-tree,但是找了一下并没有单选组件的API,慢慢琢磨中。
Highslide JS
1.el-tree组件
Highslide JS



2.主要是通过两个事件进行联合判断,

node-click节点被点击时的回调,check-change节点选中状态发生变化时的回调.

由于nodeClick被调用时checkChange也会被调用,因此需要一个editCheckId辅助避免出现因为联动导致选中状态错乱
Highslide JS

git项目地址:https://github.com/heyoju/vueDemo

Pages: 1/291 First page 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Next page Final page [ View by Articles | List ]