プログラミング要素javascriptの - コード変更コード
入門
リファクタリングコードは、特に再構成プログラムを決定する際に、手作業であり、残りはプログラムコードによって調整し、それをテストしています。
どのように簡単なことではない場所のコードでは良いと高速調整を、持っています。
コードは、無力に示す正規表現やや複雑である場合、単純なコードは、示された正規表現のために使用することができます。
私は、以前の修正方法での話のようmethod_missingのjavascriptのメタプログラミングは、インターフェイスを50回、それを変更したい場合は、私は、プロジェクトで変更することができますか？私は、この再構成が価値があると考えるために持っています。
私は、任意のコードが書けるようにすることはできません。。。
だから私が見つかりました。jscodeshiftをので、私は私のツールリファクタリングコードを使用することができます。
jscodeshiftは私がツールソースのオペレーティングコードを持ってみましょう。
実現
私は私が呼び出しをmethod_missingに調整され、プロジェクト（URLで）呼び出しをインターフェイスにしたい、私の最後の記事でmethod_missing項目の例を使用します。
次のように：
// old
$.ajax('/api/web/project/content/target/mod', {
type: 'post',
dataType: 'json',
data: {
tid: it.targetId,
targetImgId: img.objectId,
pid: pid
}
}).done(function (data, status, jqXhr) {
self.hideLoading();
if (data && data.code === 200 && data.data) {
it.target = data.data
// self.paginationConf.onChange()
}
}).fail(() => {
}).always(() => {
})
// new
this.$api.update_project_content_target_mod({
tid: it.targetId,
targetImgId: img.objectId,
pid: pid
}).then(function (data, status, jqXhr) {
self.hideLoading();
if (data && data.code === 200 && data.data) {
it.target = data.data
// self.paginationConf.onChange()
}
}).catch(() => {
}).finally(() => {
})
新しいコードに見ることができるように、古いコード$アヤックスは、この。$ APIを交換し、その後、メソッド名パラメータへの呼び出しを生成します。
最後に、パラメータの数を調整するだけでなく、パラメータの値を調整します。
定期的に作成する方法を考えてみて？
定期的には、何もしないはずです。
プレイするjscodeshiftその後、それはASTにコードを解析することができ、その後、私たちはコードに続いAST、ASTを変更します。
次のように私のコードは次のとおりです。
const adapt = require('vue-jscodeshift-adapter');
// 修改 $.ajax
function transform(fileInfo, api) {
const j = api.jscodeshift
return j(fileInfo.source)
.find(j.CallExpression, { callee: { object: { name: '$' }, property: { name: 'ajax' } } })
.replaceWith(p => {
const url = p.node.arguments[0]
const setting = p.node.arguments[1]
const urlStr = url.value.replace('/api/web/', '').split('/')
let method = 'get'
let newSetting
setting.properties.forEach(i => {
if (i.key.name.toLowerCase() === 'type') {
if (i.value.value.toLowerCase() === 'post') {
method = 'update'
}
} else if (i.key.name.toLowerCase() === 'data') {
newSetting = i.value
}
});
urlStr.unshift(method);
return j.callExpression(
j.memberExpression(
j.memberExpression(j.identifier('this'), j.identifier('$api'), false),
j.identifier(urlStr.join('_')), false
), [newSetting])
})
.toSource();
}
// 修改 done
function transform1(fileInfo, api) {
const j = api.jscodeshift
return j(fileInfo.source)
.find(j.MemberExpression, { property: { name: 'done' } })
.replaceWith(p => {
p.node.property.name = 'then'
return p.node
})
.toSource();
}
// 修改 fail
function transform2(fileInfo, api) {
const j = api.jscodeshift
return j(fileInfo.source)
.find(j.MemberExpression, { property: { name: 'fail' } })
.replaceWith(p => {
p.node.property.name = 'catch'
return p.node
})
.toSource();
}
// 修改 always
function transform3(fileInfo, api) {
const j = api.jscodeshift
return j(fileInfo.source)
.find(j.MemberExpression, { property: { name: 'always' } })
.replaceWith(p => {
p.node.property.name = 'finally'
return p.node
})
.toSource();
}
module.exports = adapt(transform);
// module.exports = adapt(transform1);
// module.exports = adapt(transform2);
// module.exports = adapt(transform3);
使い方
# 使用 bash 循环调用
jscodeshift -t src/myTransforms.js filepath
私のコードは、VUE単一ファイルモジュールなので、私は、サードパーティ製のプラグインVUE-jscodeshiftアダプタを使用しています。
概要
jscodeshiftは改造が大規模なプロジェクトのために非常に便利です。それはあなたがすぐに多くのコードを書き換えることができます、だけでなく、テストしやすいです。