2020-06-09

React笔记二：使用sass

1、安装模块

1	npm install node-sass -s

2、文件中使用

1
2
3

//创建后缀为scss的文件
//引入scss
improt styles from './styles.scss';

2020-06-08

React学习笔记

React笔记一：安装React

1、安装nodeJs

https://nodejs.org/

2、安装React模块

1	npm install -g create-react-app

3、新建一个React项目

1 2	npx create-react-app my-react-app //my-react-app为项目名 npx create-react-app my-react-app --typescript //创建使用ts的项目

4、启动React项目

npm start

2020-06-01

解决方案►Vue

样式设置 /deep/

样式设置scoped属性带来的问题
通常我们在写样式的时候会在style标签中加上scoped属性

Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范，但是这样有时候也会遇到问题：
使用elementUI或其他ui框架时修改框架默认样式不生效。

通过 /deep/解决

<style lang="scss" scoped>
    .basic-box {
        height: calc(100% - 50px);

        /deep/ .el-card {
          height: 100%;

          .el-card__body {
            height: 80%;
          }
        }
      }
</style>

2020-05-08

代码片段►JavaScript

一行JS代码实现编辑网页

1	document.body.contentEditable='true';

浏览器中按F12打开检查在调试面板选中console，输入代码

2020-05-06

代码片段►JavaScript

JS格式化价格保留两位小数函数

//格式化价格相关字段
      formatMoney(value) {
        if (value !== undefined) {
          value = value < 0 ? -value : value;
          let flag = value.toString().indexOf('.');
          if (flag == -1) {
            return value + '.00';
          } else if (value.toString().substring(flag, value.length).length < 3) {
            return value + '0';
          } else {
            return value;
          }
        }
      }

2020-02-19

代码片段►JavaScript

获取浏览器UA信息

1	navigator.userAgent

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>获取浏览器UA(userAgent)信息</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
    <table cellpadding=0 cellspacing=0 width="100%;">
        <tr>
            <td style="height:40px;text-align:center;font-size:16px;font-weight:bolder;">您的浏览器UA(userAgent)信息为：</td>
        </tr>
        <tr>
            <td style="height:40px;text-align:center;font-size:16px;font-weight:bolder;color:red;">
                <script language="JavaScript" type="text/javascript">
                    document.write(navigator.userAgent);
                </script>
            </td>
        </tr>
        <td style="height:40px;text-align:center;font-size:16px;font-weight:bolder;">您的屏幕分辨率为：</td>
        <tr>
            <td style="height:40px;text-align:center;font-size:16px;font-weight:bolder;color:red;">
                <script language="JavaScript" type="text/javascript">
                    document.write(window.screen.width + "×" + window.screen.height);
                </script>
            </td>
        </tr>
        <tr>
            <td style="height:30px;text-align:center;font-size:12px;font-weight:bolder;">
                (请复制以上红色的UA(userAgent)信息和分辨率，添加到平台UA列表中)</td>
        </tr>
    </table>

</body>

</html>

2020-02-15

解决方案►JavaScript

关于将es6 mjs格式模块放在服务器端无法被请求的解决方案

将mjs文件更改为js文件，mjs文件在服务器端可能无法识别

2020-02-11

代码片段►CSS

CSS3实现毛玻璃效果

body {
    background: url(xxxxxx.jpg);
}
.content: {
    position: relative;
    overflow: hidden;
    ....
}
.content::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: url(xxxxx.jpg);
    background-repeat: no-repeat;
    background-size: auto;
    background-attachment: fixed;
    filter: blur(4px);
    margin: -30px;
}

利用css3 filter属性级background相关属性实现

2020-02-08

实用技巧►JavaScript

JS命名规范示例

js：驼峰命名，例：
firstName

css：中划线命名，例：
first-name
class ：驼峰命名，例：
FirstName

html ：中划线/驼峰命名，例：
class=”first-name”
id：”firstName”

文件：中/下划线命名，例：
first-name.js/first_name.js

图片：头尾两部分，下划线隔开，头表示大类，例：
banner：放置在页面顶部的广告，装饰图案等长方形的图片
banner_sohu.gif
banner_sina.gif

logo：标志性的图片，例：
logo_police.gif

