正文

[笔记]这阶段的有道云笔记前端部分整理

逻辑左移  逻辑左移  2022-09-06  279

关键词：

js现在可以运行在

1.浏览器端

2.计算机操作系统上

通过大名鼎鼎的node， node是由c/cpp编写的js运行环境，大概是js通过编译变成c变成汇编变成机器语言。。。大概

node编译

操作系统可执行机器语言

包安装工具

1.npm

2.bower

3.yarn

现在大家都推荐这个。。。据说更快更好

构建打包工具（说实话这个我现在还是分不清）

构建工具任务执行器

帮助压缩文件？sprite？混淆等等需需要手工操作的简化？手工劳动 gulp grunt

打包工具模块打包工具

模块化的代码最后组装打包上线用的，webpack browserify ，seajs require这两个是在浏览器端js现场打包，现在已经不推荐了

页面中的js

传统引入方式 script src

node动态引入

这个是个很神奇的 node的工具webpack动态的组装你的页面比如使用node modules里面的插件你并没有实际用script引入到页面中这样子？暂时不理解的时候，不能用常理来考虑（vue-cli）dev时是动态组装build才把所有动态组装的打包好成一个。。。

es2015==es6 =>true

jquery 属性自加

a.css({‘property‘:‘+=value‘})

目前我对vue的感想

首先，说下优点确实有的，只操作数据不用操作dom

再说下缺点，搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c，最后搞得很难看懂。为了变方便变得更麻烦要加更多东西

contenteditable

div 模拟textarea 富文本编辑器

<div class="simutextarea">
                    <span class="simut-fastenbegin">#youCantDeleteMe</span>
                    <span class="simut-textwrapper">
                        <span class="simut-textplaceholder">Hot or not? Tell it like it is and hashtag!</span>
                        <span class="simut-textplaceinput" contenteditable="true"> </span>
                    </span>
                </div>

但是有些问题的，解决不了光标的问题（跳首），百度贴吧的发帖框就是用这个模拟的，有时间看看他们怎么做的

根据设备跳转

三方可以跳转，都可以获得浏览器传来的userAgent

运维跳转
程序跳转
前端跳转

同时，这三方加上网路运营商甚至路由器都可以恶意dns恶意在页面上加东西
node作为运行时服务器，也是一样的

图片位于正中

background-position center
position absolute

多行省略（现代浏览器）

overflow: hidden;text-overflow:ellipsis;
        display: -webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;

cdn页面真正动态内容

页面被cdn服务器缓存后，需要刷新缓存才能真正改变，那么真正需要勤奋改变的内容需要js来获取（比如当前登录用户信息等等）

js 正则找出所有符合的匹配

var regEx=/js_quantity[a-z]+/g;regEx.exec(‘js_quantityabc js_quantityminus minus disabled‘);regEx.exec(‘js_quantityabc js_quantityminus minus disabled‘);regEx.exec(‘js_quantityabc js_quantityminus minus disabled‘)
[0];regEx.exec(‘js_quantityabc js_quantityminus minus disabled‘).index;

不断连续执行exec

async/await

