约莫是js通过编写翻译变成c变成汇编变成机器语言,require那三个是在浏览器端js现场包装

js以往得以运作在

js未来得以运作在

一.浏览器端

一.浏览器端

二.电脑操作系统上

透过门到户说的node,
node是由c/cpp编写的js运转条件,大致是js通过编写翻译变成c变成汇编变成机器语言。。。大致

node编译

js

操作系统可举办机器语言


二.计算机操作系统上

透过远近出名的node,
node是由c/cpp编写的js运营条件,大约是js通过编写翻译变成c变成汇编变成机器语言。。。大约

node编译

js

操作系统可实行机器语言


包安装工具

包安装工具

1.npm

1.npm

2.bower

2.bower

3.yarn

当今我们都推荐这么些。。。听大人讲更快更好


3.yarn

前日天津大学学家都推荐这些。。。听别人讲更快更好


塑造打包工具(说实话那几个自身后天依旧分不清)

营造打包工具(说实话那么些自个儿现在依然分不清)

创设筑工程具 职责执行器

援救压缩文件?sprite?混淆等等需必要手工业操作的简化?手工业劳动 gulp grunt

创设筑工程具 职分执行器

扶持压缩文件?sprite?混淆等等需须要手工操作的简化?手工业劳动 gulp grunt

打包工具 模块打包工具

模块化的代码最终组装打包上线用的,webpack browserify ,seajs
require那八个是在浏览器端js现场包装,未来早已不引进了


装进工具 模块打包工具

模块化的代码最后组装打包上线用的,webpack browserify ,seajs
require那多个是在浏览器端js现场包装,未来一度不推荐了


页面中的js

页面中的js

价值观引入方式 script src

守旧引入格局 script src

node动态引入

那些是个很神奇的 node的工具webpack动态的组装你的页面 比如使用node
modules里面包车型地铁插件
你并未实际用script引入到页面中那规范?暂且不知底的时候,无法用常理来设想(vue-cli)dev时是动态组装build才把具有动态组装的打包好成二个。。。


node动态引入

那些是个很神奇的 node的工具webpack动态的组建你的页面 比如使用node
modules里面包车型客车插件
你并未实际用script引入到页面中那规范?近期不知情的时候,无法用常理来考虑(vue-cli)dev时是动态组装build才把拥有动态组装的打包好成3个。。。


es2015==es6 =>true


es2015==es6 =>true


jquery 属性自加

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


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,最终搞得很丑懂。为了变方便变得更麻烦要加越多东西


眼前自作者对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">
                    #youCantDeleteMe

                        Hot or not? Tell it like it is and hashtag!


                </div>

不过多少难点的,化解不了光标的标题(跳首),百度贴吧的发帖框正是用那些宪章的,有时光看看他们怎么做的


contenteditable

div 模拟textarea 富文本编辑器

<div class="simutextarea">
                    #youCantDeleteMe

                        Hot or not? Tell it like it is and hashtag!


                </div>

不过多少难点的,化解不了光标的题材(跳首),百度贴吧的发帖框正是用这一个宪章的,有时光看看她们怎么办的


依照设备跳转

三方得以跳转,都足以赢得浏览器传来的userAgent

  1. 运行跳转
  2. 次第跳转
  3. 前端跳转

同时,那3方加上网路运行商依旧路由器都得以恶意dns恶目的在于页面上加东西
node作为运转时服务器,也是均等的


依照设备跳转

三方能够跳转,都足以博得浏览器传来的userAgent

  1. 运行跳转
  2. 次第跳转
  3. 前者跳转

而且,那3方加上网路运转商照旧路由器都得以恶意dns恶目的在于页面上加东西
node作为运转时服务器,也是同样的


图形位于宗旨

  1. background-position center
  2. position absolute

图片位于中段

  1. background-position center
  2. position absolute

多行省略(现代浏览器)

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

多行省略(现代浏览器)

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

cdn页面真正动态内容

页面被cdn服务器缓存后,需求刷新缓存才能真正改观,那么真正须求努力改变的内容要求js来获得(比如当前报到用户讯息等等)

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


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 代表那是1个async函数,await只好用在这些函数里面。

await 表示在此地等候promise重临结果了,再继续执行。

await
前面跟着的相应是三个promise对象(当然,别的再次来到值也没提到,只是会立马实施,不过如此就从不意义了…)

大大说了,近日那那便是异步回调鬼世界的终极化解方案,当然要结成babel今后。注意,
最近, 终极


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
的意义所在。它能够将数据置于单独的1层,并提须求外部操作内部数据的办法。粗俗一点,就这样驾驭呢。

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 二 表露了,去掉了 $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!');
    }
  }
});

伊夫nt bus 是一种实施,你也能够在 Vue 一.x 中使用它。


=== === ===更新:Vue 二 发布了,去掉了 $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!');
    }
  }
});

伊夫nt bus 是一种实施,你也得以在 Vue 壹.x 中应用它。


大在小容器中居中

大在小容器中居中

法一

大:position absolute; left 50%;margin-left -[大幅面包车型客车2/四];
top…跟left一样的粗略

小:position relative;

法一

大:position absolute; left 50%;margin-left -[大幅度面包车型大巴百分之五十];
top…跟left壹样的简练

小:position relative;

法二

安装为背景图 且background-position center


法二

安装为背景图 且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);
            }
        }

文本框和按钮同高对齐(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.-]+)匹配到的歪曲内容
$一-$n分别代表第一个和第n个括号内匹配到的始末。

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

结果是”sdjlfjslfdef”


正则替换 保留原来内容

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

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

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

结果是”sdjlfjslfdef”


至于vue一点新的咀嚼

只顾于操作数据,数据和视图分离,通过操作数据的点子操作视图,mvvm
而不是$().html()等等那种样式


有关vue一点新的体味

只顾于操作数据,数据和视图分离,通过操作数据的方法操作视图,mvvm
而不是$().html()等等那种样式


webstorm 保存不会触发webpack watch

https://segmentfault.com/q/1010000007796140?_ea=1459577
原先是那般呀啊啊啊啊啊


webstorm 保存不会触发webpack watch

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


text align justify

text-align:justify
属性是全包容的,使用它完毕两端对齐,须要注意在模块之间添加[空格/换行符/制表符]才能起效果,同样,达成公文对齐也是内需在字与字之内添加[空格/换行符/制表符]才能起效能


text align justify

bet体育在线,text-align:justify
属性是全包容的,使用它达成两端对齐,供给小心在模块之间添加[空格/换行符/制表符]才能起功用,同样,完成公文对齐也是急需在字与字之内添加[空格/换行符/制表符]才能起功用


vue validator

https://segmentfault.com/a/1190000006706226
华语文档


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


 

有关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


 

相关文章