button：在页面上位置不固定，并且带有链接的小图片，例：
button_name.png

menu：在页面中某一位置连续出现，性质相同的链接栏目的图片，例：
menu_aboutus.gif
menu_job.gif

pic：装饰用的图片，例：
pic_people.gif

文件名称：小写英文字母，数字和下划线，例：
首页—index
产品列表—prelist
产品详细页面—prodetail
新闻列表—newslist
新闻详细页面—newsdetail
发展历史—history
关于我们—aboutus
联系我们—linkus，contactus
信息反馈—feedback
留言—leavewords

脚本文件和动态文本：英文小写缩写命名，例：
广告条ad.js
弹出窗口pop.js

公用模块：js文件命名：英文命名，后缀js，例：
common.js
basic.js

外部资源：例：
Jquery.min.js
Jquery.validate.js
Jquery.date.js

动态文件：以性质描述，可以有多个单词，用‘_’隔开，性质一般是该页面的概要（见名知意），例：
register_form.aspx
register_post.aspx
topic_lock.aspx

常用规范
s：表示字符串。例：sName，sHtml；
n：表示数字。例：nPage，nTotal；
b：表示逻辑。例：bChecked，bHasLogin；
a：表示数组。例：aList，aGroup；
r：表示正则表达式。例：rDomain，rEmail；
f：表示函数。例：fGetHtml，fInit；
o：表示以上未涉及到的其他对象，例：oButton，oDate；
g：表示全局变量，例：gUserName，gLoginTime；

常量
某些作为不允许修改值的变量认为是常量，全部字母都大写，例：
COPYRIGHT
PI
常量可以存在于函数中，也可以存在于全局。

Jquery
$：表示Jquery对象。例：
$Content
$Module

一种比较广泛的Jquery对象变量命名规范。
j：表示Jquery对象。例：
jContent
jModule；
另一种Jquery对象变量命名方式。
函数
fn：表示函数。例：
fnGetName
fnSetAge；
fn能够更好的区分普通变量和函数变量。
DOM
dom：表示Dom对象，例：
domForm
domInput
项目中很多地方会用到原生的Dom方法及属性，可以根据团队需要适当修改。
临时变量
作用域不大临时变量可以简写，例：
str，num，bol，obj，fun，arr。
循环变量可以简写，例：
i，j，k等。

常用动词
• get 获取/set 设置/add 增加/remove 删除/create 创建/destory 移除
• start 启动/stop 停止/open 打开/close 关闭/read 读取/write 写入
• load 载入/save 保存/create 创建/destroy 销毁
• begin 开始/end 结束/backup 备份/restore 恢复/detach 脱离
• import 导入/export 导出/split 分割/merge 合并/inject 注入/extract 提取
• attach 附着/bind 绑定/separate 分离/ view 查看/browse 浏览
• edit 编辑/modify 修改/select 选取/mark 标记/copy 复制/paste 粘贴/undo 撤销
• redo 重做/insert 插入/delete 移除/add 加入/append 添加
• clean 清理/clear 清除/index 索引/sort 排序/find 查找/search 搜索/
• increase 增加/decrease 减少/play 播放/pause 暂停/
• launch 启动/run 运行/pack 打包/unpack 解包/parse 解析/emit 生成
• compile 编译/execute 执行/debug 调试/trace 跟踪
• observe 观察/listen 监听/build 构建/publish 发布/push 推/pull 拉
• input 输入/output 输出/encode 编码/decode 解码
• expand 展开/collapse 折叠/encrypt 加密/decrypt 解密
• compress 压缩/decompress 解压缩
• connect 连接/disconnect 断开/send 发送/receive 接收
• download 下载/upload 上传/refresh 刷新/synchronize 同步
• update 更新/revert 复原/lock 锁定/unlock 解锁
• check out 签出/check in 签入/submit 提交/commit 交付
• begin 起始/end 结束/start 开始/finish 完成/enter 进入/exit 退出
• abort 放弃/quit 离开/obsolete 废弃/depreciate 废旧
• collect 收集/aggregate 聚集

2020-02-08

解决方案►CSS

元素外使用伪元素after加框后内部元素无法选中问题解决方案

为内部元素设置定位和z-index，例：

1 2	position: relative; z-index: 1;