demo(Script snippet #1)

//测试 async async async await
//先来的 返回一个promise 完成时调用resolve
var sleep=function(){
 return new Promise(function(resolve,reject){
     setTimeout(function(){
         console.log(‘Asettimeout has been executed, promiss has been resolved‘);
         resolve([‘sleep1‘,‘sleep2‘]);
     },3000);
 });
};
//后到的 async（异步）修饰function await修饰执行先来的
var start=async function(){
 let sleepreturnarray=await sleep();
 console.log(‘%ceven though i do not have a time out, i still will be executed after 3 sec, after the promiss resolveed‘+sleepreturnarray[1],‘color:red;‘);
};
start();

async 表示这是一个async函数，await只能用在这个函数里面。

await 表示在这里等待promise返回结果了，再继续执行。

await 后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义了…）

大大说了，目前这这就是异步回调地狱的终极解决方案，当然要结合babel现在。注意，目前，终极

vue组件通讯

就算你不喜欢，分到你用你也得用。。。

组件之间的作用域独立，而组件之间经常又需要传递数据。
A 为父组件，下面有子组件 B 和 C。
A 的数据可以通过 props 传递给 B 和 C。
A 可以通过 $broadcast 调用 B 和 C 的 events，从而操作 B 和 C 的数据。
B 和 C 可以通过 $dispatch 调用 A 的 events，从而操作 A 的数据。
当 B 需要操作 C 的数据就会比较麻烦，需要先 $dispatch 到 A，再 $broadcast 到 C。

如果项目比较小的话还好，越大的项目，涉及的组件通信就越多、越频繁，此时管理起来就会非常累，而且容易出错。这就是 Vuex 的意义所在。它可以将数据置于单独的一层，并提供给外部操作内部数据的方法。粗俗一点，就这样理解吧。

=== === ===更新：Vue 2 发布了，去掉了 $dispatch 和 $broadcast，已经不会出现通信事件 ping-pong 的情况了。

我们需要有一个 Vue 实例来充当通信媒介的作用，Vue 官方文档里将它叫做 event bus。export default new Vue(); 当我们需要组件之间事件通信的时候，只需要对这个 event bus 使用 $emit 和 $on 就可以了。

import Bus from ‘./bus.js‘;

export default Vue.extend({
  template: `
  <div>{{msg}}</div>
  `,

  data: () => ({
    msg: ‘Hello World!‘
  }),

  created() {
    Bus.$on(‘setMsg‘, content => {
      this.msg = content;
    });
  }
});

import Bus from ‘./bus.js‘;

export default Vue.extend({
  template: `
  <div @click="sendEvent">Say Hi</div>
  `,

  methods: {
    sendEvent() {
      Bus.$emit(‘setMsg‘, ‘Hi Vue!‘);
    }
  }
});

Event bus 是一种实践，你也可以在 Vue 1.x 中使用它。

大在小容器中居中

法一

大:position absolute; left 50%;margin-left -[大宽度的一半]; top...跟left一样的省略

小：position relative;

法二

设置为背景图且background-position center

文本框和按钮同高对齐(less)

form{
			font-size: 0;position: relative;
			.formitem{
				height: 30px;line-height: 30px;
				font-size: 14px;vertical-align: middle;
			}
			input[type=text]{
				.formitem();
				border: 1px solid #000;
				padding: 0 5px 0 35px;
				width: 235-40px;
			}
			button{
				.formitem();
				color: #fff;background-color: #000;
				width: 135px;height: 32px;line-height: 32px;
			}
			&:before{
				content: ‘‘;display: inline-block;position: absolute;
				left: 38px;
				top: 1px;
				.sprite(@youjiandingyue_07);
			}
		}

正则替换保留原始内容

http://([A-Za-z0-9.-]+).sammydress.com
https://$1.sammydress.com

$1 是代表([A-Za-z0-9.-]+)匹配到的模糊内容
$1-$n分别代表第1个和第n个括号内匹配到的内容。

var regEx=/([A-Za-z0-9.-]+)abc/;
‘sdjlfjslfabc‘.replace(regEx,‘$1def‘)

结果是"sdjlfjslfdef"

关于vue一点新的体会

专注于操作数据，数据和视图分离，通过操作数据的方式操作视图，mvvm
而不是$().html()等等这种形式

webstorm 保存不会触发webpack watch

https://segmentfault.com/q/1010000007796140?_ea=1459577
原来是这样啊啊啊啊啊啊

text align justify

text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用

vue validator

https://segmentfault.com/a/1190000006706226
中文文档

关于postcss中用于不转换rem的注释/no//px/在webpack build中不生效的解决办法

sass loader会把注释去掉导致用于告诉postcss不用转换rem的注释也去掉导致边线px变成小数rem 显示不出来的bug
sass?outputStyle=expanded 展开带注释的？

module: {
        loaders: [
            {
                test: /.scss$/,
                //感謝谷歌
                loader: ‘style!css!postcss-loader!sass?outputStyle=expanded‘,
                // include: APP_PATH
            },
        ]
    },

webpack 可以接受形如!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true&includePaths[]=./node_modules 的配置参数后的loader

有道云笔记如何同步?

参考技术A问题一：有道云笔记怎么同步分享？有道云笔记有多平台版本，数据云端储存，可以一个终端记录，多个终端同步共享，免除了数据线的困扰。第一步，先安装有道云笔记，然后登陆。可以用网易账号，也可以用开放... 查看详情

有道云笔记新版编辑器架构设计（下）

...们从整体上介绍了富文本编辑器的背景，并分享了有道云笔记新版编辑器技术选型中的模型和渲染部分。本期文章，我们将继续分享技术选型中的编辑和指令部分内容，并详细解读有道云笔记编辑器的分层架构设计。作者/金鑫... 查看详情

ubuntu下使用网页版有道云笔记的使用记录

...系统是Ubuntu14.04，网易公司没有开发这个系统下的有道云笔记客户端。我曾经尝试过用wine的方式来安装运行有道云笔记，很遗憾，这种方式很不稳定，基本上没办法正常工作。因此，只能使用网页版的有道云笔记。现在把使用中... 查看详情

学习有道云笔记的笔记(代码片段)

01目录有道云笔记0基础教程https://www.bilibili.com/video/BV1P4411H7xNP1罗涛老师有道云笔记PC端软件基础操作-----11:51P2罗涛老师有道云笔记手机端基础操作-------08:1202罗涛老师有道云笔记简介罗涛老师有道云笔记PC端软件基础操作01新建笔... 查看详情

最近几年大部分学习笔记记录在有道云笔记和部分在github:https://github.com/mazouri

我的GitHub：https://github.com/mazouri欢迎follow！查看详情

最近几年大部分学习笔记记录在有道云笔记和部分在github:https://github.com/mazouri

我的GitHub：https://github.com/mazouri欢迎follow！查看详情

我想记录自己整理的java笔记，啥软件好

记录自己整理的Java笔记，使用敬业签就比较合适，因为它多端同步使用方便，安全可靠。敬业签是一款功能比较全面的桌面便签软件，分为个人便签和团队协作便签，主要功能包括：云储存、多端云同步、提醒待办事项、时间... 查看详情

有道云笔记安卓版，不能查看内容

有道云笔记安卓版，在笔记列表中点击笔记，只在上面最顶端显示一行蓝底白字的内容，下面空白。点击编辑，会出现一部分内容。稍等会，手机会短促震动几下，然后退出查看笔记界面，或直接退出程序。手机是9220，4.0.3系统... 查看详情

《有道云笔记》出现授权出错的解决办法

参考技术A有道云笔记除了可以注册独立的账号登录之外，还可以使用QQ、微信、微博这三个第三方平台的账号登录。最近有些小伙伴在登录有道云笔记的时候出现了授权出错的情况，我了解了一下，大多是因为使用QQ登录的时候... 查看详情

[转]有道云笔记markdown

...什么、能干什么、对码字的你有什么益处；再打开有道云笔记，抽出10分钟对照M 查看详情

为啥手机有道云总是显示未同步

参考技术A有道云笔记有多平台版本，数据云端储存，可以一个终端记录，多个终端同步共享，免除了数据线的困扰。第一步，先安装有道云笔记，然后登陆。可以用网易账号，也可以用开放平台的账号，如qq，微博等。第二步，... 查看详情

如何在有道云笔记中打出下角标数字？

参考技术A你好，现在的有道云笔记仅在云协作中支持markdown，云笔记即将在后续的版本中支持，现在还不能使用。Markdown具有一系列衍生版本，用于扩展Markdown的功能（如表格、脚注、内嵌HTML等等），这些功能原初的Markdown尚不... 查看详情

从有道云笔记迁移到另一个有道云笔记账号

从有道云笔记迁移到另一个有道云笔记账号背景我们有2个有道云笔记，A和B，我们需要将A的内容导入到B。为什么我们需要有这个需求?比如你原来有个账号A，是用邮箱创建的，建了很多笔记，有一天，你... 查看详情

mac版有道云笔记不能完整同步到本地解决办法

参考技术AMac版有道云笔记有时候会出现网页版是完整的,但是本地哪怕同步完成后,还是缺少部分笔记,解决办法如下:打开Finder,前往文件夹:~/资源库/Containers/com.youdao.note.YoudaoNoteMac/Data/Library/ApplicationSupport/com.youdao.note.YoudaoNoteMac删... 查看详情

前端样式脚本本地化开发

...网调试）在本地架设临时服务器进行样式脚本调试有道云笔记（外网调试）利用有道云笔记在本地调试脚本1.本地服务器方案有很多经历过前端开发的朋友们肯定知道，前端代码一般并不是在本地进行调试的。大多数都是在本地... 查看详情

有道云笔记支持上下标吗

参考技术Amarkdown支持上下标的追问就是普通的笔记的话，好像没有吧就是普通的笔记的话，好像没有吧参考技术B下标：~2~，上标：^2^追问您说的是markdiwn语法吧查看详情

有道云笔记pc客户端登录后显示目录创建失败，笔记也看不了，该怎么解决？

有道云笔记登录之后就弹出目录创建失败，笔记只能看到摘要部分，内容不显示，创建新笔记时也只能输入标题，内容输入不了，卸载重装了也没用，哪位大神给解释下咋回事啊？卸载当前安装的有道云笔记，删除安装目录下的... 查看详情

如何在有道云笔记输入数学公式

有道云笔记Markdown功能（“新建”-Markdown）可输入数学公式，用Latex语法，所见即所得，有简洁的Help，所生成的网页也漂亮。可与OnlineLaTexEquationEditor一起使用。查看详情

正文

[笔记]这阶段的有道云笔记前端部分整理

js现在可以运行在

1.浏览器端

2.计算机操作系统上

包安装工具

1.npm

2.bower

3.yarn

构建打包工具（说实话这个我现在还是分不清）

构建工具 任务执行器

打包工具 模块打包工具

页面中的js

传统引入方式 script src

node动态引入

es2015==es6 =>true

jquery 属性自加

目前我对vue的感想

contenteditable

根据设备跳转

图片位于正中

多行省略（现代浏览器）

cdn页面真正动态内容

js 正则找出所有符合的匹配

async/await

vue组件通讯

=== === ===更新：Vue 2 发布了，去掉了 $dispatch 和 $broadcast，已经不会出现通信事件 ping-pong 的情况了。

大在小容器中居中

法一

法二

文本框和按钮同高对齐(less)

正则替换 保留原始内容

关于vue一点新的体会

webstorm 保存不会触发webpack watch

text align justify

vue validator

关于postcss中用于不转换rem的注释/*no*//*px*/在webpack build中不生效的解决办法

有道云笔记如何同步?

有道云笔记新版编辑器架构设计（下）

ubuntu下使用网页版有道云笔记的使用记录

学习有道云笔记的笔记(代码片段)

最近几年大部分学习笔记记录在有道云笔记和部分在github:https://github.com/mazouri

最近几年大部分学习笔记记录在有道云笔记和部分在github:https://github.com/mazouri

我想记录自己整理的java笔记，啥软件好

有道云笔记安卓版，不能查看内容

《有道云笔记》出现授权出错的解决办法

[转]有道云笔记markdown

为啥手机有道云总是显示未同步

如何在有道云笔记中打出下角标数字？

从有道云笔记迁移到另一个有道云笔记账号

mac版有道云笔记不能完整同步到本地解决办法

前端样式脚本本地化开发

有道云笔记支持上下标吗

有道云笔记pc客户端登录后显示目录创建失败，笔记也看不了，该怎么解决？

如何在有道云笔记输入数学公式

构建工具任务执行器

打包工具模块打包工具

正则替换保留原始内容

关于postcss中用于不转换rem的注释/no//px/在webpack build中不生效的解决办法