ホームページ > 記事 > ウェブフロントエンド > js に関するいくつかの洞察と共有
js に関するいくつかの洞察と共有
- 零下一度オリジナル
- 2017-07-18 13:44:121605ブラウズ
JavaScript はインターネット用のスクリプト言語です!
JavaScript は、デザインの改善、フォームの検証、ブラウザの検出、Cookie の作成などを目的として、何百万もの Web ページで使用されています。
JavaScript は、インターネット上で最も人気のあるスクリプト言語です。
JavaScriptは使いやすいです!きっと気にいる！
js は
1 で実行できるようになりました。
2. コンピューターのオペレーティング システム
で有名なノードを介して実行できるようになりました。ノードは c/cpp によって記述された js 実行環境であり、おそらく js は C 変数にコンパイルされてマシンに組み込まれます。言語。 。 。おそらく
パッケージインストールツール
1.npm
2.bower
3.yarn
今、みんながこれを勧めています。 。 。より高速で優れていると言われています
ビルド パッケージング ツール (正直に言うと、今でも違いがわかりません)
ビルド ツール タスク実行ツール
ファイルの圧縮に役立ちますか?スプライト？混乱などがある場合は手動で簡略化する必要がありますか?手作業のグルグル
パッケージングツール モジュールパッケージ化ツール
モジュラーコードは最終的にオンラインで使用するためにアセンブルされパッケージ化され、webpack browserify と seajs require はブラウザ側でパッケージ化されます サイト上の js は推奨されなくなりました
ページ 従来のjs
scriptの導入方法 src
nodeの動的導入
これは非常に魔法のようなノードツールです。例えば、nodeモジュールでプラグインを使用する場合、実際にはスクリプトを使用せずに導入します。息子のページに？とりあえず理解できないときは常識的に考えてはいけません(vue-cli) dev 全ての動的アセンブリを一つにパッケージ化した動的アセンブリビルドです。 。 。
es2015==es6 =>true
jquery属性self-adding
a.css({'property':'+=value'})
vueについての私の現在の考え
最初のすべて、メリットについて話しましょう。dom
を操作する必要があるだけです。 a、b、b、c、a、を行うには。 b、b、など。c は a を行うつもりです、b は行われます、c は a を行うつもりです、b は行われます、c は a を行うつもりです、b は行われます、b は行われる予定、c は a を行う予定、b は行われる予定、b は行われる予定、c は行われます、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>
しかし、いくつかの問題があり、カーソルの問題は解決できません（カーソルの問題は解決できません）最初の投稿)、Baidu Tieba の投稿 これを使用してボックスがシミュレートされています。時間があるときにどのように実行されるか見てみましょう
デバイスに応じてジャンプします
3 者がジャンプでき、全員がブラウザから userAgent を取得できます
運用とメンテナンスのジャンプ
プログラムのジャンプ
フロントエンドのジャンプ
同時に、これらの 3 者に加えてネットワークオペレーター、さらにはルーターが、悪意のある DNS を使用してページに悪意を持って追加される可能性があります
ランタイムサーバーとしてのノード、同じものです
写真は中心にあります
背景位置中心
絶対位置
複数行省略（最新のブラウザ）
overflow: hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
cdnページ真に動的コンテンツ
ページが CDN サーバーによってキャッシュされた後、キャッシュを実際に更新する必要があります。その後、実際に変更する必要があるコンテンツ (現在ログインしているユーザー情報など) を取得する必要があります。 .)
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( スクリプト スニペット #1)を継続的に実行します
//测试 async async async await//先来的 返回一个promise 完成时调用resolvevar 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 は、これが非同期関数であることを意味し、await はこの中でのみ使用できます関数。
await は、実行を続行する前に、Promise が結果を返すのを待つことを意味します。
await の後には Promise オブジェクトが続く必要があります (もちろん、他の戻り値は関係なく、すぐに実行されるだけですが、それは意味がありません...)
率直に言うと、これは現在非同期コールバック地獄の究極の解決策 もちろん、解決策は今すぐ Babel を結合することです。現時点では、究極の
vueコンポーネント通信
が気に入らない場合でも、割り当てられたらそれを使用する必要があることに注意してください。 。 。
コンポーネント間のスコープは独立しており、多くの場合、コンポーネント間でデータを渡す必要があります。
A が親コンポーネントで、その下にサブコンポーネント B と C があります。
A のデータは props を通じて B と C に渡すことができます。
Aは$broadcastを通じてBとCのイベントを呼び出し、BとCのデータを操作できます。
B と C は、$dispatch を通じて A のイベントを呼び出し、A のデータを操作できます。
B が C のデータを操作する必要がある場合、最初に A に $dispatch してから C に $broadcast する必要があります。
プロジェクトが比較的小さい場合は問題ありませんが、プロジェクトが大きくなるほど、関係するコンポーネント間の通信がより頻繁になり、管理は非常に面倒になり、エラーが発生しやすくなります。これが Vuex のすべてです。データを別のレイヤーに配置し、内部データを外部から操作するためのメソッドを提供できます。ちょっと下品なので理解しましょう。
=== === ===更新: Vue 2 がリリースされ、$dispatch と $broadcast が削除され、通信イベントのピンポンは発生しなくなります。
通信媒体として機能する Vue インスタンスが必要です。Vue の公式ドキュメントでは、それをイベント バスと呼んでいます。デフォルトの new Vue() をエクスポートします。 コンポーネント間でイベント通信が必要な場合は、このイベント バスで $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!');
}
}
});
イベント バスは、Vue 1.x でも使用できる練習方法です。
Largeは小さいコンテナの中央に配置されます
方法1
Large: 絶対位置左50%;margin-left -[大きい幅の半分]...左と同じを省略します
Small ：位置相対;
法二
设置为背景图 且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
原来是这样啊啊啊啊啊啊
text align justify
text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用
vue validator
中文文档
关于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
以上がjs に関するいくつかの洞察と共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。